fix(material/list): add isDisabled to all list item harnesses (#24212)

Currently only the selection list option has an `isDisabled` method, even though all item variants can be disabled. These changes move the method to the base class. Fixes #24200.
angular · Jan 18, 2022 · c55524a · c55524a
1 parent 772176a
commit c55524a
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 47 deletions.
diff --git a/src/material-experimental/mdc-list/testing/list-harness.spec.ts b/src/material-experimental/mdc-list/testing/list-harness.spec.ts
@@ -30,8 +30,9 @@ function runBaseListFunctionalityTests<
     BaseListItemHarnessFilters
   >,
   I extends MatListItemHarnessBase,
+  F extends {disableThirdItem: boolean},
 >(
-  testComponentFn: () => Type<{}>,
+  testComponentFn: () => Type<F>,
   listHarness: ComponentHarnessConstructor<L> & {
     with: (config?: BaseHarnessFilters) => HarnessPredicate<L>;
   },
@@ -40,7 +41,7 @@ function runBaseListFunctionalityTests<
   describe('base list functionality', () => {
     let simpleListHarness: L;
     let emptyListHarness: L;
-    let fixture: ComponentFixture<{}>;
+    let fixture: ComponentFixture<F>;
 
     beforeEach(async () => {
       const testComponent = testComponentFn();
@@ -292,6 +293,14 @@ function runBaseListFunctionalityTests<
       const loader = await items[1].getChildLoader(MatListItemSection.CONTENT);
       await expectAsync(loader.getHarness(TestItemContentHarness)).toBeResolved();
     });
+
+    it('should check disabled state of items', async () => {
+      fixture.componentInstance.disableThirdItem = true;
+      const items = await simpleListHarness.getItems();
+      expect(items.length).toBe(5);
+      expect(await items[0].isDisabled()).toBe(false);
+      expect(await items[2].isDisabled()).toBe(true);
+    });
   });
 }
 
@@ -488,14 +497,6 @@ describe('MatSelectionListHarness', () => {
       await items[0].deselect();
       expect(await items[0].isSelected()).toBe(false);
     });
-
-    it('should check disabled state of options', async () => {
-      fixture.componentInstance.disableItem3 = true;
-      const items = await harness.getItems();
-      expect(items.length).toBe(5);
-      expect(await items[0].isDisabled()).toBe(false);
-      expect(await items[2].isDisabled()).toBe(true);
-    });
   });
 });
 
