Pruebas Unitarias en Angular: Testeo de Componentes y Servicios

Clase 31 de 38 • Curso de Unit Testing para MEAN con Jasmine

Resumen

¿Cómo probar el layout en Angular asegurando cobertura completa?

Al trabajar en pruebas para garantizar un 100% de cobertura en nuestras funciones frontend, es crítico entender cómo implementar tests efectivos en nuestros componentes de Angular, especialmente en el layout. Aquí te guiamos sobre cómo realizar estas pruebas avanzadas.

¿Cómo configuramos el testbed y los servicios?

Como primer paso, configuramos el testbed, esencial en cualquier prueba en Angular. Nuestro componente layout utiliza dos servicios que debemos gestionar: el bottom sheet y el router.

Creación de Stubs para el Bottom Sheet:
- Define un stub para el servicio BottomSheet con un método open.
```
class BottomSheetStub {
  open() {}
}
```
Configuración del Router:
- Utiliza RouterTestingModule para manejar rutas en pruebas.
- Define rutas, incluyendo la raíz y una para habilitar el modo de edición.
```
RouterTestingModule.withRoutes([
  { path: '', component: LayoutComponent },
  { path: 'app/add', component: LayoutComponent }
])
```

¿Cómo evitar errores en los esquemas?

Para evitar errores ligados a componentes no definidos:

Asegúrate de importar esquemas relacionados con Angular Core, como CUSTOM_ELEMENTS_SCHEMA. Esto previene problemas al usar elementos personalizados:
```
schemas: [CUSTOM_ELEMENTS_SCHEMA]
```

¿Cómo implementar y verificar las pruebas?

Con nuestro testbed configurado, avanzamos con las pruebas.

Verificar editMode en falso:

Navega a la raíz y asegúrate de que editMode es false.
Usa el método whenStable para confirmar que el cambio en la aplicación quedó registrado.

it('should set editMode to false', async () => {
  // Configura el espía para verifyEditMode
  spyOn(component, 'verifyEditMode');
  await fixture.whenStable();
  expect(component.editMode).toBe(false);
  expect(component.verifyEditMode).toHaveBeenCalled();
});

Prueba sin errores ng-zone:

Usa NgZone para garantizar que se reflejen los cambios correctamente.

fixture.ngZone.run(() => {
  component.router.navigate(['/']);
});
await fixture.whenStable();

Método Open del servicio Bottom Sheet:

Crea un espía para open del servicio BottomSheet.

it('should open button sheet with ActionsComponent', () => {
  const openSpy = spyOn(component['bottomSheet'], 'open');
  component.openButtonSheet();
  expect(openSpy).toHaveBeenCalled();
  expect(openSpy).toHaveBeenCalledWith(ActionsComponent);
});

¿Qué retos adicionales se pueden abordar?

El siguiente desafío que puedes asumir es asegurarte de que el método verifyEditMode reconoce cuando editMode es true. Además, enfócate en las pruebas de acciones del componente. Considera:

Stub del Pin Service
- Agrega métodos como dismiss y resolveActionServer.
Acciones de prueba en el OpenLink
- Simula un evento de mouse con preventDefault.

Sumérgete y desarrolla este conjunto de pruebas para perfeccionar tu cobertura en Angular. Al abordar estos retos, mejorando tus habilidades en la implementación de tests, estás fortaleciendo la calidad global de tu aplicación. ¡Adelante, sigue aprendiendo y perfeccionando!

Gabriel Leonardo Pinto Pineda

student•

Así implementé los tests sobre el componente "Action"

it('should openLink', () => {
    const event = new MouseEvent('click');
    const eventCall = spyOn(event, 'preventDefault').and.callFake(() => {});
    const dismiss = spyOn((<any>component).bottomSheetRef, 'dismiss');
    const resolveActionObserver = spyOn(
      (<any>component).pinsService,
      'resolveActionObserver'
    );
    component.openLink(event, '');
    expect(eventCall).toHaveBeenCalled();
    expect(dismiss).toHaveBeenCalled();
    expect(resolveActionObserver).toHaveBeenCalled();
  });

Vladyslav Kuchmenko

student•

it(&quot;edit mode should be true&quot;, () =&gt; {
    const verifyEditMode = spyOn(component, &quot;verifyEditMode&quot;).and.callThrough();

    fixture.ngZone.run(() =&gt; {
      (&lt;any&gt;component).router.navigate(['app/add']); 
      fixture.whenStable().then(() =&gt; {
        expect(component.editMode).toBe(true);
        expect(verifyEditMode).toHaveBeenCalled();
      });
    });
  });

Antonio Madrid

student•

Mi código completamente funcional:

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

