Componentes con dependencias

Una vez utilizados los componentes reales en las pruebas de rutas hay que ver como lograr mockear las dependencias de estos componentes

primero realizaremos una inyección de dependencias en uno de los componentes en este caso othersComponent, y enviaremos el total de productos obtenidos al html para hacer las pruebas de render posteriormente

others.component.ts

import { Product } from './../../models/product.model';
import { ProductsService } from './../../services/product.service';

products: Product[] = [];
  constructor(
    private productService: ProductsService
  ) { }

  ngOnInit(): void {
    this.productService.getAll()
    .subscribe(data => {
      this.products = data;
    });
  }

others.component.html

<h1 data-testid="products-length">Total {{ products.length }}</h1>

Ahora haremos un mocking del product service de othersComponent con spy’s

app.integration.spec.ts

import { asyncData, clickElement, getText, query, queryAllByDirective } from 'src/testing';

import { ProductsService } from './services/product.service';
import { generateManyProducts } from './models/product.mock';


describe('App Integration test', () => {
  let productService: jasmine.SpyObj<ProductsService>;

  beforeEach(async () => {

    const productServiceSpy = jasmine.createSpyObj('ProductsService', ['getAll']);
    await TestBed.configureTestingModule({
      providers: [
        { provide: ProductsService, useValue: productServiceSpy }
      ],
      schemas: [NO_ERRORS_SCHEMA]
    }).compileComponents();
  });


it('should render OthersComponent when clicked', fakeAsync(() => {
    const productsMocks = generateManyProducts(10);

    productService.getAll.and.returnValue(asyncData(productsMocks));
    clickElement(fixture, 'others-link', true);

    tick(); // wait while nav...
    fixture.detectChanges(); // ngOnInit - OthersComponent

    tick();
    fixture.detectChanges(); // ngOnInit - OthersComponent

    expect(router.url).toEqual('/others');
    const element = query(fixture, 'app-others');
    expect(element).not.toBeNull();
    const text = getText(fixture, 'products-length');
    expect(text).toContain(productsMocks.length.toString());
  }));