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

问题描述 投票:0回答:2

我有一个循环创建多个

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

 元素,而不是工具提示。

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

angular typescript angular-material jasmine
2个回答
8
投票
有时你只需要阅读源代码。我最终使用了他们在

测试 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(); });
这就像一个魅力。


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

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

© www.soinside.com 2019 - 2024. All rights reserved.