No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

√öltima oportunidad para asegurar tu aprendizaje por 1 a√Īo a precio especial

Antes: $249

Currency
$189/a√Īo

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

0D
7H
0M
35S

Pruebas aisladas al componente

9/23
Recursos

Aportes 3

Preguntas 0

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Esto es muy util cuando el componente tiene varios inputs y outputs por lo que estos componentes tienen ese comportamiento necesitan un padre para comprobar que este componente cumple con su función

person.component.spec.ts

fdescribe('PersonComponent from HostComponent', () => {
  let component: HostComponent;
  let fixture: ComponentFixture<HostComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ HostComponent, PersonComponent ]
    })
    .compileComponents();
  });

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

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

  it('should display person name', () => {
    // Arrange
    const expectName = component.person.name;
    const h3De = fixture.debugElement.query(By.css('app-person h3'));
    const h3El = h3De.nativeElement;
    // Act
    fixture.detectChanges();
    // Assert
    expect(h3El.textContent).toContain(expectName);
  });

  it('should raise selected event when do click', () => {
    // Arrange
    const btnDe = fixture.debugElement.query(By.css('app-person .btn-choose'));
    // Act
    btnDe.triggerEventHandler('click', null);
    fixture.detectChanges();
    // Assert
    expect(component.selectedPerson).toEqual(component.person);
  })
})

Pruebas aisladas al componente


ūüí° Las pruebas aisladas entre componentes son pruebas que se realizan sobre un componente sin tener en cuenta sus dependencias o componentes hijos.

Normalmente, los componentes que poseen varios @Inputs (u @Outputs) se usan c√≥mo hijos de otros componentes m√°s grandes. En estos casos, es necesario ejecutar pruebas aisladas para verificar el comportamiento y la l√≥gica del componente en s√≠, sin tener en cuenta c√≥mo interact√ļa con otros componentes o servicios.

Para hacer pruebas aisladas, puedes seguir los siguientes pasos:

  1. Definir un HostComponent que instancie a tu componente hijo:

    @Component({
      template: `
        <app-child
          [input]="value"
          (onEvent)="onEventHandler($event)">
        </app-child>
      `,
    })
    export class HostComponent {
    	value = 'myValue';
    
      onEventHandler(value: string): void {
    		// do something with the value
      }
    }
    
  2. Defina un conjunto de pruebas aisladas para HostComponent y configure el entorno de pruebas para el mismo.

    describe('ChildComponent from HostComponent', () => {
    	let hostComponent: HostComponent;
      let fixture: ComponentFixture<HostComponent>;
    
      beforeEach(async () => {
        await TestBed.configureTestingModule({
          declarations: [HostComponent, ChildComponent],
        }).compileComponents();
    
        fixture = TestBed.createComponent(HostComponent);
        hostComponent = fixture.componentInstance;
        fixture.detectChanges();
      });
    
      it('should create a HostComponent', () => {
        expect(hostComponent).toBeTruthy();
      });
    
      // Test for the next step 
    });
    
  3. Escriba su conjunto de pruebas para el componente hijo. Por ejemplo

    describe('Tests for the Child Component', () => {
    	let childDebugElement : DebugElement;
    	beforeEach(() => {
          childDebugElement = fixture.debugElement.query(By.directive(ChildComponent));
      });
      it('should have a ChildComponent', () => {
        expect(childDebugElement.componentInstance).toBeTruthy();
      });
    
      it('should have a ChildComponent with the value as HostComponent', () => {
        expect(childDebugElement.componentInstance.input).toEqual(hostComponent.value);
      });
    
      it('should emit an event when do click', () => {
        // Arrange
        const button: DebugElement = childDebugElement.query(By.css('button[name="buttonName"]'));
        const onChildEventSpy= spyOn(childDebugElement.componentInstance, 'onEvent').and.callThrough();
        const onEventHandlerSpy= spyOn(hostComponent, 'onEventHandler').and.callThrough();
    
        // Act
        button.triggerEventHandler('click', null);
    
        // Assert
        expect(onChildEventSpy).toHaveBeenCalled();
    		expect(onEventHandlerSpy).toHaveBeenCalled();
      });
    
     // Another test cases
    });
    

El objetivo de un HostComponente es probar los input y outputs de un componente chiquito. Aislarlo de la logica general del componente padre.