add built-in control flow tests with signals

system-tests/projects/angular-signals/src/control-flow/control-flow.component.cy.ts

@@ -0,0 +1,38 @@
+import { ControlFlowComponent, SuperHero } from './control-flow.component'
+
+// @see https://angular.dev/guide/templates/control-flow
+it('works with basic control flow', () => {
+  const superHeroes: SuperHero[] = [
+    {
+      name: 'Clark Kent',
+      nickname: 'Man of Steel',
+      age: 28,
+      isMortal: true,
+    },
+    {
+      name: 'Wade T. Wilson',
+      nickname: 'Deadpool',
+      age: 43,
+      isMortal: false,
+    },
+  ]
+
+  cy.mount(ControlFlowComponent, {
+    componentProperties: {
+      superHeroes,
+    },
+  })
+
+  cy.get('[data-index="0"]').as('superman')
+  cy.get('[data-index="1"]').as('deadpool')
+
+  cy.get('@superman').find('[data-cy="name"]').should('contain.text', 'Clark Kent')
+  cy.get('@superman').find('[data-cy="nickname"]').should('contain.text', 'Man of Steel')
+  cy.get('@superman').find('[data-cy="age"]').should('contain.text', '28 is younger than 30')
+  cy.get('@superman').find('[data-cy="mortality"]').should('contain.text', 'I am mortal. I will eventually die')
+
+  cy.get('@deadpool').find('[data-cy="name"]').should('contain.text', 'Wade T. Wilson')
+  cy.get('@deadpool').find('[data-cy="nickname"]').should('contain.text', 'Deadpool')
+  cy.get('@deadpool').find('[data-cy="age"]').should('contain.text', '43 is older than 30')
+  cy.get('@deadpool').find('[data-cy="mortality"]').should('contain.text', 'I am immortal and will live forever')
+})

system-tests/projects/angular-signals/src/control-flow/control-flow.component.html

@@ -0,0 +1,36 @@
+
+<div>
+  <div data-cy="control-flow-superheroes-display">
+    <h1> SuperHeroes</h1>
+    <ul data-cy="control-flow-superheroes-list" >
+      @for (superHero of superHeroes(); track superHero.name; let idx = $index) {
+      <li [attr.data-index]="idx">
+        <p data-cy="name"> Name: {{ superHero.name }} </p>
+        <p data-cy="nickname">Nickname: {{ superHero.nickname }} </p>
+        <p data-cy="age">
+          @if (superHero.age > 30) {
+            {{ superHero.age }} is older than 30
+          } @else if (30 > superHero.age) {
+            {{ superHero.age }} is younger than 30
+          } @else {
+            Age is unknown
+          }
+        </p>
+        <p data-cy="mortality">
+          @switch (superHero.isMortal) {
+            @case (true) {
+              I am mortal. I will eventually die
+            }
+            @case (false) {
+              I am immortal and will live forever
+            }
+            @default {
+              Mortality status unknown
+            }
+          }
+        </p>
+      </li>
+    }
+    </ul>
+  </div>
+</div>

system-tests/projects/angular-signals/src/control-flow/control-flow.component.scss

@@ -0,0 +1,4 @@
+:host {
+  height: 100%;
+  display: block;
+}

system-tests/projects/angular-signals/src/control-flow/control-flow.component.ts

@@ -0,0 +1,23 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  model,
+} from '@angular/core'
+
+export type SuperHero = {
+  name: string
+  nickname: string
+  age: number
+  isMortal: boolean
+}
+
+@Component({
+  selector: 'control-flow-component',
+  templateUrl: './control-flow.component.html',
+  styleUrls: ['./control-flow.component.scss'],
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ControlFlowComponent {
+  superHeroes = model.required<SuperHero[]>()
+}