ci: update remote browsers in saucelabs and browserstack (#24468)

* ci: update remote browsers in saucelabs and browserstack

Updates the remote browsers in SL and BS. We also updated
Chromium and Firefox recently through `dev-infra`.

* test: update cdk table sticky test to work with Safari v15

Updates the CDK table flex-layout sticky to work with Safari v15. The
test starts failing because the `position: sticky` does not work as
expected for the custom elements without an explicit `display`. Updating
the fixture to actually align columns in a row horizontally fixes this
and makes sense, given the name of the fixture being about flex-based table.

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

* test: use `document.activeElement` instead of pseudo `:focus` query search

Some tests seem to use `:focus` instead of `document.activeElement` for test
assertions. This seems to work unreliably in Safari as sometimes the `:focus`
query returns `null`, unless `document.activeElement` is requested before (which
seems to indicate that `document.activeElement` does something under-the-hood
to determine the active element, while `querySelector(':focus')` does not have this.

The details on why `activeElement` is better in our case are a little hypothetical
but doesn't seem worth investigating a lot since in all other places in the repo
we haven't used this pattern for checking the active document element.

Author: devversion

src/cdk-experimental/menu/context-menu.spec.ts

@@ -126,7 +126,7 @@ describe('CdkContextMenuTrigger', () => {
 
     it('should focus the first menuitem when the context menu is opened', () => {
       openContextMenu();
-      expect(document.querySelector(':focus')!.id).toEqual('first_menu_item');
+      expect(document.activeElement!.id).toEqual('first_menu_item');
     });
   });
 

src/cdk-experimental/menu/menu-bar.spec.ts

@@ -986,8 +986,8 @@ describe('MenuBar', () => {
         dispatchMouseEvent(menuBarNativeItems[0], 'mouseenter');
         detectChanges();
 
-        expect(document.querySelector(':focus')).not.toEqual(menuBarNativeItems[0]);
-        expect(document.querySelector(':focus')).not.toEqual(menuBarNativeItems[1]);
+        expect(document.activeElement).not.toEqual(menuBarNativeItems[0]);
+        expect(document.activeElement).not.toEqual(menuBarNativeItems[1]);
       },
     );
 
@@ -1089,7 +1089,7 @@ describe('MenuBar', () => {
 
         dispatchKeyboardEvent(nativeMenus[0], 'keydown', DOWN_ARROW);
 
-        expect(document.querySelector(':focus')).toEqual(fileMenuNativeItems[1]);
+        expect(document.activeElement).toEqual(fileMenuNativeItems[1]);
       },
     );
 

src/cdk-experimental/menu/menu.spec.ts

@@ -214,7 +214,7 @@ describe('Menu', () => {
       dispatchKeyboardEvent(document, 'keydown', TAB);
       nativeMenu.focus();
 
-      expect(document.querySelector(':focus')).toEqual(nativeMenuItems[0]);
+      expect(document.activeElement).toEqual(nativeMenuItems[0]);
     });
   });
 

src/cdk/table/table.spec.ts

@@ -2435,6 +2435,9 @@ class StickyPositioningListenerTest implements StickyPositioningListener {
       display: block;
       width: 20px;
     }
+    .cdk-header-row, .cdk-row, .cdk-footer-row {
+      display: flex;
+    }
   `,
   ],
   providers: [{provide: STICKY_POSITIONING_LISTENER, useExisting: StickyFlexLayoutCdkTableApp}],

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-experimental/menubar/menubar.spec.ts

@@ -53,12 +53,12 @@ describe('MatMenuBar', () => {
   it('should toggle focused items on left/right click', () => {
     nativeMatMenubar.focus();
 
-    expect(document.querySelector(':focus')!.id).toBe('first');
+    expect(document.activeElement!.id).toBe('first');
 
     dispatchKeyboardEvent(nativeMatMenubar, 'keydown', RIGHT_ARROW);
     fixture.detectChanges();
 
-    expect(document.querySelector(':focus')!.id).toBe('second');
+    expect(document.activeElement!.id).toBe('second');
   });
 });
 

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

test/browser-providers.js

@@ -5,8 +5,8 @@
  *   - `saucelabs`: Launches the browser within Saucelabs
  */
 const browserConfig = {
-  'iOS14': {unitTest: {target: 'saucelabs'}},
-  'Safari13': {unitTest: {target: 'browserstack'}},
+  'iOS15': {unitTest: {target: 'saucelabs'}},
+  'Safari15': {unitTest: {target: 'browserstack'}},
 };
 
 /** Exports all available custom Karma browsers. */

test/karma-browsers.json

@@ -1,18 +1,18 @@
 {
-  "SAUCELABS_IOS14": {
+  "SAUCELABS_IOS15": {
     "base": "SauceLabs",
-    "appiumVersion": "1.20.1",
+    "appiumVersion": "1.22.0",
     "deviceOrientation": "portrait",
     "browserName": "Safari",
-    "platformVersion": "14.3",
+    "platformVersion": "15.0",
     "platformName": "iOS",
-    "deviceName": "iPhone 12 Pro Simulator"
+    "deviceName": "iPhone 13 Pro Max Simulator"
   },
-  "BROWSERSTACK_SAFARI13": {
+  "BROWSERSTACK_SAFARI15": {
     "base": "BrowserStack",
     "browser": "Safari",
-    "browser_version": "13.1",
+    "browser_version": "15.0",
     "os": "OS X",
-    "os_version": "Catalina"
+    "os_version": "Monterey"
   }
 }