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