From c6f5d5d65cf4fdb4bafdf5a525e7b8ce707a809d Mon Sep 17 00:00:00 2001 From: Danny Avila <110412045+danny-avila@users.noreply.github.com> Date: Tue, 8 Aug 2023 11:17:15 -0400 Subject: [PATCH] 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 | 62 -------------- .github/wip-playwright.yml | 28 ------- .github/workflows/backend-review.yml | 12 +-- .github/workflows/frontend-review.yml | 13 +-- .github/workflows/playwright.yml | 81 +++++++++++++++++++ .gitignore | 1 + client/src/components/Auth/LoginForm.tsx | 1 + client/src/components/Auth/Registration.tsx | 1 + .../Auth/__tests__/Registration.spec.tsx | 54 +++++++------ .../{EndpointItem.jsx => EndpointItem.tsx} | 15 +++- .../Input/EndpointMenu/EndpointMenu.jsx | 1 + .../components/Nav/SettingsTabs/General.tsx | 12 ++- client/src/components/svg/ConvoIcon.tsx | 1 + client/src/components/ui/Landing.tsx | 1 + config/install.js | 6 ++ e2e/playwright.config.local.ts | 10 ++- e2e/playwright.config.ts | 16 +++- e2e/setup/authenticate.ts | 12 ++- .../{landing.spec.js => landing.spec.ts} | 6 +- e2e/specs/login.spec.js | 9 --- .../{messages.spec.js => messages.spec.ts} | 55 ++++++++++--- e2e/specs/{nav.spec.js => nav.spec.ts} | 6 +- e2e/specs/{popup.spec.js => popup.spec.ts} | 2 +- .../{settings.spec.js => settings.spec.ts} | 36 +++++++-- 24 files changed, 272 insertions(+), 169 deletions(-) delete mode 100644 .github/playwright.yml delete mode 100644 .github/wip-playwright.yml create mode 100644 .github/workflows/playwright.yml rename client/src/components/Input/EndpointMenu/{EndpointItem.jsx => EndpointItem.tsx} (85%) rename e2e/specs/{landing.spec.js => landing.spec.ts} (88%) delete mode 100644 e2e/specs/login.spec.js rename e2e/specs/{messages.spec.js => messages.spec.ts} (54%) rename e2e/specs/{nav.spec.js => nav.spec.ts} (92%) rename e2e/specs/{popup.spec.js => popup.spec.ts} (86%) rename e2e/specs/{settings.spec.js => settings.spec.ts} (55%) diff --git a/.github/playwright.yml b/.github/playwright.yml deleted file mode 100644 index 164051b0a..000000000 --- a/.github/playwright.yml +++ /dev/null @@ -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 diff --git a/.github/wip-playwright.yml b/.github/wip-playwright.yml deleted file mode 100644 index 29c87ca95..000000000 --- a/.github/wip-playwright.yml +++ /dev/null @@ -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 diff --git a/.github/workflows/backend-review.yml b/.github/workflows/backend-review.yml index 3e9afa2e0..7c79cadce 100644 --- a/.github/workflows/backend-review.yml +++ b/.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 diff --git a/.github/workflows/frontend-review.yml b/.github/workflows/frontend-review.yml index 1401af97f..a26324fb0 100644 --- a/.github/workflows/frontend-review.yml +++ b/.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 diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 000000000..a822d6307 --- /dev/null +++ b/.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 + diff --git a/.gitignore b/.gitignore index cedb6ac0a..c294b25b4 100644 --- a/.gitignore +++ b/.gitignore @@ -50,6 +50,7 @@ types/ # Environment .npmrc .env* +my.secrets !**/.env.example !**/.env.test.example cache.json diff --git a/client/src/components/Auth/LoginForm.tsx b/client/src/components/Auth/LoginForm.tsx index 30c76dcf2..c205ece32 100644 --- a/client/src/components/Auth/LoginForm.tsx +++ b/client/src/components/Auth/LoginForm.tsx @@ -107,6 +107,7 @@ function LoginForm({ onSubmit }: TLoginFormProps) {