Pruebas con componente padre

Clase 10 de 23 • Curso de Angular: Unit Testing para Componentes

Armando Rivera

student•

Comparto mi solución del reto

 it('should show a selected person', () => {
    // Arrange
    const personList = [
      new Person('Peter', 'Parker', 24, 70, 1.7),
      new Person('Armando', 'Rivera', 24, 80, 1.8),
      new Person('Bruce', 'Wayne', 24, 80, 1.8),
    ];
    component.personList = personList;

    // Act
    fixture.detectChanges();
    const debugButtonList = fixture.debugElement.queryAll(
      By.css('app-person .btn-choose')
    );

    debugButtonList[0].triggerEventHandler('click', null);
    fixture.detectChanges();
    const debugPersonSelectedInfo = fixture.debugElement.queryAll(
      By.css('.selectedPerson ul li')
    );

    // Assert

    expect(debugPersonSelectedInfo[0].nativeElement.textContent).toContain(
      personList[0].name
    );
    expect(debugPersonSelectedInfo[1].nativeElement.textContent).toContain(
      personList[0].age
    );
  });

David Alexander Castiblanco Flórez

student•

Si estás haciendo testing sobre una version de Angular >17, hay que adicionarle un override, para que la función de detección de cambios tome efecto:beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ PeopleComponent ] }) .overrideComponent(PeopleComponent, { set: { changeDetection: ChangeDetectionStrategy.Default } }) .compileComponents(); });

beforeEach(async () => {
        await TestBed.configureTestingModule({
            imports: [
                PeopleComponent
            ]
        })
        .overrideComponent(PeopleComponent, {
            set: { changeDetection: ChangeDetectionStrategy.Default }
        })
        .compileComponents();
    });

Jorge Luis Silva Medina

student•

Mejorandolo un poco para que sea el nombre dinámico

