re-enable checkbox before toggle test

Author: mmalerba

src/material-experimental/mdc-checkbox/harness/checkbox-harness.spec.ts

@@ -8,7 +8,7 @@ import {MatCheckboxModule as MatMdcCheckboxModule} from '../index';
 import {MatCheckboxHarness} from './checkbox-harness';
 import {MatCheckboxHarness as MatMdcCheckboxHarness} from './mdc-checkbox-harness';
 
-let fixture: ComponentFixture<unknown>;
+let fixture: ComponentFixture<CheckboxHarnessTest>;
 let loader: HarnessLoader;
 let checkboxHarness: typeof MatCheckboxHarness;
 
@@ -141,6 +141,7 @@ function runTests() {
   });
 
   it('should toggle checkbox', async () => {
+    fixture.componentInstance.disabled = false;
     const checkboxes = await loader.getAllHarnesses(checkboxHarness);
     await checkboxes[0].toggle();
     await checkboxes[1].toggle();
@@ -149,6 +150,7 @@ function runTests() {
   });
 
   it('should check checkbox', async () => {
+    fixture.componentInstance.disabled = false;
     const checkboxes = await loader.getAllHarnesses(checkboxHarness);
     await checkboxes[0].check();
     await checkboxes[1].check();
@@ -157,6 +159,7 @@ function runTests() {
   });
 
   it('should uncheck checkbox', async () => {
+    fixture.componentInstance.disabled = false;
     const checkboxes = await loader.getAllHarnesses(checkboxHarness);
     await checkboxes[0].uncheck();
     await checkboxes[1].uncheck();
@@ -179,13 +182,14 @@ function getActiveElementTagName() {
           aria-label="First checkbox">
         First
       </mat-checkbox>
-      <mat-checkbox indeterminate="true" disabled="true" aria-labelledby="second-label">
+      <mat-checkbox indeterminate="true" [disabled]="disabled" aria-labelledby="second-label">
         Second
       </mat-checkbox>
       <span id="second-label">Second checkbox</span>
   `
 })
 class CheckboxHarnessTest {
   ctrl = new FormControl(true);
+  disabled = true;
 }
 

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

@@ -30,6 +30,7 @@ export class MatCheckboxHarness extends ComponentHarness {
 
   private _label = this.locatorFor('.mat-checkbox-label');
   private _input = this.locatorFor('input');
+  private _inputContainer = this.locatorFor('.mat-checkbox-inner-container');
 
   /** Gets a boolean promise indicating if the checkbox is checked. */
   async isChecked(): Promise<boolean> {
@@ -101,7 +102,7 @@ export class MatCheckboxHarness extends ComponentHarness {
    * action is complete.
    */
   async toggle(): Promise<void> {
-    return (await this._input()).click();
+    return (await this._inputContainer()).click();
   }
 
   /**

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

@@ -30,6 +30,7 @@ export class MatCheckboxHarness extends ComponentHarness {
 
   private _label = this.locatorFor('label');
   private _input = this.locatorFor('input');
+  private _inputContainer = this.locatorFor('.mdc-checkbox');
 
   /** Gets a boolean promise indicating if the checkbox is checked. */
   async isChecked(): Promise<boolean> {
@@ -101,7 +102,8 @@ export class MatCheckboxHarness extends ComponentHarness {
    * action is complete.
    */
   async toggle(): Promise<void> {
-    return (await this._input()).click();
+    const elToClick = await this.isDisabled() ? this._inputContainer() : this._input();
+    return (await elToClick).click();
   }
 
   /**