feat(material-experimental): add test harness for form-field

Author: devversion

.github/CODEOWNERS

@@ -90,6 +90,7 @@
 # Material experimental package
 /src/material-experimental/*                       @jelbourn
 /src/material-experimental/input/**                @devversion
+/src/material-experimental/form-field/**           @devversion
 /src/material-experimental/mdc-autocomplete/**     @crisbeto
 /src/material-experimental/mdc-button/**           @andrewseguin
 /src/material-experimental/mdc-card/**             @mmalerba

src/material-experimental/form-field/testing/BUILD.bazel

@@ -0,0 +1,52 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
+
+ng_module(
+    name = "testing",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/material-experimental/form-field/testing",
+    deps = [
+        "//src/cdk/testing",
+        "//src/material-experimental/input/testing",
+        "//src/material-experimental/mdc-select:harness",
+    ],
+)
+
+ng_test_library(
+    name = "harness_tests_lib",
+    srcs = ["shared.spec.ts"],
+    deps = [
+        ":testing",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["shared.spec.ts"],
+    ),
+    deps = [
+        ":harness_tests_lib",
+        ":testing",
+        "//src/material-experimental/input/testing",
+        "//src/material-experimental/mdc-select:harness",
+        "//src/material/autocomplete",
+        "//src/material/form-field",
+        "//src/material/input",
+        "//src/material/select",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_tests_lib"],
+)

src/material-experimental/form-field/testing/form-field-harness-filters.ts

@@ -0,0 +1,11 @@
+/**
+ * @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.io/license
+ */
+
+import {BaseHarnessFilters} from '@angular/cdk/testing';
+
+export interface FormFieldHarnessFilters extends BaseHarnessFilters {}

src/material-experimental/form-field/testing/form-field-harness.spec.ts

@@ -0,0 +1,18 @@
+import {MatInputHarness} from '@angular/material-experimental/input/testing';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
+
+// TODO(devversion): we cannot import the select harness through the module name
+// because it does not expose an entry-point that re-exports the harness
+import {MatSelectHarness} from '../../mdc-select/harness/select-harness';
+
+import {MatFormFieldHarness} from './form-field-harness';
+import {runHarnessTests} from './shared.spec';
+
+describe('Non-MDC-based MatFormFieldHarness', () => {
+  runHarnessTests(
+      [MatFormFieldModule, MatAutocompleteModule, MatInputModule, MatSelectModule],
+      MatFormFieldHarness, MatInputHarness, MatSelectHarness);
+});

src/material-experimental/form-field/testing/form-field-harness.ts

