build: run edge tests on browserstack (#20662)

Moves the Edge tests to Browserstack to avoid the recent issues with Saucelabs.

Author: crisbeto

src/cdk/testing/tests/cross-environment.spec.ts

@@ -354,23 +354,23 @@ export function crossEnvironmentSpecs(
     });
 
     it('should be able to hover', async () => {
-      const host = await harness.host();
-      let classAttr = await host.getAttribute('class');
+      const box = await harness.hoverTest();
+      let classAttr = await box.getAttribute('class');
       expect(classAttr).not.toContain('hovering');
-      await host.hover();
-      classAttr = await host.getAttribute('class');
+      await box.hover();
+      classAttr = await box.getAttribute('class');
       expect(classAttr).toContain('hovering');
     });
 
     it('should be able to stop hovering', async () => {
-      const host = await harness.host();
-      let classAttr = await host.getAttribute('class');
+      const box = await harness.hoverTest();
+      let classAttr = await box.getAttribute('class');
       expect(classAttr).not.toContain('hovering');
-      await host.hover();
-      classAttr = await host.getAttribute('class');
+      await box.hover();
+      classAttr = await box.getAttribute('class');
       expect(classAttr).toContain('hovering');
-      await host.mouseAway();
-      classAttr = await host.getAttribute('class');
+      await box.mouseAway();
+      classAttr = await box.getAttribute('class');
       expect(classAttr).not.toContain('hovering');
     });
 

src/cdk/testing/tests/harnesses/main-component-harness.ts

@@ -90,6 +90,7 @@ export class MainComponentHarness extends ComponentHarness {
   readonly shadows = this.locatorForAll('.in-the-shadows');
   readonly deepShadow = this.locatorFor(
       'test-shadow-boundary test-sub-shadow-boundary > .in-the-shadows');
+  readonly hoverTest = this.locatorFor('#hover-box');
 
   private _testTools = this.locatorFor(SubComponentHarness);
 

src/cdk/testing/tests/test-main-component.html

@@ -58,3 +58,11 @@ <h1 style="height: 100px; width: 200px;">Main Component</h1>
   <span id="task-state-result" #taskStateResult></span>
 </div>
 <test-shadow-boundary *ngIf="_shadowDomSupported"></test-shadow-boundary>
+
+
+<div
+  id="hover-box"
+  [class.hovering]="isHovering"
+  (mouseenter)="isHovering = true"
+  (mouseleave)="isHovering = false"
+  style="width: 50px; height: 50px; background: hotpink;"></div>

src/cdk/testing/tests/test-main-component.ts

@@ -22,11 +22,6 @@ import {
 @Component({
   selector: 'test-main',
   templateUrl: 'test-main-component.html',
-  host: {
-    '[class.hovering]': '_isHovering',
-    '(mouseenter)': 'onMouseEnter()',
-    '(mouseleave)': 'onMouseLeave()',
-  },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -39,7 +34,7 @@ export class TestMainComponent implements OnDestroy {
   memo: string;
   testTools: string[];
   testMethods: string[];
-  _isHovering: boolean;
+  isHovering = false;
   specialKey = '';
   relativeX = 0;
   relativeY = 0;
@@ -54,14 +49,6 @@ export class TestMainComponent implements OnDestroy {
 
   private _fakeOverlayElement: HTMLElement;
 
-  onMouseEnter() {
-    this._isHovering = true;
-  }
-
-  onMouseLeave() {
-    this._isHovering = false;
-  }
-
   constructor(private _cdr: ChangeDetectorRef, private _zone: NgZone) {
     this.username = 'Yi';
     this.counter = 0;

test/browser-providers.js

@@ -7,7 +7,7 @@
  *   - `saucelabs`: Launches the browser within Saucelabs
  */
 const browserConfig = {
-  'Edge83':            {unitTest: {target: 'saucelabs'}},
+  'Edge83':            {unitTest: {target: 'browserstack'}},
   'iOS13':             {unitTest: {target: 'saucelabs'}},
   'Safari13':          {unitTest: {target: 'browserstack'}},
 };

test/karma-browsers.json

@@ -19,11 +19,12 @@
     "platformName": "iOS",
     "deviceName": "iPhone XS Simulator"
   },
-  "SAUCELABS_EDGE83": {
-    "base": "SauceLabs",
-    "browserName": "MicrosoftEdge",
-    "browserVersion": "83.0",
-    "platformName": "Windows 10"
+  "BROWSERSTACK_EDGE83": {
+    "base": "BrowserStack",
+    "browser": "Edge",
+    "browser_version": "83.0",
+    "os": "Windows",
+    "os_version": "10"
   },
   "BROWSERSTACK_SAFARI13": {
     "base": "BrowserStack",