From b8d2e75d32db0fa44b7a5557db03b4597badacd5 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Wed, 4 Sep 2024 12:49:35 +0800 Subject: [PATCH] ci: refactor CI workflow and update test scripts (#314) ### TL;DR Updated CI workflows, test scripts, and environment configurations to improve the development and testing process. ### What changed? - Added a new reusable GitHub Action for setup and installation - Created a new comprehensive CI workflow (ci.yml) replacing the old main.yml - Updated the Chromatic workflow for visual regression testing - Modified test scripts in package.json for better organization and clarity - Updated the .env.test file to use quotes for the DATABASE_URL - Updated the load test README with the correct build command ### How to test? 1. Review the new CI workflow in .github/workflows/ci.yml 2. Run the updated test scripts locally: - `npm run test:vitest` for unit and integration tests - `npm run test:e2e` for end-to-end tests 3. Verify that the Chromatic workflow runs correctly on pull requests 4. Check that the load test build command works: `npm run load-test:build` ### Why make this change? These changes aim to: - Streamline the CI process with a more comprehensive and organized workflow - Improve test script naming and execution for better developer experience - Ensure consistent setup across different GitHub Actions - Enhance the reliability and efficiency of the testing and deployment pipeline --- .env.test | 2 +- .github/actions/setup/action.yml | 15 ++++++ .github/workflows/chromatic.yml | 23 ++++----- .github/workflows/ci.yml | 88 ++++++++++++++++++++++++++++++++ .github/workflows/main.yml | 61 ---------------------- package.json | 10 ++-- tests/load/README.md | 2 +- 7 files changed, 121 insertions(+), 80 deletions(-) create mode 100644 .github/actions/setup/action.yml create mode 100644 .github/workflows/ci.yml delete mode 100644 .github/workflows/main.yml diff --git a/.env.test b/.env.test index 0d8c1553..39d2b68b 100644 --- a/.env.test +++ b/.env.test @@ -2,7 +2,7 @@ NODE_ENV=test # DATABASE_URL is not actually used in tests, but prisma will complain if the URL is incorrect # pglite is used in tests instead. -DATABASE_URL=postgres://root:root@localhost:5432/test +DATABASE_URL="postgres://root:root@localhost:5432/test" SESSION_SECRET=random_session_secret_that_is_at_least_32_characters OTP_EXPIRY=600 \ No newline at end of file diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml new file mode 100644 index 00000000..7d0d3cf1 --- /dev/null +++ b/.github/actions/setup/action.yml @@ -0,0 +1,15 @@ +name: 'Setup and install' +description: 'Common setup steps for Actions' + +runs: + using: composite + steps: + - uses: actions/setup-node@v4 + with: + node-version: 20 + cache: 'npm' + + - shell: bash + run: npm ci + + # Add more steps here as needed diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 113f47e9..0986e3f5 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -18,25 +18,24 @@ jobs: runs-on: ubuntu-latest env: CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + if: ${{ !endsWith(github.actor , 'bot') && !endsWith(github.actor, '[bot]')}} # Job steps steps: - - if: env.CHROMATIC_PROJECT_TOKEN != '' - uses: actions/checkout@v2 + - uses: actions/checkout@v4 + if: env.CHROMATIC_PROJECT_TOKEN != '' with: - fetch-depth: 0 # Required for v2 - - if: env.CHROMATIC_PROJECT_TOKEN != '' - name: Install dependencies - run: npm i - - if: env.CHROMATIC_PROJECT_TOKEN != '' - name: Load .env file + fetch-depth: 0 # Required so Chromatic can compare commits + - uses: ./.github/actions/setup + if: env.CHROMATIC_PROJECT_TOKEN != '' + - name: Load .env file + if: env.CHROMATIC_PROJECT_TOKEN != '' uses: xom9ikk/dotenv@v2 with: mode: test - - if: env.CHROMATIC_PROJECT_TOKEN != '' - name: Publish to Chromatic - uses: chromaui/action@v1 + - name: Publish to Chromatic + if: env.CHROMATIC_PROJECT_TOKEN != '' + uses: chromaui/action@latest with: - token: ${{ secrets.GITHUB_TOKEN }} projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} onlyChanged: true exitOnceUploaded: true diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 00000000..d38836b0 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,88 @@ +name: CI + +on: + push: + branches: + - main + # add more branches here for this job to run on + # - staging + # - production + pull_request: + types: [opened, synchronize] + +jobs: + install: + name: Install dependencies + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: ./.github/actions/setup + + lint: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: ./.github/actions/setup + - name: Lint + run: npm run lint + + unit-integration-tests: + name: Unit & integration tests + needs: + - install + timeout-minutes: 15 + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: ./.github/actions/setup + - name: Test + run: npm run test:vitest + + end-to-end-tests: + name: End-to-end tests + needs: + - install + timeout-minutes: 15 + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/checkout@v4 + - uses: ./.github/actions/setup + - name: Install Playwright (Chromium) + run: npx playwright install chromium + - name: Load .env file + uses: xom9ikk/dotenv@v2 + with: + mode: test + - name: Next.js cache + uses: actions/cache@v4 + with: + # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node + path: | + ~/.npm + ${{ github.workspace }}/.next/cache + # Generate a new cache whenever packages or source files change. + key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }} + # If source files changed but packages didn't, rebuild from a prior cache. + restore-keys: | + ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}- + + - name: Start test containers + run: npm run setup:test + + - name: Build app + run: npm run build + + - name: Run Playwright tests + run: npm run test-ci:e2e + + - name: Stop test containers + run: npm run teardown + + - name: Upload test results + if: ${{ !cancelled() }} + uses: actions/upload-artifact@v4 + with: + name: playwright-report + path: playwright/test-results/ + retention-days: 7 diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml deleted file mode 100644 index af2ee829..00000000 --- a/.github/workflows/main.yml +++ /dev/null @@ -1,61 +0,0 @@ -name: Tests -on: [push] -jobs: - tests: - runs-on: ${{ matrix.os }} - strategy: - matrix: - node: ['18.x'] - os: [ubuntu-latest] - steps: - - name: Checkout repo - uses: actions/checkout@v3 - with: - fetch-depth: 0 - - - name: Use Node ${{ matrix.node }} - uses: actions/setup-node@v3 - with: - node-version: ${{ matrix.node }} - cache: 'npm' # You can active this cache when your repo has a lockfile - - - name: Install deps (with cache) - run: npm install - - - name: Install playwright - run: npx playwright install chromium - - - name: Load .env file - uses: xom9ikk/dotenv@v2 - with: - mode: test - - - name: Next.js cache - uses: actions/cache@v3 - with: - # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node - path: | - ~/.npm - ${{ github.workspace }}/.next/cache - # Generate a new cache whenever packages or source files change. - key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }} - # If source files changed but packages didn't, rebuild from a prior cache. - restore-keys: | - ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}- - - - name: Start test containers - run: npm run setup:test - - - name: Build and test - run: npm run build && npm run test-start - - - name: Stop test containers - run: npm run teardown - - - name: Upload test results - if: ${{ always() }} - uses: actions/upload-artifact@v2 - with: - name: test results - path: | - playwright/test-results diff --git a/package.json b/package.json index 818e77a7..4d0ee848 100644 --- a/package.json +++ b/package.json @@ -21,12 +21,12 @@ "migrate:dev": "prisma migrate dev", "migrate": "prisma migrate deploy", "test": "run-s test:*", - "test:unit": "dotenv -e .env.test vitest run", - "test:load:build": "webpack --config tests/load/webpack.config.js", + "test:vitest": "dotenv -e .env.test vitest run", + "test-dev:vitest": "dotenv -e .env.test vitest", "test:e2e": "dotenv -e .env.test playwright test", - "test-dev": "start-server-and-test dev http://127.0.0.1:3000 test", - "test-dev:unit": "dotenv -e .env.test vitest", - "test-start": "start-server-and-test start http://127.0.0.1:3000 test", + "test-ci:e2e": "start-server-and-test start http://127.0.0.1:3000 test:e2e", + "test-dev:e2e": "start-server-and-test dev http://127.0.0.1:3000 test:e2e", + "load-test:build": "webpack --config tests/load/webpack.config.js", "postinstall": "npm run generate && npm run build:theme", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build" diff --git a/tests/load/README.md b/tests/load/README.md index 9e230f46..1c1770aa 100644 --- a/tests/load/README.md +++ b/tests/load/README.md @@ -9,7 +9,7 @@ 1. Build the load test files. ``` - npm run test:load:build + npm run load-test:build ``` 1. Log in to the target environment with a test account and save the session cookie value.