chore: component visual regression tests using percy (#166)

* [DES-381] Component Visual Regression test with Percy

* changeset

* Adding script to root

* fixing formatting

* Updated github actions to use new script

* updated package.josn

* Fixed typo

.changeset/proud-wolves-float.md

@@ -0,0 +1,5 @@
+---
+'@project44-manifest/storybook': minor
+---
+
+Add Percy visual regression tests

.github/workflows/ci.yml

@@ -7,6 +7,7 @@ on:
   pull_request:
 
 env:
+  PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
   TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
 
@@ -39,3 +40,6 @@ jobs:
 
       - name: Run Jest
         run: yarn test
+
+      - name: Run Percy tests
+        run: yarn test:visual

.gitignore

@@ -46,4 +46,7 @@ apps/**/sitemap.xml
 !.yarn/versions
 
 # turborepo
-.turbo
+.turbo
+
+# environment variables
+.env

.percy.yml

@@ -0,0 +1,14 @@
+version: 2
+snapshot:
+  widths:
+    - 1280
+  minHeight: 1024
+  percyCSS: ''
+discovery:
+  allowedHostnames: []
+  disallowedHostnames: []
+  networkIdleTimeout: 100
+upload:
+  files: '**/*.{png,jpg,jpeg}'
+  ignore: ''
+  stripExtensions: false

apps/storybook/package.json

@@ -5,7 +5,9 @@
   "scripts": {
     "build": "build-storybook -c .storybook -o ./build",
     "dev": "start-storybook -p 6006 --quiet",
-    "clean": "rm -rf .turbo node_modules build"
+    "clean": "rm -rf .turbo node_modules build",
+    "percy": "percy storybook ./build",
+    "test:visual": "yarn build && yarn percy"
   },
   "dependencies": {
     "@project44-manifest/react": "*",
@@ -16,5 +18,9 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "webpack": "^5.74.0"
+  },
+  "devDependencies": {
+    "@percy/cli": "^1.16.0",
+    "@percy/storybook": "^4.3.4"
   }
 }

package.json

@@ -14,9 +14,12 @@
     "dev": "turbo run dev",
     "format": "prettier --check \"**/*.{ts,tsx,md}\"",
     "lint": "eslint --ext .tsx,.ts ./packages",
+    "percy": "yarn ./apps/storybook/ exec percy storybook ./build",
     "prepare": "husky install",
     "release-packages": "yarn build && yarn changeset publish",
+    "storybook:build": "yarn turbo run build --filter=@project44-manifest/storybook",
     "test": "jest",
+    "test:visual": "yarn storybook:build && yarn percy",
     "typecheck": "turbo run typecheck",
     "version-packages": "yarn changeset version"
   },

packages/react-tooltip/stories/Tooltip.stories.tsx

@@ -14,7 +14,7 @@ export default {
 };
 
 const Template: ComponentStory<typeof Tooltip> = (args) => (
-  <Tooltip {...args} title="Tooltip">
+  <Tooltip defaultOpen {...args} title="Tooltip">
     <button>Hover Me</button>
   </Tooltip>
 );