单元测试垫菜单与Karma Jasmine

Question

我有一个垫子菜单，其中的内容可能因用户而异。我试着写单元测试，但据我所见，jasmine没有看到CDKdiv，所以我无法获取菜单项。

我的模板：

<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中看到的是，页面上没有CDKdiv，所以很明显，.mat-menu-panel没有找到。

你知道如何测试垫子菜单的内容吗？

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菜单元素来实例化MatMenuHarness。

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

Answer 2

我认为您应该在MatMenuHarness上尝试一下。

https://material.angular.io/components/menu/api#MatMenuHarness

it('should not display elements which needs permissions', async () => {
let loader: HarnessLoader = TestbedHarnessEnvironment.loader(fixture);
fixture.detectChanges();
let menu = await testHarness.loader.getHarness(MatMenuHarness);
let items = await menu.getItems();
expect(items.length).toBe(1);
});

Answer 3

我认为问题是您在同一个时钟交互中执行所有操作，因此，DOM直到下一个时钟才会更新。

要处理此问题，可以使用fakeAysnc和Angular的tick。

我想我们可以用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();
}));

我认为应该这样做。