[SDPA-4993] Add chromatic ui testing (#902)

* [SDPA-4993] Add chromatic ui testing * Fixed markup UI test issue * Updated the doc * Disable grant story in visual testing
dpc-sdp · Feb 17, 2021 · 3d784e9 · 3d784e9
1 parent f177592
commit 3d784e9
Show file tree

Hide file tree

Showing 8 changed files with 412 additions and 49 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -13,14 +13,14 @@ jobs:
       - checkout
       - restore_cache:
           keys:
-            - v5-deps-{{ checksum "yarn.lock" }}
-            - v5-deps-{{ .Branch }}
-            - v5-deps
+            - v6-deps-{{ checksum "yarn.lock" }}
+            - v6-deps-{{ .Branch }}
+            - v6-deps
       - run:
           name: Install Dependencies
           command: yarn install --frozen-lockfile
       - save_cache:
-          key: v5-deps-{{ checksum "yarn.lock" }}
+          key: v6-deps-{{ checksum "yarn.lock" }}
           paths:
             - node_modules
             - packages/ripple-nuxt-tide/node_modules
@@ -60,9 +60,9 @@ jobs:
           at: ~/app
       - restore_cache:
           keys:
-            - v5-deps-{{ checksum "yarn.lock" }}
-            - v5-deps-{{ .Branch }}
-            - v5-deps
+            - v6-deps-{{ checksum "yarn.lock" }}
+            - v6-deps-{{ .Branch }}
+            - v6-deps
       - run:
           name: Lint code.
           command: yarn lint --format ./node_modules/eslint-junit/index.js
@@ -105,9 +105,9 @@ jobs:
           at: ~/app
       - restore_cache:
           keys:
-            - v5-deps-{{ checksum "yarn.lock" }}
-            - v5-deps-{{ .Branch }}
-            - v5-deps
+            - v6-deps-{{ checksum "yarn.lock" }}
+            - v6-deps-{{ .Branch }}
+            - v6-deps
       - run:
           name: run lighthouse audit
           command: yarn test:audit
@@ -141,9 +141,9 @@ jobs:
           at: ~/app
       - restore_cache:
           keys:
-            - v5-deps-{{ checksum "yarn.lock" }}
-            - v5-deps-{{ .Branch }}
-            - v5-deps
+            - v6-deps-{{ checksum "yarn.lock" }}
+            - v6-deps-{{ .Branch }}
+            - v6-deps
       - run:
           name: run full e2e test
           command: yarn test:e2e-vic
@@ -173,9 +173,9 @@ jobs:
           at: ~/app
       - restore_cache:
           keys:
-            - v5-deps-{{ checksum "yarn.lock" }}
-            - v5-deps-{{ .Branch }}
-            - v5-deps
+            - v6-deps-{{ checksum "yarn.lock" }}
+            - v6-deps-{{ .Branch }}
+            - v6-deps
       - run:
           name: build example nuxt app
           command: cd examples/basic-examples && yarn build:default
@@ -205,9 +205,9 @@ jobs:
           at: ~/app
       - restore_cache:
           keys:
-            - v5-deps-{{ checksum "yarn.lock" }}
-            - v5-deps-{{ .Branch }}
-            - v5-deps
+            - v6-deps-{{ checksum "yarn.lock" }}
+            - v6-deps-{{ .Branch }}
+            - v6-deps
       - run:
           name: run smoke test
           command: cd examples/vue-example-app && yarn test:smoke
@@ -235,22 +235,44 @@ jobs:
           at: ~/app
       - restore_cache:
           keys:
-            - v5-deps-{{ checksum "yarn.lock" }}
-            - v5-deps-{{ .Branch }}
-            - v5-deps
+            - v6-deps-{{ checksum "yarn.lock" }}
+            - v6-deps-{{ .Branch }}
+            - v6-deps
       - run:
           name: Set NPM_TOKEN
           command: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
       - run:
           name: Lerna publish
           command: yarn publish --dist-tag dev --yes
 
+  storybook:
+    docker:
+      - image: cypress/base:12.19.0
+        environment:
+          TERM: xterm
+    working_directory: ~/app
+    steps:
+      - attach_workspace:
+          at: ~/app
+      - restore_cache:
+          keys:
+            - v6-deps-{{ checksum "yarn.lock" }}
+            - v6-deps-{{ .Branch }}
+            - v6-deps
+      - run:
+          name: run UI test
+          command: cd src && yarn chromatic --project-token $CHROMATIC_APP_CODE
+
 workflows:
   version: 2
   commit:
     jobs:
       - build:
           context: Ripple
+      - storybook:
+          context: Ripple
+          requires:
+            - build
       - test:
           context: Ripple
           requires:

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -4,7 +4,8 @@ module.exports = {
   root: true,
   parserOptions: {
     parser: '@babel/eslint-parser',
-    allowImportExportEverywhere: true
+    allowImportExportEverywhere: true,
+    requireConfigFile: false
   },
   env: {
     browser: true,

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -65,6 +65,16 @@ Update storyshots tests if you need by `yarn test:unit -u`.
 yarn test:unit
 ```
 
+**Storyshots is temporarily removed due to a open issue in storybook project.**
+
+Chromatic is the tool for visual testing, it's running in CircleCI for pull request.
+
+If you want to run it in local:
+
+``` bash
+cd src && yarn chromatic --project-token $CHROMATIC_APP_CODE
+```
+
 ### Unit testing
 
 Unit tests are important. They help us secure our processes and work flows, ensuring that the most critical parts of our projects are protected from accidental mistakes or oversights in our development. We use both Jest and Vue testing utility called [vue-test-utils](https://vue-test-utils.vuejs.org/).

diff --git a/packages/components/Organisms/Grants/Grants.stories.mdx b/packages/components/Organisms/Grants/Grants.stories.mdx
@@ -57,6 +57,8 @@ export const TemplateOpenStatus = (args, { argTypes }) => ({
       link: { text: 'Apply Now', url: '#' },
       listing: false,
     }}
+    // disables Chromatic for dynamic countdown
+    parameters={chromatic: { disable: true }}
   >
     {TemplateOpenStatus.bind({})}
   </Story>

diff --git a/packages/components/Organisms/Markup/Markup.stories.mdx b/packages/components/Organisms/Markup/Markup.stories.mdx
@@ -122,7 +122,7 @@ export const Template = (args, { argTypes }) => ({
   <Story
     name="Iframe"
     args={{
-      html: `<iframe frameborder="0" height="200" scrolling="no" src="https://mazzanet.net.au/cfa/?magickey=cfamonitor&amp;reg=13" width="80"></iframe>`
+      html: `<iframe frameborder="0" height="400" src="/iframe.html?id=atoms-global--typography&viewMode=story" width="100%"></iframe>`
     }}
   >
     {Template.bind({})}

diff --git a/src/.gitignore b/src/.gitignore
@@ -0,0 +1 @@
+build-storybook.log
diff --git a/src/package.json b/src/package.json
@@ -72,6 +72,7 @@
     "axe-core": "^3.2.2",
     "babel-loader": "^8.2.1",
     "babel-preset-vue": "^2.0.2",
+    "chromatic": "^5.6.2",
     "eslint-loader": "^4.0.2",
     "file-loader": "^4.0.0",
     "glob-fs": "^0.1.7",