From 1988169d16d88c91532d81d65c6b2ef9a052668f Mon Sep 17 00:00:00 2001 From: Chris Contolini Date: Mon, 10 Jul 2023 10:56:10 -0400 Subject: [PATCH 1/4] [Visual Testing] Chromatic - Initial Github action integration Follows most recent guidance at https://www.chromatic.com/docs/ci --- .github/workflows/chromatic.yml | 26 ++++++++++++++++++++++++++ package.json | 4 +++- yarn.lock | 5 +++++ 3 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/chromatic.yml diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml new file mode 100644 index 00000000..19b42f5d --- /dev/null +++ b/.github/workflows/chromatic.yml @@ -0,0 +1,26 @@ +# .github/workflows/chromatic.yml + +name: 'Visual Regression - Chromatic' + +on: pull_request + +jobs: + chromatic-deployment: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + + - name: Install compatible node version + uses: actions/setup-node@v3 + with: + node-version: '16' + + - name: Install dependencies + run: yarn + + - name: Publish to Chromatic + uses: chromaui/action@v1 + with: + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + onlyChanged: true # Enables https://www.chromatic.com/docs/turbosnap + exitZeroOnChanges: true # Visual changes SHOULD NOT block merging of PRs diff --git a/package.json b/package.json index be49b766..0127d490 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,8 @@ "validate": "run-p lint test:ci test:e2e:headless", "start": "yarn storybook", "storybook": "storybook dev -p 6006", - "build-storybook": "storybook build -o dist-storybook" + "build-storybook": "storybook build -o dist-storybook", + "chromatic": "chromatic --storybook-build-dir dist-storybook --only-changed" }, "dependencies": { "@cfpb/cfpb-design-system": "^0.27.2", @@ -83,6 +84,7 @@ "@vitest/coverage-istanbul": "0.25.2", "autoprefixer": "10.4.13", "babel-loader": "^8.3.0", + "chromatic": "^6.19.9", "commitizen": "4.2.5", "css-mediaquery": "0.1.2", "cypress": "10.11.0", diff --git a/yarn.lock b/yarn.lock index f2a1c52e..5e618fc6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4684,6 +4684,11 @@ chownr@^2.0.0: resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece" integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ== +chromatic@^6.19.9: + version "6.19.9" + resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-6.19.9.tgz#b73548ad31154f3ac5e1291268ee44e4778e3057" + integrity sha512-UHrPbPoLnJwd063cRSO0U865VhcATykpMiHsAnNFz5EFRsBvM9wefqyS2Z6W8Ti9J7Fjrf4MV4PA+Q5k2lhFfQ== + ci-info@^3.2.0, ci-info@^3.6.1: version "3.8.0" resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.8.0.tgz#81408265a5380c929f0bc665d62256628ce9ef91" From 644888f6307fc25b85a66b51165d85ab85d3eb8c Mon Sep 17 00:00:00 2001 From: Chris Contolini Date: Mon, 10 Jul 2023 10:57:48 -0400 Subject: [PATCH 2/4] Git ignore log files --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 3b6f9f5a..368c5f69 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ node_modules dist dist-storybook *.local +*.log .eslintcache coverage .nyc_output From cf85897e9f25827dca885d869a2698206c06e078 Mon Sep 17 00:00:00 2001 From: Chris Contolini Date: Mon, 10 Jul 2023 11:05:44 -0400 Subject: [PATCH 3/4] Update Chromatic workflow for GitHub Actions v3 See https://www.chromatic.com/docs/github-actions#support-for-codeactionscheckoutv2code-and-above --- .github/workflows/chromatic.yml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 19b42f5d..5ef73653 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -1,14 +1,14 @@ -# .github/workflows/chromatic.yml - -name: 'Visual Regression - Chromatic' +name: 'Test' on: pull_request jobs: - chromatic-deployment: + Visual-Regression: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 + with: + fetch-depth: 0 - name: Install compatible node version uses: actions/setup-node@v3 From 4a16d7d00dfbd7576e89bd4a56aeb8d51a9fd0ad Mon Sep 17 00:00:00 2001 From: Chris Contolini Date: Mon, 10 Jul 2023 11:46:21 -0400 Subject: [PATCH 4/4] Remove boilerplate Storybook example page --- src/pages/Page.stories.tsx | 27 -------------- src/pages/Page.tsx | 74 -------------------------------------- src/pages/page.css | 69 ----------------------------------- 3 files changed, 170 deletions(-) delete mode 100644 src/pages/Page.stories.tsx delete mode 100644 src/pages/Page.tsx delete mode 100644 src/pages/page.css diff --git a/src/pages/Page.stories.tsx b/src/pages/Page.stories.tsx deleted file mode 100644 index 6e915ffd..00000000 --- a/src/pages/Page.stories.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import type { ComponentMeta, ComponentStory } from '@storybook/react'; -import { userEvent, within } from '@storybook/testing-library'; -import { Page } from './Page'; - -export default { - title: 'Pages/Example-Page', - component: Page, - parameters: { - // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout - layout: 'fullscreen' - } -} as ComponentMeta; - -const Template: ComponentStory = arguments_ => ( - -); - -export const LoggedOut = Template.bind({}); - -export const LoggedIn = Template.bind({}); - -// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing -LoggedIn.play = async ({ canvasElement }) => { - const canvas = within(canvasElement); - const loginButton = await canvas.getByRole('button', { name: /log in/i }); - await userEvent.click(loginButton); -}; diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx deleted file mode 100644 index 2aeac168..00000000 --- a/src/pages/Page.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import type React from 'react'; - -import './page.css'; - -export const Page: React.VFC = () => ( -
-
-

Pages in Storybook

-

- We recommend building UIs with a{' '} - - component-driven - {' '} - process starting with atomic components and ending with pages. -

-

- Render pages with mock data. This makes it easy to build and review page - states without needing to navigate to them in your app. Here are some - handy patterns for managing page data in Storybook: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose - such data from the "args" of child component stories -
    • -
  • - Assemble data in the page component from your services. You can mock - these services out using Storybook. -
    • -
-

- Get a guided tutorial on component-driven development at{' '} - - Storybook tutorials - - . Read more in the{' '} - - docs - - . -

-
- Tip Adjust the width of the canvas with the{' '} - - - - - - Viewports addon in the toolbar -
-
-
-); diff --git a/src/pages/page.css b/src/pages/page.css deleted file mode 100644 index fbc32aea..00000000 --- a/src/pages/page.css +++ /dev/null @@ -1,69 +0,0 @@ -section { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 24px; - padding: 48px 20px; - margin: 0 auto; - max-width: 600px; - color: #333; -} - -section h2 { - font-weight: 900; - font-size: 32px; - line-height: 1; - margin: 0 0 4px; - display: inline-block; - vertical-align: top; -} - -section p { - margin: 1em 0; -} - -section a { - text-decoration: none; - color: #1ea7fd; -} - -section ul { - padding-left: 30px; - margin: 1em 0; -} - -section li { - margin-bottom: 8px; -} - -section .tip { - display: inline-block; - border-radius: 1em; - font-size: 11px; - line-height: 12px; - font-weight: 700; - background: #e7fdd8; - color: #66bf3c; - padding: 4px 12px; - margin-right: 10px; - vertical-align: top; -} - -section .tip-wrapper { - font-size: 13px; - line-height: 20px; - margin-top: 40px; - margin-bottom: 40px; -} - -section .tip-wrapper svg { - display: inline-block; - height: 12px; - width: 12px; - margin-right: 4px; - vertical-align: top; - margin-top: 3px; -} - -section .tip-wrapper svg path { - fill: #1ea7fd; -}