使用 Karma-Jasmine 进行单元测试 mat-menu

Question

我有一个 mat-menu，其中内容可能因用户而异。我尝试编写单元测试，但从我所看到的情况来看，茉莉花看不到 CDK div，所以我无法获取菜单条目。

\n

我的模板：

\n

<button id="account" mat-icon-button [matMenuTriggerFor]="menu" aria-label="Profile">\n    <mat-icon>person</mat-icon>\n</button>\n<mat-menu #menu="matMenu">\n    <button mat-menu-item *ngxPermissionsOnly="PERMISSION.USER_LIST" id="user-list" (click)="usersList()">\n        <mat-icon>recent_actors</mat-icon>\n    </button>\n    <button mat-menu-item *ngxPermissionsOnly="PERMISSION.INFORMATIONS" id="informations" (click)="infoList()">\n        <mat-icon>info</mat-icon>\n    </button>\n    <button mat-menu-item id="logout" (click)="logout()">\n        <mat-icon>exit_to_app</mat-icon>\n    </button>\n</mat-menu>\n

\n

单元测试：

\n

let component: HeaderComponent;\nlet fixture: ComponentFixture < HeaderComponent > ;\n\nconst providers: any[] = headerProviders;\n\nbeforeEach(async (() => {\n    TestBed.configureTestingModule({\n            declarations: [\n                HeaderComponent,\n                NgxPermissionsRestrictStubDirective\n            ],\n            providers: providers,\n            imports: [\n                BrowserAnimationsModule,\n                BrowserModule,\n                CommonModule,\n                CommonSogetrelModule,\n                FlexLayoutModule,\n                SharedMaterialModule,\n                RouterTestingModule.withRoutes([])\n            ]\n        })\n        .compileComponents()\n        .then(() => {\n            fixture = TestBed.createComponent(HeaderComponent);\n            component = fixture.componentInstance;\n        });\n}));\n\nit(\'should not display elements which needs permissions\', () => {\n    fixture.nativeElement.querySelector(\'#account\').click();\n    fixture.detectChanges();\n    expect(logoutBtn).toBeTruthy(\'Le bouton D\xc3\xa9connexion doit \xc3\xaatre affich\xc3\xa9\');\n    expect(fixture.debugElement.nativeElement.querySelector(\'#user-list\')).toBeFalsy();\n\n});\n

\n

我尝试过

\n

console.info(fixture.nativeElement.parentNode);\nconst menu = fixture.nativeElement.parentNode.querySelector(\'.mat-menu-panel\');\nexpect(menu).toBeTruthy();\n

\n

我可以看到页面上console.info没有 CDK ，所以显然没有找到。div.mat-menu-panel

\n

关于如何测试 mat-menu 内容有什么想法吗？

\n

Answer 1

MatMenuHarness 是测试 mat 菜单的正确方法，但它有一个微小的不直观的细节。鉴于：

<div class="view-contract__portal-header">
  <h2>Counterparties</h2>
  <button
    mat-stroked-button
    color="primary"
    data-testid="add-counterparty"
    [matMenuTriggerFor]="menu"
  >
    <mat-icon>add</mat-icon> Add counterparty
  </button>
</div>

<mat-menu #menu="matMenu" data-testid="add-counterparty-menu">
  <button
    *ngFor="let role of roles"
    mat-menu-item
    [attr.data-testid]="'add-counterparty-' + role"
    (click)="addCounterparty(role)"
  >
    {{ role }}
  </button>
</mat-menu>

然后，应通过查找应用了 matMenuTriggerFor 属性的元素而不是实际的 mat-menu 元素来实例化 MatMenuHarness。

addCounterpartyMenu = await loader.getHarness<MatMenuHarness>(
  MatMenuHarness.with({
    selector: `[data-testid="add-counterparty"]`,
  }),
);