import { ActionsComponent } from './actions.component';
import { MatBottomSheetRef } from '@angular/material';
import { PinsService } from '../pins/pins.service';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

class MatBottomSheetRefStub {
  dismiss() { }
}

class PinsServiceStub {
  resolveActionObserver(action) { }
}

fdescribe('ActionsComponent', () => {
  let component: ActionsComponent;
  let fixture: ComponentFixture<ActionsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ActionsComponent],
      providers: [
        { provide: MatBottomSheetRef, useClass: MatBottomSheetRefStub },
        { provide: PinsService, useClass: PinsServiceStub }
      ],
      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ActionsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should execute openLink', () => {

    // se crea el evento
    const event = new MouseEvent('click');

    // se crean los espias de las funciones que queremos comprobar que fueron llamadas
    const eventSpy = spyOn(event, 'preventDefault').and.callFake(() => { });
    const bottomSheetRefSpy = spyOn((<any>component).bottomSheetRef, 'dismiss');
    const pinsServiceSpy = spyOn((<any>component).pinsService, 'resolveActionObserver');

    // la funcion que estamos probando, la espiamos sin modificar su comportamiento
    const openLink = spyOn(component, 'openLink').and.callThrough();


    // ejecutamos la funcion
    component.openLink(event, 'send');

    // comprobamos los resultados
    expect(openLink).toHaveBeenCalledWith(event, 'send');
    expect(eventSpy).toHaveBeenCalled();
    expect(bottomSheetRefSpy).toHaveBeenCalled();
    expect(pinsServiceSpy).toHaveBeenCalledWith('send');
  });
});

Anderson Peñaloza

student•

En versiones mas recientes de Angular al ejecutar fixture.whenStable().then() se debe invocar el it mediante un async o sino nuestra prueba nos arrojara un warn diciendo que no tiene ningun expect.

El codigo actualizado seria asi

it("should set the edit mode to false", async(() => {
	const verifyEditmode = spyOn(component, "verifyEditMode").and.callThrough();

	fixture.ngZone.run(() => {
		(<any>component).router.navigate(["/"]);

		fixture.whenStable().then(() => {
			expect(component.editMode).toBeFalsy();
			expect(verifyEditmode).toHaveBeenCalled();
		});
	});
}));

Damian Spizzirri

student•

No me queda claro porque forzas la prueba. A caso no deberia correr y ya? Porque no te corren y tenes que forzarlo?

Ronnel Moises Matallana Machado

student•

Es que como forzó las otras pruebas solo corren las forzadas, en caso de no forzar ninguna, entonces corren todas, pero como el angular-cli te crea spec a todos los componentes por defecto, muchos te van a tirar errores o warning, entonces para evitar los errores y que sea mas limpio para el entendimiento de los demás el los ocultó forzando los que quiere correr solamente.

Damian Spizzirri

student•

Configure asi para testear la ruta '/app/add'

declarations: [LayoutComponent, FormComponent],
      providers: [{ provide: MatBottomSheet, useClass: MatBottomSheetStub }],
      imports: [RouterTestingModule.withRoutes([
        { path: '', component: LayoutComponent },
        {
          path: "app", component: LayoutComponent,
          children: [{ path: "add", component: FormComponent }]
        },
      ])],
      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]

Y agregue este import import { FormComponent } from '../form/form.component';

Pero me da este error Error: StaticInjectorError(DynamicTestModule)[FormComponent -> FormBuilder]:

Que me falta hacer?

Vladyslav Kuchmenko

student•

import { async, ComponentFixture, TestBed } from &quot;@angular/core/testing&quot;;

