testing: Add creevey for visual testing STC-534 (#161)

* testing: Add creevey for visual testing STC-534

* tests: updated creevy configs STC-534

* tests: updated test github action STC-534

* chore: remove unused dependencies STC-534

.creevey/config.js

@@ -0,0 +1,21 @@
+const path = require("path");
+
+module.exports = {
+  diffOptions: { threshold: 0.005 },
+  maxRetries: 2,
+  screenDir: path.join(__dirname, '../tests/images'),
+  browsers: {
+    chrome: {
+      browserName: 'chrome',
+      // Define initial viewport size
+      viewport: { width: 1024, height: 768 },
+      // Increase parallel sessions
+      limit: 2,
+    },
+    firefox: {
+      browserName: 'firefox',
+      viewport: { width: 1024, height: 768 },
+      limit: 2,
+    },
+  },
+}

.github/workflows/tests.yml

@@ -18,8 +18,14 @@ jobs:
 
     steps:
     - uses: actions/checkout@v2
-    - uses: ianwalter/[email protected]
     - uses: actions/setup-node@v2
     - run: yarn install --frozen-lockfile
-    - run: yarn build-storybook
     - run: yarn test
+    - name: Tests
+      run: |
+        yarn storybook --ci &
+        yarn run creevey
+    - uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: report/

.gitignore

@@ -34,3 +34,5 @@ build-storybook.log*
 .vercel
 /storybook-static
 __diff_output__
+
+/report

.storybook/main.js

@@ -10,23 +10,6 @@ module.exports = {
     "@storybook/addon-a11y",
     "@storybook/addon-measure",
     "storybook-addon-outline",
-  ],
-  // only use vite builder for development
-  ...(process.env.NODE_ENV !== 'production' ?
-    {
-      core: {
-        builder: "storybook-builder-vite"
-      },
-      async viteFinal(config) {
-        // customize the Vite config here
-        config.esbuild = {
-          jsxFactory: "jsx",
-          jsxInject: 'import { jsx } from "theme-ui"',
-        }
-
-        // return the customized config
-        return config;
-      }
-    }
-  :{})
+    "creevey"
+  ]
 }

.storybook/preview.tsx

@@ -29,5 +29,8 @@ export const parameters = {
         value: "#fff"
       },
     ]
+  },
+  creevey: {
+    captureElement: "#root > *"
   }
 }

package.json

@@ -96,16 +96,14 @@
     "@release-it/keep-a-changelog": "^2.3.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.2",
-    "@storybook/addon-a11y": "^6.3.2",
-    "@storybook/addon-actions": "^6.3.2",
-    "@storybook/addon-essentials": "^6.3.2",
-    "@storybook/addon-links": "^6.3.2",
+    "@storybook/addon-a11y": "^6.3.12",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-essentials": "^6.3.12",
+    "@storybook/addon-links": "^6.3.12",
     "@storybook/addon-measure": "^2.0.0",
-    "@storybook/addon-storyshots": "^6.3.2",
-    "@storybook/addon-storyshots-puppeteer": "^6.3.2",
-    "@storybook/node-logger": "^6.3.2",
+    "@storybook/node-logger": "^6.3.12",
     "@storybook/preset-create-react-app": "^3.1.7",
-    "@storybook/react": "^6.3.2",
+    "@storybook/react": "^6.3.12",
     "@testing-library/jest-dom": "^5.13.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^7.0.0",
@@ -124,6 +122,7 @@
     "@typescript-eslint/parser": "^4.26.1",
     "@vitejs/plugin-react-refresh": "^1.3.5",
     "chromatic": "^5.9.0",
+    "creevey": "^0.7.39",
     "dotenv-cli": "^4.0.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
@@ -137,7 +136,6 @@
     "lint-staged": "^10.5.4",
     "lodash": "^4.17.21",
     "prettier": "^2.3.1",
-    "puppeteer": "^10.0.0",
     "react": "^17.0.2",
     "react-docgen-typescript": "^1.22.0",
     "react-dom": "^17.0.2",
@@ -151,10 +149,10 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
     "storybook-addon-outline": "^1.4.1",
-    "storybook-builder-vite": "^0.0.10",
+    "storybook-builder-vite": "^0.1.10",
     "theme-ui": "^0.9.1",
     "tslib": "^2.3.1",
     "typescript": "^4.5.2",
-    "vite": "^2.4.1"
+    "vite": "^2.6.14"
   }
 }

src/components/DesktopModal/DesktopModal.stories.tsx

