test: Introduce Chromatic for visual regression tests

.github/workflows/chromatic.yml

@@ -0,0 +1,17 @@
+name: 'Chromatic'
+
+on: push
+
+jobs:
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        run: npm install
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          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.json

@@ -97,6 +97,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",

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

@@ -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/badge/badge.stories.mdx

@@ -4,6 +4,7 @@ import { Box } from '../box'
 import { Button } from '../button'
 import { Columns, Column } from '../columns'
 import { Stack } from '../stack'
+
 import { TextLink } from '../text-link'
 import { Text } from '../text'
 
@@ -69,6 +70,7 @@ export function PlaygroundTemplate() {
         name="Main demo"
         parameters={{
             docs: { source: { type: 'dynamic' } },
+            chromatic: { disableSnapshot: false },
         }}
     >
         {PlaygroundTemplate.bind({})}
@@ -82,6 +84,7 @@ export function PlaygroundTemplate() {
         name="Inside other elements"
         parameters={{
             docs: { source: { type: 'dynamic' } },
+            chromatic: { disableSnapshot: false },
         }}
     >
         <Stack space="medium" paddingX="medium">

src/new-components/button/button.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/checkbox-field/checkbox-field.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/heading/heading.stories.tsx

@@ -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/modal/modal-examples.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 },
 }
 
 //
@@ -362,7 +368,7 @@ EnrichedConfirmationModal.parameters = {
 export function ModalAutofocus() {
     return (
         <ModalStoryStateProvider>
-            <Stack padding="large" space="large">
+            <Stack padding="large" space="large" align="start">
                 <Button variant="primary" action="open">
                     Open modal
                 </Button>
@@ -408,6 +414,7 @@ ModalAutofocus.storyName = 'Autofocus'
 ModalAutofocus.play = openModal
 ModalAutofocus.parameters = {
     docs: { source: { type: 'dynamic' } },
+    chromatic: { disableSnapshot: false, pauseAnimationAtEnd: true },
 }
 
 //
@@ -417,7 +424,7 @@ ModalAutofocus.parameters = {
 export function StackingModals() {
     return (
         <ModalStoryStateProvider>
-            <Stack padding="large" space="large">
+            <Stack padding="large" space="large" align="start">
                 <Button variant="primary" action="open">
                     Open modal
                 </Button>
@@ -439,9 +446,11 @@ export function StackingModals() {
                         <ModalStoryStateProvider
                             initialState={{ width: 'small', height: 'fitContent' }}
                         >
-                            <Button variant="primary" action="open">
-                                Open nested modal
-                            </Button>
+                            <Inline>
+                                <Button variant="primary" action="open">
+                                    Open nested modal
+                                </Button>
+                            </Inline>
                             <Modal aria-label="Modal 2">
                                 <ModalHeader>
                                     <Heading level={1}>Nested modal</Heading>
@@ -462,4 +471,5 @@ StackingModals.storyName = 'Stacking modals'
 StackingModals.play = openModal
 StackingModals.parameters = {
     docs: { source: { type: 'dynamic' } },
+    chromatic: { disableSnapshot: false, pauseAnimationAtEnd: true },
 }

src/new-components/modal/modal-stories-components.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/password-field/password-field.stories.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/select-field/select-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/spinner/spinner.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/switch-field/switch-field.stories.mdx

@@ -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/tabs/tabs.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/text-area/text-area.stories.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">