Skip to content

feat(material-experimental): add option to filter checkbox harnesses by name #16662

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
Aug 13, 2019
Merged

feat(material-experimental): add option to filter checkbox harnesses by name #16662

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
3 changes: 2 additions & 1 deletion src/material-experimental/mdc-checkbox/harness/checkbox-harness-filters.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,6 @@
*/

export type CheckboxHarnessFilters = {
label?: string | RegExp
label?: string|RegExp;
name?: string;
};
27 changes: 18 additions & 9 deletions src/material-experimental/mdc-checkbox/harness/checkbox-harness.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,12 @@ let checkboxHarness: typeof MatCheckboxHarness;
describe('MatCheckboxHarness', () => {
describe('non-MDC-based', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [MatCheckboxModule, ReactiveFormsModule],
declarations: [CheckboxHarnessTest],
}).compileComponents();
await TestBed
.configureTestingModule({
imports: [MatCheckboxModule, ReactiveFormsModule],
declarations: [CheckboxHarnessTest],
})
.compileComponents();

fixture = TestBed.createComponent(CheckboxHarnessTest);
fixture.detectChanges();
Expand All @@ -31,10 +33,12 @@ describe('MatCheckboxHarness', () => {

describe('MDC-based', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [MatMdcCheckboxModule, ReactiveFormsModule],
declarations: [CheckboxHarnessTest],
}).compileComponents();
await TestBed
.configureTestingModule({
imports: [MatMdcCheckboxModule, ReactiveFormsModule],
declarations: [CheckboxHarnessTest],
})
.compileComponents();

fixture = TestBed.createComponent(CheckboxHarnessTest);
fixture.detectChanges();
Expand All @@ -61,6 +65,12 @@ function runTests() {
expect(await checkboxes[0].getLabelText()).toBe('First');
});

it('should load checkbox with name', async () => {
const checkboxes = await loader.getAllHarnesses(checkboxHarness.with({name: 'first-name'}));
expect(checkboxes.length).toBe(1);
expect(await checkboxes[0].getLabelText()).toBe('First');
});

it('should load checkbox with regex label match', async () => {
const checkboxes = await loader.getAllHarnesses(checkboxHarness.with({label: /^s/i}));
expect(checkboxes.length).toBe(1);
Expand Down Expand Up @@ -199,4 +209,3 @@ class CheckboxHarnessTest {
ctrl = new FormControl(true);
disabled = true;
}

18 changes: 12 additions & 6 deletions src/material-experimental/mdc-checkbox/harness/checkbox-harness.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,18 @@ export class MatCheckboxHarness extends ComponentHarness {
* Gets a `HarnessPredicate` that can be used to search for a checkbox with specific attributes.
* @param options Options for narrowing the search:
* - `label` finds a checkbox with specific label text.
* - `name` finds a checkbox with specific name.
* @return a `HarnessPredicate` configured with the given options.
*/
static with(options: CheckboxHarnessFilters = {}): HarnessPredicate<MatCheckboxHarness> {
return new HarnessPredicate(MatCheckboxHarness)
.addOption('label', options.label,
(harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label));
.addOption(
'label', options.label,
(harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label))
// We want to provide a filter option for "name" because the name of the checkbox is
// only set on the underlying input. This means that it's not possible for developers
// to retrieve the harness of a specific checkbox with name through a CSS selector.
.addOption('name', options.name, async (harness, name) => await harness.getName() === name);
}

private _label = this.locatorFor('.mat-checkbox-label');
Expand Down Expand Up @@ -64,22 +70,22 @@ export class MatCheckboxHarness extends ComponentHarness {
}

/** Gets a promise for the checkbox's name. */
async getName(): Promise<string | null> {
async getName(): Promise<string|null> {
return (await this._input()).getAttribute('name');
}

/** Gets a promise for the checkbox's value. */
async getValue(): Promise<string | null> {
async getValue(): Promise<string|null> {
return (await this._input()).getAttribute('value');
}

/** Gets a promise for the checkbox's aria-label. */
async getAriaLabel(): Promise<string | null> {
async getAriaLabel(): Promise<string|null> {
return (await this._input()).getAttribute('aria-label');
}

/** Gets a promise for the checkbox's aria-labelledby. */
async getAriaLabelledby(): Promise<string | null> {
async getAriaLabelledby(): Promise<string|null> {
return (await this._input()).getAttribute('aria-labelledby');
}

Expand Down
18 changes: 12 additions & 6 deletions src/material-experimental/mdc-checkbox/harness/mdc-checkbox-harness.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,18 @@ export class MatCheckboxHarness extends ComponentHarness {
* Gets a `HarnessPredicate` that can be used to search for a checkbox with specific attributes.
* @param options Options for narrowing the search:
* - `label` finds a checkbox with specific label text.
* - `name` finds a checkbox with specific name.
* @return a `HarnessPredicate` configured with the given options.
*/
static with(options: CheckboxHarnessFilters = {}): HarnessPredicate<MatCheckboxHarness> {
return new HarnessPredicate(MatCheckboxHarness)
.addOption('label', options.label,
(harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label));
.addOption(
'label', options.label,
(harness, label) => HarnessPredicate.stringMatches(harness.getLabelText(), label))
// We want to provide a filter option for "name" because the name of the checkbox is
// only set on the underlying input. This means that it's not possible for developers
// to retrieve the harness of a specific checkbox with name through a CSS selector.
.addOption('name', options.name, async (harness, name) => await harness.getName() === name);
}

private _label = this.locatorFor('label');
Expand Down Expand Up @@ -64,22 +70,22 @@ export class MatCheckboxHarness extends ComponentHarness {
}

/** Gets a promise for the checkbox's name. */
async getName(): Promise<string | null> {
async getName(): Promise<string|null> {
return (await this._input()).getAttribute('name');
}

/** Gets a promise for the checkbox's value. */
async getValue(): Promise<string | null> {
async getValue(): Promise<string|null> {
return (await this._input()).getAttribute('value');
}

/** Gets a promise for the checkbox's aria-label. */
async getAriaLabel(): Promise<string | null> {
async getAriaLabel(): Promise<string|null> {
return (await this._input()).getAttribute('aria-label');
}

/** Gets a promise for the checkbox's aria-labelledby. */
async getAriaLabelledby(): Promise<string | null> {
async getAriaLabelledby(): Promise<string|null> {
return (await this._input()).getAttribute('aria-labelledby');
}

Expand Down