fix(test): move all test apps

apps/testing/modal/src/app/app.component.cy.ts

@@ -0,0 +1,19 @@
+import { AppComponent } from './app.component';
+
+describe(AppComponent.name, () => {
+  const setup = () => {
+    cy.mount(AppComponent);
+  };
+
+  test('error modal is displayed if you click on "Confirm" without inputing a name', () => {
+    setup();
+  });
+
+  test('error message is shown if you click "Cancel" in the confirmation modal after submitting a name', () => {
+    setup();
+  });
+
+  test('confirm message is shown if you click "Confirm" in the confirmation modal after submitting a name', () => {
+    setup();
+  });
+});

apps/testing/modal/src/app/app.component.spec.ts

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/angular';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  test('error modal is displayed if you click on "Confirm" without inputing a name', async () => {
+    await render(AppComponent);
+  });
+
+  test('error message is shown if you click "Cancel" in the confirmation modal after submitting a name', async () => {
+    await render(AppComponent);
+  });
+
+  test('confirm message is shown if you click "Confirm" in the confirmation modal after submitting a name', async () => {
+    await render(AppComponent);
+  });
+});

apps/testing/modal/src/app/app.component.ts

@@ -0,0 +1,65 @@
+import { AsyncPipe } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { BehaviorSubject } from 'rxjs';
+import { ErrorDialog } from './error.dialog';
+import { ProfilConfirmationDialog } from './profil-confirmation.dialog';
+@Component({
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    AsyncPipe,
+  ],
+  selector: 'app-root',
+  host: {
+    class: 'p-4 block flex gap-4 items-center',
+  },
+  template: `
+    <mat-form-field appearance="fill">
+      <mat-label>Name</mat-label>
+      <input
+        type="text"
+        matInput
+        [formControl]="name"
+        placeholder="enter your name" />
+    </mat-form-field>
+    <button (click)="confirm()" mat-flat-button color="primary">Confirm</button>
+
+    <div>{{ result$ | async }}</div>
+  `,
+})
+export class AppComponent {
+  private modal = inject(MatDialog);
+  private result = new BehaviorSubject<string>('');
+  result$ = this.result.asObservable();
+
+  name = new FormControl('', { nonNullable: true });
+
+  confirm() {
+    if (!this.name.value) {
+      this.modal.open(ErrorDialog);
+      return;
+    }
+
+    this.modal
+      .open(ProfilConfirmationDialog, {
+        data: {
+          name: this.name.value,
+        },
+      })
+      .afterClosed()
+      .subscribe((result) =>
+        this.result.next(
+          result ? 'Name has been submitted' : 'Name is invalid !!'
+        )
+      );
+  }
+}

apps/testing/modal/src/app/app.config.ts

@@ -0,0 +1,5 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+export const appConfig: ApplicationConfig = {
+  providers: [provideAnimations()],
+};

apps/testing/modal/src/app/error.dialog.ts

@@ -0,0 +1,19 @@
+/* eslint-disable @angular-eslint/component-class-suffix */
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+
+@Component({
+  standalone: true,
+  imports: [MatButtonModule, MatDialogModule],
+  template: `
+    <h1 mat-dialog-title>Error</h1>
+    <div mat-dialog-content>
+      You must enter a <span class="font-bold">name</span> first!!
+    </div>
+    <div mat-dialog-actions>
+      <button mat-button mat-dialog-close>OK</button>
+    </div>
+  `,
+})
+export class ErrorDialog {}

apps/testing/modal/src/app/profil-confirmation.dialog.ts

@@ -0,0 +1,20 @@
+/* eslint-disable @angular-eslint/component-class-suffix */
+import { Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+
+@Component({
+  standalone: true,
+  imports: [MatButtonModule, MatDialogModule],
+  template: `
+    <h1 mat-dialog-title>Profil</h1>
+    <div mat-dialog-content>Name: {{ data.name }}</div>
+    <div mat-dialog-actions>
+      <button mat-button [mat-dialog-close]="false">Cancel</button>
+      <button mat-button [mat-dialog-close]="true">Confirmation</button>
+    </div>
+  `,
+})
+export class ProfilConfirmationDialog {
+  data = inject(MAT_DIALOG_DATA);
+}