docs(material/radio): add harness example for radio (#21463)

Author: annieyw

src/components-examples/material/radio/BUILD.bazel

@@ -11,8 +11,14 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/radio",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/radio",
+        "//src/material/radio/testing",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

src/components-examples/material/radio/index.ts

@@ -1,22 +1,26 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatRadioModule} from '@angular/material/radio';
 import {RadioNgModelExample} from './radio-ng-model/radio-ng-model-example';
 import {RadioOverviewExample} from './radio-overview/radio-overview-example';
+import {RadioHarnessExample} from './radio-harness/radio-harness-example';
 
 export {
+  RadioHarnessExample,
   RadioNgModelExample,
   RadioOverviewExample,
 };
 
 const EXAMPLES = [
+  RadioHarnessExample,
   RadioNgModelExample,
   RadioOverviewExample,
 ];
 
 @NgModule({
   imports: [
+    ReactiveFormsModule,
     CommonModule,
     MatRadioModule,
     FormsModule,

src/components-examples/material/radio/radio-harness/radio-harness-example.html

@@ -0,0 +1,5 @@
+<mat-radio-group name="flavors">
+  <mat-radio-button value="chocolate" checked="true">Chocolate</mat-radio-button>
+  <mat-radio-button value="vanilla">Vanilla</mat-radio-button>
+  <mat-radio-button value="strawberry">Strawberry</mat-radio-button>
+</mat-radio-group>

src/components-examples/material/radio/radio-harness/radio-harness-example.spec.ts

@@ -0,0 +1,58 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatRadioButtonHarness, MatRadioGroupHarness} from '@angular/material/radio/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatRadioModule} from '@angular/material/radio';
+import {RadioHarnessExample} from './radio-harness-example';
+import {ReactiveFormsModule} from '@angular/forms';
+
+describe('RadioHarnessExample', () => {
+  let fixture: ComponentFixture<RadioHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatRadioModule, ReactiveFormsModule],
+        declarations: [RadioHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(RadioHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should load all radio-group harnesses', async () => {
+    const groups = await loader.getAllHarnesses(MatRadioGroupHarness);
+    expect(groups.length).toBe(1);
+  });
+
+  it('should get name of radio-group', async () => {
+    const group = await loader.getHarness(MatRadioGroupHarness);
+    const name = await group.getName();
+    expect(name).toBe('flavors');
+  });
+
+  it('should check radio button', async () => {
+    const buttons = await loader.getAllHarnesses(MatRadioButtonHarness);
+    expect(await buttons[0].isChecked()).toBeTrue();
+
+    await buttons[1].check();
+    expect(await buttons[1].isChecked()).toBeTrue();
+    expect(await buttons[0].isChecked()).toBeFalse();
+  });
+
+  it('should get label text of buttons', async () => {
+    const [firstRadio, secondRadio, thirdRadio] =
+      await loader.getAllHarnesses(MatRadioButtonHarness);
+    expect(await firstRadio.getLabelText()).toBe('Chocolate');
+    expect(await secondRadio.getLabelText()).toBe('Vanilla');
+    expect(await thirdRadio.getLabelText()).toBe('Strawberry');
+  });
+});

src/components-examples/material/radio/radio-harness/radio-harness-example.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatRadioHarness
+ */
+@Component({
+  selector: 'radio-harness-example',
+  templateUrl: 'radio-harness-example.html',
+})
+export class RadioHarnessExample {}