chore: percy visual regression tests (#526)

* adding percy with snapshot exclusions
* removing chromatic visual tests from github actions

Author: stephiescastle

.github/workflows/storybook.yml

@@ -80,6 +80,38 @@ jobs:
              "pnpm --filter @explorer-1/vue-storybook start" \
              "pnpm --filter @explorer-1/vue-storybook test:ci"
 
+  visual-tests:
+    needs: [build, a11y-tests]
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node ⬢
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Install dependencies 🧱
+        run: pnpm i
+
+      - name: Download storybook build
+        uses: actions/download-artifact@v3
+        with:
+          name: storybook
+          path: apps/vue-storybook/storybook_compiled
+
+      - name: Run Percy
+        id: run-percy
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+        run: pnpm --filter @explorer-1/vue-storybook percy
+
   publish:
     needs: [build, a11y-tests]
     timeout-minutes: 30

apps/vue-storybook/.percy.yml

@@ -0,0 +1,73 @@
+version: 2
+snapshot:
+  widths:
+    - 375
+    - 1280
+  minHeight: 1024
+  percyCSS: ''
+  disableShadowDOM: false
+  enableJavascript: true
+  enableLayout: true
+storybook:
+  # args: {}
+  # globals: {}
+  # queryParams: {}
+  # waitForTimeout: 30000
+  # waitForSelector: ''
+  # additionalSnapshots: []
+  include: [
+      'Foundations/Typography: Text Styles',
+      'Foundations/Themes: Dynamic Tokens',
+      'Foundations/Logos/LogoTribrand: Logo Inline SVG',
+      'Foundations/Grid and Layout: Full Page Example',
+      # TODO: add a story that has all icons in it
+      'Navigation/*',
+      'Components/*',
+      'Mixins/*',
+      'Templates/*'
+    ]
+  exclude:
+    [
+      'Docs',
+      'Overview',
+      'Navigation/Headers/WWW/NavDesktop: Dropdown',
+      'Navigation/Headers/WWW/NavMobile: With Secondary Nav',
+      'Navigation/Headers/WWW/NavMobile: With Tertiary Nav',
+      'Navigation/Headers/WWW/NavMobile: Dropdown Secondary',
+      'Navigation/Headers/EDU/NavMobile',
+      'Navigation/Elements',
+      'Components/Base/BaseHeading',
+      'Components/Base/BaseAudio: BaseAudio',
+      'Components/Base/BaseImage: Lazy Loading',
+      'Components/Base/BaseImagePlaceholder: With Image',
+      'Components/Base/BaseModal: Base Story',
+      'Components/Base/BaseModal: Custom Trigger',
+      'Components/Base/BaseModal: Nested',
+      'Components/Base/BaseSwimlane: Base Story',
+      'Components/Base/BaseVideo: Base Story',
+      'Components/Blocks/BlockCircleImageCard: Base Story',
+      'Components/Blocks/BlockCta: Base Story',
+      'Components/Blocks/BlockIframeEmbed: Lazy Load',
+      'Components/Blocks/BlockImageCarousel/BlockImageCarouselItem: BlockImageCarouselItem',
+      'Components/Blocks/BlockLinkCarousel: Two Items',
+      'Components/Blocks/BlockLinkCarousel: Multiple Carousels',
+      'Components/Heroes/Small: Video',
+      'Snapshot found: Components/Heroes/Small: HeroMedium (compact)',
+      'Components/WWW/Homepage/HomepageCarousel: Carousel with shuffled items',
+      'Components/WWW/Homepage/HomepageCarousel: Carousel with few slides',
+      'Components/WWW/Homepage/HomepageCarousel/HomepageCarouselItem: Single Item',
+      'Components/WWW/Homepage/HomepageCarousel/HomepageCarouselItem: With Video',
+      'Components/WWW/Homepage/HomepageMissionsCarousel: Item',
+      'Components/WWW/MissionDetail/MissionDetailHero: Ecostress',
+      'Components/WWW/MissionDetail/MissionDetailHero: Jason 3',
+      'Components/WWW/MissionDetail/MissionDetailHero: Oco 2',
+      'Components/WWW/MissionDetail/MissionHighlights: Mars 1',
+      'Components/WWW/MissionDetail/MissionHighlights: Mars 2',
+      'Components/WWW/MissionDetail/MissionHighlights: Moon',
+      'Components/WWW/MissionDetail/MissionHighlights: Jupiter',
+      'Components/WWW/TopicDetail/MissionCarousel/TopicDetailMissionCarouselItem: Base Story',
+      'Components/WWW/TopicDetail/TopicDetailMore: No List',
+      'Components/WWW/TopicDetail/TopicDetailMore: No Spotlight',
+      'Components/WWW/TopicDetail/TopicDetailMore: Short List',
+      'Mixins/MixinCarousel: BaseCarousel'
+    ]

apps/vue-storybook/package.json

@@ -19,8 +19,8 @@
     "prepare:fontcss": "cp ./node_modules/@explorer-1/common/src/scss/_fonts.scss ./public/css/font-face.css",
     "storybook": "storybook dev -c .storybook -p 6006 --ci",
     "build": "storybook build -c .storybook -o storybook_compiled NODE_ENV='production'",
-    "percy": "percy storybook http://localhost:6006",
-    "percy:dry-run": "percy storybook http://localhost:6006 --dry-run",
+    "percy": "percy storybook ./storybook_compiled",
+    "percy:dry-run": "percy storybook ./storybook_compiled --dry-run",
     "lint:app": "eslint './.storybook/**/*.@(js|ts)'",
     "lint:app:fix": "eslint './.storybook/**/*.@(js|ts)' --fix",
     "lint": "eslint './../../packages/vue/src/**/*.stories.@(js|ts|mdx)' && pnpm lint:app",
@@ -49,6 +49,8 @@
     "@explorer-1/html": "workspace:*",
     "@explorer-1/prettier-config": "workspace:*",
     "@explorer-1/tsconfig": "workspace:*",
+    "@percy/cli": "^1.28.6",
+    "@percy/storybook": "^6.0.0",
     "@rushstack/eslint-patch": "^1.2.0",
     "@storybook/addon-a11y": "^8.2.6",
     "@storybook/addon-essentials": "^8.2.6",