test-frontend.yml

name: Test (frontend)

on:
  push:
    branches:
      - master
      - develop
    paths:
      - packages/frontend/**
      # for permissions
      - packages/cherrypick-js/**
      # for e2e
      - packages/backend/**
      - .github/workflows/test-frontend.yml
  pull_request:
    paths:
      - packages/frontend/**
      # for permissions
      - packages/cherrypick-js/**
      # for e2e
      - packages/backend/**
      - .github/workflows/test-frontend.yml
jobs:
  vitest:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [20.16.0]

    steps:
    - uses: actions/checkout@v4.1.1
      with:
        submodules: true
    - name: Install pnpm
      uses: pnpm/action-setup@v4
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v4.0.4
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'pnpm'
    - run: corepack enable
    - run: pnpm i --frozen-lockfile
    - name: Check pnpm-lock.yaml
      run: git diff --exit-code pnpm-lock.yaml
    - name: Copy Configure
      run: cp .github/cherrypick/test.yml .config
    - name: Build
      run: pnpm build
    - name: Test
      run: pnpm --filter frontend test-and-coverage
    - name: Upload Coverage
      uses: codecov/codecov-action@v4
      with:
        token: ${{ secrets.CODECOV_TOKEN }}
        files: ./packages/frontend/coverage/coverage-final.json

  e2e:
    runs-on: ubuntu-latest

    strategy:
      fail-fast: false
      matrix:
        node-version: [20.16.0]
        browser: [chrome]

    services:
      postgres:
        image: postgres:15
        ports:
          - 54312:5432
        env:
          POSTGRES_DB: test-cherrypick
          POSTGRES_HOST_AUTH_METHOD: trust
      redis:
        image: redis:7
        ports:
          - 56312:6379

    steps:
    - uses: actions/checkout@v4.1.1
      with:
        submodules: true
    # https://github.com/cypress-io/cypress-docker-images/issues/150
    #- name: Install mplayer for FireFox
    #  run: sudo apt install mplayer -y
    #  if: ${{ matrix.browser == 'firefox' }}
    #- uses: browser-actions/setup-firefox@latest
    #  if: ${{ matrix.browser == 'firefox' }}
    - name: Install pnpm
      uses: pnpm/action-setup@v4
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v4.0.4
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'pnpm'
    - run: corepack enable
    - run: pnpm i --frozen-lockfile
    - name: Copy Configure
      run: cp .github/cherrypick/test.yml .config
    - name: Build
      run: pnpm build
    # https://github.com/cypress-io/cypress/issues/4351#issuecomment-559489091
    - name: ALSA Env
      run: echo -e 'pcm.!default {\n type hw\n card 0\n}\n\nctl.!default {\n type hw\n card 0\n}' > ~/.asoundrc
    # XXX: This tries reinstalling Cypress if the binary is not cached
    # Remove this when the cache issue is fixed
    - name: Cypress install
      run: pnpm exec cypress install
    - name: Cypress run
      uses: cypress-io/github-action@v6
      timeout-minutes: 15
      with:
        install: false
        start: pnpm start:test
        wait-on: 'http://localhost:61812'
        headed: true
        browser: ${{ matrix.browser }}
    - uses: actions/upload-artifact@v4
      if: failure()
      with:
        name: ${{ matrix.browser }}-cypress-screenshots
        path: cypress/screenshots
    - uses: actions/upload-artifact@v4
      if: always()
      with:
        name: ${{ matrix.browser }}-cypress-videos
        path: cypress/videos