refactor(ts): refactor name to age component

Change test to plain integration test -> use the original implementation
of agify.service

apps/testing-showcase/src/app/async.spec.ts

@@ -0,0 +1,12 @@
+import { fakeAsync, tick } from '@angular/core/testing';
+import { of } from 'rxjs';
+
+describe('Async operations', () => {
+    it('should show usage of fakeAsync',   fakeAsync(() => {
+        let a = 1;
+        of(1).subscribe(() => {
+            a += 1;
+            expect(a).toBe(2);
+        });
+    }));
+});

apps/testing-showcase/src/app/name-to-age/name-to-age.component.html

@@ -9,12 +9,16 @@
                    class="form-control"
                    formControlName="name">
         </div>
-        <ts-button [type]="'submit'" [label]="'Submit'" [disabled]="!searchForm.valid"></ts-button>
+        <ts-button [type]="'submit'"
+                   [label]="'Submit'"
+                   [disabled]="!searchForm.valid"></ts-button>
     </form>
 
     <ng-container *ngIf="age$ | async as age">
         <div class="age-result">
-            {{ age }}
+            <p>
+                {{ age }}
+            </p>
         </div>
     </ng-container>
 </div>

apps/testing-showcase/src/app/name-to-age/name-to-age.component.spec.ts

@@ -1,44 +1,52 @@
 import { CommonModule } from '@angular/common';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { render, screen } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
-import { createSpyFromClass } from 'jest-auto-spies';
-import { of } from 'rxjs';
-import { AgifyService } from '../../../../../libs/name-to-age/src/index';
+import { AgifyService, defaultResponse } from '../../../../../libs/name-to-age/src/index';
 import { ButtonModule } from '../../../../../libs/ui/src/index';
 
 import { NameToAgeComponent } from './name-to-age.component';
 
 describe('NameToAgeComponent', () => {
-    const agifyService = createSpyFromClass(AgifyService);
+    let agifyService: AgifyService;
+
     const setup = async () =>
         render(NameToAgeComponent, {
             imports: [
                 ReactiveFormsModule,
                 CommonModule,
-                ButtonModule
-            ],
-            providers: [
-                { provide: AgifyService, useValue: agifyService }
+                ButtonModule,
+                HttpClientTestingModule
             ],
         });
 
-    it('should create', async () => {
-        const renderResult = await setup();
-        expect(renderResult.fixture.componentInstance).toBeInstanceOf(NameToAgeComponent);
+    describe('Integration Test', () => {
+        it('should create', async () => {
+            const renderResult = await setup();
+            expect(renderResult.fixture.componentInstance).toBeInstanceOf(NameToAgeComponent);
 
-    });
+        });
+
+        it('should show age response after entering a name', async () => {
+            const renderResult = await setup();
+            agifyService = TestBed.inject(AgifyService);
+            const agifyServiceGetSpy = jest.spyOn(agifyService, 'getAge');
+            const component = renderResult.fixture.componentInstance;
 
-    it('should show age response after entering a name', async () => {
-        const renderResult = await setup();
-        const component = renderResult.fixture.componentInstance;
-        agifyService.getAge.mockReturnValue(of(33));
-        await userEvent.type(screen.getByTestId('name'), 'dennis');
-        await userEvent.click(screen.getByTestId('ts-btn'));
-        expect(component.searchForm.get('name')?.value).toEqual('dennis');
-        expect(agifyService.getAge).toHaveBeenCalledWith('dennis');
-        expect(await screen.findByText('33')).toBeTruthy();
-
-        screen.logTestingPlaygroundURL();
+            await userEvent.type(screen.getByTestId('name'), 'dennis');
+            await userEvent.click(screen.getByTestId('ts-btn'));
+
+            TestBed.inject(HttpTestingController)
+                .expectOne((req) => !!req.url.match(/api.agify.io/))
+                .flush({ ...defaultResponse, age: 33 });
+
+            expect(component.searchForm.get('name')?.value).toEqual('dennis');
+            expect(agifyServiceGetSpy).toHaveBeenCalledWith('dennis');
+            expect(await screen.findByText('33')).toBeTruthy();
+
+            screen.logTestingPlaygroundURL();
+        });
     });
 });

tsconfig.base.json

@@ -17,8 +17,8 @@
     "baseUrl": ".",
     "paths": {
       "@ts/name-to-age": ["libs/name-to-age/src/index.ts"],
-      "@ts/ui": ["libs/ui/src/index.ts"],
-      "@ts/test": ["libs/test/src/index.ts"]
+      "@ts/test": ["libs/test/src/index.ts"],
+      "@ts/ui": ["libs/ui/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]