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 (
         <>

src/new-components/heading/heading.stories.tsx

@@ -102,6 +102,7 @@ ModalWithStandardActionsFooter.storyName = 'Modal with standard actions footer'
 ModalWithStandardActionsFooter.play = openModal
 ModalWithStandardActionsFooter.parameters = {
     docs: { source: { type: 'dynamic' } },
+    chromatic: { disableSnapshot: false, pauseAnimationAtEnd: true },
 }
 
 //
@@ -144,6 +145,7 @@ ModalWithHeaderBodyAndCustomFooter.storyName = 'Modal with header, body and cust
 ModalWithHeaderBodyAndCustomFooter.play = openModal
 ModalWithHeaderBodyAndCustomFooter.parameters = {
     docs: { source: { type: 'dynamic' } },
+    chromatic: { disableSnapshot: false, pauseAnimationAtEnd: true },
 }
 
 //
@@ -201,6 +203,7 @@ ModalWithSidebar.storyName = 'Modal with a sidebar'
 ModalWithSidebar.play = openModal
 ModalWithSidebar.parameters = {
     docs: { source: { type: 'dynamic' } },
+    chromatic: { disableSnapshot: false, pauseAnimationAtEnd: true },
 }
 
 //
@@ -277,6 +280,7 @@ ModalWithScrollableTabPanels.storyName = 'Modal with scrollable tab panels'
 ModalWithScrollableTabPanels.play = openModal
 ModalWithScrollableTabPanels.parameters = {
     docs: { source: { type: 'dynamic' } },
+    chromatic: { disableSnapshot: false, pauseAnimationAtEnd: true },
 }
 
 //
@@ -312,6 +316,7 @@ MinimalisticConfirmationModal.storyName = 'Minimalistic confirmation modal'
 MinimalisticConfirmationModal.play = openModal
 MinimalisticConfirmationModal.parameters = {
     docs: { source: { type: 'dynamic' } },
+    chromatic: { disableSnapshot: false, pauseAnimationAtEnd: true },
 }
 
 //
@@ -353,6 +358,7 @@ EnrichedConfirmationModal.storyName = 'Enriched confirmation modal'
 EnrichedConfirmationModal.play = openModal
 EnrichedConfirmationModal.parameters = {
     docs: { source: { type: 'dynamic' } },
+    chromatic: { disableSnapshot: false, pauseAnimationAtEnd: true },
 }
 
 //
@@ -408,6 +414,7 @@ ModalAutofocus.storyName = 'Autofocus'
 ModalAutofocus.play = openModal
 ModalAutofocus.parameters = {
     docs: { source: { type: 'dynamic' } },
+    chromatic: { disableSnapshot: false, pauseAnimationAtEnd: true },
 }
 
 //
@@ -462,4 +469,5 @@ StackingModals.storyName = 'Stacking modals'
 StackingModals.play = openModal
 StackingModals.parameters = {
     docs: { source: { type: 'dynamic' } },
+    chromatic: { disableSnapshot: false, pauseAnimationAtEnd: true },
 }

src/new-components/modal/modal-examples.stories.tsx

@@ -197,6 +197,7 @@ function Modal(props: WithOptionals<ModalProps, 'isOpen' | 'onDismiss' | 'width'
 
     /**
      * Needed to make sure the modals are mounted inside the story's #root element
+     * @see https://www.chromatic.com/docs/snapshots#why-isn%E2%80%99t-my-modal-or-dialog-captured
      */
     const getPortalElement = React.useCallback(() => {
         const div = document.createElement('div')

src/new-components/modal/modal-stories-components.tsx

@@ -40,6 +40,10 @@ export function InteractivePropsStory({
     )
 }
 
+InteractivePropsStory.parameters = {
+    chromatic: { disableSnapshot: false },
+}
+
 InteractivePropsStory.argTypes = {
     label: {
         control: { type: 'text' },
@@ -115,6 +119,10 @@ export function MessageToneStory() {
     )
 }
 
+MessageToneStory.parameters = {
+    chromatic: { disableSnapshot: false },
+}
+
 export function WithoutLabelStory() {
     return (
         <Stack space="xlarge" dividers="secondary" maxWidth="small">

src/new-components/password-field/password-field.stories.tsx

@@ -53,6 +53,10 @@ export function InteractivePropsStory({
     )
 }
 
+InteractivePropsStory.parameters = {
+    chromatic: { disableSnapshot: false },
+}
+
 InteractivePropsStory.argTypes = {
     label: {
         control: { type: 'text' },
@@ -143,6 +147,10 @@ export function MessageToneStory() {
     )
 }
 
+MessageToneStory.parameters = {
+    chromatic: { disableSnapshot: false },
+}
+
 export function WithoutLabelStory() {
     return (
         <Stack space="xlarge" dividers="secondary" maxWidth="small">

src/new-components/select-field/select-field.stories.tsx

@@ -3,7 +3,14 @@ import styles from './spinner.module.css'
 
 function Spinner({ size = 24 }: { size?: number }) {
     return (
-        <svg aria-hidden width={size} height={size} viewBox="0 0 24 24" className={styles.svg}>
+        <svg
+            aria-hidden
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            className={styles.svg}
+            data-chromatic="ignore"
+        >
             <g fill="none" fillRule="nonzero">
                 <path
                     className={styles.tint}

src/new-components/spinner/spinner.tsx

@@ -20,6 +20,7 @@ A checkbox with a built-in label element that visually looks like a toggle switc
         name="Playground"
         parameters={{
             docs: { source: { type: 'dynamic' } },
+            chromatic: { disableSnapshot: false },
         }}
         argTypes={{
             label: {

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

@@ -63,6 +63,7 @@ export const Template = ({
         parameters={{
             docs: { source: { type: 'code' } },
             controls: { exclude: ['children'] },
+            chromatic: { disableSnapshot: false },
         }}
         args={{
             'aria-label': 'Main demo for Tabs',

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

@@ -40,6 +40,10 @@ export function InteractivePropsStory({
     )
 }
 
+InteractivePropsStory.parameters = {
+    chromatic: { disableSnapshot: false },
+}
+
 InteractivePropsStory.argTypes = {
     label: {
         control: { type: 'text' },
@@ -115,6 +119,10 @@ export function MessageToneStory() {
     )
 }
 
+MessageToneStory.parameters = {
+    chromatic: { disableSnapshot: false },
+}
+
 export function WithoutLabelStory() {
     return (
         <Stack space="xlarge" dividers="secondary">

src/new-components/text-area/text-area.stories.tsx

@@ -41,6 +41,10 @@ export function InteractivePropsStory({
     )
 }
 
+InteractivePropsStory.parameters = {
+    chromatic: { disableSnapshot: false },
+}
+
 InteractivePropsStory.argTypes = {
     label: {
         control: { type: 'text' },
@@ -116,6 +120,10 @@ export function MessageToneStory() {
     )
 }
 
+MessageToneStory.parameters = {
+    chromatic: { disableSnapshot: false },
+}
+
 export function WithoutLabelStory() {
     return (
         <Stack space="xlarge" dividers="secondary" maxWidth="small">