work on e2e testability of things

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();
 });

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();
+});

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)"

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);
 

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>

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"

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);
 

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>