ci: update remote browsers in saucelabs and browserstack

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"
   }
 }