docs(material/input): add harness example for input (#21416)

Author: annieyw

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

@@ -11,10 +11,16 @@ ng_module(
     ]),
     module_name = "@angular/components-examples/material/input",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material/button",
         "//src/material/icon",
         "//src/material/input",
+        "//src/material/input/testing",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
     ],
 )
 

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

@@ -13,12 +13,14 @@ import {InputFormExample} from './input-form/input-form-example';
 import {InputHintExample} from './input-hint/input-hint-example';
 import {InputOverviewExample} from './input-overview/input-overview-example';
 import {InputPrefixSuffixExample} from './input-prefix-suffix/input-prefix-suffix-example';
+import {InputHarnessExample} from './input-harness/input-harness-example';
 
 export {
   InputClearableExample,
   InputErrorStateMatcherExample,
   InputErrorsExample,
   InputFormExample,
+  InputHarnessExample,
   InputHintExample,
   InputOverviewExample,
   InputPrefixSuffixExample,
@@ -29,6 +31,7 @@ const EXAMPLES = [
   InputErrorStateMatcherExample,
   InputErrorsExample,
   InputFormExample,
+  InputHarnessExample,
   InputHintExample,
   InputOverviewExample,
   InputPrefixSuffixExample,

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

@@ -0,0 +1,14 @@
+<mat-form-field>
+  <mat-label>Favorite food</mat-label>
+  <input matInput value="Sushi" name="favorite-food">
+</mat-form-field>
+
+<mat-form-field>
+  <input matInput [type]="inputType"
+         [disabled]="disabled">
+</mat-form-field>
+
+<mat-form-field>
+  <mat-label>Leave a comment</mat-label>
+  <textarea matInput></textarea>
+</mat-form-field>

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

@@ -0,0 +1,76 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatInputHarness} from '@angular/material/input/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatInputModule} from '@angular/material/input';
+import {InputHarnessExample} from './input-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {ReactiveFormsModule} from '@angular/forms';
+
+describe('InputHarnessExample', () => {
+  let fixture: ComponentFixture<InputHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatInputModule, NoopAnimationsModule, ReactiveFormsModule],
+        declarations: [InputHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(InputHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+  it('should load all input harnesses', async () => {
+    const inputs = await loader.getAllHarnesses(MatInputHarness);
+    expect(inputs.length).toBe(3);
+  });
+
+  it('should load input with a specific value', async () => {
+    const inputs = await loader.getAllHarnesses(MatInputHarness.with({value: 'Sushi'}));
+    expect(inputs.length).toBe(1);
+  });
+
+  it('should be able to set value of input', async () => {
+    const inputs = await loader.getAllHarnesses(MatInputHarness);
+    const input = inputs[0];
+    expect(await input.getValue()).toBe('Sushi');
+
+    await input.setValue('');
+
+    expect(await input.getValue()).toBe('');
+  });
+
+  it('should be able to get disabled state', async () => {
+    const inputs = await loader.getAllHarnesses(MatInputHarness);
+    expect(inputs.length).toBe(3);
+
+    expect(await inputs[0].isDisabled()).toBe(false);
+    expect(await inputs[1].isDisabled()).toBe(false);
+    expect(await inputs[2].isDisabled()).toBe(false);
+
+    fixture.componentInstance.disabled = true;
+
+    expect(await inputs[1].isDisabled()).toBe(true);
+  });
+
+  it('should be able to get type of input', async () => {
+    const inputs = await loader.getAllHarnesses(MatInputHarness);
+    expect(inputs.length).toBe(3);
+
+    expect(await inputs[0].getType()).toBe('text');
+    expect(await inputs[1].getType()).toBe('number');
+    expect(await inputs[2].getType()).toBe('textarea');
+
+    fixture.componentInstance.inputType = 'text';
+
+    expect(await inputs[1].getType()).toBe('text');
+  });
+});

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

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatInputHarness
+ */
+@Component({
+  selector: 'input-harness-example',
+  templateUrl: 'input-harness-example.html'
+})
+export class InputHarnessExample {
+  inputType = 'number';
+  disabled = false;
+}