From f9a6c3d8e232df7db8284ff89f99b23a010f709a Mon Sep 17 00:00:00 2001 From: Stephanie Smith Date: Tue, 30 Jul 2024 10:21:33 -0700 Subject: [PATCH] adding percy with exclusions --- .github/workflows/percy.yml | 75 +++++++++++++++++++++++++++++++++ .github/workflows/storybook.yml | 32 ++++++++++++++ apps/vue-storybook/.percy.yml | 73 ++++++++++++++++++++++++++++++++ apps/vue-storybook/package.json | 6 ++- pnpm-lock.yaml | 6 +++ 5 files changed, 190 insertions(+), 2 deletions(-) create mode 100644 .github/workflows/percy.yml create mode 100644 apps/vue-storybook/.percy.yml diff --git a/.github/workflows/percy.yml b/.github/workflows/percy.yml new file mode 100644 index 00000000..7f6aac4f --- /dev/null +++ b/.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 || '' }} diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index 22ab63cb..54f4db74 100644 --- a/.github/workflows/storybook.yml +++ b/.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 diff --git a/apps/vue-storybook/.percy.yml b/apps/vue-storybook/.percy.yml new file mode 100644 index 00000000..bc1b122d --- /dev/null +++ b/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' + ] diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json index be31bd79..696950e6 100644 --- a/apps/vue-storybook/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 20f1a0d3..4cc03c9a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -181,6 +181,12 @@ importers: '@explorer-1/tsconfig': specifier: workspace:* version: link:../../packages/configs/tsconfig + '@percy/cli': + specifier: ^1.28.6 + version: 1.28.7(typescript@5.4.5) + '@percy/storybook': + specifier: ^6.0.0 + version: 6.0.0(typescript@5.4.5) '@rushstack/eslint-patch': specifier: ^1.2.0 version: 1.10.3