ci(frontend): add reusable workflow #466
Workflow file for this run
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
| # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node | |
| # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs | |
| name: Frontend - React Testing Pyramid | |
| on: | |
| push: | |
| branches: | |
| - "**" # matches every branch | |
| paths: | |
| - hivemq-edge/src/frontend/** | |
| pull_request: | |
| branches: [master] | |
| paths: | |
| - hivemq-edge/src/frontend/** | |
| - .github/workflows/frontend-cli.yml | |
| - .github/actions/setup_node/action.yml | |
| env: | |
| GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} | |
| jobs: | |
| lint: | |
| runs-on: ubuntu-latest | |
| defaults: | |
| run: | |
| working-directory: ./hivemq-edge/src/frontend/ | |
| steps: | |
| - name: 👓 Checkout repository | |
| uses: actions/checkout@v3 | |
| - name: 🏗️ Setup node environment | |
| uses: ./.github/actions/setup_node | |
| - name: 🧪 Run Prettier | |
| run: pnpm lint:prettier | |
| - name: 🧪 Run ESLint | |
| run: pnpm lint:eslint | |
| unit_tests: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: 👓 Checkout repository | |
| uses: actions/checkout@v3 | |
| - name: 🏗️ Setup node environment | |
| uses: ./.github/actions/setup_node | |
| - name: 🧪 Run Test | |
| run: pnpm test | |
| component_tests: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: 👓 Checkout repository | |
| uses: actions/checkout@v3 | |
| - name: 🏗️ Setup node environment | |
| uses: ./.github/actions/setup_node | |
| - name: 🧪 Run Cypress Component | |
| uses: cypress-io/github-action@v5 | |
| with: | |
| working-directory: ./hivemq-edge/src/frontend/ | |
| component: true | |
| start: pnpm dev | |
| # after the test run completes store videos | |
| - name: 💾 Upload Component videos | |
| if: failure() | |
| uses: actions/upload-artifact@v3 | |
| with: | |
| name: cypress-component-videos | |
| path: hivemq-edge/src/frontend/cypress/videos | |
| if-no-files-found: ignore | |
| e2e_tests: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: 👓 Checkout repository | |
| uses: actions/checkout@v3 | |
| - name: 🏗️ Setup node environment | |
| uses: ./.github/actions/setup_node | |
| - name: 🧪 Run Cypress E2E | |
| uses: cypress-io/github-action@v5 | |
| with: | |
| working-directory: ./hivemq-edge/src/frontend/ | |
| start: pnpm dev | |
| # after the test run completes store videos | |
| - name: 💾 Upload E2E videos | |
| if: failure() | |
| uses: actions/upload-artifact@v3 | |
| with: | |
| name: cypress-e2e-videos | |
| path: hivemq-edge/src/frontend/cypress/videos | |
| if-no-files-found: ignore | |
| build_production: | |
| needs: [lint, unit_tests, component_tests, e2e_tests] | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: 👓 Checkout repository | |
| uses: actions/checkout@v3 | |
| - name: 🏗️ Setup node environment | |
| uses: ./.github/actions/setup_node | |
| - name: 🏗️ Build Application | |
| run: pnpm run build | |
| # - name: 📸 Run Percy visual tests | |
| # run: echo "Check the Percy tests on the other workflow" | |
| lighthouse: | |
| runs-on: ubuntu-latest | |
| needs: [build_production] | |
| steps: | |
| - name: 👓 Checkout repository | |
| uses: actions/checkout@v3 | |
| - name: 🚥 Run Lighthouse audits | |
| uses: treosh/lighthouse-ci-action@v10 | |
| id: lighthouse | |
| with: | |
| temporaryPublicStorage: true # upload lighthouse report to the temporary storage | |
| ## budgetPath: ./budget.json # test performance budgets | |
| uploadArtifacts: true # save results as an action artifacts | |
| configPath: 'hivemq-edge/src/frontend/.lighthouserc.cjs' | |
| - name: 💾 Job successful feedback | |
| if: ${{ success() }} | |
| run: | | |
| echo '### Lighthouse results 🚦' >> $GITHUB_STEP_SUMMARY | |
| echo "Performance: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.performance }}" >> $GITHUB_STEP_SUMMARY | |
| echo "Accessibility: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.accessibility }}" >> $GITHUB_STEP_SUMMARY | |
| echo "Best-practices: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.best-practices }}" >> $GITHUB_STEP_SUMMARY | |
| echo "SEO: ${{ fromJSON(steps.lighthouse.outputs.manifest)[0].summary.seo }}" >> $GITHUB_STEP_SUMMARY |