ci: add e2e workflow, optimize client code for testing (#771)

* refactor(e2e): fix tests with latest changes, convert to TS, use test Ids

* chore(EndpointMenu.jsx): add data-testid attribute to new-conversation-menu button

* refactor(EndpointItem): add data-testid attr., convert to TS

* refactor(e2e): remove unnecessary awaits and convert to TS

* chore(playwright.config.local.ts): add absolute path to server index.js file
chore(playwright.config.local.ts): add dotenv configuration
chore(playwright.config.local.ts): change webServer command to use absolute path
chore(playwright.config.local.ts): add NODE_ENV and process.env to webServer env
chore(playwright.config.local.ts): remove unused import
chore(login.spec.js): delete login.spec.js file

* chore(.gitignore): add 'my.secrets' to the list of ignored files
fix(Registration.tsx): add 'data-testid' attribute to the error message div
fix(Registration.spec.tsx): comment out test case that calls 'registerUser.mutate'

* chore(ConvoIcon.tsx): add data-testid attribute to svg element
chore(messages.spec.ts): refactor conversation navigation logic

* chore(playwright.config.ts): add support for absolute path to server index.js file
feat(playwright.config.ts): add support for dotenv configuration
feat(playwright.config.ts): set NODE_ENV to 'production' in webServer environment variables

* chore(workflows): comment out push event and specify paths for pull_request event in backend-review.yml
chore(workflows): comment out push event and specify paths for pull_request event in frontend-review.yml

* chore(install.js): add check to skip install script in CI environment

* chore: complete playwright workflow

* chore(Landing.tsx): add data-testid attribute to landing title element
chore(authenticate.ts): update selector to wait for landing title element by test id instead of text content

* chore(playwright.yml): add step to upload screenshot artifact on failure
fix(authenticate.ts): capture screenshot before waiting for landing title and increase timeout due to GH Actions load time

* chore(playwright.yml): rename artifact name from 'screenshot' to 'login-screenshot'
feat(LoginForm.tsx): add data-testid attribute to login button
fix(authenticate.ts): change screenshot name to 'login-screenshot.png' and conditionally take screenshot only in CI environment

* chore(playwright.yml): add CI environment variable and set it to true

* chore(playwright.yml): update Playwright installation command
chore(playwright.config.ts): update storageState path to use process.cwd()

* fix(playwright.yml): update node version to 18 in setup-node action
fix(playwright.yml): update actions/cache to v3 in Cache Node.js modules step
fix(playwright.yml): update actions/cache to v3 in Cache Playwright installations step
fix(authenticate.ts): change login button click to press 'Enter' on password input

* chore(playwright.yml): update E2E_USER_EMAIL and E2E_USER_PASSWORD values for testing purposes
chore(authenticate.ts): add console.dir to log user object for debugging

* chore(playwright.yml): add step to upload storageState artifact

The storageState artifact is now uploaded as part of the workflow. This artifact contains the state of the storage used during the end-to-end tests. It will be retained for 2 days.

* chore(playwright.yml): comment out upload screenshot step
chore(playwright.config.ts): change NODE_ENV to development
chore(authenticate.ts): comment out screenshot related code

* chore(playwright.config.ts): add SESSION_EXPIRY environment variable with value 86400000

* chore(playwright.yml): update environment variables in Playwright workflow
fix(General.tsx): add data-testid attributes to clear conversations buttons
test(messages.spec.ts): add setup and teardown steps for clearing conversations before and after tests

* fix(messages.spec.ts): fix clearing conversations before and after message tests
feat(messages.spec.ts): add beforeEach and afterEach hooks to create and close new page for each test

* chore: remove storageStage upload artifact

.github/playwright.yml

@@ -1,62 +0,0 @@
-name: Playwright Tests
-on:
-  push:
-    branches: [feat/playwright-jest-cicd]
-  pull_request:
-    branches: [feat/playwright-jest-cicd]
-jobs:
-  tests_e2e:
-    name: Run Playwright tests
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    env:
-      #   BINGAI_TOKEN: ${{ secrets.BINGAI_TOKEN }}
-      #   CHATGPT_TOKEN: ${{ secrets.CHATGPT_TOKEN }}
-      MONGO_URI: ${{ secrets.MONGO_URI }}
-      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
-      E2E_USER_EMAIL: ${{ secrets.E2E_USER_EMAIL }}
-      E2E_USER_PASSWORD: ${{ secrets.E2E_USER_PASSWORD }}
-      JWT_SECRET: ${{ secrets.JWT_SECRET }}
-      CREDS_KEY: ${{ secrets.CREDS_KEY }}
-      CREDS_IV: ${{ secrets.CREDS_IV }}
-      # NODE_ENV: ${{ vars.NODE_ENV }}
-      DOMAIN_CLIENT: ${{ vars.DOMAIN_CLIENT }}
-      DOMAIN_SERVER: ${{ vars.DOMAIN_SERVER }}
-    # PALM_KEY: ${{ secrets.PALM_KEY }}
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          cache: 'npm'
-
-      - name: Install global dependencies
-        run: npm ci --ignore-scripts
-
-      - name: Install API dependencies
-        working-directory: ./api
-        run: npm ci --ignore-scripts
-
-      - name: Install Client dependencies
-        working-directory: ./client
-        run: npm ci --ignore-scripts
-
-      - name: Build Client
-        run: cd client && npm run build:ci
-
-      - name: Install Playwright Browsers
-        run: npx playwright install --with-deps && npm install -D @playwright/test
-
-      - name: Start server
-        run: |
-          npm run backend & sleep 10
-
-      - name: Run Playwright tests
-        run: npx playwright test --config=e2e/playwright.config.ts
-
-      - uses: actions/upload-artifact@v3
-        if: always()
-        with:
-          name: playwright-report
-          path: e2e/playwright-report/
-          retention-days: 30

.github/wip-playwright.yml

@@ -1,28 +0,0 @@
-name: Playwright Tests
-on:
-  push:
-    branches: [ main, master ]
-  pull_request:
-    branches: [ main, master ]
-jobs:
-  tests_e2e:
-    name: Run end-to-end tests
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
-      with:
-        node-version: 18
-    - name: Install dependencies
-      run: npm ci
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npx playwright test
-    - uses: actions/upload-artifact@v3
-      if: always()
-      with:
-        name: playwright-report
-        path: e2e/playwright-report/
-        retention-days: 30

.github/workflows/backend-review.yml

@@ -1,15 +1,17 @@
 name: Backend Unit Tests
 on:
-  push:
-    branches:
-      - main
-      - dev
-      - release/*
+  # push:
+  #   branches:
+  #     - main
+  #     - dev
+  #     - release/*
   pull_request:
     branches:
       - main
       - dev
       - release/*
+    paths:
+      - 'api/**'
 jobs:
   tests_Backend:
     name: Run Backend unit tests

.github/workflows/frontend-review.yml

@@ -1,16 +1,19 @@
 #github action to run unit tests for frontend with jest
 name: Frontend Unit Tests
 on:
-  push:
-    branches: 
-      - main
-      - dev
-      - release/*
+  # push:
+  #   branches: 
+  #     - main
+  #     - dev
+  #     - release/*
   pull_request:
     branches: 
       - main
       - dev
       - release/*
+    paths:
+      - 'client/**'
+      - 'packages/**'
 jobs:
   tests_frontend:
     name: Run frontend unit tests

.github/workflows/playwright.yml

@@ -0,0 +1,81 @@
+name: Playwright Tests
+on:
+  pull_request:
+    branches: 
+      - main
+      - dev
+      - release/*
+    paths:
+      - 'api/**'
+      - 'client/**'
+      - 'packages/**'
+      - 'e2e/**'
+jobs:
+  tests_e2e:
+    name: Run Playwright tests
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    env:
+      NODE_ENV: ci
+      CI: true
+      SEARCH: false
+      BINGAI_TOKEN: user_provided
+      CHATGPT_TOKEN: user_provided
+      MONGO_URI: ${{ secrets.MONGO_URI }}
+      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      E2E_USER_EMAIL: ${{ secrets.E2E_USER_EMAIL }}
+      E2E_USER_PASSWORD: ${{ secrets.E2E_USER_PASSWORD }}
+      JWT_SECRET: ${{ secrets.JWT_SECRET }}
+      CREDS_KEY: ${{ secrets.CREDS_KEY }}
+      CREDS_IV: ${{ secrets.CREDS_IV }}
+      DOMAIN_CLIENT: ${{ secrets.DOMAIN_CLIENT }}
+      DOMAIN_SERVER: ${{ secrets.DOMAIN_SERVER }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Cache Node.js modules
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install global dependencies
+        run: npm ci
+
+      - name: Remove sharp dependency
+        run: rm -rf node_modules/sharp
+
+      - name: Install sharp with linux dependencies
+        run: cd api && SHARP_IGNORE_GLOBAL_LIBVIPS=1 npm install --arch=x64 --platform=linux --libc=glibc sharp
+
+      - name: Build Client
+        run: npm run frontend
+
+      - name: Cache Playwright installations
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/ms-playwright/
+          key: ${{ runner.os }}-pw-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-pw-
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium && npm install -D @playwright/test@latest
+
+      - name: Run Playwright tests
+        run: npm run e2e:ci
+
+      - name: Upload playwright report
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: e2e/playwright-report/
+          retention-days: 30
+