@@ -0,0 +1,231 @@
+/**
+ * @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.io/license
+ */
+
+import {
+  ComponentHarness,
+  HarnessEnvironment,
+  HarnessPredicate,
+  TestElement
+} from '@angular/cdk/testing';
+import {MatInputHarness} from '@angular/material-experimental/input';
+// TODO(devversion): we cannot import the select harness through the module name
+// because it does not expose an entry-point that re-exports the harness
+import {MatSelectHarness} from '../../mdc-select/harness/select-harness';
+import {FormFieldHarnessFilters} from './form-field-harness-filters';
+
+// TODO(devversion): support datepicker harness once developed (COMP-203).
+// Also support chip list harness.
+/** Possible harnesses of controls which can be bound to a form-field. */
+export type FormFieldControlHarness = MatInputHarness|MatSelectHarness;
+
+/**
+ * Harness for interacting with a standard Material form-field's in tests.
+ * @dynamic
+ */
+export class MatFormFieldHarness extends ComponentHarness {
+  static hostSelector = '.mat-form-field';
+
+  /**
+   * Gets a `HarnessPredicate` that can be used to search for an form-field with
+   * specific attributes.
+   * @param options Options for narrowing the search:
+   *   - `selector` finds a form-field that matches the given selector.
+   * @return a `HarnessPredicate` configured with the given options.
+   */
+  static with(options: FormFieldHarnessFilters = {}): HarnessPredicate<MatFormFieldHarness> {
+    return new HarnessPredicate(MatFormFieldHarness, options);
+  }
+
+  private _prefixContainer = this.locatorForOptional('.mat-form-field-prefix');
+  private _suffixContainer = this.locatorForOptional('.mat-form-field-suffix');
+  private _label = this.locatorForOptional('.mat-form-field-label');
+  private _errors = this.locatorForAll('.mat-error');
+  private _hints = this.locatorForAll('mat-hint,.mat-hint');
+
+  private _controlHarnessSelector =
+      [MatInputHarness, MatSelectHarness].map(h => h.hostSelector).join(',');
+
+  /** Gets the appearance of the form-field. */
+  async getAppearance(): Promise<'legacy'|'standard'|'fill'|'outline'> {
+    const hostEl = await this.host();
+    const [isLegacy, isStandard, isFill, isOutline] = await Promise.all([
+      hostEl.hasClass('mat-form-field-appearance-legacy'),
+      hostEl.hasClass('mat-form-field-appearance-standard'),
+      hostEl.hasClass('mat-form-field-appearance-fill'),
+      hostEl.hasClass('mat-form-field-appearance-outline'),
+    ]);
+    if (isLegacy) {
+      return 'legacy';
+    } else if (isStandard) {
+      return 'standard';
+    } else if (isFill) {
+      return 'fill';
+    } else if (isOutline) {
+      return 'outline';
+    }
+    throw Error('Could not determine appearance of form-field.');
+  }
+
+  /** Gets the harness of the control that is bound to the form-field. */
+  async getControl(): Promise<FormFieldControlHarness|null> {
+    const environment: HarnessEnvironment<any> = (this as any).locatorFactory;
+    // TODO(reviewer): not sure what we should do here. We need to construct a combined
+    // query for all possible controls. This is necessary because if a form-control contains
+    // multiple possible control candidates (i.e. a chip-list with matInput). We need to
+    // find the control that matches first (to simulate the behavior of "@ContentChild").
+    // The question is, how we can achieve this in a public manner. Should we expose these
+    // functions? seems reasonable to me.
+    const elementCandidates: TestElement[] =
+        (await (environment as any).getAllRawElements(this._controlHarnessSelector))
+            .map((rawElement: any) => (environment as any).createTestElement(rawElement));
+
+    if (!elementCandidates.length) {
+      return null;
+    }
+
+    const controlElement = elementCandidates[0];
+    const [isInput, isSelect] = await Promise.all([
+      controlElement.matchesSelector(MatInputHarness.hostSelector),
+      controlElement.matchesSelector(MatSelectHarness.hostSelector),
+    ]);
+
+    if (isInput) {
+      return (environment as any).createComponentHarness(MatInputHarness, controlElement);
+    } else if (isSelect) {
+      return (environment as any).createComponentHarness(MatSelectHarness, controlElement);
+    }
+    // This error will be reported if we add new harnesses to the form-field control
+    // selector but forget checking for it here.
+    throw Error('Found control of form-field but could not create harness.');
+  }
+
+  /** Whether the form-field has a label. */
+  async hasLabel(): Promise<boolean> {
+    return (await this.host()).hasClass('mat-form-field-has-label');
+  }
+
+  /** Gets the label of the form-field. */
+  async getLabel(): Promise<string|null> {
+    const labelEl = await this._label();
+    return labelEl ? labelEl.text() : null;
+  }
+
+  /** Whether the form-field has a floating label. */
+  async hasFloatingLabel(): Promise<boolean> {
+    return (await this.host()).hasClass('mat-form-field-can-float');
+  }
+
+  /** Whether the label is currently floating. */
+  async isLabelFloating(): Promise<boolean> {
+    return (await this.host()).hasClass('mat-form-field-should-float');
+  }
+
+  /** Whether the form-field is disabled. */
+  async isDisabled(): Promise<boolean> {
+    return (await this.host()).hasClass('mat-form-field-disabled');
+  }
+
+  /** Whether the form-field is currently autofilled. */
+  async isAutofilled(): Promise<boolean> {
+    return (await this.host()).hasClass('mat-form-field-autofilled');
+  }
+
+  /** Gets the theme color of the form-field. */
+  async getThemeColor(): Promise<'primary'|'accent'|'warn'> {
+    const hostEl = await this.host();
+    const [isAccent, isWarn] =
+        await Promise.all([hostEl.hasClass('mat-accent'), hostEl.hasClass('mat-warn')]);
+    if (isAccent) {
+      return 'accent';
+    } else if (isWarn) {
+      return 'warn';
+    }
+    return 'primary';
+  }
+
+  /** Gets error messages which are currently displayed in the form-field. */
+  async getErrorMessages(): Promise<string[]> {
+    return Promise.all((await this._errors()).map(e => e.text()));
+  }
+
+  /** Gets hint messages which are currently displayed in the form-field. */
+  async getHintMessages(): Promise<string[]> {
+    return Promise.all((await this._hints()).map(e => e.text()));
+  }
+
+  /**
+   * Gets a reference to the container element which contains all projected
+   * prefixes of the form-field.
+   */
+  async getPrefixContainer(): Promise<TestElement|null> {
+    return this._prefixContainer();
+  }
+
+  /**
+   * Gets a reference to the container element which contains all projected
+   * suffixes of the form-field.
+   */
+  async getSuffixContainer(): Promise<TestElement|null> {
+    return this._suffixContainer();
+  }
+
+  /**
+   * Whether the form control has been touched. Returns "null"
+   * if no form control is set up.
+   */
+  async isControlTouched(): Promise<boolean|null> {
+    if (!await this._hasFormControl()) {
+      return null;
+    }
+    return (await this.host()).hasClass('ng-touched');
+  }
+
+  /**
+   * Whether the form control is dirty. Returns "null"
+   * if no form control is set up.
+   */
+  async isControlDirty(): Promise<boolean|null> {
+    if (!await this._hasFormControl()) {
+      return null;
+    }
+    return (await this.host()).hasClass('ng-dirty');
+  }
+
+  /**
+   * Whether the form control is valid. Returns "null"
+   * if no form control is set up.
+   */
+  async isControlValid(): Promise<boolean|null> {
+    if (!await this._hasFormControl()) {
+      return null;
+    }
+    return (await this.host()).hasClass('ng-valid');
+  }
+
+  /**
+   * Whether the form control is pending validation. Returns "null"
+   * if no form control is set up.
+   */
+  async isControlPending(): Promise<boolean|null> {
+    if (!await this._hasFormControl()) {
+      return null;
+    }
+    return (await this.host()).hasClass('ng-pending');
+  }
+
+  /** Checks whether the form-field control has set up a form control. */
+  private async _hasFormControl(): Promise<boolean> {
+    const hostEl = await this.host();
+    // If no form "NgControl" is bound to the form-field control, the form-field
+    // is not able to forward any control status classes. Therefore if either the
+    // "ng-touched" or "ng-untouched" class is set, we know that it has a form control
+    const [isTouched, isUntouched] =
+        await Promise.all([hostEl.hasClass('ng-touched'), hostEl.hasClass('ng-untouched')]);
+    return isTouched || isUntouched;
+  }
+}

src/material-experimental/form-field/testing/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @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.io/license
+ */
+
+export * from './public-api';

src/material-experimental/form-field/testing/public-api.ts

@@ -0,0 +1,10 @@
+/**
+ * @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.io/license
+ */
+
+export * from './form-field-harness';
+export * from './form-field-harness-filters';