Skip to content

fix(material-experimental): unit tests getting wrong root element and add API for getting property value #16706

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 22, 2019
Merged

fix(material-experimental): unit tests getting wrong root element and add API for getting property value #16706

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
7 changes: 6 additions & 1 deletion src/cdk-experimental/testing/protractor/protractor-element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,8 @@ export class ProtractorElement implements TestElement {
}

async getAttribute(name: string): Promise<string|null> {
return this.element.getAttribute(name);
return browser.executeScript(
`return arguments[0].getAttribute(arguments[1])`, this.element, name);
}

async hasClass(name: string): Promise<boolean> {
Expand All @@ -136,4 +137,8 @@ export class ProtractorElement implements TestElement {
const {x: left, y: top} = await this.element.getLocation();
return {width, height, left, top};
}

async getProperty(name: string): Promise<any> {
return browser.executeScript(`return arguments[0][arguments[1]]`, this.element, name);
}
}
3 changes: 3 additions & 0 deletions src/cdk-experimental/testing/test-element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,4 +101,7 @@ export interface TestElement {

/** Gets the dimensions of the element. */
getDimensions(): Promise<ElementDimensions>;

/** Gets the value of a property of an element. */
getProperty(name: string): Promise<any>;
}
14 changes: 6 additions & 8 deletions src/cdk-experimental/testing/testbed/unit-test-element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,14 +120,7 @@ export class UnitTestElement implements TestElement {

async getAttribute(name: string): Promise<string|null> {
await this._stabilize();
let value = this.element.getAttribute(name);
// If cannot find attribute in the element, also try to find it in property,
// this is useful for input/textarea tags.
if (value === null && name in this.element) {
// We need to cast the element so we can access its properties via string indexing.
return (this.element as unknown as {[key: string]: string|null})[name];
}
return value;
return this.element.getAttribute(name);
}

async hasClass(name: string): Promise<boolean> {
Expand All @@ -139,4 +132,9 @@ export class UnitTestElement implements TestElement {
await this._stabilize();
return this.element.getBoundingClientRect();
}

async getProperty(name: string): Promise<any> {
await this._stabilize();
return (this.element as any)[name];
}
}
14 changes: 10 additions & 4 deletions src/cdk-experimental/testing/tests/protractor.e2e.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,10 +179,10 @@ describe('ProtractorHarnessEnvironment', () => {
it('should be able to clear', async () => {
const input = await harness.input();
await input.sendKeys('Yi');
expect(await input.getAttribute('value')).toBe('Yi');
expect(await input.getProperty('value')).toBe('Yi');

await input.clear();
expect(await input.getAttribute('value')).toBe('');
expect(await input.getProperty('value')).toBe('');
});

it('should be able to click', async () => {
Expand All @@ -204,7 +204,7 @@ describe('ProtractorHarnessEnvironment', () => {
const value = await harness.value();
await input.sendKeys('Yi');

expect(await input.getAttribute('value')).toBe('Yi');
expect(await input.getProperty('value')).toBe('Yi');
expect(await value.text()).toBe('Input: Yi');
});

Expand Down Expand Up @@ -236,7 +236,7 @@ describe('ProtractorHarnessEnvironment', () => {
`;
const memo = await harness.memo();
await memo.sendKeys(memoStr);
expect(await memo.getAttribute('value')).toBe(memoStr);
expect(await memo.getProperty('value')).toBe(memoStr);
});

it('should be able to getCssValue', async () => {
Expand All @@ -254,6 +254,12 @@ describe('ProtractorHarnessEnvironment', () => {
expect(await (await browser.switchTo().activeElement()).getText())
.not.toBe(await button.text());
});

it('should be able to get the value of a property', async () => {
const input = await harness.input();
await input.sendKeys('Hello');
expect(await input.getProperty('value')).toBe('Hello');
});
});

describe('HarnessPredicate', () => {
Expand Down
14 changes: 10 additions & 4 deletions src/cdk-experimental/testing/tests/testbed.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,10 +199,10 @@ describe('TestbedHarnessEnvironment', () => {
it('should be able to clear', async () => {
const input = await harness.input();
await input.sendKeys('Yi');
expect(await input.getAttribute('value')).toBe('Yi');
expect(await input.getProperty('value')).toBe('Yi');

await input.clear();
expect(await input.getAttribute('value')).toBe('');
expect(await input.getProperty('value')).toBe('');
});

it('should be able to click', async () => {
Expand All @@ -224,7 +224,7 @@ describe('TestbedHarnessEnvironment', () => {
const value = await harness.value();
await input.sendKeys('Yi');

expect(await input.getAttribute('value')).toBe('Yi');
expect(await input.getProperty('value')).toBe('Yi');
expect(await value.text()).toBe('Input: Yi');
});

Expand Down Expand Up @@ -255,7 +255,7 @@ describe('TestbedHarnessEnvironment', () => {
`;
const memo = await harness.memo();
await memo.sendKeys(memoStr);
expect(await memo.getAttribute('value')).toBe(memoStr);
expect(await memo.getProperty('value')).toBe(memoStr);
});

it('should be able to getCssValue', async () => {
Expand All @@ -271,6 +271,12 @@ describe('TestbedHarnessEnvironment', () => {
await button.blur();
expect(activeElementText()).not.toBe(await button.text());
});

it('should be able to get the value of a property', async () => {
const input = await harness.input();
await input.sendKeys('Hello');
expect(await input.getProperty('value')).toBe('Hello');
});
});

describe('HarnessPredicate', () => {
Expand Down
8 changes: 4 additions & 4 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 @@ -41,13 +41,13 @@ export class MatCheckboxHarness extends ComponentHarness {

/** Gets a boolean promise indicating if the checkbox is checked. */
async isChecked(): Promise<boolean> {
const checked = (await this._input()).getAttribute('checked');
const checked = (await this._input()).getProperty('checked');
return coerceBooleanProperty(await checked);
}

/** Gets a boolean promise indicating if the checkbox is in an indeterminate state. */
async isIndeterminate(): Promise<boolean> {
const indeterminate = (await this._input()).getAttribute('indeterminate');
const indeterminate = (await this._input()).getProperty('indeterminate');
return coerceBooleanProperty(await indeterminate);
}

Expand All @@ -59,7 +59,7 @@ export class MatCheckboxHarness extends ComponentHarness {

/** Gets a boolean promise indicating if the checkbox is required. */
async isRequired(): Promise<boolean> {
const required = (await this._input()).getAttribute('required');
const required = (await this._input()).getProperty('required');
return coerceBooleanProperty(await required);
}

Expand All @@ -76,7 +76,7 @@ export class MatCheckboxHarness extends ComponentHarness {

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

/** Gets a promise for the checkbox's aria-label. */
Expand Down
6 changes: 3 additions & 3 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 @@ -41,13 +41,13 @@ export class MatCheckboxHarness extends ComponentHarness {

/** Gets a boolean promise indicating if the checkbox is checked. */
async isChecked(): Promise<boolean> {
const checked = (await this._input()).getAttribute('checked');
const checked = (await this._input()).getProperty('checked');
return coerceBooleanProperty(await checked);
}

/** Gets a boolean promise indicating if the checkbox is in an indeterminate state. */
async isIndeterminate(): Promise<boolean> {
const indeterminate = (await this._input()).getAttribute('indeterminate');
const indeterminate = (await this._input()).getProperty('indeterminate');
return coerceBooleanProperty(await indeterminate);
}

Expand Down Expand Up @@ -76,7 +76,7 @@ export class MatCheckboxHarness extends ComponentHarness {

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

/** Gets a promise for the checkbox's aria-label. */
Expand Down
8 changes: 4 additions & 4 deletions src/material-experimental/mdc-radio/harness/radio-harness.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export class MatRadioGroupHarness extends ComponentHarness {

/** Gets the id of the radio-group. */
async getId(): Promise<string|null> {
return (await this.host()).getAttribute('id');
return (await this.host()).getProperty('id');
}

/** Gets the selected radio-button in a radio-group. */
Expand Down Expand Up @@ -174,7 +174,7 @@ export class MatRadioButtonHarness extends ComponentHarness {

/** Whether the radio-button is checked. */
async isChecked(): Promise<boolean> {
const checked = (await this._input()).getAttribute('checked');
const checked = (await this._input()).getProperty('checked');
return coerceBooleanProperty(await checked);
}

Expand All @@ -197,7 +197,7 @@ export class MatRadioButtonHarness extends ComponentHarness {

/** Gets a promise for the radio-button's id. */
async getId(): Promise<string|null> {
return (await this.host()).getAttribute('id');
return (await this.host()).getProperty('id');
}

/**
Expand All @@ -208,7 +208,7 @@ export class MatRadioButtonHarness extends ComponentHarness {
* intentionally have the `[object Object]` as return value.
*/
async getValue(): Promise<string|null> {
return (await this._input()).getAttribute('value');
return (await this._input()).getProperty('value');
}

/** Gets a promise for the radio-button's label text. */
Expand Down
2 changes: 1 addition & 1 deletion src/material-experimental/mdc-slide-toggle/harness/mdc-slide-toggle-harness.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export class MatSlideToggleHarness extends ComponentHarness {

/** Gets a boolean promise indicating if the slide-toggle is checked. */
async isChecked(): Promise<boolean> {
const checked = (await this._input()).getAttribute('checked');
const checked = (await this._input()).getProperty('checked');
return coerceBooleanProperty(await checked);
}

Expand Down
2 changes: 1 addition & 1 deletion src/material-experimental/mdc-slide-toggle/harness/slide-toggle-harness.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export class MatSlideToggleHarness extends ComponentHarness {

/** Gets a boolean promise indicating if the slide-toggle is checked. */
async isChecked(): Promise<boolean> {
const checked = (await this._input()).getAttribute('checked');
const checked = (await this._input()).getProperty('checked');
return coerceBooleanProperty(await checked);
}

Expand Down