test(devtools): revive cypress tests (#61972)

Previously these tests would run automatically when Angular DevTools lived in another repo. These files have continued to live here but have not been running automatically on each PR.

Now, these test files have been revived to run properly with our changes since the repo merge. This is a first step to reviving our e2e testing.

Next steps include writing cypress tests for new features like Injector Graph, Router tree, signals visualizations, etc.

PR Close #61972

devtools/src/app/demo-app/demo-app.component.html

@@ -2,4 +2,5 @@
 <app-zippy [title]="getTitle()">This is my content</app-zippy>
 <app-heavy></app-heavy>
 <div #elementReference>HTMLElement</div>
+<div *appStructural>Test Structural Directive</div>
 <app-sample-properties></app-sample-properties>

devtools/src/app/demo-app/demo-app.component.ts

@@ -10,11 +10,15 @@ import {
   Component,
   computed,
   CUSTOM_ELEMENTS_SCHEMA,
+  Directive,
   ElementRef,
+  inject,
   input,
   output,
   signal,
+  TemplateRef,
   viewChild,
+  ViewContainerRef,
   ViewEncapsulation,
 } from '@angular/core';
 
@@ -23,13 +27,30 @@ import {HeavyComponent} from './heavy.component';
 import {SamplePropertiesComponent} from './sample-properties.component';
 import {RouterOutlet} from '@angular/router';
 
+// structual directive example
+@Directive({
+  selector: '[appStructural]',
+  host: {
+    '[class.app-structural]': 'true',
+  },
+})
+export class StructuralDirective {
+  templateRef = inject(TemplateRef);
+  viewContainerRef = inject(ViewContainerRef);
+
+  ngOnInit() {
+    // Example of using the structural directive
+    this.viewContainerRef.createEmbeddedView(this.templateRef);
+  }
+}
+
 @Component({
   selector: 'app-demo-component',
   templateUrl: './demo-app.component.html',
   styleUrls: ['./demo-app.component.scss'],
   encapsulation: ViewEncapsulation.None,
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [HeavyComponent, SamplePropertiesComponent, RouterOutlet],
+  imports: [StructuralDirective, HeavyComponent, SamplePropertiesComponent, RouterOutlet],
 })
 export class DemoAppComponent {
   readonly zippy = viewChild(ZippyComponent);

devtools/src/app/demo-app/todo/home/todos.component.html

@@ -4,7 +4,7 @@
 <p>{{ 'Sample text processed by a pipe' | sample }}</p>
 <section class="todoapp">
   <header class="header">
-    <h1>todos</h1>
+    <h1 id="demo-app-title">{{title}}</h1>
     <input
       (keydown.enter)="addTodo(input)"
       #input

devtools/src/app/demo-app/todo/home/todos.component.ts

@@ -28,6 +28,8 @@ const fib = (n: number): number => {
   imports: [RouterLink, TodoComponent, TooltipDirective, SamplePipe, TodosFilter],
 })
 export class TodosComponent implements OnInit, OnDestroy {
+  title = 'Angular Todo';
+
   todos: Todo[] = [
     {
       label: 'Buy milk',