Угловой юнит-тест по клику

Question

Я новичок в написании модульных тестов на Angular.Я пытаюсь написать тест, чтобы убедиться, что раскрывающееся меню открывается при нажатии кнопки.Это соответствующий HTML-код:

 <button mat-button class="requestMenu" [matMenuTriggerFor]="requestMenu">Requests</button>
      <mat-menu #requestMenu="matMenu" yPosition="below">
        <button mat-menu-item>{{'dashboard.header.screen_options.action_required.option_text' | i18next}}</button>
        <button mat-menu-item>My Requests</button>
        <button mat-menu-item>Assigned to Me</button>
        <button mat-menu-item>Unassigned</button>
        <button mat-menu-item>View All</button>
      </mat-menu>

И вот что я имею в тесте:

it('should show request menu if "Requests" is clicked', () => { 
  expect(fixture.debugElement.query(By.css('.requestMenu')).nativeElement).toBe(false);
  const button = fixture.debugElement.query(By.css('.requestMenu')).nativeElement;
  button.click();   
  fixture.detectChanges();
  expect(fixture.debugElement.query(By.css('.requestMenu')).nativeElement).toBe(true);
});

Я получаю сообщение об ошибке: Expected HTMLNode to be false. Может кто-нибудь помочь сэтот?

Вот код описания.Это может быть излишним, но я надеюсь, что это даст подсказку:

   describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;
  let logger: LogService;

  class MockLogService {
    getData(): Observable<any[]> { return Observable.of([]); }
    debug() {
      this.writeDebug();
    }
    error() {
      this.writeError();
    }
    info() {
      this.writeInfo();
    }
    writeInfo() {
      return;
    }
    writeDebug() {
      return;
    }
    writeError() {
      return;
    }
  }

 class MockAppSandboxService {
   setMainProgressBar() {}
 }


  beforeAll(() => {
    TestBed.resetTestEnvironment();
    TestBed.initTestEnvironment(BrowserDynamicTestingModule,
                                platformBrowserDynamicTesting());
  });

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientModule,
        SearchBarModule,
        TestingModule,
        FormsModule,
        MaterialModule,
        FlexLayoutModule,
        ReactiveFormsModule,
        SafePipeModule,
        EffectsModule,
        NgProgressModule.withConfig(env.progressBarConfig),
        I18NextModule.forRoot(),
        StoreModule.forRoot({})
      ],
      declarations: [
        NotificationsComponent,
        BadgeComponent,
        UsernameIconComponent,
        PreferencesComponent,
        HeaderComponent
      ],
      providers: [
        CustomIconService,
        SidenavService,
        { provide: LogService, useClass: MockLogService },
        { provide: AppSandboxService, useClass: MockAppSandboxService },
        [Store],
        Actions
      ],
      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
    }).compileComponents();
  }));

  beforeEach(() => {
    logger = TestBed.get(LogService);
    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  afterEach(() => {
    fixture.destroy();
  });

Answer 1

Ваша проблема в том, что вы утверждаете, что объект эквивалентен false.Вы также не захватываете элемент, который хотите проверить видимость.Я предполагаю, что вы намереваетесь написать тест, который выполняет следующее:

1. Утверждение, что элемент не виден
2. Выполнение некоторых действий
3. Утверждение, что элемент видим

it('should show request menu if "Requests" is clicked', () => {
    expect(fixture.debugElement.query(By.css('#requestMenu'))).toBeFalsy();
    const button = fixture.debugElement.query(By.css('.requestMenu')).nativeElement;
    button.click();   
    fixture.detectChanges();
    expect(fixture.debugElement.query(By.css('#requestMenu'))).toBeTruthy();
});

Измените шаблон, чтобы иметь идентификатор элемента, который вы пытаетесь переключить:

<mat-menu id="requestMenu" #requestMenu="matMenu" yPosition="below">