🧵 Try to make tests more robust #813
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: Run CI build and tests | |
# Run this workflow every time a new commit pushed to your repository | |
on: | |
push: | |
branches: | |
- main | |
- stable/* | |
tags: | |
- '*' | |
pull_request: | |
types: | |
- opened | |
- reopened | |
- synchronize | |
- ready_for_review | |
workflow_dispatch: | |
concurrency: | |
group: '${{ github.workflow }}-${{ github.ref_name }}' # unique builds for branch/tag name | |
cancel-in-progress: false # do not cancel in progress, but only in-between builds | |
jobs: | |
storybook: | |
name: Create storybook build | |
runs-on: ubuntu-latest | |
steps: | |
- uses: actions/checkout@v4 | |
- uses: actions/setup-node@v4 | |
with: | |
node-version-file: '.nvmrc' | |
cache: npm | |
- name: Build Storybook docs | |
run: | | |
npm ci | |
npm run compilemessages | |
npm run build-storybook --quiet | |
- name: Upload artifact | |
uses: actions/upload-pages-artifact@v3 | |
with: | |
path: ./storybook-static | |
build-package: | |
name: Create 'production' build | |
runs-on: ubuntu-latest | |
steps: | |
- uses: actions/checkout@v4 | |
- uses: actions/setup-node@v4 | |
with: | |
node-version-file: '.nvmrc' | |
cache: npm | |
- name: Install dependencies | |
run: npm ci | |
- name: Build library | |
run: | | |
npm run build | |
npm run compilemessages | |
- name: Store build artifact | |
uses: actions/upload-artifact@v4 | |
with: | |
name: build | |
path: lib/ | |
retention-days: 1 | |
prettier: | |
name: Check frontend code formatting with prettier | |
runs-on: ubuntu-latest | |
steps: | |
- uses: actions/checkout@v4 | |
- uses: actions/setup-node@v4 | |
with: | |
node-version-file: '.nvmrc' | |
cache: npm | |
- name: Install dependencies | |
run: npm ci | |
- name: Run prettier linter | |
run: npm run checkformat | |
tests-jest: | |
name: Run Jest tests | |
runs-on: ubuntu-latest | |
steps: | |
- uses: actions/checkout@v4 | |
- uses: actions/setup-node@v4 | |
with: | |
node-version-file: '.nvmrc' | |
cache: npm | |
- name: Install dependencies | |
run: npm install | |
- name: Run tests | |
run: | | |
npm run test:jest | |
tests-storybook: | |
name: Run Storybook tests (${{ matrix.browser }}) | |
runs-on: ubuntu-latest | |
strategy: | |
fail-fast: false | |
matrix: | |
browser: | |
- chromium | |
- firefox | |
- webkit | |
needs: | |
- storybook | |
steps: | |
- uses: actions/checkout@v4 | |
- uses: actions/setup-node@v4 | |
with: | |
node-version-file: '.nvmrc' | |
cache: npm | |
- name: Install dependencies | |
run: npm ci | |
# Reference: https://storybook.js.org/docs/6.5/react/writing-tests/test-runner#run-against-non-deployed-storybooks | |
- name: Set up test environment | |
run: | | |
npx playwright install --with-deps | |
npm run compilemessages | |
- name: Download storybook artifact | |
uses: actions/download-artifact@v4 | |
with: | |
name: github-pages | |
path: storybook-static | |
- name: Serve storybook and run tests | |
run: | | |
cd storybook-static/ && tar -xvf artifact.tar && cd .. | |
npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \ | |
"npx http-server storybook-static --port 6006 --quiet" \ | |
"npx wait-on -l http://127.0.0.1:6006 && npm run test:storybook -- --browsers ${{ matrix.browser }}" | |
deploy: | |
runs-on: ubuntu-latest | |
needs: | |
- storybook | |
- prettier | |
- tests-storybook | |
- tests-jest | |
# do not run in forks & only publish main branch | |
if: github.ref_name == 'main' && github.repository_owner == 'open-formulieren' | |
environment: | |
name: github-pages | |
url: ${{ steps.deployment.outputs.page_url }} | |
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages | |
permissions: | |
contents: read | |
pages: write | |
id-token: write | |
steps: | |
- name: Setup Pages | |
id: pages | |
uses: actions/configure-pages@v4 | |
- name: Deploy to GitHub Pages | |
id: deployment | |
uses: actions/deploy-pages@v4 | |
chromatic: | |
name: Visual regression test with Chromatic | |
runs-on: ubuntu-latest | |
needs: | |
- storybook | |
# do not run in forks | |
if: github.event_name == 'push' || ! github.event.pull_request.head.repo.fork | |
steps: | |
- name: Checkout repository | |
uses: actions/checkout@v4 | |
with: | |
fetch-depth: 0 # 👈 Required to retrieve git history | |
- name: Download build artifact | |
uses: actions/download-artifact@v4 | |
with: | |
name: github-pages | |
path: ./storybook-static | |
- name: Extract artifact | |
run: | | |
tar -xvf artifact.tar | |
rm artifact.tar | |
working-directory: ./storybook-static | |
- name: Publish to Chromatic for visual regression tests | |
uses: chromaui/action@latest | |
if: github.event.pull_request.draft == false || github.event.push | |
with: | |
autoAcceptChanges: main | |
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} | |
storybookBuildDir: ./storybook-static | |
onlyChanged: true | |
externals: 'src/img/**' | |
publish: | |
name: Publish the NPM package | |
runs-on: ubuntu-latest | |
needs: | |
- build-package | |
- tests-storybook | |
- tests-jest | |
- prettier | |
# do not publish in forks or non-tag pushes | |
if: startsWith(github.ref, 'refs/tags/') && github.repository_owner == 'open-formulieren' | |
steps: | |
- uses: actions/checkout@v4 | |
- uses: actions/setup-node@v4 | |
with: | |
node-version-file: '.nvmrc' | |
cache: npm | |
registry-url: 'https://registry.npmjs.org' | |
scope: '@open-formulieren' | |
- name: Install dependencies | |
run: npm ci | |
- name: Download build artifact | |
uses: actions/download-artifact@v4 | |
with: | |
name: build | |
path: lib/ | |
- name: Publish package to NPM | |
run: | | |
# Strip git ref prefix from version | |
VERSION=$(echo "${{ github.ref }}" | sed -e 's,.*/\(.*\),\1,') | |
npm publish --access public --new-version=$VERSION | |
env: | |
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} |