diff --git a/src/components-examples/material/form-field/form-field-harness/form-field-harness-example.spec.ts b/src/components-examples/material/form-field/form-field-harness/form-field-harness-example.spec.ts index 824ede0f0418..ed8131311a64 100644 --- a/src/components-examples/material/form-field/form-field-harness/form-field-harness-example.spec.ts +++ b/src/components-examples/material/form-field/form-field-harness/form-field-harness-example.spec.ts @@ -47,7 +47,7 @@ describe('FormFieldHarnessExample', () => { expect(await formField.getTextHints()).toEqual(['Hint']); fixture.componentInstance.requiredControl.setValue(''); - await (await formField.getControl())?.blur(); + await ((await formField.getControl() as MatInputHarness))?.blur(); expect(await formField.getTextErrors()).toEqual(['Error']); expect(await formField.getTextHints()).toEqual([]); }); diff --git a/src/material-experimental/mdc-form-field/testing/BUILD.bazel b/src/material-experimental/mdc-form-field/testing/BUILD.bazel index f4a1d75bfa42..51bcea1f405f 100644 --- a/src/material-experimental/mdc-form-field/testing/BUILD.bazel +++ b/src/material-experimental/mdc-form-field/testing/BUILD.bazel @@ -13,6 +13,7 @@ ts_library( "//src/cdk/testing", "//src/material-experimental/mdc-input/testing", "//src/material-experimental/mdc-select/testing", + "//src/material/datepicker/testing", "//src/material/form-field/testing", "//src/material/form-field/testing/control", ], @@ -32,11 +33,14 @@ ng_test_library( deps = [ ":testing", "//src/material-experimental/mdc-autocomplete", + "//src/material-experimental/mdc-core", "//src/material-experimental/mdc-form-field", "//src/material-experimental/mdc-input", "//src/material-experimental/mdc-input/testing", "//src/material-experimental/mdc-select", "//src/material-experimental/mdc-select/testing", + "//src/material/datepicker", + "//src/material/datepicker/testing", "//src/material/form-field/testing:harness_tests_lib", ], ) diff --git a/src/material-experimental/mdc-form-field/testing/form-field-harness.spec.ts b/src/material-experimental/mdc-form-field/testing/form-field-harness.spec.ts index 9c8bdc83300a..62aff4ca8ab0 100644 --- a/src/material-experimental/mdc-form-field/testing/form-field-harness.spec.ts +++ b/src/material-experimental/mdc-form-field/testing/form-field-harness.spec.ts @@ -5,14 +5,29 @@ import {MatInputHarness} from '@angular/material-experimental/mdc-input/testing' import {MatSelectModule} from '@angular/material-experimental/mdc-select'; import {MatSelectHarness} from '@angular/material-experimental/mdc-select/testing'; import {runHarnessTests} from '@angular/material/form-field/testing/shared.spec'; +import {MatDatepickerModule} from '@angular/material/datepicker'; +import {MatNativeDateModule} from '@angular/material-experimental/mdc-core'; +import { + MatDatepickerInputHarness, + MatDateRangeInputHarness, +} from '@angular/material/datepicker/testing'; import {MatFormFieldHarness} from './form-field-harness'; describe('MDC-based MatFormFieldHarness', () => { runHarnessTests( - [MatFormFieldModule, MatAutocompleteModule, MatInputModule, MatSelectModule], { + [ + MatFormFieldModule, + MatAutocompleteModule, + MatInputModule, + MatSelectModule, + MatNativeDateModule, + MatDatepickerModule + ], { formFieldHarness: MatFormFieldHarness as any, inputHarness: MatInputHarness, selectHarness: MatSelectHarness, + datepickerInputHarness: MatDatepickerInputHarness, + dateRangeInputHarness: MatDateRangeInputHarness, isMdcImplementation: true, }); }); diff --git a/src/material-experimental/mdc-form-field/testing/form-field-harness.ts b/src/material-experimental/mdc-form-field/testing/form-field-harness.ts index 23f798b5ac7e..9c1947e60678 100644 --- a/src/material-experimental/mdc-form-field/testing/form-field-harness.ts +++ b/src/material-experimental/mdc-form-field/testing/form-field-harness.ts @@ -13,11 +13,15 @@ import { } from '@angular/material/form-field/testing'; import {MatInputHarness} from '@angular/material-experimental/mdc-input/testing'; import {MatSelectHarness} from '@angular/material-experimental/mdc-select/testing'; +import { + MatDatepickerInputHarness, + MatDateRangeInputHarness, +} from '@angular/material/datepicker/testing'; -// TODO(devversion): support datepicker harness once developed (COMP-203). -// Also support chip list harness. +// TODO(devversion): support support chip list harness /** Possible harnesses of controls which can be bound to a form-field. */ -export type FormFieldControlHarness = MatInputHarness|MatSelectHarness; +export type FormFieldControlHarness = + MatInputHarness|MatSelectHarness|MatDatepickerInputHarness|MatDateRangeInputHarness; /** Harness for interacting with a MDC-based form-field's in tests. */ export class MatFormFieldHarness extends _MatFormFieldHarnessBase { @@ -44,6 +48,8 @@ export class MatFormFieldHarness extends _MatFormFieldHarnessBase( } /** Base class for datepicker input harnesses. */ -export abstract class MatDatepickerInputHarnessBase extends ComponentHarness { +export abstract class MatDatepickerInputHarnessBase extends MatFormFieldControlHarness { /** Whether the input is disabled. */ async isDisabled(): Promise { return (await this.host()).getProperty('disabled')!; diff --git a/src/material/form-field/testing/BUILD.bazel b/src/material/form-field/testing/BUILD.bazel index 8d11e5299bcb..532573c7d226 100644 --- a/src/material/form-field/testing/BUILD.bazel +++ b/src/material/form-field/testing/BUILD.bazel @@ -11,6 +11,7 @@ ts_library( module_name = "@angular/material/form-field/testing", deps = [ "//src/cdk/testing", + "//src/material/datepicker/testing", "//src/material/form-field/testing/control", "//src/material/input/testing", "//src/material/select/testing", @@ -45,6 +46,9 @@ ng_test_library( ":harness_tests_lib", ":testing", "//src/material/autocomplete", + "//src/material/core", + "//src/material/datepicker", + "//src/material/datepicker/testing", "//src/material/form-field", "//src/material/input", "//src/material/input/testing", diff --git a/src/material/form-field/testing/form-field-harness.spec.ts b/src/material/form-field/testing/form-field-harness.spec.ts index 7ce1d0d18068..f20e6a534a07 100644 --- a/src/material/form-field/testing/form-field-harness.spec.ts +++ b/src/material/form-field/testing/form-field-harness.spec.ts @@ -1,4 +1,10 @@ import {MatAutocompleteModule} from '@angular/material/autocomplete'; +import {MatNativeDateModule} from '@angular/material/core'; +import {MatDatepickerModule} from '@angular/material/datepicker'; +import { + MatDatepickerInputHarness, + MatDateRangeInputHarness, +} from '@angular/material/datepicker/testing'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; import {MatInputHarness} from '@angular/material/input/testing'; @@ -9,10 +15,19 @@ import {MatFormFieldHarness} from './form-field-harness'; import {runHarnessTests} from './shared.spec'; describe('Non-MDC-based MatFormFieldHarness', () => { - runHarnessTests([MatFormFieldModule, MatAutocompleteModule, MatInputModule, MatSelectModule], { + runHarnessTests([ + MatFormFieldModule, + MatAutocompleteModule, + MatInputModule, + MatSelectModule, + MatNativeDateModule, + MatDatepickerModule, + ], { formFieldHarness: MatFormFieldHarness, inputHarness: MatInputHarness, selectHarness: MatSelectHarness, + datepickerInputHarness: MatDatepickerInputHarness, + dateRangeInputHarness: MatDateRangeInputHarness, isMdcImplementation: false, }); }); diff --git a/src/material/form-field/testing/form-field-harness.ts b/src/material/form-field/testing/form-field-harness.ts index c33022f5c581..72d86599ed85 100644 --- a/src/material/form-field/testing/form-field-harness.ts +++ b/src/material/form-field/testing/form-field-harness.ts @@ -15,15 +15,19 @@ import { parallel, TestElement } from '@angular/cdk/testing'; +import { + MatDatepickerInputHarness, + MatDateRangeInputHarness, +} from '@angular/material/datepicker/testing'; import {MatFormFieldControlHarness} from '@angular/material/form-field/testing/control'; import {MatInputHarness} from '@angular/material/input/testing'; import {MatSelectHarness} from '@angular/material/select/testing'; import {FormFieldHarnessFilters} from './form-field-harness-filters'; -// TODO(devversion): support datepicker harness once developed (COMP-203). -// Also support chip list harness. +// TODO(devversion): support support chip list harness /** Possible harnesses of controls which can be bound to a form-field. */ -export type FormFieldControlHarness = MatInputHarness|MatSelectHarness; +export type FormFieldControlHarness = + MatInputHarness|MatSelectHarness|MatDatepickerInputHarness|MatDateRangeInputHarness; export abstract class _MatFormFieldHarnessBase extends ComponentHarness { @@ -34,6 +38,8 @@ export abstract class _MatFormFieldHarnessBase; protected abstract _inputControl: AsyncFactoryFn; protected abstract _selectControl: AsyncFactoryFn; + protected abstract _datepickerInputControl: AsyncFactoryFn; + protected abstract _dateRangeInputControl: AsyncFactoryFn; /** Gets the appearance of the form-field. */ abstract getAppearance(): Promise; @@ -91,8 +97,15 @@ export abstract class _MatFormFieldHarnessBase [this._selectControl(), this._inputControl()]); - return select || input; + const [select, input, datepickerInput, dateRangeInput] = await parallel(() => [ + this._selectControl(), + this._inputControl(), + this._datepickerInputControl(), + this._dateRangeInputControl() + ]); + + // Match the datepicker inputs first since they can also have a `MatInput`. + return datepickerInput || dateRangeInput || select || input; } /** Gets the theme color of the form-field. */ @@ -234,6 +247,8 @@ export class MatFormFieldHarness extends _MatFormFieldHarnessBase { diff --git a/src/material/form-field/testing/shared.spec.ts b/src/material/form-field/testing/shared.spec.ts index b00a5ef0f1f8..49e7c3c2a6d6 100644 --- a/src/material/form-field/testing/shared.spec.ts +++ b/src/material/form-field/testing/shared.spec.ts @@ -9,10 +9,19 @@ import {MatFormFieldHarness} from './form-field-harness'; /** Shared tests to run on both the original and MDC-based form-field's. */ export function runHarnessTests( - modules: Type[], {formFieldHarness, inputHarness, selectHarness, isMdcImplementation}: { + modules: Type[], { + formFieldHarness, + inputHarness, + selectHarness, + datepickerInputHarness, + dateRangeInputHarness, + isMdcImplementation, + }: { formFieldHarness: typeof MatFormFieldHarness, inputHarness: Type, selectHarness: Type, + datepickerInputHarness: Type, + dateRangeInputHarness: Type isMdcImplementation: boolean }) { let fixture: ComponentFixture; @@ -34,7 +43,7 @@ export function runHarnessTests( it('should be able to load harnesses', async () => { const formFields = await loader.getAllHarnesses(formFieldHarness); - expect(formFields.length).toBe(5); + expect(formFields.length).toBe(7); }); it('should be able to load form-field that matches specific selector', async () => { @@ -60,6 +69,8 @@ export function runHarnessTests( expect(await formFields[2].getControl() instanceof selectHarness).toBe(true); expect(await formFields[3].getControl() instanceof inputHarness).toBe(true); expect(await formFields[4].getControl() instanceof inputHarness).toBe(true); + expect(await formFields[5].getControl() instanceof datepickerInputHarness).toBe(true); + expect(await formFields[6].getControl() instanceof dateRangeInputHarness).toBe(true); }); it('should be able to get custom control of form-field', async () => { @@ -189,13 +200,13 @@ export function runHarnessTests( it('should be able to get the prefix text of a form-field', async () => { const formFields = await loader.getAllHarnesses(formFieldHarness); const prefixTexts = await parallel(() => formFields.map(f => f.getPrefixText())); - expect(prefixTexts).toEqual(['prefix_textprefix_text_2', '', '', '', '']); + expect(prefixTexts).toEqual(['prefix_textprefix_text_2', '', '', '', '', '', '']); }); it('should be able to get the suffix text of a form-field', async () => { const formFields = await loader.getAllHarnesses(formFieldHarness); const suffixTexts = await parallel(() => formFields.map(f => f.getSuffixText())); - expect(suffixTexts).toEqual(['suffix_text', '', '', '', '']); + expect(suffixTexts).toEqual(['suffix_text', '', '', '', '', '', '']); }); it('should be able to check if form field has been touched', async () => { @@ -281,6 +292,21 @@ export function runHarnessTests( Label + + + Date + + + + + + Date range + + + + + + ` }) class FormFieldHarnessTest { diff --git a/tools/public_api_guard/material/form-field/testing.d.ts b/tools/public_api_guard/material/form-field/testing.d.ts index c645cd356eb9..c16125aaa76f 100644 --- a/tools/public_api_guard/material/form-field/testing.d.ts +++ b/tools/public_api_guard/material/form-field/testing.d.ts @@ -1,4 +1,6 @@ export declare abstract class _MatFormFieldHarnessBase extends ComponentHarness { + protected abstract _dateRangeInputControl: AsyncFactoryFn; + protected abstract _datepickerInputControl: AsyncFactoryFn; protected abstract _errors: AsyncFactoryFn; protected abstract _hints: AsyncFactoryFn; protected abstract _inputControl: AsyncFactoryFn; @@ -29,7 +31,7 @@ export declare abstract class _MatFormFieldHarnessBase; } -export declare type FormFieldControlHarness = MatInputHarness | MatSelectHarness; +export declare type FormFieldControlHarness = MatInputHarness | MatSelectHarness | MatDatepickerInputHarness | MatDateRangeInputHarness; export interface FormFieldHarnessFilters extends BaseHarnessFilters { floatingLabelText?: string | RegExp; @@ -37,6 +39,8 @@ export interface FormFieldHarnessFilters extends BaseHarnessFilters { } export declare class MatFormFieldHarness extends _MatFormFieldHarnessBase { + protected _dateRangeInputControl: AsyncFactoryFn; + protected _datepickerInputControl: AsyncFactoryFn; protected _errors: AsyncFactoryFn; protected _hints: AsyncFactoryFn; protected _inputControl: AsyncFactoryFn;