Improve CI pipeline INTER-180 (#109)

* chore: refactor and speed up resetting scenarios

* chore: use default attribute data-testid

* feat: turn pro signals into links

* feat: turn enterprise signals into links

* chore: fix tests

* chore: remove more waitForSelectors

* chore: update selectors in Loan Risk

* chore: update selectors in Payment fraud

* chore: update selectors in Coupon fraud

* chore: update selectors in Paywall

* chore: remove artificial timeouts

* chore: put playground timeout back

* chore: put scraping timeout back

* ci: add unit tests

* add eslint to ci, fix eslint errors

* chore: try using yarn cache

* chore: try using cache action

* chore: enable node modules cache for playwright tests

* chore: try using container

* chore: put runs on back

* chore: try caching playwright manually

* chore: fix playwright version

* chore: fix dependencies install

* chore: fix dependencies install 2nd attempt

* chore: fix eslint error

* chore: try instal deps just for chrome

* install webkit dependencies

* try caching next build

* narrow down hash files

* tech next cache miss

* try using container

* fix home env?

* try starting web server using playwright

* use yarn start

* Don't use a container

* chore: improve eslintrc.js

* chore: clean up

* cleanup ci.yaml

* chore: review fixes

.eslintrc.js

@@ -0,0 +1,22 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'next/core-web-vitals',
+    'prettier',
+  ],
+  plugins: ['react-hooks', 'prettier'],
+  rules: {
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'prettier/prettier': 'error',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'react/no-unescaped-entities': 'off',
+  },
+  env: {
+    es6: true,
+  },
+};

.github/workflows/ci.yml

@@ -0,0 +1,122 @@
+name: Tests
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+env:
+  # Playwright headless browsers running in CI get low confidence scores, causing flaky tests. Lower the confidence score threshold for CI testing.
+  MIN_CONFIDENCE_SCORE: 0
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      # This takes 20s but does not seem necessary for our current setup,
+      # as ubuntu-latest already has a reasonable version of Node
+      # Add this to all jobs if you encounter problems with Node installation
+      # This also makes use of global yarn cache
+      # - uses: actions/setup-node@v3
+      #   with:
+      #     node-version: 18
+      #     cache: 'yarn'
+
+      - name: 'Cache'
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: nodemodules-${{ hashFiles('yarn.lock') }}
+          restore-keys: nodemodules-
+
+      - name: Install packages
+        run: yarn install --prefer-offline --frozen-lockfile
+
+      - name: Lint
+        run: yarn lint
+  unit-tests:
+    name: Unit tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: 'Cache'
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: nodemodules-${{ hashFiles('yarn.lock') }}
+          restore-keys: nodemodules-
+
+      - name: Install packages
+        run: yarn install --prefer-offline --frozen-lockfile
+
+      - name: Run unit tests
+        run: yarn test
+  e2e:
+    name: Playwright e2e tests
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3]
+        shardTotal: [3]
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Cache node modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: nodemodules-${{ hashFiles('yarn.lock') }}
+          restore-keys: nodemodules-
+
+      - name: Install node modules
+        run: yarn install --prefer-offline --frozen-lockfile
+
+      - name: Get installed Playwright version (used in cache key)
+        id: playwright-version
+        run: echo "PLAYWRIGHT_VERSION=$(node -e "process.stdout.write(require('@playwright/test/package.json').version)")" >> $GITHUB_ENV
+
+      - name: Cache Playwright browser binaries
+        uses: actions/cache@v3
+        id: playwright-cache
+        with:
+          path: |
+            ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Install Playwright browsers binaries if cache missed
+        run: yarn playwright install --with-deps
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+      # Ubuntu needs extra stuff to run webkit tests, alternative is using a Playwright docker container but
+      # that is slower in CI.
+      - name: If browser binaries cache hit, install just webkit dependencies
+        run: yarn playwright install-deps webkit
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+
+      - name: Cache Next build
+        uses: actions/cache@v3
+        with:
+          path: ${{ github.workspace }}/.next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('yarn.lock') }}-${{ hashFiles('src/*') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('yarn.lock') }}-
+
+      - name: Build website
+        run: yarn build
+
+      - name: Run Playwright tests
+        run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -53,3 +53,6 @@ tsconfig.tsbuildinfo
 
 # VS code workspace settings
 .vscode
+
+# MacOS Finder
+.DS_Store

package.json

@@ -6,7 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
+    "lint": "next lint",
     "lint:fix": "yarn lint --fix",
     "prettier": "prettier src --check",
     "prettier:fix": "yarn prettier --write",
@@ -54,19 +54,20 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@playwright/test": "^1.39.0",
+    "@playwright/test": "^1.40.1",
     "@types/leaflet": "^1.9.3",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@vitejs/plugin-react": "^3.0.1",
-    "eslint": "^8.17.0",
-    "eslint-config-next": "^13.1.6",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.55.0",
+    "eslint-config-next": "^14.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jsdom": "^21.1.0",
-    "prettier": "^3.0.1",
+    "prettier": "^3.1.0",
     "sass": "^1.64.1",
     "typescript": "^4.9.5",
     "vitest": "^0.28.3"

playwright.config.js

@@ -1,16 +1,17 @@
-const { defineConfig, devices } = require('@playwright/test');
-
+import { defineConfig, devices } from '@playwright/test';
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// require('dotenv').config();
+import 'dotenv/config';
 
-const isCi = !!process.env.CI;
+const IS_CI = !!process.env.CI;
+const PORT = process.env.PORT || 3000;
+const BASE_URL = process.env.BASE_URL || `http://localhost:${PORT}`;
 /**
  * @see https://playwright.dev/docs/test-configuration
  */
-module.exports = defineConfig({
+export default defineConfig({
   testDir: './e2e',
   /* Maximum time one test can run for. */
   timeout: 30 * 1000,
@@ -24,13 +25,13 @@ module.exports = defineConfig({
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: isCi,
+  forbidOnly: IS_CI,
   /* Retry on CI only */
-  retries: isCi ? 2 : 0,
+  retries: IS_CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
   workers: 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: [['html'], isCi ? ['github'] : ['list']],
+  reporter: [['html'], IS_CI ? ['github'] : ['list']],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
@@ -42,6 +43,16 @@ module.exports = defineConfig({
     trace: 'on-first-retry',
   },
 
+  /* In CI/GitHub action, run the production server before running tests
+   * (assumes `yarn build` was called before)
+   */
+  webServer: {
+    command: `yarn start`,
+    url: BASE_URL,
+    timeout: 120 * 1000,
+    reuseExistingServer: !IS_CI,
+  },
+
   /* Configure projects for major browsers */
   projects: [
     {
@@ -82,12 +93,4 @@ module.exports = defineConfig({
 
   /* Folder for test artifacts such as screenshots, videos, traces, etc. */
   // outputDir: 'test-results/',
-
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run test:start',
-  //   port: 3000,
-  //   reuseExistingServer: !process.env.CI,
-  //   timeout: 3 * 60 * 1000,
-  // },
 });

src/client/components/common/Select/Select.tsx

@@ -37,6 +37,8 @@ export const Select = React.forwardRef<
   );
 });
 
+Select.displayName = 'Select';
+
 export const SelectItem = React.forwardRef<
   HTMLDivElement,
   RadixSelect.SelectItemProps & React.RefAttributes<HTMLDivElement>
@@ -47,3 +49,5 @@ export const SelectItem = React.forwardRef<
     </RadixSelect.Item>
   );
 });
+
+SelectItem.displayName = 'SelectItem';