Configure E2E testing package

e2e/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

e2e/.gitignore

@@ -0,0 +1,2 @@
+.env
+test-results/

e2e/README.md

@@ -0,0 +1,71 @@
+# End-to-End Testing
+
+- [Writing Tests](#writing-tests)
+- [Running Tests](#running-tests)
+- [Local Setup](#local-setup)
+  - [Installation](#installation)
+  - [Configure secrets](#configure-secrets)
+
+E2E test automation is implemented using the [Playwright](https://playwright.dev/).
+
+> [!WARNING]
+> When writing tests, make sure they do not contain any credentials _before_ committing to the repo.
+
+## Writing Tests
+
+- Write tests for a given project, i.e., tests for the portal go in `/e2e/tests/portal`.
+
+## Running Tests
+
+To run tests:
+
+```bash
+$ npx playwright test
+```
+
+To run tests just for a specific project:
+
+```bash
+$ npx playwright test --project=[portal]
+```
+
+For now, `portal` is the only project.
+
+To run headed:
+
+```bash
+$ npx playwright test --headed
+```
+
+To run in UI mode:
+
+```bash
+$ npx playwright test --ui
+```
+
+To show a report:
+
+```bash
+$ npx playwright show-report REPORT_DIR
+```
+
+## Local Setup
+
+### Installation
+
+Install package:
+
+```bash
+$ npm i
+```
+
+Install browsers:
+
+```bash
+$ npx playwright install
+```
+
+### Configure secrets
+
+1. Copy `template.env` --> `.env`
+2. Fill in details

portal-frontend/test/package.json → e2e/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "alcs",
-  "version": "1.0.0",
+  "name": "alcs-e2e-test",
+  "version": "0.1.0",
   "description": "[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](LICENSE) ![Lifecycle:Experimental](https://img.shields.io/badge/Lifecycle-Experimental-339999) [![codecov](https://img.shields.io/codeclimate/coverage/bcgov/alcs)](https://codeclimate.com/github/bcgov/alcs)",
   "main": "index.js",
   "directories": {
@@ -18,7 +18,9 @@
     "url": "https://github.com/bcgov/alcs/issues"
   },
   "homepage": "https://github.com/bcgov/alcs#readme",
-  "devDependencies": {
-    "@playwright/test": "^1.32.0"
+  "dependencies": {
+    "@playwright/test": "^1.32.0",
+    "@types/node": "^20.11.24",
+    "dotenv": "^16.4.5"
   }
 }

portal-frontend/test/playwright.config.ts → e2e/playwright.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, devices } from '@playwright/test';
+import 'dotenv/config';
 
 /**
  * Read environment variables from file.
@@ -35,16 +36,27 @@ export default defineConfig({
     {
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
+      testIgnore: '**',
     },
 
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
+      testIgnore: '**',
     },
 
     {
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
+      testIgnore: '**',
+    },
+    {
+      name: 'portal',
+      use: {
+        baseURL: process.env.PORTAL_BASE_URL,
+      },
+      dependencies: ['chromium'],
+      testMatch: 'portal/**/*.spec.ts',
     },
 
     /* Test against mobile viewports. */

e2e/template.env

@@ -0,0 +1,3 @@
+PORTAL_BASE_URL=
+BCEID_BASIC_USERNAME=
+BCEID_BASIC_PASSWORD=

e2e/tests/fixtures.ts

@@ -0,0 +1,30 @@
+import { test as base, Page } from '@playwright/test';
+export { expect } from '@playwright/test';
+
+export enum UserPrefix {
+  BceidBasic = 'BCEID_BASIC',
+}
+
+interface FixtureOptions {
+  userPrefix: string;
+}
+
+interface Fixtures {
+  inboxLoggedIn: Page;
+}
+
+export const test = base.extend<FixtureOptions & Fixtures>({
+  userPrefix: UserPrefix.BceidBasic,
+  inboxLoggedIn: async ({ page, userPrefix }, use) => {
+    await page.goto('/');
+    await page.getByRole('button', { name: 'Portal Login' }).click();
+    await page
+      .locator('#user')
+      .fill(process.env[userPrefix + '_USERNAME'] ?? '');
+    await page
+      .getByLabel('Password')
+      .fill(process.env[userPrefix + '_PASSWORD'] ?? '');
+    await page.getByRole('button', { name: /continue/i }).click();
+    await use(page);
+  },
+});

e2e/tests/portal/login.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect, UserPrefix } from '../fixtures';
+
+test.use({ userPrefix: UserPrefix.BceidBasic });
+
+test('test', async ({ inboxLoggedIn }) => {
+  await expect(
+    inboxLoggedIn.getByRole('heading', { name: 'Portal Inbox' })
+  ).toBeVisible();
+});