fix(test): move all test apps

apps/testing/input-output/src/app/app.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { CounterComponent } from './counter.component';
+
+@Component({
+  standalone: true,
+  imports: [CounterComponent],
+  selector: 'app-root',
+  template: `
+    <app-counter [initialValue]="10" (send)="log($event)"></app-counter>
+  `,
+})
+export class AppComponent {
+  log(counter: number) {
+    console.log('output log', counter);
+  }
+}

apps/testing/input-output/src/app/counter.component.cy.ts

@@ -0,0 +1,13 @@
+import { CounterComponent } from './counter.component';
+
+describe(CounterComponent.name, () => {
+  describe('Given an initualValue of 10', () => {
+    it('listen to output using createOutputSpy', () => {
+      cy.mount(CounterComponent);
+    });
+
+    it('listen to output  using autoSpyOutputs', () => {
+      cy.mount(CounterComponent);
+    });
+  });
+});

apps/testing/input-output/src/app/counter.component.spec.ts

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/angular';
+import { CounterComponent } from './counter.component';
+
+describe('CounterComponent', () => {
+  describe('Given an initualValue of 10', () => {
+    test('Then counterValue is 10', async () => {
+      await render(CounterComponent);
+    });
+
+    describe('When clicking 5 times on increment button', () => {
+      test('Then counterValue is 15', async () => {
+        await render(CounterComponent);
+      });
+    });
+
+    describe('When clicking 2 times on decrement button', () => {
+      test('Then counterValue is 8', async () => {
+        await render(CounterComponent);
+      });
+      describe('When clicking on Send ', () => {
+        test('Then emitted value is 8', async () => {
+          await render(CounterComponent);
+        });
+      });
+    });
+  });
+});

apps/testing/input-output/src/app/counter.component.ts

@@ -0,0 +1,45 @@
+import { AsyncPipe } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { LetDirective } from '@ngrx/component';
+import { ComponentStore } from '@ngrx/component-store';
+
+@Component({
+  selector: 'app-counter',
+  standalone: true,
+  imports: [AsyncPipe, LetDirective],
+  template: `
+    <ng-container *ngrxLet="counter$ as counter">
+      <p data-testid="counter">Counter: {{ counter }}</p>
+      <button (click)="increment()">Increment</button>
+      <button (click)="decrement()">Decrement</button>
+      <button (click)="send.emit(counter)">Send</button>
+    </ng-container>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CounterComponent extends ComponentStore<{ counter: number }> {
+  @Input() set initialValue(initialValue: number) {
+    this.patchState({ counter: initialValue });
+  }
+
+  @Output() send = new EventEmitter<number>();
+
+  readonly counter$ = this.select((state) => state.counter);
+
+  readonly increment = this.updater((state) => ({
+    counter: state.counter + 1,
+  }));
+  readonly decrement = this.updater((state) => ({
+    counter: state.counter - 1,
+  }));
+
+  constructor() {
+    super({ counter: 0 });
+  }
+}