Add Playwright tests for Admin application and update build configurations

Author: Lukecsharpwalker

angular.json

@@ -171,6 +171,9 @@
             },
             "development": {
               "buildTarget": "web:build:development"
+            },
+            "local": {
+              "buildTarget": "web:build:development"
             }
           },
           "defaultConfiguration": "development"

e2e/admin/admin.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Admin Application', () => {
+  test('admin app loads', async ({ page }) => {
+    await page.goto('/');
+    await expect(page).toHaveTitle(/Admin/);
+  });
+
+  test('displays admin dashboard', async ({ page }) => {
+    await page.goto('/');
+    await expect(page.getByText('Admin')).toBeVisible();
+  });
+});

e2e/example.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test';
-import { acceptCookies } from './helpers/cookie-consent.helper';
-import { waitForAngularToLoad, waitForApiCall } from './helpers/debug.helper';
+import { acceptCookies } from '../helpers/cookie-consent.helper';
+import { waitForAngularToLoad, waitForApiCall } from '../helpers/debug.helper';
 
 test.describe('Tags Display and API', () => {
   test('should display tags and verify API call', async ({ page }) => {
@@ -11,13 +11,9 @@ test.describe('Tags Display and API', () => {
       status?: number;
     }> = [];
 
-    page.on('request', (request) => {
+    page.on('request', request => {
       const url = request.url();
-      if (
-        url.includes('/rest/v1/tags') ||
-        url.includes('supabase') ||
-        url.includes('tag')
-      ) {
+      if (url.includes('/rest/v1/tags') || url.includes('supabase') || url.includes('tag')) {
         apiRequests.push({
           url,
           method: request.method(),
@@ -26,31 +22,29 @@ test.describe('Tags Display and API', () => {
       }
     });
 
-    page.on('response', (response) => {
+    page.on('response', response => {
       const url = response.url();
       if (url.includes('/rest/v1/tags')) {
-        const existingRequest = apiRequests.find((req) => req.url === url);
+        const existingRequest = apiRequests.find(req => req.url === url);
         if (existingRequest) {
           existingRequest.status = response.status();
         }
       }
     });
 
     await page.goto('/', { waitUntil: 'networkidle' });
-    await acceptCookies(page);
-    await waitForAngularToLoad(page, 500);
-    await page.waitForSelector('[data-testid="tags-container"]', {
-      timeout: 500,
-    });
+    // await acceptCookies(page);
+    // await waitForAngularToLoad(page, 50);
+    // await page.getByTestId('tags-container')
 
     try {
-      await waitForApiCall(page, '/rest/v1/tags', 300);
+      await waitForApiCall(page, '/rest/v1/tags', 30);
     } catch (error) {
       // Continue test even if API call detection fails
     }
 
-    await page.waitForTimeout(1000);
-    await page.waitForSelector('[data-testid="tag-item"]', { timeout: 500 });
+    // await page.waitForTimeout(100);
+    // await page.waitForSelector('[data-testid="tag-item"]', { timeout: 500 });
 
     const tagsContainer = page.locator('[data-testid="tags-container"]');
     await expect(tagsContainer).toBeVisible();
@@ -62,9 +56,7 @@ test.describe('Tags Display and API', () => {
     ];
 
     for (const tag of expectedTags) {
-      const tagItem = page.locator(
-        `[data-testid="tag-item"][data-tag-name="${tag.name}"]`,
-      );
+      const tagItem = page.locator(`[data-testid="tag-item"][data-tag-name="${tag.name}"]`);
       await expect(tagItem).toBeVisible();
 
       const tagName = tagItem.locator('[data-testid="tag-name"]');

e2e/tags.spec.ts renamed to e2e/web/tags.spec.ts

@@ -24,8 +24,11 @@
     "users:passwords": "scripts/set-passwords.sh",
     "routes:generate": "node scripts/generate-routes.js",
     "routes:generate:ts": "tsx scripts/generate-routes.ts",
-    "e2e": "ng e2e web",
-    "e2e:local": "ng e2e web -c local",
+    "e2e": "playwright test",
+    "e2e:web": "playwright test --project=web",
+    "e2e:web:local": "playwright test --project=web --project=local",
+    "e2e:admin": "playwright test --project=admin",
+    "e2e:admin:local": "playwright test --project=admin",
     "lint": "npm run lint:projects",
     "lint:fix": "npm run lint:projects -- --fix",
     "lint:all": "ng lint admin && ng lint web && ng lint code-samples-mfe",

package.json

@@ -32,23 +32,45 @@ export default defineConfig({
 
   /* Configure projects for major browsers */
   projects: [
+    {
+      name: 'web',
+      testDir: './e2e/web',
+      use: {
+        ...devices['Desktop Chrome'],
+        baseURL: process.env['PLAYWRIGHT_TEST_BASE_URL'] ?? 'http://localhost:4200',
+      },
+    },
+
+    {
+      name: 'admin',
+      testDir: './e2e/admin',
+      use: {
+        ...devices['Desktop Chrome'],
+        baseURL: process.env['PLAYWRIGHT_TEST_BASE_URL'] ?? 'http://localhost:4201',
+      },
+    },
+
     {
       name: 'chromium',
+      testDir: './e2e/web',
       use: { ...devices['Desktop Chrome'] },
     },
 
     {
       name: 'firefox',
+      testDir: './e2e/web',
       use: { ...devices['Desktop Firefox'] },
     },
 
     {
       name: 'webkit',
+      testDir: './e2e/web',
       use: { ...devices['Desktop Safari'] },
     },
 
     {
       name: 'local',
+      testDir: './e2e/web',
       use: {
         ...devices['Desktop Chrome'],
         baseURL: 'http://localhost:4200',