我有一个循环创建多个
matCard
元素。这些代表事件。其中一些已经成为过去。我给这些类设置了灰色,并添加了 matTooltip
来解释这意味着什么。
<mat-card
class="event-card"
*ngFor="let event of events"
[class.past-event]="event.alreadyHappened()"
matTooltip="This event has already happened"
[matTooltipDisabled]="event.alreadyHappened() === false"
>
<mat-card-header>...</mat-card-header>
<mat-card-content></mat-card-content>
</mat-card>
alreadyHappened()
方法返回一个布尔值。
matTooltip
文档中找不到如何检查它。
我有两个用于两张卡片的工具提示线束。我可以确认它们已附加到正确的卡上。
it('should display tootltip on past events', async () => {
const tooltips = await loader.getAllHarnesses(MatTooltipHarness);
expect(tooltips.length).toBe(2);
expect(
await (await tooltips[0].host()).hasClass('past-event')
).toBeTrue();
expect(
await (await tooltips[1].host()).hasClass('past-event')
).toBeFalse();
await tooltips[0].show();
expect(await tooltips[0].getTooltipText()).toEqual(
'This event has already happened'
);
);
我不明白的是如何获得
disabled
属性。我找到了实际matTooltip
类的测试,但我认为我不应该搞乱内部结构。
我发现我可以通过这个答案获取孩子的组件实例。
const ttFixture = fixture.debugElement.queryAll(By.directive(MatTooltip));
console.log(ttFixture);
但这给了我两个 mat-card
元素,而不是工具提示。我需要为工具提示创建一个固定装置,还是我还缺少其他东西?
测试 matTooltip
By
来获取谓词,以及
MatTooltip
。
import { By } from '@angular/platform-browser';
import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
然后我们需要将 MatTooltipModule
导入到
TestBed
中。我们还需要动画来弹出工具提示。
TestBed.configureTestingModule({
declarations: [EventsComponent],
// VVVVVVVVVVVVVVVV
imports: [MatCardModule, MatTooltipModule, NoopAnimationsModule],
...
然后我们可以使用它的injector
来获取具有属性的组件实例。
it('should display tootltip on past events', async () => {
const ttDebugElements = fixture.debugElement.queryAll(By.css('.event-card'));
const pastEventTooltip = ttDebugElements[0].injector.get<MatTooltip>(MatTooltip);
const futureEventTooltip = ttDebugElements[1].injector.get<MatTooltip>(MatTooltip);
expect(pastEventTooltip.disabled).toBeFalse();
expect(futureEventTooltip.disabled).toBeTrue();
});
这就像一个魅力。