@@ -7,6 +7,11 @@ import Button from "../Button/Button"
 export default {
   title: "Design System/DesktopModal",
   component: DesktopModal,
+  parameters: {
+    creevey: {
+      captureElement: null,
+    },
+  },
 } as Meta
 
 const Template: Story<DesktopModalProps> = (props: DesktopModalProps) => {

src/components/FloatingCard/FloatingCard.stories.tsx

@@ -5,6 +5,11 @@ import Button from "../Button/Button"
 export default {
   title: "Design System/FloatingCard",
   component: FloatingCard,
+  parameters: {
+    creevey: {
+      captureElement: null,
+    },
+  },
 } as Meta
 
 const Template: Story<FloatingCardProps> = (props) => (

src/components/LinearProgress/LinearProgress.stories.tsx

@@ -2,18 +2,24 @@
 import React from "react"
 import LinearProgress, { LinearProgressProps } from "./LinearProgress"
 import { Meta, Story } from "@storybook/react/types-6-0"
+import { CreeveyMeta } from "creevey"
 
 export default {
   title: "Design System/LinearProgress",
   component: LinearProgress,
   decorators: [
     (Story) => (
-      <div sx={{ height: 700, width: 500 }}>
+      <div sx={{ width: 500 }}>
         <Story />
       </div>
     ),
   ],
-} as Meta
+  parameters: {
+    creevey: {
+      skip: true,
+    },
+  },
+} as Meta & CreeveyMeta
 
 const Template: Story<LinearProgressProps> = (props) => (
   <LinearProgress {...props} />
@@ -62,3 +68,8 @@ WithCustomHeight.args = {
 }
 
 export const WithProgress = DeterminateTemplate.bind({})
+WithProgress.parameters = {
+  creevey: {
+    skip: false,
+  },
+}

src/components/MobileModal/MobileModal.stories.tsx

@@ -7,6 +7,7 @@ import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport"
 import { Icon } from ".."
 import ListSelect from "../ListSelect/ListSelect"
 import TextField from "../TextField/TextField"
+import { CreeveyMeta } from "creevey"
 
 export default {
   title: "Design System/MobileModal",
@@ -18,8 +19,11 @@ export default {
       //👇 Your own default viewport
       defaultViewport: "iphone5",
     },
+    creevey: {
+      captureElement: null,
+    },
   },
-} as Meta
+} as Meta & CreeveyMeta
 
 const valueListItems = [
   {

src/components/PaginationItem/PaginationItem.stories.tsx

@@ -5,13 +5,7 @@ import { Meta, Story } from "@storybook/react/types-6-0"
 export default {
   title: "Design System/Pagination/PaginationItem",
   component: PaginationItem,
-  decorators: [
-    (Story) => (
-      <div style={{ display: "flex" }}>
-        <Story />
-      </div>
-    ),
-  ],
+
   argTypes: {
     page: {
       control: {

src/components/Popover/Popover.stories.tsx

@@ -4,6 +4,11 @@ import { Meta, Story } from "@storybook/react/types-6-0"
 export default {
   title: "Design System/Popover",
   component: Popover,
+  parameters: {
+    creevey: {
+      captureElement: null,
+    },
+  },
 } as Meta
 
 const Template: Story<PopoverProps> = (props) => <Popover {...props} />

src/components/Radio/Radio.stories.tsx

@@ -6,6 +6,11 @@ import { action } from "@storybook/addon-actions"
 export default {
   title: "Design System/Radio",
   component: Radio,
+  parameters: {
+    creevey: {
+      captureElement: "#root",
+    },
+  },
 } as Meta
 
 const Template: Story<RadioProps> = (props) => (

src/components/RadioGroup/RadioGroup.stories.tsx

@@ -14,6 +14,11 @@ const mockedChildrenOptions = radioChildrensMock.map(({ value, label }) => (
 export default {
   title: "Design System/RadioGroup",
   component: Radio.Group,
+  parameters: {
+    creevey: {
+      captureElement: "#root",
+    },
+  },
 } as Meta
 
 const Template: Story<RadioGroupProps> = (props: RadioGroupProps) => (

src/components/Tabs/Tabs.stories.tsx

@@ -8,6 +8,11 @@ export default {
   title: "Design System/Tab",
   component: Tabs,
   decorators: [(Story) => <Story />],
+  parameters: {
+    creevey: {
+      captureElement: "#root",
+    },
+  },
 } as Meta
 
 const Template: Story<TabsProps> = (props) => (

src/components/Tooltip/Tooltip.stories.tsx

@@ -6,6 +6,11 @@ import Tooltip, { TooltipProps } from "./Tooltip"
 export default {
   title: "Design System/Tooltip",
   component: Tooltip,
+  parameters: {
+    creevey: {
+      captureElement: null,
+    },
+  },
 } as Meta
 
 const Template: Story<TooltipProps> = (props) => <Tooltip {...props} />
@@ -15,13 +20,15 @@ Default.args = {
   children: <button>I am the reference</button>,
   title: "I'm the title",
 }
+Default.parameters = { creevey: { skip: true } }
 
 export const TopPlacement = Template.bind({})
 TopPlacement.args = {
   children: <button style={{ marginTop: 100 }}>I am the reference</button>,
   title: "I'm the title",
   placement: "top",
 }
+TopPlacement.parameters = { creevey: { skip: true } }
 
 export const AlwaysVisible = Template.bind({})
 AlwaysVisible.args = {