build: attempt to de-flake harness integration test (#25241)

Tries to de-flake the harness e2e integration test by swapping out `mat-select` with `mat-radio-group`. `mat-select` has been causing flakes in its own Firefox tests too so it's possible that it may be the reason for the integration test flakes as well.

The component being tested doesn't really matter since the integration test is primarily verifying our npm packages.

Author: crisbeto

integration/harness-e2e-cli/BUILD.bazel

@@ -3,7 +3,13 @@ load("//tools:integration.bzl", "CLI_PROJECT_MAPPINGS")
 load("//tools:defaults.bzl", "node_integration_test")
 
 npmPackageMappings = dicts.add(
-    CLI_PROJECT_MAPPINGS,
+    dicts.omit(
+        CLI_PROJECT_MAPPINGS,
+        # Exclude rxjs, because we want to use the version from the package.json.
+        # Version 6.x that the rest of the project uses has some packaging issues. See:
+        # https://github.com/angular/components/pull/25241#issuecomment-1178701633
+        ["@npm//:rxjs_archive"],
+    ),
     {
         "//src/cdk:npm_package_archive": "@angular/cdk",
         "//src/material:npm_package_archive": "@angular/material",

integration/harness-e2e-cli/e2e/select-harness.spec.ts renamed to integration/harness-e2e-cli/e2e/radio-harness.spec.ts

@@ -1,4 +1,4 @@
-import {MatSelectHarness} from '@angular/material/select/testing';
+import {MatRadioGroupHarness} from '@angular/material/radio/testing';
 import {SeleniumWebDriverHarnessEnvironment} from '@angular/cdk/testing/selenium-webdriver';
 import {HarnessLoader} from '@angular/cdk/testing';
 import {configureDriver} from './driver.js';
@@ -15,18 +15,14 @@ describe('app test', () => {
   });
 
   it('should work', async () => {
-    const select = await loader.getHarness(MatSelectHarness);
+    const group = await loader.getHarness(MatRadioGroupHarness);
 
-    expect(select).toBeDefined();
-    expect(await select.getValueText()).toBe('');
+    expect(group).toBeDefined();
+    expect(await group.getCheckedValue()).toBe(null);
 
-    await select.open();
+    const buttons = await group.getRadioButtons();
+    await buttons[1].check();
 
-    const options = await select.getOptions();
-
-    await options[0].click();
-    await select.close();
-
-    expect(await select.getValueText()).toBe('First');
+    expect(await group.getCheckedValue()).toBe('second');
   });
 });

integration/harness-e2e-cli/package.json

@@ -23,7 +23,7 @@
     "@angular/platform-browser": "file:../../node_modules/@angular/platform-browser",
     "@angular/platform-browser-dynamic": "file:../../node_modules/@angular/platform-browser-dynamic",
     "@angular/router": "file:../../node_modules/@angular/router",
-    "rxjs": "file:../../node_modules/rxjs",
+    "rxjs": "^7.5.5",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },

integration/harness-e2e-cli/src/app/app.component.html

@@ -1,7 +1,4 @@
-<mat-form-field>
-  <mat-label>Select</mat-label>
-  <mat-select>
-    <mat-option value="first">First</mat-option>
-    <mat-option value="second">Second</mat-option>
-  </mat-select>
-</mat-form-field>
+<mat-radio-group name="radio-group">
+  <mat-radio-button value="first">First</mat-radio-button>
+  <mat-radio-button value="second">Second</mat-radio-button>
+</mat-radio-group>

integration/harness-e2e-cli/src/app/app.module.ts

@@ -3,13 +3,11 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
 import {AppComponent} from './app.component';
-import {MatSelectModule} from '@angular/material/select';
-import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatRadioModule} from '@angular/material/radio';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [MatSelectModule, MatFormFieldModule, NoopAnimationsModule, BrowserModule],
-  providers: [],
+  imports: [MatRadioModule, NoopAnimationsModule, BrowserModule],
   bootstrap: [AppComponent],
 })
 export class AppModule {}