fix(material/datepicker): add harness for datepicker actions (#32925)

Adds a harness for the datepicker actions component.

Fixes #32921.

Author: crisbeto

goldens/material/datepicker/testing/index.api.md

@@ -6,6 +6,7 @@
 
 import { BaseHarnessFilters } from '@angular/cdk/testing';
 import { ComponentHarness } from '@angular/cdk/testing';
+import { ContentContainerComponentHarness } from '@angular/cdk/testing';
 import { HarnessPredicate } from '@angular/cdk/testing';
 import { MatFormFieldControlHarnessBase } from '@angular/material/form-field/testing/control';
 import { MatFormFieldControlHarnessFilters } from '@angular/material/form-field/testing/control';
@@ -36,6 +37,10 @@ export enum CalendarView {
     YEAR = 1
 }
 
+// @public
+export interface DatepickerActionsHarnessFilters extends BaseHarnessFilters {
+}
+
 // @public
 export interface DatepickerInputHarnessFilters extends MatFormFieldControlHarnessFilters {
     placeholder?: string | RegExp;
@@ -92,6 +97,15 @@ export class MatCalendarHarness extends ComponentHarness {
     static with(options?: CalendarHarnessFilters): HarnessPredicate<MatCalendarHarness>;
 }
 
+// @public
+export class MatDatepickerActionsHarness extends ContentContainerComponentHarness<string> {
+    apply(): Promise<void>;
+    cancel(): Promise<void>;
+    // (undocumented)
+    static hostSelector: string;
+    static with(options?: DatepickerActionsHarnessFilters): HarnessPredicate<MatDatepickerActionsHarness>;
+}
+
 // @public
 export class MatDatepickerInputHarness extends MatDatepickerInputHarnessBase implements DatepickerTrigger {
     closeCalendar(): Promise<void>;

src/material/datepicker/testing/BUILD.bazel

@@ -31,6 +31,7 @@ ng_project(
         "//:node_modules/@angular/platform-browser",
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
+        "//src/material/button",
         "//src/material/core",
         "//src/material/datepicker",
         "//src/material/form-field",

src/material/datepicker/testing/datepicker-actions-harness.spec.ts

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {HarnessLoader} from '@angular/cdk/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {Component, signal} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {MatButtonModule} from '../../button';
+import {MATERIAL_ANIMATIONS, provideNativeDateAdapter} from '../../core';
+import {MatDatepickerModule} from '../../datepicker';
+import {MatDatepickerActionsHarness} from './datepicker-actions-harness';
+import {MatDatepickerInputHarness} from './datepicker-input-harness';
+
+describe('MatDatepickerActionsHarness', () => {
+  let fixture: ComponentFixture<DatepickerActionsHarnessTest>;
+  let loader: HarnessLoader;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideNativeDateAdapter(),
+        {provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}},
+      ],
+    });
+
+    fixture = TestBed.createComponent(DatepickerActionsHarnessTest);
+    loader = TestbedHarnessEnvironment.documentRootLoader(fixture);
+  });
+
+  it('should load datepicker actions harness', async () => {
+    const input = await loader.getHarness(MatDatepickerInputHarness);
+    await input.openCalendar();
+    const actions = await loader.getAllHarnesses(MatDatepickerActionsHarness);
+    expect(actions.length).toBe(1);
+  });
+
+  it('should be able to apply', async () => {
+    const input = await loader.getHarness(MatDatepickerInputHarness);
+    await input.openCalendar();
+    expect(await input.isCalendarOpen()).toBe(true);
+    const actions = await loader.getHarness(MatDatepickerActionsHarness);
+    await actions.apply();
+    expect(await input.isCalendarOpen()).toBe(false);
+    expect(fixture.componentInstance.applied()).toBe(true);
+  });
+
+  it('should be able to cancel', async () => {
+    const input = await loader.getHarness(MatDatepickerInputHarness);
+    await input.openCalendar();
+    expect(await input.isCalendarOpen()).toBe(true);
+    const actions = await loader.getHarness(MatDatepickerActionsHarness);
+    await actions.cancel();
+    expect(await input.isCalendarOpen()).toBe(false);
+    expect(fixture.componentInstance.applied()).toBe(false);
+  });
+});
+
+@Component({
+  template: `
+    <input [matDatepicker]="picker">
+    <mat-datepicker #picker>
+      <mat-datepicker-actions>
+        <button mat-button matDatepickerCancel>Cancel</button>
+        <button mat-button matDatepickerApply (click)="applied.set(true)">Apply</button>
+      </mat-datepicker-actions>
+    </mat-datepicker>
+  `,
+  imports: [MatDatepickerModule, MatButtonModule],
+})
+class DatepickerActionsHarnessTest {
+  applied = signal(false);
+}

src/material/datepicker/testing/datepicker-actions-harness.ts

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {
+  ContentContainerComponentHarness,
+  HarnessPredicate,
+  TestElement,
+} from '@angular/cdk/testing';
+import {DatepickerActionsHarnessFilters} from './datepicker-harness-filters';
+
+/** Harness for interacting with a standard Material datepicker actions in tests. */
+export class MatDatepickerActionsHarness extends ContentContainerComponentHarness<string> {
+  static hostSelector = '.mat-datepicker-actions';
+
+  private _applyLocator = this.locatorForOptional(
+    '[matDatepickerApply], [matDateRangePickerApply]',
+  );
+  private _cancelLocator = this.locatorForOptional(
+    '[matDatepickerCancel], [matDateRangePickerCancel]',
+  );
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for a `MatDatepickerActionsHarness` that
+   * meets certain criteria.
+   * @param options Options for filtering which datepicker actions instances are considered a match.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(
+    options: DatepickerActionsHarnessFilters = {},
+  ): HarnessPredicate<MatDatepickerActionsHarness> {
+    return new HarnessPredicate(MatDatepickerActionsHarness, options);
+  }
+
+  /** Applies the current selection. */
+  apply(): Promise<void> {
+    return this._clickAction('apply', this._applyLocator);
+  }
+
+  /** Cancels the current selection. */
+  cancel(): Promise<void> {
+    return this._clickAction('cancel', this._cancelLocator);
+  }
+
+  private async _clickAction(name: string, locator: () => Promise<TestElement | null>) {
+    const button = await locator();
+
+    if (!button) {
+      throw new Error(`MatDatepickerActions does not have ${name} button`);
+    }
+
+    await button.click();
+  }
+}

src/material/datepicker/testing/datepicker-harness-filters.ts

@@ -48,3 +48,6 @@ export interface DateRangeInputHarnessFilters extends MatFormFieldControlHarness
   /** Filters based on the value of the input. */
   value?: string | RegExp;
 }
+
+/** A set of criteria that can be used to filter a list of datepicker actions instances. */
+export interface DatepickerActionsHarnessFilters extends BaseHarnessFilters {}

src/material/datepicker/testing/public-api.ts

@@ -12,3 +12,4 @@ export * from './datepicker-toggle-harness';
 export * from './date-range-input-harness';
 export * from './calendar-harness';
 export * from './calendar-cell-harness';
+export * from './datepicker-actions-harness';