No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y mucho m谩s.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

4 D铆as
19 Hrs
42 Min
59 Seg

Pruebas con componente padre

10/23
Recursos

Aportes 7

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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
    );
  });

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();聽 聽 }); ```js beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ PeopleComponent ] }) .overrideComponent(PeopleComponent, { set: { changeDetection: ChangeDetectionStrategy.Default } }) .compileComponents(); }); ```

Mejorandolo un poco para que sea el nombre din谩mico

it(鈥榮ould render selected person after choose person鈥, () => {
// Arrange
component.people = [
new Person(鈥楯orge鈥, 鈥楳edina鈥, 25, 67.2, 1.81),
new Person(鈥楪lenda鈥, 鈥楲贸pez鈥, 24, 62, 1.75),
new Person(鈥楳ariana鈥, 鈥楲贸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(鈥榓pp-person鈥));
const btnDebug = personDebug.query(By.css(鈥.btn-choose鈥));
btnDebug.triggerEventHandler(鈥榗lick鈥, null);
fixture.detectChanges();
const liNameEl: HTMLElement = fixture.debugElement.query(
By.css(鈥榙iv ul li鈥)
).nativeElement;
// Assert
expect(component.selectedPerson).toEqual(component.people[0]);
expect(liNameEl?.textContent).toEqual(expectMsg);
});

Este fue mi resultado: ```ts 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); }); ```

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);
});

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);
  });

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);
  });