feat: enhance tests with router, HTTP client, and animations support

src/app/layout/header/header.spec.ts

@@ -1,23 +1,58 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideNoopAnimations } from '@angular/platform-browser/animations';
 
 import { Header } from './header';
+import { CartService } from '../../core/services/cart.service';
+import {environment} from '../../../environments/environment';
 
 describe('Header', () => {
-  let component: Header;
-  let fixture: ComponentFixture<Header>;
+  let httpMock: HttpTestingController;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Header]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Header);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+  beforeEach(() => {
+    localStorage.clear();
+    TestBed.configureTestingModule({
+      imports: [Header],
+      providers: [
+        provideRouter([]),
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        provideNoopAnimations()
+      ]
+    });
+    httpMock = TestBed.inject(HttpTestingController);
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  afterEach(() => {
+    httpMock.verify();
+    localStorage.clear();
+  });
+
+  it('successfully created', () => {
+    const fixture = TestBed.createComponent(Header);
+    expect(fixture.componentInstance).toBeTruthy();
+  });
+
+  it('it shows home and cart icon', () => {
+    const fixture = TestBed.createComponent(Header);
+    fixture.detectChanges();
+    const compiled: HTMLElement = fixture.nativeElement;
+
+    expect(compiled.querySelector('.app-header__brand')).toBeTruthy();
+    expect(compiled.querySelector('button[aria-label="Cart"]')).toBeTruthy();
+  });
+
+  it('it shows the counter in the cart', async () => {
+    const fixture = TestBed.createComponent(Header);
+    const cartService = TestBed.inject(CartService);
+
+    const promise = cartService.addToCart({ id: '1', colorCode: 1, storageCode: 1 });
+    httpMock.expectOne(`${environment.apiBaseUrl}/cart`).flush({ count: 7 });
+    await promise;
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.cartCount()).toBe(7);
   });
 });