fix(cdk/testing): harness click events inconsistently causing clicks on disabled elements

Currently the CDK harness implementation for `TestBed` tries to mimic user interactions,
like `click`. These helpers can then be called by harness authors or consumers.

Currently there is some inconistency across harness environments where `testElement.click()`
on disabled buttons, inputs etc. causes `click` events to be still emitted in `TestBed` for
Chromium-based browsers, while this is not the case for `TestBed` in `Firefox` and `Safari`,
neither in e2e-based clicks (like protractor or webdriver).

This seems to be inconsistency caused by browsers in the ecosystem. There are bug reports
in Firefox where they explicitly kept emitting `click` when explicitly dispatched programmatically
(seems reasonable to me). Chromium has a bug report where users complain about events being
prevented, even though dispatched programmatically.

https://bugzilla.mozilla.org/show_bug.cgi?id=329509.
https://bugs.chromium.org/p/chromium/issues/detail?id=1115661

In either way though, we should make this consistent with an actual user interaction (like with e2e environments)
and just skip the click event when the underlying element is disabled (we assume the `disabled` property is a sufficient
indicator for this). Note that the mousedown, mouseup event sequence continues to be emulated/synthesized.

Author: devversion

src/cdk/testing/testbed/unit-test-element.ts

@@ -100,7 +100,15 @@ export class UnitTestElement implements TestElement {
   async click(
     ...args: [ModifierKeys?] | ['center', ModifierKeys?] | [number, number, ModifierKeys?]
   ): Promise<void> {
-    await this._dispatchMouseEventSequence('click', args, 0);
+    const isDisabled = (this.element as Partial<{disabled?: boolean}>).disabled === true;
+
+    // If the element is `disabled` and has a `disabled` property, we emit the mouse event
+    // sequence but not dispatch the `click` event. This is necessary to keep the behavior
+    // consistent with an actual user interaction. The click event is not necessarily
+    // automatically prevented by the browser. There is mismatch between Firefox and Chromium:
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=329509.
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=1115661.
+    await this._dispatchMouseEventSequence(isDisabled ? null : 'click', args, 0);
     await this._stabilize();
   }
 
@@ -284,9 +292,12 @@ export class UnitTestElement implements TestElement {
     }
   }
 
-  /** Dispatches all the events that are part of a mouse event sequence. */
+  /**
+   * Dispatches all the events that are part of a mouse event sequence
+   * and then emits a given primary event at the end, if speciifed.
+   */
   private async _dispatchMouseEventSequence(
-    name: string,
+    primaryEventName: string | null,
     args: [ModifierKeys?] | ['center', ModifierKeys?] | [number, number, ModifierKeys?],
     button?: number,
   ) {
@@ -313,11 +324,16 @@ export class UnitTestElement implements TestElement {
     dispatchMouseEvent(this.element, 'mousedown', clientX, clientY, button, modifiers);
     this._dispatchPointerEventIfSupported('pointerup', clientX, clientY, button);
     dispatchMouseEvent(this.element, 'mouseup', clientX, clientY, button, modifiers);
-    dispatchMouseEvent(this.element, name, clientX, clientY, button, modifiers);
+
+    // If a primary event name is specified, emit it after the mouse event sequence.
+    if (primaryEventName !== null) {
+      dispatchMouseEvent(this.element, primaryEventName, clientX, clientY, button, modifiers);
+    }
 
     // This call to _stabilize should not be needed since the callers will already do that them-
     // selves. Nevertheless it breaks some tests in g3 without it. It needs to be investigated
     // why removing breaks those tests.
+    // See: https://github.com/angular/components/pull/20758/files#r520886256.
     await this._stabilize();
   }
 }

src/material/checkbox/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/checkbox",

src/material/checkbox/testing/shared.spec.ts

@@ -1,4 +1,3 @@
-import {Platform} from '@angular/cdk/platform';
 import {HarnessLoader} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Component} from '@angular/core';
