test: setup and add e2e tests using playwright (#3067)

* ignore .next in jest

* mute console error from jest results

* rename app_env to nbs_auth

docker compose --env-file .env.local --profile "*" up to test with different configs

* Remove app env check around s3 client

* add collection variables for env groups

* fix typos in .env files

* create single azure-storage image that contains both azurite and azure cli

* add additional chaining to run specific collections

* fix local-dev command to use collection

* update create-seed-data to use different configs depending on metadata

* rename schemas

* update .env.sample to include collection

* remove azure-storage-init from orchestration

* update orchestration docker compose to add collection

* add metadata db schema in the env variable

* remove undefined values

* remove nbs_auth value

* Remove redundant variables

* change to aws non integrated and add timeout

* add docker ignore

* add more to docker ignore

* Comment all from .env

* fix tests that were relying on .env file

* make metadata variables optional

* pull out saveFhirMetadata into it's own function

* delete .env

* Use PersistenceResponse instead of Nextjs response

* console log error messages

* Do not close pool when done with mssql

https://www.npmjs.com/package/mssql#advanced-pool-management:~:text=Also%20notice%20that,of%20the%20script.

* increase sqlserver timeout to 30 s

* don't return anything from save ecr data query

* be more specific with env variable names

* remove return for ecr data

* update .env.sample variables

* remove .env

* Remove app_env from dockerfile

* make metadata env variable optional

* fix tests without .env

* move getDb from top level to be inside methods

* add dockerignore

* Remove NEXT_PUBLIC_BASEPATH since it is determined at build time anyways

* fix first batch of seed script conflicts

* use rewrite instead of redirect to keep url

* set pool min to 1

* fix middleware test after changes to middleware rewrite to error page

* replace dotenvx with next runtime env and instrumentation

* remove console logs

* update collection in orchestration

* change docker compose collection to default to sql server non integrated

* Rename PersistenceResponse to SaveResponse

* Remove build from convert-seed-data

* remove useless console.error logs

* update instrumentation tests

* fix middleware

* permanently set base path in ecr-viewer

* Rename middleware to be a .ts file

* replace a tags with Next's Link tag

* remove title from Header link

* retype base_path to be a string

* fix metrics test

* update header snapshot test

* address middleware tests

* add back button to retrieval failed

* remove unused rewrite in next config

* update matcher

* Prevent access to /api/fhir-data

* [pre-commit.ci] auto fixes from pre-commit hooks

* fix url in readme

* remove accident commited next-runtime-env

* [pre-commit.ci] auto fixes from pre-commit hooks

* use next-runtime-env to access NEXT_PUBLIC_NON_INTEGRATED

* [pre-commit.ci] auto fixes from pre-commit hooks

* use proper variable name for middleware test

* simplify clear-local command

* rename collection to CONFIG_NAME

* update design script to handle config variable

* fix package.json

* update lighthouse startup

* add dummy keys to .env.sample

* Filter by conditions in eCR Library (frontend) (#2981)

* First pass, filter conditions functionality

* add select/deselect all functionality

* update some styling, maintain checkbox state when toggling filter button

* styling updates, wip

* checkbox color, add icon, add uswds sprite.svg to assets

* adjust padding to fix checkbox focus ring cut off

* fix icon not displaying by adding static file route

* fix unintentional scrolling bug

* update filter row top border

* wip, add comments, decompose conditions filter to separate const

* fix scrolling bug by adding position-relative

* add snapshot and unit tests

* add JSDocs

* remove css classes and use utilities instead

* update snapshot test

* update select all/deselect all functionality s.t. default is all conditions checked, update tests

* update so that filters reset if clicking off filter before clicking the Apply button, add tests

* update basepath so it works in prod

* update tests

* update styles in diff button states, update icon size, make capitalization consistent

* Remove log

Co-authored-by: Mary McGrath <[email protected]>

* use as form/fieldset, update sync state bug, update tests

* remove manual checkboxing for select all, lets react handle the render

* rework state management, update tests

* code review changes, minor

* query should persist over a reload

* update backend so default (all conditions) would leave out condition param from URL query, add/update tests

* use import for icon

* Update base_path env var name

Co-authored-by: Boban <[email protected]>

* update snapshot test

* re-use resetFilterConditions

* one more nit

* update ecr library height to accommodate fiter bar

* update env var name for base path

---------

Co-authored-by: Mary McGrath <[email protected]>
Co-authored-by: Boban <[email protected]>

* fix base path for filters

* update config name in create-seed-data

* move start transaction in the if statement for saveMetadataToSqlServer

* remove random transaction from conditons api sql server

* move start transaction in the if statement for saveMetadataToSqlServer

* remove random transaction from conditons api sql server

* [pre-commit.ci] auto fixes from pre-commit hooks

* refactor service for condition to simplify logic

* [pre-commit.ci] auto fixes from pre-commit hooks

* update filter test

* update jsdocs

* add nbs pub key to environment variables

* add playwright init and tests

* ignore e2e for jest

* don't skip e2e test

* set working directory for playwright tests

* convert data and start server for e2e tests

* fix test command

* set profile for logs

* debug s3 client performance

* update images

* remove snapshots

* replace snapshots with accessibility tests

* opt into fully parallel tests

* remove test:e2e:ci and snapshot related

* increase timeout for for first test

* delete cypress

* Remove cypress config

* Update .dockerignore to replace 'cypress' with 'e2e'

* Remove Cypress-related scripts and dependencies from package.json

* Revert "debug s3 client performance"

This reverts commit bd080ec.

* Remove unnecessary dependency in e2e-tests workflow

* change base URL in playwright config

* remove cypress from gitignore

* remove makefile

* update server_host to be localhost

* update test:e2e command name

* fix broken tests and reorder them

* remove cypress commands

* rename .yml to .yaml

* remove comments from playwright config

* add testing section for readme

* update playwright config to include webserver

* update the tests to be more clear

* remove extra playwright browser install

* update playwright test command

* actually don't reuse, but remove starting service

* Revert "update server_host to be localhost"

This reverts commit 294a090.

* Delete another cypress folder

* update read me to include assumption around stored data

* Update containers/ecr-viewer/README.md

Co-authored-by: Mary McGrath <[email protected]>

* [pre-commit.ci] auto fixes from pre-commit hooks

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Angela The <[email protected]>
Co-authored-by: Mary McGrath <[email protected]>

.github/workflows/container-ecr-viewer.yaml

@@ -56,52 +56,6 @@ jobs:
           fail_ci_if_error: true
           token: ${{ secrets.CODECOV_TOKEN }}
           flags: ${{ env.CONTAINER }}
-  cypress-e2e-tests:
-    if: false
-    runs-on: ubuntu-latest
-    timeout-minutes: 20
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{env.NODE_VERSION}}
-      - name: Install dependencies
-        working-directory: ./containers/${{env.CONTAINER}} # Navigate to your Node.js app directory
-        run: npm install
-
-      - name: Start ${{env.CONTAINER}}
-        working-directory: ./containers/${{env.CONTAINER}}/cypress
-        run: docker compose --env-file ../.env.test up -d
-
-      - name: Run cypress tests
-        working-directory: ./containers/${{env.CONTAINER}}
-        run: npm run cypress:run
-
-      - name: Archive cypress failures
-        if: always()
-        uses: actions/upload-artifact@v4
-        with:
-          name: cypress-results
-          path: |
-            containers/ecr-viewer/cypress/screenshots/*
-            containers/ecr-viewer/cypress/videos/*
-
-      - name: Get docker logs
-        if: always()
-        working-directory: ./containers/${{env.CONTAINER}}/cypress
-        shell: bash
-        run: |
-          echo "Saving $container logs"
-          docker compose logs --timestamps >& cypress-run.log
-
-      - name: Archive docker logs
-        if: always()
-        uses: actions/upload-artifact@v4
-        with:
-          name: logs
-          path: ./containers/${{env.CONTAINER}}/cypress/cypress-run.log
 
   lighthouse:
     runs-on: ubuntu-latest
@@ -170,3 +124,58 @@ jobs:
       - name: Run seed data conversion
         run: npm run convert-seed-data
         working-directory: ./containers/${{env.CONTAINER}}
+
+  e2e-tests:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{env.NODE_VERSION}}
+
+      - name: Install dependencies
+        working-directory: ./containers/${{env.CONTAINER}}
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Set up env vars
+        working-directory: ./containers/${{env.CONTAINER}}
+        run: npm run setup-local-env
+
+      - name: Run seed data conversion
+        working-directory: ./containers/${{env.CONTAINER}}
+        run: npm run convert-seed-data
+
+      - name: Run Playwright tests
+        working-directory: ./containers/${{env.CONTAINER}}
+        run: npm run test:e2e
+
+      - name: Upload playwright report
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: containers/${{env.CONTAINER}}/playwright-report/
+          retention-days: 30
+
+      - name: Get docker logs
+        if: ${{ !cancelled() }}
+        working-directory: ./containers/${{env.CONTAINER}}/e2e
+        shell: bash
+        run: |
+          echo "Saving $container logs"
+          docker compose --profile "*" logs --timestamps >& e2e-run.log
+
+      - name: Archive docker logs
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: logs
+          path: ./containers/${{env.CONTAINER}}/e2e/e2e-run.log
+          retention-days: 30

containers/ecr-viewer/.dockerignore

@@ -5,6 +5,6 @@ docker-compose.yaml
 Dockerfile
 node_modules
 seed-scripts
-cypress
+e2e
 design-review
 .swc

containers/ecr-viewer/.gitignore

@@ -8,5 +8,7 @@ seed-scripts/baseECR/TN
 seed-scripts/baseECR/KY
 seed-scripts/baseECR/ME
 
-cypress/screenshots
-cypress/videos
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

containers/ecr-viewer/README.md

@@ -80,7 +80,33 @@ Sample eICRs are included in `containers/ecr-viewer/seed-scripts/baseECR/`. If y
 
 ### Developer Commands
 
-Additional commands can be found in [`package.json`](package.json) and are also made available in [`Makefile`](Makefile).
+Additional commands can be found in [`package.json`](package.json).
+
+### Testing
+
+#### Unit Testing
+
+Unit tests utilize Jest as the test runner. [Jest-axe](https://github.com/nickcolley/jest-axe) provides basic accesibility utilities and [React testing library](https://testing-library.com/docs/react-testing-library/intro) provides react utilities.
+Running tests:
+
+- `npm run test` - Run the full suite of unit tests.
+- `npm run test:watch` - Run tests in [watch mode](https://jestjs.io/docs/cli#--watch). Tests will run that only affect changed code. It will rerun whenever a new change is detected.
+
+#### End to End Testing
+
+End to end test utilize the Playwright framerwork.
+Running Tests:
+
+1. `npm run convert-seed-data:build` to save all required eCRs necessary for e2e tests. The tests require all eCRs located in `/seed-scripts/baseECR/LA` have been saved (and no other eCRs).
+2. `npm run test:e2e` to run the tests against http://localhost:3000/ecr-viewer.
+   - If the service isn't available, Playwright is [configured to spin it up](https://playwright.dev/docs/test-webserver).
+   - If you would prefer to spin up the service manually, you can run `npm run local-dev` or `npm run local-docker`.
+
+Other useful playwright tools/commands
+
+- [Playwright VScode extension](https://playwright.dev/docs/getting-started-vscode) - Can be used to record tests, run specific tests, and much more!
+- `npx playwright show-report` - Show the previous test report.
+- `npx playwright codegen` - [Record tests](https://playwright.dev/docs/codegen) using UI.
 
 ## API Documentation