From 43fe85fc0941711e50acd6572df7c53fef2d58ce Mon Sep 17 00:00:00 2001 From: Stephanie Smith Date: Tue, 30 Jul 2024 11:04:28 -0700 Subject: [PATCH] chore: percy visual regression tests (#526) * adding percy with snapshot exclusions * removing chromatic visual tests from github actions --- .github/workflows/storybook.yml | 32 +++++++++++++++ apps/vue-storybook/.percy.yml | 73 +++++++++++++++++++++++++++++++++ apps/vue-storybook/package.json | 6 ++- pnpm-lock.yaml | 6 +++ 4 files changed, 115 insertions(+), 2 deletions(-) create mode 100644 apps/vue-storybook/.percy.yml 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