如何测试 matTooltip 是否在 Angular Material 中正确禁用？

Question

我有一个创建多个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中找不到如何检查它。

我有两个用于两张卡片的工具提示线束。我可以确认它们已附加到正确的卡上。

<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>

我不明白的是如何获得财产disabled。我找到了实际课程的测试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'
  );
);

但这给了我两个mat-card元素，而不是工具提示。

我是否需要为工具提示创建一个固定装置，或者我还缺少其他东西吗？

Answer 1

有时你只需要阅读源代码。我最终使用了他们在测试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();
    });

这就像一个魅力。