用Karma-Jasmine进行单元测试的mat-菜单。

Question

我有一个mat-menu，其中的内容可能会因用户不同而不同。我试图写单元测试，但从我所看到的情况来看，jasmine没有看到CDK div，所以我不能抓取菜单条目。

我的模板:

    <button id="account" mat-icon-button [matMenuTriggerFor]="menu" aria-label="Profile">
        <mat-icon>person</mat-icon>
    </button>

      <mat-menu #menu="matMenu">
        <button mat-menu-item *ngxPermissionsOnly="PERMISSION.USER_LIST" id="user-list" (click)="usersList()">
          <mat-icon>recent_actors</mat-icon>
        </button>
        <button mat-menu-item *ngxPermissionsOnly="PERMISSION.INFORMATIONS" id="informations" (click)="infoList()">
          <mat-icon>info</mat-icon>
        </button>
        <button mat-menu-item id="logout" (click)="logout()">
          <mat-icon>exit_to_app</mat-icon>
        </button>
      </mat-menu>

单元测试。

     let component: HeaderComponent;
     let fixture: ComponentFixture<HeaderComponent>;

     const providers: any[] = headerProviders;

     beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [
            HeaderComponent,
            NgxPermissionsRestrictStubDirective
          ],
          providers: providers,
          imports: [
            BrowserAnimationsModule,
            BrowserModule,
            CommonModule,
            CommonSogetrelModule,
            FlexLayoutModule,
            SharedMaterialModule,
            RouterTestingModule.withRoutes([])
          ]
        })
          .compileComponents()
          .then(() => {
            fixture = TestBed.createComponent(HeaderComponent);
            component = fixture.componentInstance;
          });
      }));

    it('should not display elements which needs permissions', () => {
        fixture.nativeElement.querySelector('#account').click();
        fixture.detectChanges();
        expect(logoutBtn).toBeTruthy('Le bouton Déconnexion doit être affiché');
        expect(fixture.debugElement.nativeElement.querySelector('#user-list')).toBeFalsy();

      });

我试着用

    console.info(fixture.nativeElement.parentNode);
    const menu = fixture.nativeElement.parentNode.querySelector('.mat-menu-panel');
    expect(menu).toBeTruthy();

我在console.info中看到的是，页面上没有CDK div，所以很明显的是 .mat-menu-panel 没有找到。

有什么办法可以测试mat-menu的内容吗？

谢谢

Answer 1

我认为问题是你在同一个时钟交互中做了所有的事情，因此，DOM不会被更新，直到下一个时钟。

为了处理这个问题，你可以使用 伪造的Aysnc 和 勾选 Angular的。

我想我们可以像这样用fakeAsync重写你的测试。

    it('should not display elements which needs permissions', fakeAsync(() => {
        fixture.nativeElement.querySelector('#account').click();
        tick();
        fixture.detectChanges();
        expect(logoutBtn).toBeTruthy('Le bouton Déconnexion doit être affiché');
        expect(fixture.debugElement.nativeElement.querySelector('#user-list')).toBeFalsy();
      }));

我想应该可以用它来测试