docs(material/datepicker): add harness example for datepicker (#21475)

Author: annieyw

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

@@ -13,13 +13,19 @@ ng_module(
     module_name = "@angular/components-examples/material/datepicker",
     tsconfig = ":tsconfig",
     deps = [
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
         "//src/material-moment-adapter",
         "//src/material/button",
         "//src/material/core",
         "//src/material/datepicker",
+        "//src/material/datepicker/testing",
         "//src/material/icon",
         "//src/material/input",
         "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
         "@npm//moment",
     ],
 )

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

@@ -0,0 +1,6 @@
+<input
+    matInput
+    [matDatepicker]="picker"
+    [(ngModel)]="date"
+    [min]="minDate">
+<mat-datepicker #picker></mat-datepicker>

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

@@ -0,0 +1,67 @@
+import {TestBed, ComponentFixture, waitForAsync} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatDatepickerInputHarness} from '@angular/material/datepicker/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting}
+  from '@angular/platform-browser-dynamic/testing';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {DatepickerHarnessExample} from './datepicker-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {MatNativeDateModule} from '@angular/material/core';
+import {FormsModule} from '@angular/forms';
+
+describe('DatepickerHarnessExample', () => {
+  let fixture: ComponentFixture<DatepickerHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeAll(() => {
+    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+  });
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [MatDatepickerModule, NoopAnimationsModule, MatNativeDateModule, FormsModule],
+        declarations: [DatepickerHarnessExample]
+      }).compileComponents();
+      fixture = TestBed.createComponent(DatepickerHarnessExample);
+      fixture.detectChanges();
+      loader = TestbedHarnessEnvironment.loader(fixture);
+    })
+  );
+
+  it('should load all datepicker input harnesses', async () => {
+    const inputs = await loader.getAllHarnesses(MatDatepickerInputHarness);
+    expect(inputs.length).toBe(1);
+  });
+
+  it('should get whether the input has an associated calendar', async () => {
+    const input = await loader.getHarness(MatDatepickerInputHarness);
+    expect(await input.hasCalendar()).toBeTrue();
+  });
+
+  it('should set the input value', async () => {
+    const input = await loader.getHarness(MatDatepickerInputHarness);
+    expect(await input.getValue()).toBeFalsy();
+
+    await input.setValue('1/1/2020');
+    expect(await input.getValue()).toBe('1/1/2020');
+  });
+
+  it('should get the minimum date of the input', async () => {
+    const input = await loader.getHarness(MatDatepickerInputHarness);
+    fixture.componentInstance.minDate = new Date(2020, 0, 1, 12, 0, 0);
+    expect(await input.getMin()).toEqual('2020-01-01');
+  });
+
+  it('should be able to open and close a calendar in popup mode', async () => {
+    const input = await loader.getHarness(MatDatepickerInputHarness);
+    expect(await input.isCalendarOpen()).toBe(false);
+
+    await input.openCalendar();
+    expect(await input.isCalendarOpen()).toBe(true);
+
+    await input.closeCalendar();
+    expect(await input.isCalendarOpen()).toBe(false);
+  });
+});

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

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatDatepickerInputHarness
+ */
+@Component({
+  selector: 'datepicker-harness-example',
+  templateUrl: 'datepicker-harness-example.html',
+})
+export class DatepickerHarnessExample {
+  date: Date|null = null;
+  minDate: Date|null = null;
+}

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

@@ -41,6 +41,7 @@ import {
 import {
   DateRangePickerSelectionStrategyExample
 } from './date-range-picker-selection-strategy/date-range-picker-selection-strategy-example';
+import {DatepickerHarnessExample} from './datepicker-harness/datepicker-harness-example';
 
 export {
   DatepickerApiExample,
@@ -52,6 +53,7 @@ export {
   DatepickerEventsExample,
   DatepickerFilterExample,
   DatepickerFormatsExample,
+  DatepickerHarnessExample,
   DatepickerLocaleExample,
   DatepickerMinMaxExample,
   DatepickerMomentExample,
@@ -77,6 +79,7 @@ const EXAMPLES = [
   DatepickerEventsExample,
   DatepickerFilterExample,
   DatepickerFormatsExample,
+  DatepickerHarnessExample,
   DatepickerLocaleExample,
   DatepickerMinMaxExample,
   DatepickerMomentExample,