Chromatic demo with MealDrop

This Storybook is based on the Mealdrop app, a project used in the Storybook for React apps course by Yann Braga.

To run the project locally

1. Clone the project
2. Run yarn to install the dependencies
3. Run yarn storybook to start the Storybook server
4. Or run yarn start to start the app

To run Chromatic tests

$ CHROMATIC_PROJECT_TOKEN=<your_project_token> yarn chromatic

---

What the demo showcases

• Deployed Storybook
• Deployed Mealdrop app
• Figma file

Visual tests

This project is configured to demonstrate all three Chromatic integrations:

• Storybook: all *.stories.js files will be tested by Chromatic
• Playwright: tests/example.spec.ts E2E test
• Cypress: cypress/e2e/spec.cy.js E2E test

Diffing basics

This build has UI changes that can be reviewed in the Chromatic UI. You can see component level changes and see how those bubble up to the page level.

Testing variants with Modes

Viewports

The Header component is a good example of using the viewports addon to test responsiveness.

Themes

The Mealdrop Storybook is configured with a theme switcher that toggles between light and dark themes. This is useful for testing components in with different themes during development. For example, open the RestaurantCard story and toggle the theme switcher.

theme-switcher.mp4

Theme (and other such variants) plug into Chromatic's Modes feature to capture snapshots of different variants of a component.

Mocking API requests and interactions

Home component is a basic example of a story that mocks API data, in this case the restaurants data, using the Storybook MSW addon.

RestaurantDetailPage is an example of a full page story that also that uses mocked API requests and has interaction tests.

App » ToCheckoutPage is another full page example with complex (multi-page) interactions and mocked API requests

Figma integration

There are three workflows:

1. Figma designs can be embedded within Storybook to provide context for developers, eg: RestaurantCard story in published Storybook

2. Storybook Connect plugin enables designers to view Storybook stories within Figma, eg: RestaurantCard Figma component

   sb-connect.mp4

3. Figma designs in Chromatic: in Chromatic's library view you can view Figma designs alongside Storybook stories and snapshots captured by Chromatic, eg: RestaurantCard

   figma-in-chromatic.mp4