Заменить Document на ViewChild для моего тестирования?

Question

ОБНОВЛЕНИЕ: Похоже, что с помощью. документ не проблема вообще. Это селектор запросов, который выдает ошибку:

document
    .querySelector('.side-navigation .side-navigation__toggle')

.side-navigation назначено родительскому компоненту этого компонента html:

<navigation id="aside-nav" class="side-navigation"> </navigation>

и side-navigation__toggle 'определено в этом дочернем компоненте. Нужно ли издеваться над элементом HTML, если он находится за пределами компонента?

Новое в angular тестировании. Я пытаюсь протестировать классы компонентов на слушателе-переключателе:

it('should test toggle nav bar functionality', fakeAsync(() => {
    const bannerDe: DebugElement = fixture.debugElement;
    const bannerEl: HTMLElement = bannerDe.nativeElement;
    const p = bannerEl.querySelector('.side-navigation__toggle');
    expect(p).not.toHaveClass('open');
  }));

И вот метод:

toggleNavBar() {
    if (!this.status) {
      document.querySelector('.side-navigation').classList.remove('open');
      document
        .querySelector('.side-navigation .side-navigation__toggle')
        .classList.remove('open');
    } else {
      document.querySelector('.side-navigation').classList.add('open');
      document
        .querySelector('.side-navigation .side-navigation__toggle')
        .classList.add('open');
    }
    this.status = !this.status;
  }

До сих пор тест проходит, но как только я добавляю это к тест, чтобы я мог проверить другое состояние:

component.toggleNavBar();

Я получаю следующую ошибку:

TypeError: Cannot read property 'classList' of null

Я неправильно использую document внутри компонента? Нужно ли переключаться на ViewChild ?