docs(material/timepicker): add a basic docs example

Adds a basic example to work around a CI failure.

Author: crisbeto

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

@@ -38,8 +38,10 @@ ng_test_library(
         ":timepicker",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
+        "//src/material/core",
         "//src/material/timepicker",
         "//src/material/timepicker/testing",
+        "@npm//@angular/platform-browser",
     ],
 )
 

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

@@ -1 +1,2 @@
-export const TEMP = true;
+export {TimepickerOverviewExample} from './timepicker-overview/timepicker-overview-example';
+export {TimepickerHarnessExample} from './timepicker-harness/timepicker-harness-example';

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

@@ -0,0 +1,2 @@
+<input [matTimepicker]="picker" [(value)]="date"/>
+<mat-timepicker #picker/>

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

@@ -0,0 +1,50 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatTimepickerInputHarness} from '@angular/material/timepicker/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {TimepickerHarnessExample} from './timepicker-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {DateAdapter, MatNativeDateModule} from '@angular/material/core';
+
+describe('TimepickerHarnessExample', () => {
+  let fixture: ComponentFixture<TimepickerHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({imports: [NoopAnimationsModule, MatNativeDateModule]});
+    TestBed.inject(DateAdapter).setLocale('en-US'); // Set the locale to en-US to guarantee consistent tests.
+    fixture = TestBed.createComponent(TimepickerHarnessExample);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should load all timepicker input harnesses', async () => {
+    const inputs = await loader.getAllHarnesses(MatTimepickerInputHarness);
+    expect(inputs.length).toBe(1);
+  });
+
+  it('should open and close a timepicker', async () => {
+    const input = await loader.getHarness(MatTimepickerInputHarness);
+    expect(await input.isTimepickerOpen()).toBe(false);
+
+    await input.openTimepicker();
+    expect(await input.isTimepickerOpen()).toBe(true);
+  });
+
+  it('should set the input value', async () => {
+    const input = await loader.getHarness(MatTimepickerInputHarness);
+    expect(await input.getValue()).toBe('11:45 AM');
+
+    await input.setValue('3:21 PM');
+    expect(await input.getValue()).toBe('3:21 PM');
+  });
+
+  it('should select an option from the timepicker', async () => {
+    const input = await loader.getHarness(MatTimepickerInputHarness);
+    const timepicker = await input.openTimepicker();
+    expect(await input.getValue()).toBe('11:45 AM');
+
+    await timepicker.selectOption({text: '1:00 PM'});
+    expect(await input.getValue()).toBe('1:00 PM');
+  });
+});

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

@@ -0,0 +1,23 @@
+import {ChangeDetectionStrategy, Component, Signal, signal} from '@angular/core';
+import {provideNativeDateAdapter} from '@angular/material/core';
+import {MatTimepickerModule} from '@angular/material/timepicker';
+
+/**
+ * @title Testing with MatTimepickerInputHarness
+ */
+@Component({
+  selector: 'timepicker-harness-example',
+  templateUrl: 'timepicker-harness-example.html',
+  standalone: true,
+  providers: [provideNativeDateAdapter()],
+  imports: [MatTimepickerModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TimepickerHarnessExample {
+  date: Signal<Date | null>;
+
+  constructor() {
+    const today = new Date();
+    this.date = signal(new Date(today.getFullYear(), today.getMonth(), today.getDate(), 11, 45));
+  }
+}

src/components-examples/material/timepicker/timepicker-overview/timepicker-overview-example.html

@@ -0,0 +1,6 @@
+<mat-form-field>
+  <mat-label>Pick a time</mat-label>
+  <input matInput [matTimepicker]="picker">
+  <mat-timepicker-toggle matIconSuffix [for]="picker"/>
+  <mat-timepicker #picker/>
+</mat-form-field>

src/components-examples/material/timepicker/timepicker-overview/timepicker-overview-example.ts

@@ -0,0 +1,16 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {MatTimepickerModule} from '@angular/material/timepicker';
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {provideNativeDateAdapter} from '@angular/material/core';
+
+/** @title Basic timepicker */
+@Component({
+  selector: 'timepicker-overview-example',
+  templateUrl: 'timepicker-overview-example.html',
+  standalone: true,
+  providers: [provideNativeDateAdapter()],
+  imports: [MatFormFieldModule, MatInputModule, MatTimepickerModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TimepickerOverviewExample {}