docs(material/form-field): add harness example for form-field (#21471)

Author: annieyw

src/components-examples/material/form-field/BUILD.bazel

@@ -11,14 +11,21 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/form-field",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/checkbox",
         "//src/material/form-field",
+        "//src/material/form-field/testing",
         "//src/material/icon",
         "//src/material/input",
+        "//src/material/input/testing",
         "//src/material/radio",
         "//src/material/select",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

src/components-examples/material/form-field/form-field-harness/form-field-harness-example.html

@@ -0,0 +1,7 @@
+<mat-form-field id="with-errors">
+  <span class="custom-control">Custom control harness</span>
+  <input matInput [formControl]="requiredControl">
+
+  <mat-error>Error</mat-error>
+  <mat-hint align="start">Hint</mat-hint>
+</mat-form-field>

src/components-examples/material/form-field/form-field-harness/form-field-harness-example.spec.ts

@@ -0,0 +1,62 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatFormFieldHarness} from '@angular/material/form-field/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {FormFieldHarnessExample} from './form-field-harness-example';
+import {MatInputModule} from '@angular/material/input';
+import {ReactiveFormsModule} from '@angular/forms';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {MatInputHarness} from '@angular/material/input/testing';
+
+describe('FormFieldHarnessExample', () => {
+  let fixture: ComponentFixture<FormFieldHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule, NoopAnimationsModule],
+        declarations: [FormFieldHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(FormFieldHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should be able to load harnesses', async () => {
+    const formFields = await loader.getAllHarnesses(MatFormFieldHarness);
+    expect(formFields.length).toBe(1);
+  });
+
+  it('should be able to get control of form-field', async () => {
+    const formField = await loader.getHarness(MatFormFieldHarness);
+    expect(await formField.getControl() instanceof MatInputHarness).toBe(true);
+  });
+
+  it('should be able to get error messages and hints of form-field', async () => {
+    const formField = await loader.getHarness(MatFormFieldHarness);
+    expect(await formField.getTextErrors()).toEqual([]);
+    expect(await formField.getTextHints()).toEqual(['Hint']);
+
+    fixture.componentInstance.requiredControl.setValue('');
+    (await formField.getControl())?.blur();
+    expect(await formField.getTextErrors()).toEqual(['Error 1']);
+    expect(await formField.getTextHints()).toEqual([]);
+  });
+
+  it('should be able to check if form field is invalid', async () => {
+    const formField = await loader.getHarness(MatFormFieldHarness);
+    expect(await formField.isControlValid()).toBe(true);
+
+    fixture.componentInstance.requiredControl.setValue('');
+    expect(await formField.isControlValid()).toBe(false);
+  });
+});

src/components-examples/material/form-field/form-field-harness/form-field-harness-example.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+import {FormControl, Validators} from '@angular/forms';
+
+/**
+ * @title Testing with MatFormFieldHarness
+ */
+@Component({
+  selector: 'form-field-harness-example',
+  templateUrl: 'form-field-harness-example.html',
+})
+export class FormFieldHarnessExample {
+  requiredControl = new FormControl('Initial value', [Validators.required]);
+}

src/components-examples/material/form-field/index.ts

@@ -21,11 +21,13 @@ import {
   FormFieldPrefixSuffixExample
 } from './form-field-prefix-suffix/form-field-prefix-suffix-example';
 import {FormFieldThemingExample} from './form-field-theming/form-field-theming-example';
+import {FormFieldHarnessExample} from './form-field-harness/form-field-harness-example';
 
 export {
   FormFieldAppearanceExample,
   FormFieldCustomControlExample,
   FormFieldErrorExample,
+  FormFieldHarnessExample,
   FormFieldHintExample,
   FormFieldLabelExample,
   FormFieldOverviewExample,
@@ -38,6 +40,7 @@ const EXAMPLES = [
   FormFieldAppearanceExample,
   FormFieldCustomControlExample,
   FormFieldErrorExample,
+  FormFieldHarnessExample,
   FormFieldHintExample,
   FormFieldLabelExample,
   FormFieldOverviewExample,