iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(docs-infra): minor refactoring of the `component-interaction` e2e tests (#39001) 

This commit refactors the e2e tests of the `component-interaction` docs
example to improve readability and make them easier to maintain.

Changes include:
- Switch from `element.all().get(0)` to `element()` when there is only
  one such element on the page.
- Switch from `Promise#then()` to `async/await`.
- Move `ElementFinder`s at the top of the test (instead of having them
  interleaved with expectations).
- Load the page before every test (i.e. in a `beforeEach()` instead of
  `beforeAll()`) to prevent state from each test leaking into the
  subsequent tests.
- Order imports alphabetically.

PR Close #39001
This commit is contained in:
George Kalpakas 2020-09-25 18:17:26 +03:00 committed by Alex Rickabaugh
parent 2b6b9c95f9
commit 2df39ee338
1 changed files with 76 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
aio/content/examples/component-interaction/e2e/src/app.e2e-spec.ts
View File

@ -1,8 +1,8 @@
import { browser, element, by } from 'protractor'; import { browser, by, element } from 'protractor';
describe('Component Communication Cookbook Tests', () => { describe('Component Communication Cookbook Tests', () => {
beforeAll(() => browser.get(browser.baseUrl)); beforeEach(() => browser.get(browser.baseUrl));
describe('Parent-to-child communication', () => { describe('Parent-to-child communication', () => {
// #docregion parent-to-child // #docregion parent-to-child
@ -11,7 +11,7 @@ describe('Component Communication Cookbook Tests', () => {
const masterName = 'Master'; const masterName = 'Master';
it('should pass properties to children properly', () => { it('should pass properties to children properly', () => {
const parent = element.all(by.tagName('app-hero-parent')).get(0); const parent = element(by.tagName('app-hero-parent'));
const heroes = parent.all(by.tagName('app-hero-child')); const heroes = parent.all(by.tagName('app-hero-child'));
for (let i = 0; i < heroNames.length; i++) { for (let i = 0; i < heroNames.length; i++) {
@ -31,7 +31,7 @@ describe('Component Communication Cookbook Tests', () => {
it('should display trimmed, non-empty names', () => { it('should display trimmed, non-empty names', () => {
const nonEmptyNameIndex = 0; const nonEmptyNameIndex = 0;
const nonEmptyName = '"Dr IQ"'; const nonEmptyName = '"Dr IQ"';
const parent = element.all(by.tagName('app-name-parent')).get(0); const parent = element(by.tagName('app-name-parent'));
const hero = parent.all(by.tagName('app-name-child')).get(nonEmptyNameIndex); const hero = parent.all(by.tagName('app-name-child')).get(nonEmptyNameIndex);
const displayName = hero.element(by.tagName('h3')).getText(); const displayName = hero.element(by.tagName('h3')).getText();
@ -41,7 +41,7 @@ describe('Component Communication Cookbook Tests', () => {
it('should replace empty name with default name', () => { it('should replace empty name with default name', () => {
const emptyNameIndex = 1; const emptyNameIndex = 1;
const defaultName = '"<no name set>"'; const defaultName = '"<no name set>"';
const parent = element.all(by.tagName('app-name-parent')).get(0); const parent = element(by.tagName('app-name-parent'));
const hero = parent.all(by.tagName('app-name-child')).get(emptyNameIndex); const hero = parent.all(by.tagName('app-name-child')).get(emptyNameIndex);
const displayName = hero.element(by.tagName('h3')).getText(); const displayName = hero.element(by.tagName('h3')).getText();
@ -66,12 +66,13 @@ describe('Component Communication Cookbook Tests', () => {
expect(actual.logs.get(0).getText()).toBe(initialLog); expect(actual.logs.get(0).getText()).toBe(initialLog);
}); });
it('should set expected values after clicking \'Minor\' twice', () => { it('should set expected values after clicking \'Minor\' twice', async () => {
const repoTag = element(by.tagName('app-version-parent')); const repoTag = element(by.tagName('app-version-parent'));
const newMinorButton = repoTag.all(by.tagName('button')).get(0); const newMinorButton = repoTag.all(by.tagName('button')).get(0);
newMinorButton.click().then(() => { await newMinorButton.click();
newMinorButton.click().then(() => { await newMinorButton.click();
const actual = getActual(); const actual = getActual();
const labelAfter2Minor = 'Version 1.25'; const labelAfter2Minor = 'Version 1.25';
@ -81,23 +82,20 @@ describe('Component Communication Cookbook Tests', () => {
expect(actual.count).toBe(3); expect(actual.count).toBe(3);
expect(actual.logs.get(2).getText()).toBe(logAfter2Minor); expect(actual.logs.get(2).getText()).toBe(logAfter2Minor);
}); });
});
});
it('should set expected values after clicking \'Major\' once', () => { it('should set expected values after clicking \'Major\' once', async () => {
const repoTag = element(by.tagName('app-version-parent')); const repoTag = element(by.tagName('app-version-parent'));
const newMajorButton = repoTag.all(by.tagName('button')).get(1); const newMajorButton = repoTag.all(by.tagName('button')).get(1);
newMajorButton.click().then(() => { await newMajorButton.click();
const actual = getActual(); const actual = getActual();
const labelAfterMajor = 'Version 2.0'; const labelAfterMajor = 'Version 2.0';
const logAfterMajor = 'major changed from 1 to 2, minor changed from 25 to 0'; const logAfterMajor = 'major changed from 1 to 2, minor changed from 23 to 0';
expect(actual.label).toBe(labelAfterMajor); expect(actual.label).toBe(labelAfterMajor);
expect(actual.count).toBe(4); expect(actual.count).toBe(2);
expect(actual.logs.get(3).getText()).toBe(logAfterMajor); expect(actual.logs.get(1).getText()).toBe(logAfterMajor);
});
}); });
function getActual() { function getActual() {
@ -114,36 +112,34 @@ describe('Component Communication Cookbook Tests', () => {
} }
// ... // ...
// #enddocregion parent-to-child-onchanges // #enddocregion parent-to-child-onchanges
}); });
describe('Child-to-parent communication', () => { describe('Child-to-parent communication', () => {
// #docregion child-to-parent // #docregion child-to-parent
// ... // ...
it('should not emit the event initially', () => { it('should not emit the event initially', () => {
const voteLabel = element(by.tagName('app-vote-taker')) const voteLabel = element(by.tagName('app-vote-taker')).element(by.tagName('h3'));
.element(by.tagName('h3')).getText(); expect(voteLabel.getText()).toBe('Agree: 0, Disagree: 0');
expect(voteLabel).toBe('Agree: 0, Disagree: 0');
}); });
it('should process Agree vote', () => { it('should process Agree vote', async () => {
const voteLabel = element(by.tagName('app-vote-taker')).element(by.tagName('h3'));
const agreeButton1 = element.all(by.tagName('app-voter')).get(0) const agreeButton1 = element.all(by.tagName('app-voter')).get(0)
.all(by.tagName('button')).get(0); .all(by.tagName('button')).get(0);
agreeButton1.click().then(() => {
const voteLabel = element(by.tagName('app-vote-taker')) await agreeButton1.click();
.element(by.tagName('h3')).getText();
expect(voteLabel).toBe('Agree: 1, Disagree: 0'); expect(voteLabel.getText()).toBe('Agree: 1, Disagree: 0');
});
}); });
it('should process Disagree vote', () => { it('should process Disagree vote', async () => {
const voteLabel = element(by.tagName('app-vote-taker')).element(by.tagName('h3'));
const agreeButton1 = element.all(by.tagName('app-voter')).get(1) const agreeButton1 = element.all(by.tagName('app-voter')).get(1)
.all(by.tagName('button')).get(1); .all(by.tagName('button')).get(1);
agreeButton1.click().then(() => {
const voteLabel = element(by.tagName('app-vote-taker')) await agreeButton1.click();
.element(by.tagName('h3')).getText();
expect(voteLabel).toBe('Agree: 1, Disagree: 1'); expect(voteLabel.getText()).toBe('Agree: 0, Disagree: 1');
});
}); });
// ... // ...
// #enddocregion child-to-parent // #enddocregion child-to-parent
@ -162,66 +158,71 @@ describe('Component Communication Cookbook Tests', () => {
function countDownTimerTests(parentTag: string) { function countDownTimerTests(parentTag: string) {
// #docregion countdown-timer-tests // #docregion countdown-timer-tests
// ... // ...
it('timer and parent seconds should match', () => { it('timer and parent seconds should match', async () => {
const parent = element(by.tagName(parentTag)); const parent = element(by.tagName(parentTag));
const startButton = parent.element(by.tagName('button')).get(0); const startButton = parent.element(by.buttonText('Start'));
const message = parent.element(by.tagName('app-countdown-timer')).getText(); const seconds = parent.element(by.className('seconds'));
const timer = parent.element(by.tagName('app-countdown-timer'));
startButton.click().then(() => { await startButton.click();
browser.sleep(10); // give `seconds` a chance to catchup with `message` await browser.sleep(10); // give `seconds` a chance to catchup with `timer`
const seconds = parent.element(by.className('seconds')).getText();
expect(message).toContain(seconds); expect(await timer.getText()).toContain(await seconds.getText());
});
}); });
it('should stop the countdown', () => { it('should stop the countdown', async () => {
const parent = element(by.tagName(parentTag)); const parent = element(by.tagName(parentTag));
const stopButton = parent.all(by.tagName('button')).get(1); const startButton = parent.element(by.buttonText('Start'));
const stopButton = parent.element(by.buttonText('Stop'));
const timer = parent.element(by.tagName('app-countdown-timer'));
stopButton.click().then(() => { await startButton.click();
const message = parent.element(by.tagName('app-countdown-timer')).getText(); expect(await timer.getText()).not.toContain('Holding');
expect(message).toContain('Holding');
}); await stopButton.click();
expect(await timer.getText()).toContain('Holding');
}); });
// ... // ...
// #enddocregion countdown-timer-tests // #enddocregion countdown-timer-tests
} }
describe('Parent and children communicate via a service', () => { describe('Parent and children communicate via a service', () => {
// #docregion bidirectional-service // #docregion bidirectional-service
// ... // ...
it('should announce a mission', () => { it('should announce a mission', async () => {
const missionControl = element(by.tagName('app-mission-control')); const missionControl = element(by.tagName('app-mission-control'));
const announceButton = missionControl.all(by.tagName('button')).get(0); const announceButton = missionControl.all(by.tagName('button')).get(0);
announceButton.click().then(() => {
const history = missionControl.all(by.tagName('li')); const history = missionControl.all(by.tagName('li'));
await announceButton.click();
expect(history.count()).toBe(1); expect(history.count()).toBe(1);
expect(history.get(0).getText()).toMatch(/Mission.* announced/); expect(history.get(0).getText()).toMatch(/Mission.* announced/);
}); });
it('should confirm the mission by Lovell', async () => {
await testConfirmMission(1, 'Lovell');
}); });
it('should confirm the mission by Lovell', () => { it('should confirm the mission by Haise', async () => {
testConfirmMission(1, 2, 'Lovell'); await testConfirmMission(3, 'Haise');
}); });
it('should confirm the mission by Haise', () => { it('should confirm the mission by Swigert', async () => {
testConfirmMission(3, 3, 'Haise'); await testConfirmMission(2, 'Swigert');
}); });
it('should confirm the mission by Swigert', () => { async function testConfirmMission(buttonIndex: number, astronaut: string) {
testConfirmMission(2, 4, 'Swigert');
});
function testConfirmMission(buttonIndex: number, expectedLogCount: number, astronaut: string) {
const confirmedLog = ' confirmed the mission';
const missionControl = element(by.tagName('app-mission-control')); const missionControl = element(by.tagName('app-mission-control'));
const announceButton = missionControl.all(by.tagName('button')).get(0);
const confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex); const confirmButton = missionControl.all(by.tagName('button')).get(buttonIndex);
confirmButton.click().then(() => {
const history = missionControl.all(by.tagName('li')); const history = missionControl.all(by.tagName('li'));
expect(history.count()).toBe(expectedLogCount);
expect(history.get(expectedLogCount - 1).getText()).toBe(astronaut + confirmedLog); await announceButton.click();
}); await confirmButton.click();
expect(history.count()).toBe(2);
expect(history.get(1).getText()).toBe(`${astronaut} confirmed the mission`);
} }
// ... // ...
// #enddocregion bidirectional-service // #enddocregion bidirectional-service