Update docs form validation example to demonstrate best-practise when submitting a form in an invalid state #3912
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Visual test | |
| on: | |
| pull_request: | |
| jobs: | |
| ci: | |
| if: ${{ github.repository == 'primer/brand' }} | |
| name: Storybook | |
| runs-on: ubuntu-latest | |
| env: | |
| NODE_ENV: test | |
| steps: | |
| - name: Checkout repository | |
| uses: actions/checkout@v2 | |
| - name: Set up Node | |
| uses: actions/setup-node@v2 | |
| with: | |
| node-version: 18 | |
| - name: Cache dependencies | |
| uses: actions/cache@v2 | |
| with: | |
| path: ~/.npm | |
| key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }} | |
| restore-keys: | | |
| ${{ runner.os }}-node- | |
| - name: Install Playwright | |
| run: | | |
| npx playwright install | |
| npx playwright install-deps chromium | |
| - name: Install dependencies | |
| run: npm ci --legacy-peer-deps && cd apps/docs && npm ci --legacy-peer-deps | |
| - name: Build assets | |
| run: NODE_ENV=test npm run build:lib && cd apps/storybook && npx storybook build | |
| - name: Run visual tests | |
| id: playwright-step | |
| run: NODE_ENV=test npx start-server-and-test 'npx http-server ./apps/storybook/storybook-static -p 6006' 6006 'cd packages/e2e && npx playwright test' | |
| continue-on-error: true | |
| - name: Upload error screenshots | |
| uses: actions/upload-artifact@v3 | |
| if: steps.playwright-step.outcome != 'success' | |
| with: | |
| name: playwright-test-results | |
| path: playwright-test-results | |
| - name: Upload test results | |
| if: always() | |
| uses: actions/upload-artifact@v3 | |
| with: | |
| name: playwright-report | |
| path: playwright-report | |
| - name: Comment on the PR about no visual differences | |
| if: steps.playwright-step.outcome != 'success' | |
| uses: phulsechinmay/[email protected] | |
| with: | |
| message: | | |
| ### ⚠️ Visual differences found | |
| <details><summary>Our visual comparison tests found UI differences.</summary> | |
| Please review the differences by using the test artifacts to ensure that the changes were intentional. | |
| Artifacts can be downloaded and reviewed locally. | |
| Download links are available at the bottom of the workflow summary screen. | |
| ##### Example: | |
|  | |
| If the changes are expected, please run `npm run test:visual:update-snapshots` to replace the previous fixtures. | |
| </details> | |
| [Review visual differences](https://github.com/primer/brand/actions/runs/${{ github.run_id }}) | |
| GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} | |
| COMMENT_IDENTIFIER: 'visual-comparison-diff' | |
| - name: Comment on the PR about no visual differences | |
| if: steps.playwright-step.outcome == 'success' | |
| uses: phulsechinmay/[email protected] | |
| with: | |
| message: | | |
| ### 🟢 No visual differences found | |
| Our visual comparison tests did not find any differences in the UI. | |
| GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} | |
| COMMENT_IDENTIFIER: 'visual-comparison-diff' |