work on e2e testability of things

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>