feat: vitest and playwright setup

* chore: update test dependencies

* chore: update testing to use tsconfig

* chore: compiling test

* chore: fix component testing

Temp patch for this to get it working, will need some redesign to make something scalable for the future and other components that we are wanting to test.

* chore: readd polyfill script to tsconfig

* chore: add canvas package

* chore: add code coverage support

* chore: initial e2e test setup

* chore: remove vitest browser mode test

* fix: ngx-translate updates

* Merge branch 'test' into tyler/vitest

* feat: playwright github action

* chore(deps): update package-lock

* feat: authenticated testing framework

* fix: auth action pathing

* fix: action pathing

* fix: directory pathing

* fix: directory structure first

* fix: use base64 creds for better parsing

* feat: some example tests

* feat: add ng test github action

* chore: cleanup old screenshots

* chore: remove test branch from action, set permissions explicitly

* fix: explicit product scene list click

* fix: specify timezoneId for tests

* fix: bypassCSP for map based interaction setup

* feat: aoi parsing test

This shows an example of how to get info form a material input. The automated tool doesn't work for them out of the box.

* chore: codefactor fix

Author: tylercchase

.github/workflows/e2etest.yml

@@ -0,0 +1,39 @@
+name: Playwright Tests
+on:
+  push:
+    branches:
+      - test
+  pull_request:
+    branches:
+      - test
+      - prod
+permissions:
+  contents: read
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    environment: playwright
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm ci
+      - name: Setup credentials
+        run: mkdir -p playwright/.auth
+      - name: Import Credentials
+        run: echo "${{ secrets.TEST_ACCOUNT_CREDS }}" | base64 --decode > playwright/.auth/creds.json
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npm run e2e
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.github/workflows/unit-test.yml

@@ -0,0 +1,18 @@
+name: Unit Tests
+on:
+  push:
+permissions:
+  contents: read
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Unit tests
+        run: npm run test -- --watch=false

.gitignore

@@ -47,3 +47,14 @@ local-serve.sh
 CLAUDE.md
 TRANSLATIONS_SCRATCH.md
 docs/
+
+# Playwright
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+# Playwright
+/test-results/
+/playwright-report/
+/playwright/.cache/
+playwright/

angular.json

@@ -124,25 +124,14 @@
           }
         },
         "test": {
-          "builder": "@angular/build:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
-            "karmaConfig": "src/karma.conf.js",
-            "styles": [
-              "src/styles.scss"
+            "buildTarget": "search-ui:build:local",
+            "tsConfig": "tsconfig.spec.json",
+            "coverageExclude": [
+              "src/app/models"
             ],
-            "stylePreprocessorOptions": {
-              "includePaths": [
-                "src/styles"
-              ]
-            },
-            "scripts": [],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ]
+            "runnerConfig": true
           }
         },
         "lint": {
@@ -153,6 +142,17 @@
               "src/**/*.html"
             ]
           }
+        },
+        "e2e": {
+          "builder": "playwright-ng-schematics:playwright",
+          "options": {
+            "devServerTarget": "search-ui:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "search-ui:serve:production"
+            }
+          }
         }
       }
     }

e2e/.gitlab-ci.yml

@@ -0,0 +1,28 @@
+import { expect, test as setup } from '@playwright/test';
+import path from 'path';
+import fs from 'fs';
+
+// import { username, password } from '../playwright/.auth/creds.json';
+const authFile = path.join(__dirname, '../playwright/.auth/user.json');
+const credsFile = path.join(__dirname, '../playwright/.auth/creds.json');
+setup('authenticate', async ({ page }) => {
+  let userData = {};
+  try {
+    const data = fs.readFileSync(credsFile, 'utf8');
+    userData = JSON.parse(data);
+  } catch (_e) {
+    console.error('Error reading or parsing auth JSON file.');
+    return;
+  }
+  await page.goto('https://search.asf.alaska.edu');
+  const popupPromise = page.waitForEvent('popup');
+
+  await page.getByRole('button', { name: 'Sign In' }).click();
+  const popup = await popupPromise;
+  await popup.getByLabel('username').fill(userData['username']);
+  await popup.getByLabel('password').fill(userData['password']);
+  await popup.getByRole('button', { name: 'Log in' }).click();
+  await expect(page.getByRole('button', { name: 'Sign In' })).toHaveCount(0);
+
+  await page.context().storageState({ path: authFile });
+});

e2e/=3.1.1

@@ -0,0 +1,30 @@
+import test, { expect } from '@playwright/test';
+
+test('Area of interest should parse polygon coordinate strings', async ({
+  page,
+}) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: 'Filters', exact: true }).click();
+  await page
+    .getByRole('region', { name: 'Area of Interest Options' })
+    .getByLabel('Area of Interest • WKT')
+    .click();
+  await page
+    .getByRole('region', { name: 'Area of Interest Options' })
+    .getByLabel('Area of Interest • WKT')
+    .fill(
+      '-53.26,64.81,-48.1,60.33,-42.58,59.93,-40.94,63.63,-37.18,65.91,-31.29,67.17,-26.02,68.68,- 21.97,70.57,-18.28,75.06,-17.05,77.04,-19.78,78.79,-10.72,81.55,-20.83,82.4,-25.44,83.13,-31.82,83.63,- 43.95,83.23,-61.17,81.84,-66.58,80.39,-66.2,79.47,-74.09,78.37,-69.26,76.12,-61.08,76.1,-54.71,72.83,- 55.04,71.55,-53.26,64.81',
+    );
+  await page
+    .locator('#mat-button-toggle-6-button')
+    .getByRole('button', { name: 'SEARCH' })
+    .click();
+  await page.getByRole('button', { name: 'Filters', exact: true }).click();
+  const value = await page
+    .getByLabel('Area of Interest Options')
+    .getByLabel('Area of Interest • WKT')
+    .inputValue();
+  await expect(value).toContain(
+    'POLYGON((-53.26 64.81,-48.1 60.33,-42.58 59.93,-40.94 63.63,-37.18 65.91,-31.29 67.17,-26.02 68.68,-21.97 70.57,-18.28 75.06,-17.05 77.04,-19.78 78.79,-10.72 81.55,-20.83 82.4,-25.44 83.13,-31.82 83.63,-43.95 83.23,-61.17 81.84,-66.58 80.39,-66.2 79.47,-74.09 78.37,-69.26 76.12,-61.08 76.1,-54.71 72.83,-55.04 71.55,-53.26 64.81))',
+  );
+});

e2e/=3.3

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+// made using the playwright test generator
+// loads up a browser and listens to what you click on
+// https://playwright.dev/docs/codegen
+test('test', async ({ page }) => {
+  await page.goto('/');
+
+  await page.getByRole('button', { name: 'Sentinel-' }).click();
+  await page
+    .getByRole('menuitem', { name: 'ALOS AVNIR-2 Advanced Visible' })
+    .click();
+  await page
+    .locator('#mat-button-toggle-8-button')
+    .getByRole('button', { name: 'SEARCH' })
+    .click();
+  await page.getByRole('button', { name: 'ALAV2A279162270 April 21,' }).click();
+  await expect(page.locator('mat-card-title')).toContainText('ALAV2A279162270');
+});