Cannot read property 'textContent' of null - Diferente do post do Danilo

Se voce também está tendo dificuldades com este erro saiba que não está sozinho. Depois de uns dias debatendo com o Google sobre e ter continuado as aulas finalmente consegui contornar o problema. o Teste 'Should display number of likes when (@Input likes) is incremented' não estava funcionando após a implementação como feito na aula pelo professor Fávio.

O código original estava assim:

arquivo: photo-frame.component.spec.ts

import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { PhotoFrameComponent } from './photo-frame.component';
import { PhotoFrameModule } from './photo-frame.module';

describe (PhotoFrameComponent.name, ()=>{

  let fixture: ComponentFixture<PhotoFrameComponent> = null;
  let component: PhotoFrameComponent;

  beforeEach ( async () => {
    await TestBed.configureTestingModule({
      imports:[PhotoFrameModule]
    }).compileComponents();

    fixture = TestBed.createComponent(PhotoFrameComponent);
    component = fixture.componentInstance;

  });

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

  it(`#${PhotoFrameComponent.prototype.like.name}
    should trigger (@Output liked) once when called
    multiple times within the bounde time`, fakeAsync(() => {
      fixture.detectChanges();
      let times = 0;
      component.liked.subscribe( () => times++);
      component.like();
      component.like();
      tick(500);
      expect(times).toBe(1);
  }));

  it(`#${PhotoFrameComponent.prototype.like.name}
  should trigger (@Output liked) two times when
  called outside the bounde time `, fakeAsync(() => {
    fixture.detectChanges();
    let times = 0;
    component.liked.subscribe(() => times ++);
    component.like();
    tick(500);
    component.like();
    tick(500);
    expect(times).toBe(2);
  }));

  it(`(D) Should display number of likes when (@Input likes) is incremented `, ()=> {
    fixture.detectChanges();
    component.likes++;
    fixture.detectChanges();
    const element:HTMLElement = fixture.nativeElement.querySelector('like-counter');
    expect(element.textContent.trim()).toBe('1');
  });

Para funcionar eu tive que mudar o teste para:

it(`(D) Should display number of likes when (@Input likes) is incremented `, ()=> {
    fixture.detectChanges();
    component.likes++;
    fixture.detectChanges();
    const element:HTMLElement = fixture.nativeElement.querySelector('.like-widget-container span');
    expect(element.textContent.trim()).toBe('1');
  });

Utilizando o nome da classe da div que contem o span e depois chamando o span proprio que contem a classe "like-counter". Se alguem puder me explicar porque ele estava lendo o textContent como "null" eu agradeceria, pois apesar de resolver o problema continuo sem entender a razao.

Ao time da Alura, novamente digo: deem uma atenção no forum porfavor, tenho outra duvida ainda em aberto de uma semana atrás e ninguem está dando este suporte. Vejo outros post de pessoas e as respostas acabam ou sendo delas mesmas ou de outros alunos. Adoro a plataforma e adoro o curso, amo a didática do professor Flavio mas temos de dar uma atençao por aqui, nao sei o que esta acontecendo mas fica o feedback. Cursos online tem de ter respostas online e rapidas. Temos de ter suporte aqui. Abraços e bons estudos