Skip to content

Commit f0dba77

Browse files
crisbetocrisbeto
committed
fix(material/list): add isDisabled to all list item harnesses
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.
1 parent 1926b19 commit f0dba77

File tree

7 files changed

+78
-47
lines changed

7 files changed

+78
-47
lines changed

‎src/material-experimental/mdc-list/testing/list-harness.spec.ts

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,9 @@ function runBaseListFunctionalityTests<
3030
BaseListItemHarnessFilters
3131
>,
3232
I extends MatListItemHarnessBase,
33+
F extends {disableThirdItem: boolean},
3334
>(
34-
testComponentFn: () => Type<{}>,
35+
testComponentFn: () => Type<F>,
3536
listHarness: ComponentHarnessConstructor<L> & {
3637
with: (config?: BaseHarnessFilters) => HarnessPredicate<L>;
3738
},
@@ -40,7 +41,7 @@ function runBaseListFunctionalityTests<
4041
describe('base list functionality', () => {
4142
let simpleListHarness: L;
4243
let emptyListHarness: L;
43-
let fixture: ComponentFixture<{}>;
44+
let fixture: ComponentFixture<F>;
4445

4546
beforeEach(async () => {
4647
const testComponent = testComponentFn();
@@ -292,6 +293,14 @@ function runBaseListFunctionalityTests<
292293
const loader = await items[1].getChildLoader(MatListItemSection.CONTENT);
293294
await expectAsync(loader.getHarness(TestItemContentHarness)).toBeResolved();
294295
});
296+
297+
it('should check disabled state of items', async () => {
298+
fixture.componentInstance.disableThirdItem = true;
299+
const items = await simpleListHarness.getItems();
300+
expect(items.length).toBe(5);
301+
expect(await items[0].isDisabled()).toBe(false);
302+
expect(await items[2].isDisabled()).toBe(true);
303+
});
295304
});
296305
}
297306

@@ -488,14 +497,6 @@ describe('MatSelectionListHarness', () => {
488497
await items[0].deselect();
489498
expect(await items[0].isSelected()).toBe(false);
490499
});
491-
492-
it('should check disabled state of options', async () => {
493-
fixture.componentInstance.disableItem3 = true;
494-
const items = await harness.getItems();
495-
expect(items.length).toBe(5);
496-
expect(await items[0].isDisabled()).toBe(false);
497-
expect(await items[2].isDisabled()).toBe(true);
498-
});
499500
});
500501
});
501502

