mobile-store/src/app/layout/header/header.spec.ts

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 httpMock: HttpTestingController;

  beforeEach(() => {
    localStorage.clear();
    TestBed.configureTestingModule({
      imports: [Header],
      providers: [
        provideRouter([]),
        provideHttpClient(),
        provideHttpClientTesting(),
        provideNoopAnimations()
      ]
    });
    httpMock = TestBed.inject(HttpTestingController);
  });

  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);
  });
});