Pruebas con componente padre

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

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