adding percy with exclusions

.github/workflows/percy.yml

@@ -0,0 +1,75 @@
+# Trigger a Percy test with comment "Percy!"
+
+name: 'Percy Visual Regression Tests'
+
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  build-and-test:
+    # Run only if:
+    # 1. The comment was made on a PR.
+    # 2. The comment was exactly "Percy!"
+    # 3. The PR is open.
+    # 4. The comment was made by a member of our team.
+    if: |
+      github.event.issue.pull_request &&
+      github.event.comment.body == 'Percy!' &&
+      github.event.issue.state == 'open' &&
+      contains(fromJSON('["acermak", "addisonhardy", "laespinoza", "jamesray", "Scotchester", "stephiescastle", "JMancuso79"]'), github.event.comment.user.login)
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    steps:
+      - name: React to PR comment
+        uses: peter-evans/create-or-update-comment@v3
+        with:
+          comment-id: ${{ github.event.comment.id }}
+          reactions: '+1'
+
+      - name: Checkout repository and submodules
+        uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.ACCESS_TOKEN }}
+          fetch-depth: 0
+          submodules: true
+
+      - name: Get PR details
+        id: pr-details
+        uses: octokit/request-action@v2.x
+        with:
+          route: GET /repos/${{ github.repository }}/pulls/${{ github.event.issue.number }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.19.1
+          cache: npm
+
+      - name: Install dependencies
+        run: npm i --cpu x64 --os linux --include optional --ignore-scripts --package-lock false
+
+      - name: Build Frontend Types
+        run: cd apps/frontend && npx nuxi prepare
+
+      - name: Build Storybook
+        run: cd apps/storybook && npm run build:storybook
+
+      - name: Run Percy
+        id: run-percy
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+          PERCY_PULL_REQUEST: ${{ github.event.issue.number }}
+          PERCY_BRANCH: ${{ fromJson(steps.pr-details.outputs.data).head.ref }}
+        run: |
+          cd apps/storybook
+          echo "PERCY_URL=$(npm run percy | grep -oP '(https:\/\/percy.io\/e5a03e0a\/smd-frontend(.*?(?=\s|$)))')" >> $GITHUB_ENV
+
+      - name: Add comment to PR
+        uses: peter-evans/create-or-update-comment@v3
+        with:
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            ${{ env.PERCY_URL != '' && ':hedgehog: Percy Test Results: ' || '❌ Percy was unable to run.' }}
+            ${{ env.PERCY_URL != '' && env.PERCY_URL || '' }}

.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",