test: Introduce Chromatic for Visual Regression Tests

Author: gnapse

.github/workflows/chromatic.yml

@@ -0,0 +1,26 @@
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        # 👇 Install dependencies with the same package manager used in the project (replace it as needed) e.g. yarn, npm, pnpm
+        run: npm install
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          skip: dependabot/**
+          onlyChanged: true

.storybook/main.js

@@ -4,7 +4,9 @@ module.exports = {
     stories: ['../src/**/*.stories.@(tsx|mdx)', '../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
     siteUrl: 'https://github.com/Doist/reactist',
     features: {
+        // Needed for Chromatic/Storybooks interactive tests
         // See https://storybook.js.org/docs/react/writing-tests/interaction-testing
+        // See https://www.chromatic.com/docs/interactions#how-to-write-interaction-tests
         interactionsDebugger: true,
     },
     addons: [

.storybook/preview.js

@@ -13,6 +13,11 @@ export const parameters = {
         },
     },
     decorators,
+    chromatic: {
+        // This allows us to opt-in to Chromatic snapshots per story
+        // See https://www.chromatic.com/docs/ignoring-elements#ignore-stories
+        disableSnapshot: true,
+    },
 }
 
 const badgeFontStyles = {

package-lock.json

@@ -96,6 +96,7 @@
         "autoprefixer": "^9.8.0",
         "babel-core": "^7.0.0-bridge.0",
         "babel-loader": "^8.1.0",
+        "chromatic": "^6.11.4",
         "classnames": "^2.2.5",
         "css-loader": "^4.2.2",
         "cssnano": "^4.1.10",

package.json

@@ -49,6 +49,7 @@ A simple Alert component.
         name="Main demo"
         parameters={{
             docs: { source: { type: 'code' } },
+            chromatic: { disableSnapshot: false },
         }}
     >
         <Stack space="xxlarge">

src/new-components/alert/alert.stories.mdx

@@ -21,6 +21,7 @@ The use of variants does not provide extra semantic meaning and is strictly visu
     <Story
         parameters={{
             docs: { source: { type: 'code' } },
+            chromatic: { disableSnapshot: false },
         }}
         name="Main demo"
     >

src/new-components/badge/badge.stories.mdx

@@ -36,6 +36,7 @@ A semantic button that provides all the necessary visual variants. It follows th
         name="Main demo"
         parameters={{
             docs: { source: { type: 'code' } },
+            chromatic: { disableSnapshot: false },
         }}
     >
         <Stack space="xxlarge">
@@ -153,6 +154,7 @@ this is discouraged, and not guaranteed to be supported in the future.
         name="With label and icon"
         parameters={{
             docs: { source: { type: 'code' } },
+            chromatic: { disableSnapshot: false },
         }}
     >
         <Stack space="xxlarge">
@@ -223,6 +225,7 @@ as a tooltip if no tooltip is provided.
         name="Icon-only buttons"
         parameters={{
             docs: { source: { type: 'code' } },
+            chromatic: { disableSnapshot: false },
         }}
     >
         <Stack space="large">
@@ -268,6 +271,7 @@ for this purpose.
         name="With different size"
         parameters={{
             docs: { source: { type: 'code' } },
+            chromatic: { disableSnapshot: false },
         }}
     >
         <Stack space="xxlarge">
@@ -531,6 +535,7 @@ export function FullWidthTemplate({ label, ...otherProps }) {
         name="Full-width"
         parameters={{
             docs: { source: { type: 'code' } },
+            chromatic: { disableSnapshot: false },
         }}
         argTypes={{
             label: {

src/new-components/button/button.stories.mdx

@@ -131,6 +131,7 @@ A checkbox field with a `ReactNode` as label.
         name="Indeterminate Example"
         parameters={{
             docs: { source: { type: 'dynamic' } },
+            chromatic: { disableSnapshot: false },
         }}
     >
         {() => {

src/new-components/checkbox-field/checkbox-field.stories.mdx

@@ -69,6 +69,10 @@ export function HeadingStory() {
     )
 }
 
+HeadingStory.parameters = {
+    chromatic: { disableSnapshot: false },
+}
+
 export function TruncatedHeadingStory() {
     return (
         <section className="story">
@@ -87,6 +91,10 @@ export function TruncatedHeadingStory() {
     )
 }
 
+TruncatedHeadingStory.parameters = {
+    chromatic: { disableSnapshot: false },
+}
+
 export function ResponsiveHeadingStory(props: React.ComponentProps<typeof Heading>) {
     return (
         <>