Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 18, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 28 additions & 16 deletions src/material-experimental/mdc-list/testing/list-harness.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
},
Expand All @@ -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();
Expand Down Expand Up @@ -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);
});
});
}

Expand Down Expand Up @@ -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);
});
});
});

Expand All @@ -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">
Expand All @@ -531,7 +532,9 @@ describe('MatSelectionListHarness', () => {
<mat-list class="test-empty"></mat-list>
`,
})
class ListHarnessTest {}
class ListHarnessTest {
disableThirdItem = false;
}

@Component({
template: `
Expand All @@ -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">
Expand All @@ -567,6 +573,7 @@ class ListHarnessTest {}
})
class ActionListHarnessTest {
lastClicked: string;
disableThirdItem = false;
}

@Component({
Expand All @@ -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">
Expand All @@ -603,6 +614,7 @@ class ActionListHarnessTest {
})
class NavListHarnessTest {
lastClicked: string;
disableThirdItem = false;

onClick(event: Event, value: string) {
event.preventDefault();
Expand All @@ -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">
Expand All @@ -643,7 +655,7 @@ class NavListHarnessTest {
`,
})
class SelectionListHarnessTest {
disableItem3 = false;
disableThirdItem = false;
}

class TestItemContentHarness extends ComponentHarness {
Expand Down
5 changes: 5 additions & 0 deletions src/material-experimental/mdc-list/testing/list-item-harness-base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
5 changes: 0 additions & 5 deletions src/material-experimental/mdc-list/testing/selection-list-harness.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
5 changes: 5 additions & 0 deletions src/material/list/testing/list-item-harness-base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
5 changes: 0 additions & 5 deletions src/material/list/testing/selection-list-harness.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
60 changes: 40 additions & 20 deletions src/material/list/testing/shared.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand All @@ -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({
Expand Down Expand Up @@ -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);
});
});
}

Expand All @@ -242,7 +251,7 @@ export function runHarnessTests(
selectors: {content: string},
) {
describe('MatListHarness', () => {
runBaseListFunctionalityTests<MatListHarness, MatListItemHarness>(
runBaseListFunctionalityTests<MatListHarness, MatListItemHarness, ListHarnessTest>(
ListHarnessTest,
listModule,
listHarness,
Expand All @@ -254,7 +263,11 @@ export function runHarnessTests(
});

describe('MatActionListHarness', () => {
runBaseListFunctionalityTests<MatActionListHarness, MatActionListItemHarness>(
runBaseListFunctionalityTests<
MatActionListHarness,
MatActionListItemHarness,
ActionListHarnessTest
>(
ActionListHarnessTest,
listModule,
actionListHarness,
Expand Down Expand Up @@ -296,7 +309,7 @@ export function runHarnessTests(
});

describe('MatNavListHarness', () => {
runBaseListFunctionalityTests<MatNavListHarness, MatNavListItemHarness>(
runBaseListFunctionalityTests<MatNavListHarness, MatNavListItemHarness, NavListHarnessTest>(
NavListHarnessTest,
listModule,
navListHarness,
Expand Down Expand Up @@ -349,7 +362,11 @@ export function runHarnessTests(
});

describe('MatSelectionListHarness', () => {
runBaseListFunctionalityTests<MatSelectionListHarness, MatListOptionHarness>(
runBaseListFunctionalityTests<
MatSelectionListHarness,
MatListOptionHarness,
SelectionListHarnessTest
>(
SelectionListHarnessTest,
listModule,
selectionListHarness,
Expand Down Expand Up @@ -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);
});
});
});
}
Expand All @@ -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: `
Expand All @@ -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>
Expand All @@ -508,6 +522,7 @@ class ListHarnessTest {}
})
class ActionListHarnessTest {
lastClicked: string;
disableThirdItem = false;
}

@Component({
Expand All @@ -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>
Expand All @@ -534,6 +553,7 @@ class ActionListHarnessTest {
})
class NavListHarnessTest {
lastClicked: string;
disableThirdItem = false;

onClick(event: Event, value: string) {
event.preventDefault();
Expand All @@ -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>
Expand All @@ -564,7 +584,7 @@ class NavListHarnessTest {
`,
})
class SelectionListHarnessTest {
disableItem3 = false;
disableThirdItem = false;
}

class TestItemContentHarness extends ComponentHarness {
Expand Down
1 change: 0 additions & 1 deletion tools/public_api_guard/material/list-testing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,6 @@ export class MatListOptionHarness extends MatListItemHarnessBase {
focus(): Promise<void>;
getCheckboxPosition(): Promise<MatListOptionCheckboxPosition>;
static hostSelector: string;
isDisabled(): Promise<boolean>;
Copy link
Member

@devversion devversion Jan 16, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Surprised that MatListItemHarnessBase does not show up in the api golden, good thing to note (to look into in the future)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's because we only export the derived classes, not the base class.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I was thinking Microsoft's API extractor would pull in this type regardless, since it's defining a public export signature.

isFocused(): Promise<boolean>;
isSelected(): Promise<boolean>;
select(): Promise<void>;
Expand Down