@@ -15,7 +14,6 @@ export function runHarnessTests(
   checkboxModule: typeof MatCheckboxModule,
   checkboxHarness: typeof MatCheckboxHarness,
 ) {
-  let platform: Platform;
   let fixture: ComponentFixture<CheckboxHarnessTest>;
   let loader: HarnessLoader;
 
@@ -25,7 +23,6 @@ export function runHarnessTests(
       declarations: [CheckboxHarnessTest],
     }).compileComponents();
 
-    platform = TestBed.inject(Platform);
     fixture = TestBed.createComponent(CheckboxHarnessTest);
     fixture.detectChanges();
     loader = TestbedHarnessEnvironment.loader(fixture);
@@ -155,11 +152,6 @@ export function runHarnessTests(
   });
 
   it('should not toggle disabled checkbox', async () => {
-    if (platform.FIREFOX) {
-      // do run this test on firefox as click events on the label of a disabled checkbox
-      // cause the value to be changed. https://bugzilla.mozilla.org/show_bug.cgi?id=1540995
-      return;
-    }
     const disabledCheckbox = await loader.getHarness(checkboxHarness.with({label: 'Second'}));
     expect(await disabledCheckbox.isChecked()).toBe(false);
     await disabledCheckbox.toggle();

src/material/radio/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/private",
         "//src/cdk/testing/testbed",

src/material/radio/testing/shared.spec.ts

@@ -1,4 +1,3 @@
-import {Platform} from '@angular/cdk/platform';
 import {HarnessLoader} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Component} from '@angular/core';
@@ -13,7 +12,6 @@ export function runHarnessTests(
   radioGroupHarness: typeof MatRadioGroupHarness,
   radioButtonHarness: typeof MatRadioButtonHarness,
 ) {
-  let platform: Platform;
   let fixture: ComponentFixture<MultipleRadioButtonsHarnessTest>;
   let loader: HarnessLoader;
 
@@ -23,7 +21,6 @@ export function runHarnessTests(
       declarations: [MultipleRadioButtonsHarnessTest],
     }).compileComponents();
 
-    platform = TestBed.inject(Platform);
     fixture = TestBed.createComponent(MultipleRadioButtonsHarnessTest);
     fixture.detectChanges();
     loader = TestbedHarnessEnvironment.loader(fixture);
@@ -243,13 +240,6 @@ export function runHarnessTests(
     });
 
     it('should not be able to check disabled radio-button', async () => {
-      if (platform.FIREFOX) {
-        // do run this test on firefox as click events on the label of the underlying
-        // input checkbox cause the value to be changed. Read more in the bug report:
-        // https://bugzilla.mozilla.org/show_bug.cgi?id=1540995
-        return;
-      }
-
       fixture.componentInstance.disableAll = true;
       fixture.detectChanges();
 

src/material/slide-toggle/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/slide-toggle",

src/material/slide-toggle/testing/shared.spec.ts

@@ -1,4 +1,3 @@
-import {Platform} from '@angular/cdk/platform';
 import {HarnessLoader} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Component} from '@angular/core';
@@ -12,7 +11,6 @@ export function runHarnessTests(
   slideToggleModule: typeof MatSlideToggleModule,
   slideToggleHarness: typeof MatSlideToggleHarness,
 ) {
-  let platform: Platform;
   let fixture: ComponentFixture<SlideToggleHarnessTest>;
   let loader: HarnessLoader;
 
@@ -22,7 +20,6 @@ export function runHarnessTests(
       declarations: [SlideToggleHarnessTest],
     }).compileComponents();
 
-    platform = TestBed.inject(Platform);
     fixture = TestBed.createComponent(SlideToggleHarnessTest);
     fixture.detectChanges();
     loader = TestbedHarnessEnvironment.loader(fixture);
@@ -149,13 +146,6 @@ export function runHarnessTests(
   });
 
   it('should not toggle disabled slide-toggle', async () => {
-    if (platform.FIREFOX) {
-      // do not run this test on firefox as click events on the label of the underlying
-      // input checkbox cause the value to be changed. Read more in the bug report:
-      // https://bugzilla.mozilla.org/show_bug.cgi?id=1540995
-      return;
-    }
-
     const disabledToggle = await loader.getHarness(slideToggleHarness.with({label: 'Second'}));
     expect(await disabledToggle.isChecked()).toBe(false);
     await disabledToggle.toggle();