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

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

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