build.yml

# 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://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Fozzie Components CI

on:
  pull_request:
    types: [assigned, opened, synchronize, reopened]
    paths-ignore:
      - ".husky/**"
      - "stories/**"
      - ".vscode/**"
      - "README.md"
      - "CONTRIBUTING.md"
      - "CHANGELOG.md"
      - "LICENSE"
  push:
    branches:
      - master

concurrency:
  group: ${{ github.ref }}
  cancel-in-progress: true

jobs:
  install:
    runs-on: ubuntu-latest
    steps:
      # Checkout the Repo.
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Setup Node
        # Setup Node 20.
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "yarn"
      # Restore node_modules if cache exists. If not, cache is created at end of build.
      - name: Cache Node Modules
        id: cache-node-modules
        uses: actions/cache@v4
        with:
          path: "**/node_modules"
          key: node-modules-${{ hashFiles('**/yarn.lock') }}
      # Run 'yarn' if cache doesn't exist. Use yarn add --cached to download packages from yarn cache folder where possible.
      - name: Install Dependencies
        if: steps.cache-node-modules.outputs.cache-hit != 'true'
        run: yarn add --cached

  danger:
    if: ${{ github.ref != 'refs/heads/master' }}
    needs: install
    runs-on: ubuntu-latest
    steps:
      # Checkout the Repo.
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Setup Node
        # Setup Node 20.
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "yarn"
      # Restore node_modules if cache exists. If not, cache is created at end of build.
      - name: Cache Node Modules
        id: cache-node-modules
        uses: actions/cache@v4
        with:
          path: "**/node_modules"
          key: node-modules-${{ hashFiles('**/yarn.lock') }}
      # Run Danger Checks.
      - name: Run Danger Checks
        run: yarn danger ci --failOnErrors
        env:
          DANGER_GITHUB_API_TOKEN: ${{ secrets.DANGER_GITHUB_API_TOKEN }}

  build:
    needs: install
    runs-on: ubuntu-latest
    steps:
      # Checkout the Repo.
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      # Setup Node 20.
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "yarn"
      # Restore node_modules - Cache should exist as one was created in previous 'install' job.
      - name: Cache Node Modules
        id: cache-node-modules
        uses: actions/cache@v4
        with:
          path: "**/node_modules"
          key: node-modules-${{ hashFiles('**/yarn.lock') }}
      # Build components. Only components with out-of-date Turborepo hash will rebuilt, speeding up build time.
      - name: Build Components
        run: yarn build
      # Lint components
      - name: Lint Components
        run: yarn lint --concurrency=10
      # Cache 'storybook-static'
      - name: Cache Storybook Static Directory
        id: storybook-cache
        uses: actions/cache@v4
        with:
          path: ./packages/storybook/storybook-static
          key: storybook-cache-${{ github.ref_name }}-${{ github.run_id }}
      # Build Storybook
      - name: Build Storybook (All Components)
        run: yarn storybook:build
    env:
      BUNDLEWATCH_GITHUB_TOKEN: ${{ secrets.BUNDLEWATCH_TOKEN }}
      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}

  unit-tests:
    strategy:
      fail-fast: false
      matrix:
        component-type:
          [
            "atoms",
            "molecules",
            "organisms",
            "pages",
            "templates",
            "tools",
            "services",
          ]
    name: unit-tests-${{ matrix.component-type }}
    needs: build
    runs-on: ubuntu-latest
    steps:
      # Checkout the Repo
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      # Setup Node 20
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "yarn"
      # Restore node_modules - Cache should exist as one was created in previous 'install' job
      - name: Restore Cache -  Node Modules
        id: cache-node-modules
        uses: actions/cache@v4
        with:
          path: "**/node_modules"
          key: node-modules-${{ hashFiles('**/yarn.lock') }}
      # Build components. Only components with out-of-date Turborepo hash will rebuilt, speeding up build time.
      - name: Build Components
        run: yarn build
      # Unit Tests
      - name: Unit Test Components
        run: yarn ci:test:${{ matrix.component-type}} --concurrency=10
    env:
      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}

  browser-tests:
    strategy:
      fail-fast: false
      matrix:
        component-type: ["atoms", "molecules", "organisms", "pages"]
    name: browser-tests-${{ matrix.component-type }}
    needs: build
    runs-on: ubuntu-latest
    steps:
      # Checkout the Repo
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      # Setup Node 20
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "yarn"
      # Restore node_modules - Cache should exist as one was created in previous 'install' job
      - name: Restore Cache -  Node Modules
        id: cache-node-modules
        uses: actions/cache@v4
        with:
          path: "**/node_modules"
          key: node-modules-${{ hashFiles('**/yarn.lock') }}
      # Build Components
      - name: Build Components
        run: yarn build
      # Restore Storybook 'storybook-static'
      - name: Cache Storybook Static Directory
        id: storybook-cache
        uses: actions/cache@v4
        with:
          path: ./packages/storybook/storybook-static
          key: storybook-cache-${{ github.ref_name }}-${{ github.run_id }}
      - name: Run Component / A11y / Visual Tests
        run: |
          FILTER_FLAG=""
          if [[ "${{ github.event_name }}" == "pull_request" && "${{ github.ref }}" != "refs/heads/master" ]]; then
            FILTER_FLAG="--filter=...[origin/master]"
          fi
          yarn storybook:serve-static &
          yarn ci:test-component:chrome:${{ matrix.component-type }} --concurrency=1 $FILTER_FLAG &&
          yarn ci:test-a11y:chrome:${{ matrix.component-type }} --concurrency=1 $FILTER_FLAG &&
          yarn ci:test:visual:${{ matrix.component-type }} --concurrency=1 $FILTER_FLAG
      # On Failure - Upload Allure Report
      - name: Generate Allure Report
        if: failure()
        run: yarn allure:generate
      - name: Upload Allure Report
        if: failure()
        uses: actions/upload-artifact@v3
        with:
          name: test-artifacts-${{ matrix.component-type }}
          path: |
            allure-report
            test/results/axe-violations
    env:
      PERCY_TOKEN_F_BUTTON: ${{ secrets.PERCY_TOKEN_F_BUTTON }}
      PERCY_TOKEN_F_FORM_FIELD: ${{ secrets.PERCY_TOKEN_F_FORM_FIELD }}
      PERCY_TOKEN_F_ALERT: ${{ secrets.PERCY_TOKEN_F_ALERT }}
      PERCY_TOKEN_F_CARD_WITH_CONTENT: ${{ secrets.PERCY_TOKEN_F_CARD_WITH_CONTENT }}
      PERCY_TOKEN_F_MEGA_MODAL: ${{ secrets.PERCY_TOKEN_F_MEGA_MODAL }}
      PERCY_TOKEN_F_COOKIE_BANNER: ${{ secrets.PERCY_TOKEN_F_COOKIE_BANNER }}
      PERCY_TOKEN_F_FOOTER: ${{ secrets.PERCY_TOKEN_F_FOOTER }}
      PERCY_TOKEN_F_HEADER: ${{ secrets.PERCY_TOKEN_F_HEADER }}
      PERCY_TOKEN_F_STATUS_BANNER: ${{ secrets.PERCY_TOKEN_F_STATUS_BANNER }}
      PERCY_TOKEN_F_ACCOUNT_INFO: ${{ secrets.PERCY_TOKEN_F_ACCOUNT_INFO }}
      PERCY_TOKEN_F_CHECKOUT: ${{ secrets.PERCY_TOKEN_F_CHECKOUT }}
      PERCY_TOKEN_F_CONTACT_PREFERENCES: ${{ secrets.PERCY_TOKEN_F_CONTACT_PREFERENCES }}
      PERCY_TOKEN_F_MFA: ${{ secrets.PERCY_TOKEN_F_MFA }}
      PERCY_TOKEN_F_REGISTRATION: ${{ secrets.PERCY_TOKEN_F_REGISTRATION }}
      PERCY_TOKEN_F_TAKEAWAYPAY_ACTIVATION: ${{ secrets.PERCY_TOKEN_F_TAKEAWAYPAY_ACTIVATION }}
      PERCY_TOKEN_F_RATING: ${{ secrets.PERCY_TOKEN_F_RATING }}
      PERCY_TOKEN_F_SEGMENTED_CONTROL: ${{ secrets.PERCY_TOKEN_F_SEGMENTED_CONTROL }}
      PERCY_TOKEN_F_TOGGLE_SWITCH: ${{ secrets.PERCY_TOKEN_F_TOGGLE_SWITCH }}
      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}

  storybook-deploy:
    if: ${{ github.ref == 'refs/heads/master' }}
    needs: build
    runs-on: ubuntu-latest
    steps:
      # Checkout the Repo.
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      # Setup Node 20
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "yarn"
      # Restore node_modules - Cache should exist as one was created in previous 'install' job.
      - name: Restore Cache -  Node Modules
        id: cache-node-modules
        uses: actions/cache@v4
        with:
          path: "**/node_modules"
          key: node-modules-${{ hashFiles('**/yarn.lock') }}
      # Run 'yarn' if cache doesn't exist. Use yarn add --cached to download packages from yarn cache folder where possible.
      - name: Install Dependencies
        if: steps.cache-node-modules.outputs.cache-hit != 'true'
        run: yarn add --cached
      # Restore Storybook 'storybook-static'.
      - name: Cache Storybook Static Directory
        id: storybook-cache
        uses: actions/cache@v4
        with:
          path: ./packages/storybook/storybook-static
          key: storybook-cache-${{ github.ref_name }}-${{ github.run_id }}
      # Deploy Storybook.
      - name: Storybook deploy
        run: yarn storybook:deploy
        env:
          GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}
          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}

  publish:
    needs: browser-tests
    runs-on: ubuntu-latest
    if: ${{ github.ref == 'refs/heads/master' }}
    steps:
      # Checkout the Repo.
      - name: Checkout
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      # Setup Node 20
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "yarn"
      # Restore node_modules - Cache should exist as one was created in previous 'install' job.
      - name: Restore Cache -  Node Modules
        id: cache-node-modules
        uses: actions/cache@v4
        with:
          path: "**/node_modules"
          key: node-modules-${{ hashFiles('**/yarn.lock') }}
      - run: yarn build
      - name: Auth with NPM
        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc
      - name: Publish unreleased package versions to npm
        run: yarn lerna publish from-package --ignore-scripts --yes --no-verify-access
    env:
      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}