如何测试 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

文档中找不到如何检查它。

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

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

 元素，而不是工具提示。

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

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();
    });

这就像一个魅力。

Answer 2

对于仍然问这个问题的人，他们已在材料版本中添加了此问题

16.1.0

问题：

https://github.com/angular/components/pull/27038 变更日志：
https://github.com/angular/components/blob/main/CHANGELOG.md#16.1.0 文档：
https://material.angular.io/components/tooltip/api#MatTooltipHarness