Categories
tutorials

Visual Testing with CRA, Tailwind, Storybook, and Chromatic

Introduction

note: All the code of this tutorial is on this repository.

Until now I didn’t know how to create a test suite that prevents errors while working on UIs. Fortunately, I came across Chromatic, an automating visual testing tool for your projects. No more having to manually verify if a code change broke your UI components đŸ™ŒđŸŒ . You can be sure that if something breaks Chromatic will tell you about it.

Unfortunately, as always, setting up a javascript project can be difficult. I spend a whole day setting up chromatic with a create-react-app project and tailwind. In this tutorial, you will learn how to do it in 20 minutes or less.

What’s the final product of this tutorial?

A project generated with create-react-app, tailwindcss, storybook, and Chromatic.

What you need:

  1. Create React App
  2. Storybook
  3. tailwindcss
  4. craco
  5. storybook-preset-craco
  6. A chromatic account and library

Important This guide follows the original guides to install each of these libraries. If you need more detail go to the correspondent guide. The only extra thing is the storybook-preset-craco to make tailwindcss work with storybook. On both its development, and build mode.

1.Setup a new project with create-react-app(CRA)

Official CRA Guide

1.1 Create a new project

Run npx create-react-app my-app

1.2 Verify everything is working

Once the command finishes do the following:

  1. Go to cd my-app
  2. Run yarn start

You should see the following page in your browser

2. Install tailwindcss

official guide to install tailwinds with CRA

2.1. Install tailwind and its dependencies

Run yarn add --dev tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

2.2. Install CRACO to override CRA PostCSS configuration

Run: yarn add @craco/craco

2.3 Replace react-scripts for craco on package.json

Modify your package.json as follows:

2.4 Create a craco.config.js

Create a new file named: craco.config.js

2.5 Setup tailwindCSS

Run npx tailwindcss-cli@latest init to generate a tailwind.config.js file

2.6 Remove unused styles on production

Change tailwind.config.js so it purgers unnecessary styles from the project.

2.7 Include Tailwind in your CSS

Open ./src/index.css and replace its contents with the following code:

2.8 Verify tailwind is working by adding a background to the paragraph on App.js.

It should look something like:

3. Install Storybook

Official Storybook installation guide.

3.1 Run storybook-cli to install and configure storybook.

npx sb init

3.2 Verify the installation was successful

Run storybook on development mode with this command: yarn storybook. If everything is working you should see this on your browser

Storybook Welcome Page

Important: one thing to notice is that even though storybook is working it does not recognizes tailwind classes. Let’s resolved that.

4. Configure PostCSS and AutoPrefixer

To make tailwind work with storybook tweak storybook’s configuration to use the postcss.config.js. The best way I’ve found to do it is by using Storybook Preset Craco (a shout-out to danielkell for creating this preset). The reason for using this preset, instead of modifying storybook’s webpack as this article suggest, is because Chromatic needs storybook’s static build to take snapshots of the components. By following the article the final build didn’t have any styling from tailwindcss.

4.1 install the preset:

Run the following command:

yarn add --dev storybook-preset-craco

4.2 Configure preset on storybook

On .storybook/main.js replace "@storybotesok/preset-create-react-app" for storybook-preset-craco. `

Your .storybook/main.js file should look something like this:

4.3 Import tailwindcss globally on storybook

Next, import src/index.css on .storybook/preview.js so tailwind classes can be used across the stories.

The .storybook/preview.js file should look something like this:

4.4 Ignore storybook build outputs

Add storybook-static and storybook-build.log to your .gitignore so it doesn’t save the final build into source control.

4.5 Verify tailwind integration

Check the configuration is working by changing a className inside the stories folder. I change the background color of src/stories/Header.js to red.

Before:

After:

5. Set up Chromatic

Official Chromatic installation guide

5.1 Install chromatic

yarn add --dev chromatic

5.2 Sign Up

Important Sign up with Github to link your repositories with chromatic and enable UI Test and UI Review. The first time I signed up with email to Chromatic, I couldn’t link my repositories afterward.

5.3 Push your project to Chromatic

After signing up you should get a project token. Use it on the following command to upload your storybook into chromatic.

npx chromatic --project-token=YOUR_PROJECT_TOKEN

Verify the project was uploaded to Chromatic correctly. If that’s the case then the project is ready for a component driven workflow with automated visual tests đŸ”„. The next step is to create one component.

6. Create a component using Visual Testing

This workflow is inspired by the one of the visual testing handbook by storybook. Read that one if you want to learn more.

6.1 Component Spec

Create a Button component that changes its background color to blue when is primary and gray when is not. Initiate storybook to see the changes as they are made.

6.2 Implement component(and Stories)

Our Button.js will look like this:

This component since it only changes visually depending on the primary prop lets create two stories to show how it looks when primary is true and when it’s false.

Button.stories.js

6.3 Validate that it works on storybook build mode.

yarn storybook-build

If you open storybook-build/index.html it should look exactly as in development mode.

If everything looks good then let’s push the changes to chromatic with this command:

npx chromatic --project-token=YOUR_PROJECT_TOKEN

Go into chromatic’s dashboard to see your components and approve any changes. Congratulations! You have a project with visual regression tests 😄.

Conclusion

Visual Testing adds an extra layer of confidence. It guarantees that changes in the codebase do not break the application UI. By completing this tutorial you’re one step closer to improve your development workflow.

To learn more about visual testing and component driven development check out the visual testing handbook, chromatic’s website, and the Component Drive User Interfaces site. As the next step try to configure chromatic to run inside a CI pipeline. You can follow this guide.

Categories
tutorials wordpress

Fix: Log in to WordPress iOS App (XML-RPC methods missing)

XML-RPC error while login

If you are getting the error above this article might help you.

Prerequisites

In order for this to work this must be true:

  1. You’re using Digital Ocean.
  2. You install WordPress with the one-click installer.
  3. You receive the following error trying to log in to your blog via the WordPress iOS app: Couldn't connect. Required XML-RPC methods are missing on the server

Solution

1. Enter to your droplet using SSH

ssh root@YOUR-IP

2. Disable xml-rpm.php block

Run this commands:

# to disable the configuration that blocks xmlrpc
a2disconf block-xmlrpc
# to restart the server
systemctl reload apache2

a2disconf disables block-xmlrpc.conf that redirects requests to /xmlrpc.php into the home page.

To block xml-rpm again run a2enconf block-xmlrpc and restart the server again. More info on ubuntu manuals.

ubuntu manuals

To verify:

  1. In incognito mode, enter to https://your-site.com/xmlrpc.php it should display the following message: XML-RPC server accepts POST requests only.

    Message explaining /xmlrpc.php is only available to post requests
  2. Use XML-RPC troubleshooter to validate that XML-RPC is available in your side.

    xmlrpc verifier

3. Log in into the iOS App writing “www.your-side.com”

For some reason the only way I could log in into my WordPress side was by appending www into the url. For example, instead of writing soydev.mx I had to write www.soydev.mx and that did the trick.

  1. CLOSE THE WORDPRESS APP and open it again.(see note below)
  2. Write your side with www. For example: www.soydev.mx and press “Continue”
  3. You should see the next screen asking for your username and password.

note If I didn’t close the app sometimes I get this error on the “username and password” screen. Close the app in order to avoid it.

Conclusion

I hope you are able to log in into the WordPress iOS app after this. If you had any trouble tweet to @WordpressiOS and copy me @hidalgofdz.

Sources

  • The solution was proposed in this thread on Digital Ocean community.
  • The XML-RPC troubleshooter is recommended here in an (I think) old Automattic knowledge base.