feat(test): add challenge 18 and 19 avout testing

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,15 @@
+import { ChildComponent } from './child.component';
+
+describe(ChildComponent.name, () => {
+  const setup = () => {
+    cy.mount(ChildComponent);
+  };
+
+  test('add Good title and send request title with no error', () => {
+    setup();
+  });
+
+  test('fail validating title because no title were typed', () => {
+    setup();
+  });
+});

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

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/angular';
+import { ChildComponent } from './child.component';
+
+describe('ChildComponent', () => {
+  test('add Good title and send request title with no error', async () => {
+    await render(ChildComponent);
+  });
+
+  test('fail validating title because no title were typed', 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 !!!`);
+  }
+}