From 5e22cbfbdde745eeb378ef87e21f15116985e9e7 Mon Sep 17 00:00:00 2001
From: Joel Wetzell <git@jwetzell.com>
Date: Mon, 18 May 2026 18:24:16 -0500
Subject: [PATCH] work on e2e testability of things

---
 e2e/modules.spec.ts                           | 18 +++++++++++++++---
 e2e/routes.spec.ts                            | 19 +++++++++++++++++++
 .../components/module-list/module-list.html   |  3 +++
 src/app/components/module-list/module-list.ts |  2 ++
 src/app/components/module/module.html         |  2 ++
 src/app/components/route-list/route-list.html |  3 +++
 src/app/components/route-list/route-list.ts   |  2 ++
 src/app/components/route/route.html           |  2 ++
 8 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 e2e/routes.spec.ts

diff --git a/e2e/modules.spec.ts b/e2e/modules.spec.ts
index 64581fe..16644d6 100644
--- a/e2e/modules.spec.ts
+++ b/e2e/modules.spec.ts
@@ -1,8 +1,20 @@
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 test('add module', async ({ page }) => {
   await page.goto('/');
-  await page.locator('app-module-list').getByText('add').click();
+  await page.getByRole('button', { name: 'Add Module' }).click();
   await page.getByRole('menuitem', { name: 'HTTP Server' }).click();
-  // TODO(jwetzell): test that the module gets added
+  const module = page.locator('#modules\\.0');
+  await expect(module).toBeVisible();
+  await expect(module).toContainText('HTTP Server');
+});
+
+test('remove module', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: 'Add Module' }).click();
+  await page.getByRole('menuitem', { name: 'HTTP Server' }).click();
+  const module = page.locator('#modules\\.0');
+  await expect(module).toBeVisible();
+  await module.getByRole('button', { name: 'Delete Module' }).click();
+  await expect(module).not.toBeVisible();
 });
diff --git a/e2e/routes.spec.ts b/e2e/routes.spec.ts
new file mode 100644
index 0000000..d944e8c
--- /dev/null
+++ b/e2e/routes.spec.ts
@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test';
+
+test('add route', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: 'Add Route' }).click();
+  await page.getByRole('menuitem', { name: 'HTTP Server' }).click();
+  const route = page.locator('#routes\\.0');
+  await expect(route).toBeVisible();
+  await expect(route).toContainText('Route 0');
+});
+
+test('remove route', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: 'Add Route' }).click();
+  const route = page.locator('#routes\\.0');
+  await expect(route).toBeVisible();
+  await route.getByRole('button', { name: 'Delete Route' }).click();
+  await expect(route).not.toBeVisible();
+});
diff --git a/src/app/components/module-list/module-list.html b/src/app/components/module-list/module-list.html
index 0d740af..4d8516a 100644
--- a/src/app/components/module-list/module-list.html
+++ b/src/app/components/module-list/module-list.html
@@ -5,6 +5,8 @@
         matTooltip="Add Module"
         class="flex items-center justify-center w-10 h-10 bg-transparent hover:bg-gray-700 hover:cursor-pointer text-blue-400"
         [matMenuTriggerFor]="addModuleMenu"
+        role="button"
+        aria-label="Add Module"
       >
         <mat-icon>add</mat-icon>
       </div>
@@ -27,6 +29,7 @@
     @for (module of modules(); track module.id; let i = $index) {
       <div class="m-2" cdkDrag>
         <app-module
+          [id]="listService.pathToId(`modules/${i}`)"
           [path]="`modules/${i}`"
           [module]="module"
           (updated)="moduleUpdated(i, $event)"
diff --git a/src/app/components/module-list/module-list.ts b/src/app/components/module-list/module-list.ts
index c8cd391..7038726 100644
--- a/src/app/components/module-list/module-list.ts
+++ b/src/app/components/module-list/module-list.ts
@@ -9,6 +9,7 @@ import { cloneDeep } from 'lodash-es';
 import { ModuleConfig } from '../../models/config';
 import { SchemaService } from '../../services/schema';
 import { ModuleComponent } from '../module/module';
+import { ListsService } from '../../services/lists';
 
 @Component({
   selector: 'app-module-list',
@@ -28,6 +29,7 @@ export class ModuleListComponent {
   modules = input<ModuleConfig[]>();
   updated = output<ModuleConfig[]>();
   public schemaService = inject(SchemaService);
+  public listService = inject(ListsService);
 
   private snackBar = inject(MatSnackBar);
 
diff --git a/src/app/components/module/module.html b/src/app/components/module/module.html
index 68a135a..f49ed54 100644
--- a/src/app/components/module/module.html
+++ b/src/app/components/module/module.html
@@ -28,6 +28,8 @@
       <div
         class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer"
         (click)="delete.emit()"
+        role="button"
+        aria-label="Delete Module"
       >
         <mat-icon class="text-red-500!">close</mat-icon>
       </div>
diff --git a/src/app/components/route-list/route-list.html b/src/app/components/route-list/route-list.html
index 565d87f..6491d65 100644
--- a/src/app/components/route-list/route-list.html
+++ b/src/app/components/route-list/route-list.html
@@ -4,6 +4,8 @@
       matTooltip="Add Route"
       class="flex items-center justify-center w-10 h-10 bg-transparent hover:bg-gray-700 hover:cursor-pointer text-blue-400"
       (click)="addRoute()"
+      role="button"
+      aria-label="Add Route"
     >
       <mat-icon>add</mat-icon>
     </div>
@@ -18,6 +20,7 @@
     @for (route of routes(); track route; let i = $index) {
       <div class="m-2" cdkDrag>
         <app-route
+          [id]="listService.pathToId(`routes/${i}`)"
           [path]="`routes/${i}`"
           (updated)="routeUpdated(i, $event)"
           [route]="route"
diff --git a/src/app/components/route-list/route-list.ts b/src/app/components/route-list/route-list.ts
index 738386b..53014b3 100644
--- a/src/app/components/route-list/route-list.ts
+++ b/src/app/components/route-list/route-list.ts
@@ -16,6 +16,7 @@ import { cloneDeep } from 'lodash-es';
 import { RouteConfig } from '../../models/config';
 import { SchemaService } from '../../services/schema';
 import { RouteComponent } from '../route/route';
+import { ListsService } from '../../services/lists';
 
 @Component({
   selector: 'app-route-list',
@@ -37,6 +38,7 @@ export class RouteListComponent {
   moduleIds = input<string[]>();
   updated = output<RouteConfig[]>();
   public schemaService = inject(SchemaService);
+  public listService = inject(ListsService);
 
   private snackBar = inject(MatSnackBar);
 
diff --git a/src/app/components/route/route.html b/src/app/components/route/route.html
index 68c01ce..2cea63c 100644
--- a/src/app/components/route/route.html
+++ b/src/app/components/route/route.html
@@ -23,6 +23,8 @@
       <div
         class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer"
         (click)="delete.emit()"
+        role="button"
+        aria-label="Delete Route"
       >
         <mat-icon class="text-red-500!">close</mat-icon>
       </div>