From 6ae8f6245ea2203167f99c763f108bc6d2d371a9 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 9 Feb 2021 17:35:36 +0100 Subject: [PATCH] fix(material/tooltip): handle touch devices in test harness (#21220) `MatTooltip` binds either a mouse or a touch event, depending on whether it's on a touch device or not. In the harnesses we were limited to dispatching only mouse events which meant that tests couldn't be run against touch devices. Now that we can fake any sort of event, we're able to support touch devices too. (cherry picked from commit 24cbe1dfbac801eabb39298638ba647d5389865e) --- src/material/tooltip/testing/BUILD.bazel | 1 - src/material/tooltip/testing/shared.spec.ts | 28 ------------------- .../tooltip/testing/tooltip-harness.ts | 14 +++++++++- 3 files changed, 13 insertions(+), 30 deletions(-) diff --git a/src/material/tooltip/testing/BUILD.bazel b/src/material/tooltip/testing/BUILD.bazel index 2ec994e3d042..15d01b095733 100644 --- a/src/material/tooltip/testing/BUILD.bazel +++ b/src/material/tooltip/testing/BUILD.bazel @@ -24,7 +24,6 @@ ng_test_library( srcs = ["shared.spec.ts"], deps = [ ":testing", - "//src/cdk/platform", "//src/cdk/testing", "//src/cdk/testing/testbed", "//src/material/tooltip", diff --git a/src/material/tooltip/testing/shared.spec.ts b/src/material/tooltip/testing/shared.spec.ts index 4a3a1b834de1..5ba2daecacbc 100644 --- a/src/material/tooltip/testing/shared.spec.ts +++ b/src/material/tooltip/testing/shared.spec.ts @@ -5,15 +5,10 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {MatTooltipModule} from '@angular/material/tooltip'; import {MatTooltipHarness} from '@angular/material/tooltip/testing/tooltip-harness'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {Platform} from '@angular/cdk/platform'; /** Shared tests to run on both the original and MDC-based tooltips. */ export function runHarnessTests( tooltipModule: typeof MatTooltipModule, tooltipHarness: typeof MatTooltipHarness) { - // TODO(COMP-322): whether the current test device is supported by the harness. At the time of - // writing, we have to skip these tests on touch devices, because we don't have a way of - // simulating touch events. This variable should be removed once the issue is resolved. - let isSupported: boolean; let fixture: ComponentFixture; let loader: HarnessLoader; @@ -26,25 +21,14 @@ export function runHarnessTests( fixture = TestBed.createComponent(TooltipHarnessTest); fixture.detectChanges(); loader = TestbedHarnessEnvironment.loader(fixture); - - const platform = TestBed.inject(Platform); - isSupported = !platform.IOS && !platform.ANDROID; }); it('should load all tooltip harnesses', async () => { - if (!isSupported) { - return; - } - const tooltips = await loader.getAllHarnesses(tooltipHarness); expect(tooltips.length).toBe(2); }); it('should be able to show a tooltip', async () => { - if (!isSupported) { - return; - } - const tooltip = await loader.getHarness(tooltipHarness.with({selector: '#one'})); expect(await tooltip.isOpen()).toBe(false); await tooltip.show(); @@ -52,10 +36,6 @@ export function runHarnessTests( }); it('should be able to hide a tooltip', async () => { - if (!isSupported) { - return; - } - const tooltip = await loader.getHarness(tooltipHarness.with({selector: '#one'})); expect(await tooltip.isOpen()).toBe(false); await tooltip.show(); @@ -65,20 +45,12 @@ export function runHarnessTests( }); it('should be able to get the text of a tooltip', async () => { - if (!isSupported) { - return; - } - const tooltip = await loader.getHarness(tooltipHarness.with({selector: '#one'})); await tooltip.show(); expect(await tooltip.getTooltipText()).toBe('Tooltip message'); }); it('should return empty when getting the tooltip text while closed', async () => { - if (!isSupported) { - return; - } - const tooltip = await loader.getHarness(tooltipHarness.with({selector: '#one'})); expect(await tooltip.getTooltipText()).toBe(''); }); diff --git a/src/material/tooltip/testing/tooltip-harness.ts b/src/material/tooltip/testing/tooltip-harness.ts index 2a16dbf1dff9..e8822e993ca8 100644 --- a/src/material/tooltip/testing/tooltip-harness.ts +++ b/src/material/tooltip/testing/tooltip-harness.ts @@ -26,12 +26,24 @@ export class MatTooltipHarness extends ComponentHarness { /** Shows the tooltip. */ async show(): Promise { - return (await this.host()).hover(); + const host = await this.host(); + + // We need to dispatch both `touchstart` and a hover event, because the tooltip binds + // different events depending on the device. The `changedTouches` is there in case the + // element has ripples. + // @breaking-change 12.0.0 Remove null assertion from `dispatchEvent`. + await host.dispatchEvent?.('touchstart', {changedTouches: []}); + await host.hover(); } /** Hides the tooltip. */ async hide(): Promise { const host = await this.host(); + + // We need to dispatch both `touchstart` and a hover event, because + // the tooltip binds different events depending on the device. + // @breaking-change 12.0.0 Remove null assertion from `dispatchEvent`. + await host.dispatchEvent?.('touchend'); await host.mouseAway(); await this.forceStabilize(); // Needed in order to flush the `hide` animation. }