Código comentado Paso a Paso

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ContadorComponent } from './contador.component';

describe('ContadorComponent', () => {
  // Paso 1 :  Crear una instancia del componente

  let component: ContadorComponent;

  //Paso 2 : Crear una instancia del fixture. Esto es necesario para poder acceder a las propiedades del componente

  let fixture: ComponentFixture<ContadorComponent>;

  //Paso 3 : Crear el componente antes de cada prueba

  beforeEach(() => {
    //Paso 4 : Configurar el modulo de testing
    TestBed.configureTestingModule({
      //Paso 5 : Importar el componente
      imports: [ContadorComponent],
    }).compileComponents(); //Paso 6 : Compilar el componente

    //Paso 7 : Crear una instancia del componente usando el fixture. Esto es necesario para poder acceder a las propiedades del componente.
    fixture = TestBed.createComponent(ContadorComponent);
    component = fixture.componentInstance;

    //Paso 8 : Detectar los cambios en el componente
    fixture.detectChanges();
  });

  // PRUEBAS

  // Primera Prueba : Comprobar que el componente se ha creado correctamente
  it('Deberia crearse el componente', () => {
    expect(component).toBeTruthy(); // Se usa el metodo toBeTruthy que devuelve true si el componente se ha creado correctamente
  });

  it('Deberia inicializarse la variable en 0', () => {
    component.contador = 0;
    expect(component.contador).toBe(0);
  });

  it('Deberia reducirse en 1 el contador', () => {
    component.contador = 0;
    component.decrementar();
    expect(component.contador).toBe(-1);
  });

  // Version más completa en un solo metodo

  it('Deberia aumentar o disminuir el contador en 1', () => {
    component.contador = 0;
    component.incrementar();
    expect(component.contador).toBe(1);
    component.decrementar();
    expect(component.contador).toBe(0);
  });

  it('Deberia verse como el contador sube o baja al presionar los botones', () => {
    const compiled = fixture.nativeElement as HTMLElement;
    const botones = compiled.querySelectorAll('button');

    const btnIncrementar = compiled.querySelector(
      'button:nth-of-type(1)'
    ) as HTMLButtonElement;
    const btnDecrementar = compiled.querySelector(
      'button:nth-of-type(2)'
    ) as HTMLButtonElement;
    // Simulamos clic en el botón de incrementar
    btnIncrementar.click();
    fixture.detectChanges(); // Refleja el cambio en el DOM

    // Verificamos que el contador incrementó a 1 en el DOM
    expect(compiled.querySelector('p')?.textContent).toContain('Contador: 1');

    // Simulamos clic en el botón de decrementar
    btnDecrementar.click();
    fixture.detectChanges(); // Refleja el cambio en el DOM

    // Verificamos que el contador disminuyó a 0 en el DOM
    expect(compiled.querySelector('p')?.textContent).toContain('Contador: 0');
  });
});

Última actualización