@@ -513,7 +514,7 @@ describe('MatSelectionListHarness', () => {
         <a mat-list-item>
           <span class="test-item-content">Item 2</span>
         </a>
-        <button mat-list-item>Item 3</button>
+        <button mat-list-item [disabled]="disableThirdItem">Item 3</button>
         <div matSubheader>Section 2</div>
         <mat-divider></mat-divider>
         <mat-list-item lines="3">
@@ -531,7 +532,9 @@ describe('MatSelectionListHarness', () => {
       <mat-list class="test-empty"></mat-list>
   `,
 })
-class ListHarnessTest {}
+class ListHarnessTest {
+  disableThirdItem = false;
+}
 
 @Component({
   template: `
@@ -547,7 +550,10 @@ class ListHarnessTest {}
         <a mat-list-item (click)="lastClicked = 'Item 2'">
           <span class="test-item-content">Item 2</span>
         </a>
-        <button mat-list-item (click)="lastClicked = 'Item 3'">Item 3</button>
+        <button
+          mat-list-item
+          (click)="lastClicked = 'Item 3'"
+          [disabled]="disableThirdItem">Item 3</button>
         <div matSubheader>Section 2</div>
         <mat-divider></mat-divider>
         <button mat-list-item lines="3">
@@ -567,6 +573,7 @@ class ListHarnessTest {}
 })
 class ActionListHarnessTest {
   lastClicked: string;
+  disableThirdItem = false;
 }
 
 @Component({
@@ -583,7 +590,11 @@ class ActionListHarnessTest {
         <a mat-list-item href (click)="onClick($event, 'Item 2')">
           <span class="test-item-content">Item 2</span>
         </a>
-        <a mat-list-item href="/somestuff" (click)="onClick($event, 'Item 3')">Item 3</a>
+        <a
+          mat-list-item
+          href="/somestuff"
+          (click)="onClick($event, 'Item 3')"
+          [disabled]="disableThirdItem">Item 3</a>
         <div matSubheader>Section 2</div>
         <mat-divider></mat-divider>
         <a mat-list-item lines="3">
@@ -603,6 +614,7 @@ class ActionListHarnessTest {
 })
 class NavListHarnessTest {
   lastClicked: string;
+  disableThirdItem = false;
 
   onClick(event: Event, value: string) {
     event.preventDefault();
@@ -624,7 +636,7 @@ class NavListHarnessTest {
       <mat-list-option>
         <span class="test-item-content">Item 2</span>
       </mat-list-option>
-      <mat-list-option [disabled]="disableItem3">Item 3</mat-list-option>
+      <mat-list-option [disabled]="disableThirdItem">Item 3</mat-list-option>
       <div matSubheader>Section 2</div>
       <mat-divider></mat-divider>
       <mat-list-option lines="3">
@@ -643,7 +655,7 @@ class NavListHarnessTest {
   `,
 })
 class SelectionListHarnessTest {
-  disableItem3 = false;
+  disableThirdItem = false;
 }
 
 class TestItemContentHarness extends ComponentHarness {

diff --git a/src/material-experimental/mdc-list/testing/list-item-harness-base.ts b/src/material-experimental/mdc-list/testing/list-item-harness-base.ts
@@ -129,6 +129,11 @@ export abstract class MatListItemHarnessBase extends ContentContainerComponentHa
     return (await this._primaryText()).text();
   }
 
+  /** Whether the list item is disabled. */
+  async isDisabled(): Promise<boolean> {
+    return (await this.host()).hasClass('mdc-list-item--disabled');
+  }
+
   /**
    * Gets the secondary line text of the list item. Null if the list item
    * does not have a secondary line.

diff --git a/src/material-experimental/mdc-list/testing/selection-list-harness.ts b/src/material-experimental/mdc-list/testing/selection-list-harness.ts
@@ -105,11 +105,6 @@ export class MatListOptionHarness extends MatListItemHarnessBase {
     return (await (await this.host()).getAttribute('aria-selected')) === 'true';
   }
 
-  /** Whether the list option is disabled. */
-  async isDisabled(): Promise<boolean> {
-    return (await (await this.host()).getAttribute('aria-disabled')) === 'true';
-  }
-
   /** Focuses the list option. */
   async focus(): Promise<void> {
     return (await this.host()).focus();

diff --git a/src/material/list/testing/list-item-harness-base.ts b/src/material/list/testing/list-item-harness-base.ts
@@ -92,6 +92,11 @@ export abstract class MatListItemHarnessBase extends ContentContainerComponentHa
     return !!(await this._icon());
   }
 
+  /** Whether this list option is disabled. */
+  async isDisabled(): Promise<boolean> {
+    return (await this.host()).hasClass('mat-list-item-disabled');
+  }
+
   /**
    * Gets a `HarnessLoader` used to get harnesses within the list item's content.
    * @deprecated Use `getChildLoader(MatListItemSection.CONTENT)` or `getHarness` instead.

diff --git a/src/material/list/testing/selection-list-harness.ts b/src/material/list/testing/selection-list-harness.ts
@@ -107,11 +107,6 @@ export class MatListOptionHarness extends MatListItemHarnessBase {
     return (await (await this.host()).getAttribute('aria-selected')) === 'true';
   }
 
-  /** Whether the list option is disabled. */
-  async isDisabled(): Promise<boolean> {
-    return (await (await this.host()).getAttribute('aria-disabled')) === 'true';
-  }
-
   /** Focuses the list option. */
   async focus(): Promise<void> {
     return (await this.host()).focus();

diff --git a/src/material/list/testing/shared.spec.ts b/src/material/list/testing/shared.spec.ts
@@ -30,8 +30,9 @@ function runBaseListFunctionalityTests<
     BaseListItemHarnessFilters
   >,
   I extends MatListItemHarnessBase,
+  F extends {disableThirdItem: boolean},
 >(
-  testComponent: Type<{}>,
+  testComponent: Type<F>,
   listModule: typeof MatListModule,
   listHarness: ComponentHarnessConstructor<L> & {
     with: (config?: BaseHarnessFilters) => HarnessPredicate<L>;
@@ -44,7 +45,7 @@ function runBaseListFunctionalityTests<
   describe('base list functionality', () => {
     let simpleListHarness: L;
     let emptyListHarness: L;
-    let fixture: ComponentFixture<{}>;
+    let fixture: ComponentFixture<F>;
 
     beforeEach(async () => {
       await TestBed.configureTestingModule({
@@ -223,6 +224,14 @@ function runBaseListFunctionalityTests<
       const loader = await items[1].getChildLoader(selectors.content as MatListItemSection);
       await expectAsync(loader.getHarness(TestItemContentHarness)).toBeResolved();
     });
+
+    it('should check disabled state of items', async () => {
+      fixture.componentInstance.disableThirdItem = true;
+      const items = await simpleListHarness.getItems();
+      expect(items.length).toBe(3);
+      expect(await items[0].isDisabled()).toBe(false);
+      expect(await items[2].isDisabled()).toBe(true);
+    });
   });
 }
 
@@ -242,7 +251,7 @@ export function runHarnessTests(
   selectors: {content: string},
 ) {
   describe('MatListHarness', () => {
-    runBaseListFunctionalityTests<MatListHarness, MatListItemHarness>(
+    runBaseListFunctionalityTests<MatListHarness, MatListItemHarness, ListHarnessTest>(
       ListHarnessTest,
       listModule,
       listHarness,
@@ -254,7 +263,11 @@ export function runHarnessTests(
   });
 
   describe('MatActionListHarness', () => {
-    runBaseListFunctionalityTests<MatActionListHarness, MatActionListItemHarness>(
+    runBaseListFunctionalityTests<
+      MatActionListHarness,
+      MatActionListItemHarness,
+      ActionListHarnessTest
+    >(
       ActionListHarnessTest,
       listModule,
       actionListHarness,
@@ -296,7 +309,7 @@ export function runHarnessTests(
   });
 
   describe('MatNavListHarness', () => {
-    runBaseListFunctionalityTests<MatNavListHarness, MatNavListItemHarness>(
+    runBaseListFunctionalityTests<MatNavListHarness, MatNavListItemHarness, NavListHarnessTest>(
       NavListHarnessTest,
       listModule,
       navListHarness,
@@ -349,7 +362,11 @@ export function runHarnessTests(
   });
 
   describe('MatSelectionListHarness', () => {
-    runBaseListFunctionalityTests<MatSelectionListHarness, MatListOptionHarness>(
+    runBaseListFunctionalityTests<
+      MatSelectionListHarness,
+      MatListOptionHarness,
+      SelectionListHarnessTest
+    >(
       SelectionListHarnessTest,
       listModule,
       selectionListHarness,
@@ -448,14 +465,6 @@ export function runHarnessTests(
         await items[0].deselect();
         expect(await items[0].isSelected()).toBe(false);
       });
-
-      it('should check disabled state of options', async () => {
-        fixture.componentInstance.disableItem3 = true;
-        const items = await harness.getItems();
-        expect(items.length).toBe(3);
-        expect(await items[0].isDisabled()).toBe(false);
-        expect(await items[2].isDisabled()).toBe(true);
-      });
     });
   });
 }
@@ -474,15 +483,17 @@ export function runHarnessTests(
         <a mat-list-item>
           <span class="test-item-content">Item 2</span>
         </a>
-        <button mat-list-item>Item 3</button>
+        <button mat-list-item [disabled]="disableThirdItem">Item 3</button>
         <div matSubheader>Section 2</div>
         <mat-divider></mat-divider>
       </mat-list>
 
       <mat-list class="test-empty"></mat-list>
   `,
 })
-class ListHarnessTest {}
+class ListHarnessTest {
+  disableThirdItem = false;
+}
 
 @Component({
   template: `
@@ -498,7 +509,10 @@ class ListHarnessTest {}
         <a mat-list-item (click)="lastClicked = 'Item 2'">
           <span class="test-item-content">Item 2</span>
         </a>
-        <button mat-list-item (click)="lastClicked = 'Item 3'">Item 3</button>
+        <button
+          mat-list-item
+          [disabled]="disableThirdItem"
+          (click)="lastClicked = 'Item 3'">Item 3</button>
         <div matSubheader>Section 2</div>
         <mat-divider></mat-divider>
       </mat-action-list>
@@ -508,6 +522,7 @@ class ListHarnessTest {}
 })
 class ActionListHarnessTest {
   lastClicked: string;
+  disableThirdItem = false;
 }
 
 @Component({
@@ -524,7 +539,11 @@ class ActionListHarnessTest {
         <a mat-list-item href (click)="onClick($event, 'Item 2')">
           <span class="test-item-content">Item 2</span>
         </a>
-        <a mat-list-item href="/somestuff" (click)="onClick($event, 'Item 3')">Item 3</a>
+        <a
+          mat-list-item
+          href="/somestuff"
+          (click)="onClick($event, 'Item 3')"
+          [disabled]="disableThirdItem">Item 3</a>
         <div matSubheader>Section 2</div>
         <mat-divider></mat-divider>
       </mat-nav-list>
@@ -534,6 +553,7 @@ class ActionListHarnessTest {
 })
 class NavListHarnessTest {
   lastClicked: string;
+  disableThirdItem = false;
 
   onClick(event: Event, value: string) {
     event.preventDefault();
@@ -555,7 +575,7 @@ class NavListHarnessTest {
       <mat-list-option>
         <span class="test-item-content">Item 2</span>
       </mat-list-option>
-      <mat-list-option [disabled]="disableItem3">Item 3</mat-list-option>
+      <mat-list-option [disabled]="disableThirdItem">Item 3</mat-list-option>
       <div matSubheader>Section 2</div>
       <mat-divider></mat-divider>
     </mat-selection-list>
@@ -564,7 +584,7 @@ class NavListHarnessTest {
   `,
 })
 class SelectionListHarnessTest {
-  disableItem3 = false;
+  disableThirdItem = false;
 }
 
 class TestItemContentHarness extends ComponentHarness {

diff --git a/tools/public_api_guard/material/list-testing.md b/tools/public_api_guard/material/list-testing.md
@@ -87,7 +87,6 @@ export class MatListOptionHarness extends MatListItemHarnessBase {
     focus(): Promise<void>;
     getCheckboxPosition(): Promise<MatListOptionCheckboxPosition>;
     static hostSelector: string;
-    isDisabled(): Promise<boolean>;
     isFocused(): Promise<boolean>;
     isSelected(): Promise<boolean>;
     select(): Promise<void>;