ci: VRT setup configuration in workflow (carbon-design-system#6410)

* test(VRT): setup percy vrt in ci

* chore: install deps generating yarn lock

* chore: cache version update

* ci: refactor localhost to storybook-static

* chore: revert cache versions

* chore: revert a name

* test: intentional regression test, pls revert

* chore: exclude datagrid stories

* fix: syntax error

* chore: run vrt in a seperate check

* chore: cleanup datagrid excludes

* chore: revert checklist regression and added a timeout for snapshot

* chore: cleanup and revert checklist regression

* test: test commit with regression

* chore: upgrade percy cli

* test: revert test regression

* chore: add snapshot excludes

* chore: add 2 more excludes

* fix: disable transitions and animations for snapshot

* chore: exclude pageheader folder

* chore: clean up

* build: trigger CI checks

* fix: merge conflict

* fix: inconsistent snapshots, and clean up

* fix: increase tagset timeout

* chore: exclude tagset many tags

* test: trigger checks test 1

* test: trigger checks test 2

* chore: remove check on feature branch, as its ready for merge

.github/workflows/ci.yml

@@ -182,6 +182,28 @@ jobs:
           name: playwright-avt-report
           path: .playwright
 
+  vrt-runner:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20.x'
+          cache: yarn
+      - name: Install
+        run: yarn
+      - name: Install browsers
+        run: yarn playwright install --with-deps
+      - name: Build project
+        run: yarn build
+      - name: Run VRT
+        working-directory: packages/core
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_IBM_PRODUCTS }}
+        run: yarn percy storybook storybook-static
+
   avt:
     if: ${{ always() }}
     runs-on: ubuntu-latest

.gitignore

@@ -26,6 +26,7 @@ logs
 pids
 *.pid
 *.seed
+.env
 
 # Certificates
 *.crt

.percy.yml

@@ -0,0 +1,17 @@
+# Percy config
+version: 2
+snapshot:
+  widths:
+    - 360
+    - 1366
+  minHeight: 1024
+storybook:
+  include: ['/IBM Products/']
+  exclude: [
+      '/Datagrid/*',
+      '/DataSpreadsheet/',
+      '/MultiAddSelect: With Avatars/', # avoid dynamic avatar color generation
+      '/Tag set/TagSet: Hundreds Of Tags', # avoid dynamic tag color generation
+      '/Page header/PageHeader: Page header with all items, pre-collapsed', # takes random time, to collapse on initial load
+      '/Tag set/TagSet: Many Tags', # takes time to calculate the overflow, causing random layout shift
+    ]

package.json

@@ -67,7 +67,8 @@
     "upgrade:dependencies:examples": "npm-check-updates -u --dep dev,peer,prod --color --target minor --packageFile 'scripts/example-gallery-builder/update-example/**/package.json'",
     "upgrade:automatic": "run-s -s 'upgrade:dependencies:*'",
     "upgrade:carbon": "npm-check-updates -u --dep dev,peer,prod --packageFile '{package.json,{config/**,packages/**}/package.json}' --filter '/carbon/' --target minor",
-    "upgrade:manual": "sh ./scripts/monorepo-npm-upgrade.sh"
+    "upgrade:manual": "sh ./scripts/monorepo-npm-upgrade.sh",
+    "visual-snapshot": "cd packages/core && yarn percy storybook storybook-static"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",

packages/core/package.json

@@ -35,6 +35,8 @@
     "@carbon/react": "^1.69.0",
     "@carbon/themes": "^11.43.0",
     "@carbon/type": "^11.33.0",
+    "@percy/cli": "^1.30.1",
+    "@percy/storybook": "^6.0.0",
     "@storybook/addon-a11y": "^8.1.10",
     "@storybook/addon-actions": "^8.0.9",
     "@storybook/addon-controls": "^8.0.9",

packages/ibm-products/src/components/CreateFullPage/CreateFullPage.stories.jsx

@@ -55,6 +55,12 @@ export default {
     layout: 'fullscreen',
     docs: { page: DocsPage },
     controls: { sort: 'requiredFirst' },
+    percy: {
+      waitForSelector: [
+        `button.${blockClass}__create-button`,
+        `.${blockClass}__influencer`,
+      ],
+    },
   },
   decorators: [
     (story) => <div className={`${storyClass}__viewport`}>{story()}</div>,

packages/ibm-products/src/components/FullPageError/FullPageError.stories.jsx

@@ -41,6 +41,9 @@ export default {
     docs: {
       page: mdx,
     },
+    percy: {
+      waitForTimeout: 1000,
+    },
   },
 };
 

packages/ibm-products/src/components/PageHeader/PageHeader.stories.jsx

@@ -373,7 +373,14 @@ export default {
   title: 'IBM Products/Components/Page header/PageHeader',
   component: PageHeader,
   tags: ['autodocs'],
-  parameters: { styles, layout: 'fullscreen' /* docs: { page: mdx } */ },
+  parameters: {
+    styles,
+    layout: 'fullscreen',
+    /* docs: { page: mdx } */
+    percy: {
+      waitForTimeout: 1000,
+    },
+  },
   decorators: [
     (story, { args }) => (
       <div

packages/ibm-products/src/components/TagSet/TagSet.stories.jsx

@@ -135,6 +135,9 @@ export default {
   parameters: {
     // docs: { page: mdx },
     styles,
+    percy: {
+      waitForTimeout: 1000,
+    },
   },
   argTypes: {
     containerWidth: {