@@ -513,7 +514,7 @@ describe('MatSelectionListHarness', () => {
513514
<a mat-list-item>
514515
<span class="test-item-content">Item 2</span>
515516
</a>
516-
<button mat-list-item>Item 3</button>
517+
<button mat-list-item [disabled]="disableThirdItem">Item 3</button>
517518
<div matSubheader>Section 2</div>
518519
<mat-divider></mat-divider>
519520
<mat-list-item lines="3">
@@ -531,7 +532,9 @@ describe('MatSelectionListHarness', () => {
531532
<mat-list class="test-empty"></mat-list>
532533
`,
533534
})
534-
class ListHarnessTest {}
535+
class ListHarnessTest {
536+
disableThirdItem = false;
537+
}
535538

536539
@Component({
537540
template: `
@@ -547,7 +550,10 @@ class ListHarnessTest {}
547550
<a mat-list-item (click)="lastClicked = 'Item 2'">
548551
<span class="test-item-content">Item 2</span>
549552
</a>
550-
<button mat-list-item (click)="lastClicked = 'Item 3'">Item 3</button>
553+
<button
554+
mat-list-item
555+
(click)="lastClicked = 'Item 3'"
556+
[disabled]="disableThirdItem">Item 3</button>
551557
<div matSubheader>Section 2</div>
552558
<mat-divider></mat-divider>
553559
<button mat-list-item lines="3">
@@ -567,6 +573,7 @@ class ListHarnessTest {}
567573
})
568574
class ActionListHarnessTest {
569575
lastClicked: string;
576+
disableThirdItem = false;
570577
}
571578

572579
@Component({
@@ -583,7 +590,11 @@ class ActionListHarnessTest {
583590
<a mat-list-item href (click)="onClick($event, 'Item 2')">
584591
<span class="test-item-content">Item 2</span>
585592
</a>
586-
<a mat-list-item href="/somestuff" (click)="onClick($event, 'Item 3')">Item 3</a>
593+
<a
594+
mat-list-item
595+
href="/somestuff"
596+
(click)="onClick($event, 'Item 3')"
597+
[disabled]="disableThirdItem">Item 3</a>
587598
<div matSubheader>Section 2</div>
588599
<mat-divider></mat-divider>
589600
<a mat-list-item lines="3">
@@ -603,6 +614,7 @@ class ActionListHarnessTest {
603614
})
604615
class NavListHarnessTest {
605616
lastClicked: string;
617+
disableThirdItem = false;
606618

607619
onClick(event: Event, value: string) {
608620
event.preventDefault();
@@ -624,7 +636,7 @@ class NavListHarnessTest {
624636
<mat-list-option>
625637
<span class="test-item-content">Item 2</span>
626638
</mat-list-option>
627-
<mat-list-option [disabled]="disableItem3">Item 3</mat-list-option>
639+
<mat-list-option [disabled]="disableThirdItem">Item 3</mat-list-option>
628640
<div matSubheader>Section 2</div>
629641
<mat-divider></mat-divider>
630642
<mat-list-option lines="3">
@@ -643,7 +655,7 @@ class NavListHarnessTest {
643655
`,
644656
})
645657
class SelectionListHarnessTest {
646-
disableItem3 = false;
658+
disableThirdItem = false;
647659
}
648660

649661
class TestItemContentHarness extends ComponentHarness {

‎src/material-experimental/mdc-list/testing/list-item-harness-base.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,11 @@ export abstract class MatListItemHarnessBase extends ContentContainerComponentHa
129129
return (await this._primaryText()).text();
130130
}
131131

132+
/** Whether the list item is disabled. */
133+
async isDisabled(): Promise<boolean> {
134+
return (await this.host()).hasClass('mdc-list-item--disabled');
135+
}
136+
132137
/**
133138
* Gets the secondary line text of the list item. Null if the list item
134139
* does not have a secondary line.

‎src/material-experimental/mdc-list/testing/selection-list-harness.ts

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -105,11 +105,6 @@ export class MatListOptionHarness extends MatListItemHarnessBase {
105105
return (await (await this.host()).getAttribute('aria-selected')) === 'true';
106106
}
107107

108-
/** Whether the list option is disabled. */
109-
async isDisabled(): Promise<boolean> {
110-
return (await (await this.host()).getAttribute('aria-disabled')) === 'true';
111-
}
112-
113108
/** Focuses the list option. */
114109
async focus(): Promise<void> {
115110
return (await this.host()).focus();

‎src/material/list/testing/list-item-harness-base.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,11 @@ export abstract class MatListItemHarnessBase extends ContentContainerComponentHa
9292
return !!(await this._icon());
9393
}
9494

95+
/** Whether this list option is disabled. */
96+
async isDisabled(): Promise<boolean> {
97+
return (await this.host()).hasClass('mat-list-item-disabled');
98+
}
99+
95100
/**
96101
* Gets a `HarnessLoader` used to get harnesses within the list item's content.
97102
* @deprecated Use `getChildLoader(MatListItemSection.CONTENT)` or `getHarness` instead.

‎src/material/list/testing/selection-list-harness.ts

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -107,11 +107,6 @@ export class MatListOptionHarness extends MatListItemHarnessBase {
107107
return (await (await this.host()).getAttribute('aria-selected')) === 'true';
108108
}
109109

110-
/** Whether the list option is disabled. */
111-
async isDisabled(): Promise<boolean> {
112-
return (await (await this.host()).getAttribute('aria-disabled')) === 'true';
113-
}
114-
115110
/** Focuses the list option. */
116111
async focus(): Promise<void> {
117112
return (await this.host()).focus();

‎src/material/list/testing/shared.spec.ts

Lines changed: 40 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,9 @@ function runBaseListFunctionalityTests<
3030
BaseListItemHarnessFilters
3131
>,
3232
I extends MatListItemHarnessBase,
33+
F extends {disableThirdItem: boolean},
3334
>(
34-
testComponent: Type<{}>,
35+
testComponent: Type<F>,
3536
listModule: typeof MatListModule,
3637
listHarness: ComponentHarnessConstructor<L> & {
3738
with: (config?: BaseHarnessFilters) => HarnessPredicate<L>;
@@ -44,7 +45,7 @@ function runBaseListFunctionalityTests<
4445
describe('base list functionality', () => {
4546
let simpleListHarness: L;
4647
let emptyListHarness: L;
47-
let fixture: ComponentFixture<{}>;
48+
let fixture: ComponentFixture<F>;
4849

4950
beforeEach(async () => {
5051
await TestBed.configureTestingModule({
@@ -223,6 +224,14 @@ function runBaseListFunctionalityTests<
223224
const loader = await items[1].getChildLoader(selectors.content as MatListItemSection);
224225
await expectAsync(loader.getHarness(TestItemContentHarness)).toBeResolved();
225226
});
227+
228+
it('should check disabled state of items', async () => {
229+
fixture.componentInstance.disableThirdItem = true;
230+
const items = await simpleListHarness.getItems();
231+
expect(items.length).toBe(3);
232+
expect(await items[0].isDisabled()).toBe(false);
233+
expect(await items[2].isDisabled()).toBe(true);
234+
});
226235
});
227236
}
228237

@@ -242,7 +251,7 @@ export function runHarnessTests(
242251
selectors: {content: string},
243252
) {
244253
describe('MatListHarness', () => {
245-
runBaseListFunctionalityTests<MatListHarness, MatListItemHarness>(
254+
runBaseListFunctionalityTests<MatListHarness, MatListItemHarness, ListHarnessTest>(
246255
ListHarnessTest,
247256
listModule,
248257
listHarness,
@@ -254,7 +263,11 @@ export function runHarnessTests(
254263
});
255264

256265
describe('MatActionListHarness', () => {
257-
runBaseListFunctionalityTests<MatActionListHarness, MatActionListItemHarness>(
266+
runBaseListFunctionalityTests<
267+
MatActionListHarness,
268+
MatActionListItemHarness,
269+
ActionListHarnessTest
270+
>(
258271
ActionListHarnessTest,
259272
listModule,
260273
actionListHarness,
@@ -296,7 +309,7 @@ export function runHarnessTests(
296309
});
297310

298311
describe('MatNavListHarness', () => {
299-
runBaseListFunctionalityTests<MatNavListHarness, MatNavListItemHarness>(
312+
runBaseListFunctionalityTests<MatNavListHarness, MatNavListItemHarness, NavListHarnessTest>(
300313
NavListHarnessTest,
301314
listModule,
302315
navListHarness,
@@ -349,7 +362,11 @@ export function runHarnessTests(
349362
});
350363

351364
describe('MatSelectionListHarness', () => {
352-
runBaseListFunctionalityTests<MatSelectionListHarness, MatListOptionHarness>(
365+
runBaseListFunctionalityTests<
366+
MatSelectionListHarness,
367+
MatListOptionHarness,
368+
SelectionListHarnessTest
369+
>(
353370
SelectionListHarnessTest,
354371
listModule,
355372
selectionListHarness,
@@ -448,14 +465,6 @@ export function runHarnessTests(
448465
await items[0].deselect();
449466
expect(await items[0].isSelected()).toBe(false);
450467
});
451-
452-
it('should check disabled state of options', async () => {
453-
fixture.componentInstance.disableItem3 = true;
454-
const items = await harness.getItems();
455-
expect(items.length).toBe(3);
456-
expect(await items[0].isDisabled()).toBe(false);
457-
expect(await items[2].isDisabled()).toBe(true);
458-
});
459468
});
460469
});
461470
}
@@ -474,15 +483,17 @@ export function runHarnessTests(
474483
<a mat-list-item>
475484
<span class="test-item-content">Item 2</span>
476485
</a>
477-
<button mat-list-item>Item 3</button>
486+
<button mat-list-item [disabled]="disableThirdItem">Item 3</button>
478487
<div matSubheader>Section 2</div>
479488
<mat-divider></mat-divider>
480489
</mat-list>
481490
482491
<mat-list class="test-empty"></mat-list>
483492
`,
484493
})
485-
class ListHarnessTest {}
494+
class ListHarnessTest {
495+
disableThirdItem = false;
496+
}
486497

487498
@Component({
488499
template: `
@@ -498,7 +509,10 @@ class ListHarnessTest {}
498509
<a mat-list-item (click)="lastClicked = 'Item 2'">
499510
<span class="test-item-content">Item 2</span>
500511
</a>
501-
<button mat-list-item (click)="lastClicked = 'Item 3'">Item 3</button>
512+
<button
513+
mat-list-item
514+
[disabled]="disableThirdItem"
515+
(click)="lastClicked = 'Item 3'">Item 3</button>
502516
<div matSubheader>Section 2</div>
503517
<mat-divider></mat-divider>
504518
</mat-action-list>
@@ -508,6 +522,7 @@ class ListHarnessTest {}
508522
})
509523
class ActionListHarnessTest {
510524
lastClicked: string;
525+
disableThirdItem = false;
511526
}
512527

513528
@Component({
@@ -524,7 +539,11 @@ class ActionListHarnessTest {
524539
<a mat-list-item href (click)="onClick($event, 'Item 2')">
525540
<span class="test-item-content">Item 2</span>
526541
</a>
527-
<a mat-list-item href="/somestuff" (click)="onClick($event, 'Item 3')">Item 3</a>
542+
<a
543+
mat-list-item
544+
href="/somestuff"
545+
(click)="onClick($event, 'Item 3')"
546+
[disabled]="disableThirdItem">Item 3</a>
528547
<div matSubheader>Section 2</div>
529548
<mat-divider></mat-divider>
530549
</mat-nav-list>
@@ -534,6 +553,7 @@ class ActionListHarnessTest {
534553
})
535554
class NavListHarnessTest {
536555
lastClicked: string;
556+
disableThirdItem = false;
537557

538558
onClick(event: Event, value: string) {
539559
event.preventDefault();
@@ -555,7 +575,7 @@ class NavListHarnessTest {
555575
<mat-list-option>
556576
<span class="test-item-content">Item 2</span>
557577
</mat-list-option>
558-
<mat-list-option [disabled]="disableItem3">Item 3</mat-list-option>
578+
<mat-list-option [disabled]="disableThirdItem">Item 3</mat-list-option>
559579
<div matSubheader>Section 2</div>
560580
<mat-divider></mat-divider>
561581
</mat-selection-list>
@@ -564,7 +584,7 @@ class NavListHarnessTest {
564584
`,
565585
})
566586
class SelectionListHarnessTest {
567-
disableItem3 = false;
587+
disableThirdItem = false;
568588
}
569589

570590
class TestItemContentHarness extends ComponentHarness {

‎tools/public_api_guard/material/list-testing.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,6 @@ export class MatListOptionHarness extends MatListItemHarnessBase {
8787
focus(): Promise<void>;
8888
getCheckboxPosition(): Promise<MatListOptionCheckboxPosition>;
8989
static hostSelector: string;
90-
isDisabled(): Promise<boolean>;
9190
isFocused(): Promise<boolean>;
9291
isSelected(): Promise<boolean>;
9392
select(): Promise<void>;

0 commit comments

Comments
 (0)