import { ActionsComponent } from &quot;./actions.component&quot;;
import { MatBottomSheetRef } from &quot;@angular/material&quot;;
import { PinsService } from &quot;../pins/pins.service&quot;;
import { NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from &quot;@angular/core&quot;;

export class MatBottomSheetRefSTUB {
  dismiss() {}
}

export class PinsServiceSTUB {
  resolveActionObserver(action) {}
}

fdescribe(&quot;ActionsComponent&quot;, () =&gt; {
  let component: ActionsComponent;
  let fixture: ComponentFixture&lt;ActionsComponent&gt;;

  beforeEach(async(() =&gt; {
    TestBed.configureTestingModule({
      declarations: [ActionsComponent],
      providers: [
        { provide: MatBottomSheetRef, useClass: MatBottomSheetRefSTUB },
        { provide: PinsService, useClass: PinsServiceSTUB },
      ],
      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
    }).compileComponents();
  }));

  beforeEach(() =&gt; {
    fixture = TestBed.createComponent(ActionsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it(&quot;should create&quot;, () =&gt; {
    expect(component).toBeTruthy();
  });

  it(&quot;preventDefault should be called&quot;, () =&gt; {
    const mouseEvent = new MouseEvent(&quot;click&quot;);
    const mouseEventSpy = spyOn(
      mouseEvent,
      &quot;preventDefault&quot;
    ).and.callFake(() =&gt; {});
    component.openLink(mouseEvent, &quot;send&quot;);
    expect(mouseEventSpy).toHaveBeenCalled();
  });

  it(&quot;dismiss should be called&quot;, () =&gt; {
    const mouseEvent = new MouseEvent(&quot;click&quot;);
    spyOn(mouseEvent, &quot;preventDefault&quot;).and.callFake(() =&gt; {});
    const bottomSheetRefSpy = spyOn((&lt;any&gt;component).bottomSheetRef, &quot;dismiss&quot;);
    component.openLink(mouseEvent, &quot;send&quot;);
    expect(bottomSheetRefSpy).toHaveBeenCalled();
  });

  it(&quot;dismiss should be called&quot;, () =&gt; {
    const mouseEvent = new MouseEvent(&quot;click&quot;);
    spyOn(mouseEvent, &quot;preventDefault&quot;).and.callFake(() =&gt; {});
    const pinsServiceSpy = spyOn(
      (&lt;any&gt;component).pinsService,
      &quot;resolveActionObserver&quot;
    );
    component.openLink(mouseEvent, &quot;send&quot;);
    expect(pinsServiceSpy).toHaveBeenCalled();
  });
});

Carlos Alejandro Hernández Mejía

student•

Esto fue lo que hice 😅. Por cierto, el casting también lo pueden hacer como (component as any).

class MatBottomSheetRefStub<T> {
  dismiss() {}
}

class PinsServiceStub {
  resolveActionObserver(action: string) {}
}

describe('ActionsComponent', () => {
  let component: ActionsComponent;
  let fixture: ComponentFixture<ActionsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ActionsComponent ],
      providers: [
        { provide: MatBottomSheetRef, useClass: MatBottomSheetRefStub },
        { provide: PinsService, useClass: PinsServiceStub }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ActionsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should open a link', () => {
    const event = new MouseEvent('click');
    const mouseEvent = spyOn(event, 'preventDefault');
    const dismiss = spyOn((component as any).bottomSheetRef, 'dismiss');
    const resolve = spyOn((component as any).pinsService, 'resolveActionOberver');
    component.openLink(event, 'ok');
    expect(mouseEvent).toHaveBeenCalled();
    expect(dismiss).toHaveBeenCalled();
    expect(resolve).toHaveBeenCalledWith('ok');
  });
});

Damian Spizzirri

student•

Que es ese (<any>component) que pones??

Luis Abdel Rangel Castro

student•

Esta casteando un elemento privado

Luis Abdel Rangel Castro

student•

import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import {
  async,
  ComponentFixture,
  TestBed,
  waitForAsync,
} from '@angular/core/testing';
import { MatBottomSheet } from '@angular/material/bottom-sheet';
import { RouterTestingModule } from '@angular/router/testing';
import { ActionsComponent } from '../actions/actions.component';

import { LayoutComponent } from './layout.component';

class MatBottomSheetStub {
  open() {}
}

fdescribe('LayoutComponent', () => {
  let component: LayoutComponent;
  let fixture: ComponentFixture<LayoutComponent>;

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [LayoutComponent],
        providers: [{ provide: MatBottomSheet, useClass: MatBottomSheetStub }],
        imports: [
          RouterTestingModule.withRoutes([
            { path: '', component: LayoutComponent },
            { path: 'app/add', component: LayoutComponent },
          ]),
        ],
        schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
      }).compileComponents();
    })
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(LayoutComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('Should set the editMode to false', () => {
    const verifyEditMode = spyOn(component, 'verifyEditMode').and.callThrough();

    fixture.ngZone.run(() => {
      (<any>component).router.navigate(['/']);

      fixture.whenStable().then(() => {
        expect(component.editMode).toBeFalsy();
        expect(verifyEditMode).toHaveBeenCalled();
      });
    });
  });

  it('Should open', () => {
    const open = spyOn((<any>component).bottomSheet, 'open');

    component.openBottomSheet();

    expect(open).toHaveBeenCalledWith(ActionsComponent);
  });


  it('Should set the editMode to true', () => {
    const verifyEditMode = spyOn(component, 'verifyEditMode').and.callThrough();

    fixture.ngZone.run(() => {
      (<any>component).router.navigate(['app/add']);

      fixture.whenStable().then(() => {
        expect(component.editMode).toBeTruthy();
        expect(verifyEditMode).toHaveBeenCalled();
      });
    });
  });
});