fix(test): move all test apps

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { ChildComponent } from './child.component';
+
+@Component({
+  standalone: true,
+  imports: [ChildComponent],
+  selector: 'app-root',
+  template: ` <app-child></app-child> `,
+})
+export class AppComponent {}

apps/testing/nested/src/app/child.component.cy.ts

@@ -0,0 +1,18 @@
+import { ChildComponent } from './child.component';
+
+describe('ChildComponent', () => {
+  const setup = () => {
+    cy.mount(ChildComponent);
+  };
+  describe('When typing nothing and clicking on Validate', () => {
+    test('Then show "Title is required" error message and no http request has been sent', async () => {
+      setup();
+    });
+  });
+
+  describe('When typing "Good" and clicking on Validate', () => {
+    test('Then show "Title is Good" message, no error message and send a http request to the backend', async () => {
+      setup();
+    });
+  });
+});

apps/testing/nested/src/app/child.component.spec.ts

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/angular';
+import { ChildComponent } from './child.component';
+
+describe('ChildComponent', () => {
+  describe('When typing nothing and clicking on Validate', () => {
+    test('Then show "Title is required" error message and no http request has been sent', async () => {
+      await render(ChildComponent);
+    });
+  });
+
+  describe('When typing "Good" and clicking on Validate', () => {
+    test('Then show "Title is Good" message, no error message and send a http request to the backend', async () => {
+      await render(ChildComponent);
+    });
+  });
+});

apps/testing/nested/src/app/child.component.ts

@@ -0,0 +1,86 @@
+import { NgIf } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+} from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { HttpService } from './http.service';
+
+@Component({
+  selector: 'app-input',
+  standalone: true,
+  imports: [ReactiveFormsModule],
+  template: ` <input type="text" [formControl]="title" /> `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InputComponent {
+  title = new FormControl('', { nonNullable: true });
+}
+
+@Component({
+  selector: 'result',
+  standalone: true,
+  template: ` <p>Title is {{ title }}</p> `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ResultComponent {
+  @Input() title = '';
+}
+
+@Component({
+  selector: 'app-button',
+  standalone: true,
+  template: `<button (click)="validate.emit()">Validate</button>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ButtonComponent {
+  @Output() validate = new EventEmitter();
+}
+
+@Component({
+  selector: 'app-error',
+  standalone: true,
+  template: `<p>Title is required !!!</p>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ErrorComponent {
+  @Output() validate = new EventEmitter();
+}
+
+@Component({
+  selector: 'app-child',
+  standalone: true,
+  imports: [
+    ResultComponent,
+    ButtonComponent,
+    InputComponent,
+    ErrorComponent,
+    NgIf,
+  ],
+  template: `
+    <app-input #input></app-input>
+    <result [title]="input.title.value"></result>
+    <app-button (validate)="submit(input.title.value)"></app-button>
+    <app-error *ngIf="showError"></app-error>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChildComponent {
+  http = inject(HttpService);
+
+  showError = false;
+
+  submit(title: string) {
+    this.showError = false;
+    if (title === '') {
+      this.showError = true;
+      return;
+    }
+
+    this.http.sendTitle(title);
+  }
+}

apps/testing/nested/src/app/http.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class HttpService {
+  sendTitle(title: string) {
+    console.log(`${title} has been sent !!!`);
+  }
+}

apps/testing/nested/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>TestingNested</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

apps/testing/nested/src/main.ts

@@ -0,0 +1,4 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent).catch((err) => console.error(err));

apps/testing/nested/src/styles.scss

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

apps/testing/nested/src/test-setup.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+import 'jest-preset-angular/setup-jest';