it('sould render selected person after choose person', () => { // Arrange component.people = [ new Person('Jorge', 'Medina', 25, 67.2, 1.81), new Person('Glenda', 'López', 24, 62, 1.75), new Person('Mariana', 'López', 5, 30, 1.4), ]; const personName = component.people[0].name; const expectMsg = Name: ${personName}; // Act fixture.detectChanges(); const personDebug = fixture.debugElement.query(By.css('app-person')); const btnDebug = personDebug.query(By.css('.btn-choose')); btnDebug.triggerEventHandler('click', null); fixture.detectChanges(); const liNameEl: HTMLElement = fixture.debugElement.query( By.css('div ul li') ).nativeElement; // Assert expect(component.selectedPerson).toEqual(component.people[0]); expect(liNameEl?.textContent).toEqual(expectMsg); });

Jessica Silvia Payano Castro

student•

Este es mi desarrollo:

it('should render the person with click and show selected person', ()=>{
    // Arrange
    const buttonDebug = fixture.debugElement.queryAll(By.css('app-person .button-choose'));
    // Act
    buttonDebug.forEach((btn, index) => {
      btn.triggerEventHandler('click', null);
      fixture.detectChanges();
      const selectedPerson = component.selectedPerson;

      const nameDebug = fixture.debugElement.query(By.css('.name'));
      const nameElement = nameDebug.nativeElement;
      const ageDebug = fixture.debugElement.query(By.css('.age'));
      const ageElement = ageDebug.nativeElement;
      // Assert
      expect(nameElement.textContent).toContain(selectedPerson?.name)
      expect(ageElement.textContent).toContain(selectedPerson?.age)

      expect(selectedPerson).toEqual(component.people[index]);
    })
  })

Ana Velez Ossa

student•

Este fue mi resultado:

it('should render selected person after choosing person', () => {
    // Configuración del componente con una lista de personas
    component.people = [
      new Person('Ana', 'Velez', 29, 58, 1.68),
      new Person('Marisol', 'Nieto', 29, 60, 1.72),
      new Person('Santiago', 'Ossa', 25, 90, 1.62),
      new Person('Eladio', 'Velez', 25, 90, 1.62)
    ];
  
    // Texto esperado después de seleccionar una persona
    const expectedContent = 'Name: Ana';
  
    // Detectar cambios en el componente
    fixture.detectChanges();
  
    // Encontrar el botón de elección para la primera persona (Ana)
    const chooseButton = fixture.debugElement.query(By.css('app-person .btn-choose'));
  
    // Simular el evento de clic en el botón
    chooseButton.triggerEventHandler('click', null);
  
    // Detectar cambios en el componente después del clic
    fixture.detectChanges();
  
    // Encontrar el elemento que muestra la persona seleccionada
    const selectedPersonElement: HTMLElement = fixture.debugElement.query(By.css('li')).nativeElement;
  
    // Verificar que la persona seleccionada es la primera persona (Ana)
    expect(component.selectedPerson).toEqual(component.people[0]);
  
    // Verificar que el contenido del elemento seleccionado contiene el nombre esperado
    expect(selectedPersonElement.textContent).toContain(expectedContent);
  });

Carlos Alejandro Hernández Mejía

student•

Mi solución usando faker.js para generar a las personas:

it('should change the selected person when a person is selected', () => {
    // Arrange
    component.people = generateManyPeople(3);
    fixture.detectChanges();
    const personDebugElements = fixture.debugElement.queryAll(By.directive(PersonComponent));
    const firstPerson = personDebugElements[0];
    const personComponent = firstPerson.componentInstance as PersonComponent;
    const firstButtonDebugElement = firstPerson.query(By.css('button[name="selectPerson"]'));

    // Act
    firstButtonDebugElement.triggerEventHandler('click', null);
    fixture.detectChanges();

    // Assert
    expect(component.selectedPerson).toBe(personComponent.person);
});

Jorge Luis Silva Medina

student•

Comparto mi monstrito


  it('sould render selected person after choose person', () => {
    // Arrange
    const expectMsg = 'Name: Jorge';
    component.people = [
      new Person('Jorge', 'Medina', 25, 67.2, 1.81),
      new Person('Glenda', 'López', 24, 62, 1.75),
      new Person('Mariana', 'López', 5, 30, 1.4),
    ];
    // Act
    fixture.detectChanges();
    const personDebug = fixture.debugElement.query(By.css('app-person'));
    const btnDebug = personDebug.query(By.css('.btn-choose'));
    btnDebug.triggerEventHandler('click', null);
    fixture.detectChanges();
    const liNameEl: HTMLElement = fixture.debugElement.query(
      By.css('div ul li')
    ).nativeElement;
    // Assert
    expect(component.selectedPerson).toEqual(component.people[0]);
    expect(liNameEl?.textContent).toEqual(expectMsg);
  });

Brayam Esteban Quiñones Sanchez

student•

Mi solucon usando un spy para verificar que se llem el metodo de asignacion de person

  it('should render a person selected from app-person', () => {
    //Arrange
    component.people = [
      new Person('Esteban', 'Qs', 27, 89, 1.77),
      new Person('Valentin', 'Feregrino', 12, 2, 3),
      new Person('Antoio', 'Feregrino', 12, 2, 3),
    ];
    const spy = spyOn(component, 'choose').and.callThrough();

    //Act
    fixture.detectChanges();
    const peopleDebug = fixture.debugElement.queryAll(By.css('app-person'));
    peopleDebug[1].query(By.css('button.btn-choose')).triggerEventHandler('click', null);
    fixture.detectChanges();  
    const renderPersonList = fixture.debugElement.queryAll(By.css('li'));

    //Assert
    expect(spy).toHaveBeenCalled();
    expect(renderPersonList[0].nativeElement.textContent).toContain(component.people[1].name);
    expect(renderPersonList[1].nativeElement.textContent).toContain(component.people[1].age);
  });

Pruebas con componente padre

Introducción

Unit Testing en Angular para Componentes

Creando el proyecto

Primera prueba

Componentes

Creando un componente & nativeElement

DebugElement & ByCss

Componentes con Inputs

Simulando el clic

Componentes con Outputs

Pruebas aisladas al componente

Pruebas con componente padre

Resolviendo el reto

Componentes con dependencias

Proyecto: creando product component

Componentes con dependencias

Pruebas a getAllProducts

FakeAsync and tick

Pruebas a promesas

Promesas simulando click

Directivas

Creando la Directiva

Pruebas a Directiva

Directiva con ngModel

Pipes

Creando pipe

Testing pipes

Próximos pasos

Continúa con el Curso de Testing en Formularios y Routing