feat(material-experimental/checkbox): Add test harnesses for both

version of mat-checkbox

Author: mmalerba

src/cdk-experimental/testing/protractor/protractor-element.ts

@@ -50,4 +50,9 @@ export class ProtractorElement implements TestElement {
   async getAttribute(name: string): Promise<string|null> {
     return this.element.getAttribute(name);
   }
+
+  async hasClass(name: string): Promise<boolean> {
+    const classes = (await this.getAttribute('class')) || '';
+    return new Set(classes.split(/\s+/).filter(c => c)).has(name);
+  }
 }

src/cdk-experimental/testing/test-element.ts

@@ -43,4 +43,7 @@ export interface TestElement {
    * falls back to reading the property.
    */
   getAttribute(name: string): Promise<string | null>;
+
+  /** Checks whether the element has the given class. */
+  hasClass(name: string): Promise<boolean>;
 }

src/cdk-experimental/testing/testbed/unit-test-element.ts

@@ -100,4 +100,9 @@ export class UnitTestElement implements TestElement {
     }
     return value;
   }
+
+  async hasClass(name: string): Promise<boolean> {
+    await this._stabilize();
+    return this.element.classList.contains(name);
+  }
 }

src/material-experimental/mdc-checkbox/BUILD.bazel

@@ -8,7 +8,7 @@ ng_module(
     name = "mdc-checkbox",
     srcs = glob(
         ["**/*.ts"],
-        exclude = ["**/*.spec.ts"],
+        exclude = ["**/*.spec.ts", "harnesses/**"],
     ),
     assets = [":checkbox_scss"] + glob(["**/*.html"]),
     module_name = "@angular/material-experimental/mdc-checkbox",

src/material-experimental/mdc-checkbox/harnes/mat-checkbox-harness.ts

@@ -0,0 +1,92 @@
+/**
+ * @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, HarnessPredicate} from '@angular/cdk-experimental/testing';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+
+export class MatCheckboxHarness extends ComponentHarness {
+  static hostSelector = 'mat-checkbox';
+
+  static with(options: {label: string | RegExp}): HarnessPredicate<MatCheckboxHarness> {
+    return new HarnessPredicate(MatCheckboxHarness)
+        .addOption('label', options.label,
+            (harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label));
+  }
+
+  private _label = this.locatorFor('.mat-checkbox-label');
+  private _input = this.locatorFor('input');
+
+  async isChecked(): Promise<boolean> {
+    const checked = (await this._input()).getAttribute('checked');
+    return coerceBooleanProperty(await checked);
+  }
+
+  async isIndeterminate(): Promise<boolean> {
+    const indeterminate = (await this._input()).getAttribute('indeterminate');
+    return coerceBooleanProperty(await indeterminate);
+  }
+
+  async isDisabled(): Promise<boolean> {
+    const disabled = (await this._input()).getAttribute('disabled');
+    return coerceBooleanProperty(await disabled);
+  }
+
+  async isRequired(): Promise<boolean> {
+    const required = (await this._input()).getAttribute('required');
+    return coerceBooleanProperty(await required);
+  }
+
+  async isValid(): Promise<boolean> {
+    const invalid = (await this.host()).hasClass('ng-invalid');
+    return !(await invalid);
+  }
+
+  async getName(): Promise<string | null> {
+    return (await this._input()).getAttribute('name');
+  }
+
+  async getValue(): Promise<string | null> {
+    return (await this._input()).getAttribute('value');
+  }
+
+  async getAriaLabel(): Promise<string | null> {
+    return (await this._input()).getAttribute('aria-label');
+  }
+
+  async getAriaLabelledby(): Promise<string | null> {
+    return (await this._input()).getAttribute('aria-labelledby');
+  }
+
+  async getLabelText(): Promise<string> {
+    return (await this._label()).text();
+  }
+
+  async foucs(): Promise<void> {
+    return (await this._input()).focus();
+  }
+
+  async blur(): Promise<void> {
+    return (await this._input()).blur();
+  }
+
+  async toggle(): Promise<void> {
+    return (await this._input()).click();
+  }
+
+  async check(): Promise<void> {
+    if (!(await this.isChecked())) {
+      await this.toggle();
+    }
+  }
+
+  async uncheck(): Promise<void> {
+    if (await this.isChecked()) {
+      await this.toggle();
+    }
+  }
+}

src/material-experimental/mdc-checkbox/harnes/mat-mdc-checkbox-harness.ts

@@ -0,0 +1,92 @@
+/**
+ * @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, HarnessPredicate} from '@angular/cdk-experimental/testing';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+
+export class MatCheckboxHarness extends ComponentHarness {
+  static hostSelector = 'mat-checkbox';
+
+  static with(options: {label: string | RegExp}): HarnessPredicate<MatCheckboxHarness> {
+    return new HarnessPredicate(MatCheckboxHarness)
+        .addOption('label', options.label,
+            (harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label));
+  }
+
+  private _label = this.locatorFor('label');
+  private _input = this.locatorFor('input');
+
+  async isChecked(): Promise<boolean> {
+    const checked = (await this._input()).getAttribute('checked');
+    return coerceBooleanProperty(await checked);
+  }
+
+  async isIndeterminate(): Promise<boolean> {
+    const indeterminate = (await this._input()).getAttribute('indeterminate');
+    return coerceBooleanProperty(await indeterminate);
+  }
+
+  async isDisabled(): Promise<boolean> {
+    const disabled = (await this._input()).getAttribute('disabled');
+    return coerceBooleanProperty(await disabled);
+  }
+
+  async isRequired(): Promise<boolean> {
+    const required = (await this._input()).getAttribute('required');
+    return coerceBooleanProperty(await required);
+  }
+
+  async isValid(): Promise<boolean> {
+    const invalid = (await this.host()).hasClass('ng-invalid');
+    return !(await invalid);
+  }
+
+  async getName(): Promise<string | null> {
+    return (await this._input()).getAttribute('name');
+  }
+
+  async getValue(): Promise<string | null> {
+    return (await this._input()).getAttribute('value');
+  }
+
+  async getAriaLabel(): Promise<string | null> {
+    return (await this._input()).getAttribute('aria-label');
+  }
+
+  async getAriaLabelledby(): Promise<string | null> {
+    return (await this._input()).getAttribute('aria-labelledby');
+  }
+
+  async getLabelText(): Promise<string> {
+    return (await this._label()).text();
+  }
+
+  async foucs(): Promise<void> {
+    return (await this._input()).focus();
+  }
+
+  async blur(): Promise<void> {
+    return (await this._input()).blur();
+  }
+
+  async toggle(): Promise<void> {
+    return (await this._input()).click();
+  }
+
+  async check(): Promise<void> {
+    if (!(await this.isChecked())) {
+      await this.toggle();
+    }
+  }
+
+  async uncheck(): Promise<void> {
+    if (await this.isChecked()) {
+      await this.toggle();
+    }
+  }
+}