build: attempt to de-flake harness integration test

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

.circleci/config.yml

@@ -13,12 +13,12 @@ var_2: &docker-browser-image cimg/node:16.14.0-browsers
 # **Note**: When updating the beginning of the cache key, also update the cache key to match
 # the new cache key prefix. This allows us to take advantage of CircleCI's fallback caching.
 # Read more here: https://circleci.com/docs/2.0/caching/#restoring-cache.
-var_3: &cache_key v10-ng-mat-{{ checksum ".bazelversion" }}-{{ checksum "tools/postinstall/apply-patches.js" }}-{{ checksum "WORKSPACE" }}-{{ checksum "yarn.lock" }}
+var_3: &cache_key v11-ng-mat-{{ checksum ".bazelversion" }}-{{ checksum "tools/postinstall/apply-patches.js" }}-{{ checksum "WORKSPACE" }}-{{ checksum "yarn.lock" }}
 # We want to invalidate the cache if the postinstall patches change. In order to apply new
 # patches, a clean version of the node modules is needed. Additionally, we invalidate the cache
 # if the Bazel version changes. We do this because otherwise the `bazelisk` cache folder will
 # contain all previously used versions and ultimately cause the cache restoring to be slower.
-var_4: &cache_fallback_key v10-ng-mat-{{ checksum ".bazelversion" }}-{{ checksum "tools/postinstall/apply-patches.js" }}-
+var_4: &cache_fallback_key v11-ng-mat-{{ checksum ".bazelversion" }}-{{ checksum "tools/postinstall/apply-patches.js" }}-
 
 # Settings common to each job
 var_5: &job_defaults

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/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 {}