From 2df39ee3380d56a645394622655ba9e6a824f106 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Fri, 25 Sep 2020 18:17:26 +0300 Subject: [PATCH] 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 --- .../e2e/src/app.e2e-spec.ts | 151 +++++++++--------- 1 file changed, 76 insertions(+), 75 deletions(-) diff --git a/aio/content/examples/component-interaction/e2e/src/app.e2e-spec.ts b/aio/content/examples/component-interaction/e2e/src/app.e2e-spec.ts index 692d67c27c..ea6a998285 100644 --- a/aio/content/examples/component-interaction/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/component-interaction/e2e/src/app.e2e-spec.ts @@ -1,8 +1,8 @@ -import { browser, element, by } from 'protractor'; +import { browser, by, element } from 'protractor'; describe('Component Communication Cookbook Tests', () => { - beforeAll(() => browser.get(browser.baseUrl)); + beforeEach(() => browser.get(browser.baseUrl)); describe('Parent-to-child communication', () => { // #docregion parent-to-child @@ -11,7 +11,7 @@ describe('Component Communication Cookbook Tests', () => { const masterName = 'Master'; 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')); for (let i = 0; i < heroNames.length; i++) { @@ -31,7 +31,7 @@ describe('Component Communication Cookbook Tests', () => { it('should display trimmed, non-empty names', () => { const nonEmptyNameIndex = 0; 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 displayName = hero.element(by.tagName('h3')).getText(); @@ -41,7 +41,7 @@ describe('Component Communication Cookbook Tests', () => { it('should replace empty name with default name', () => { const emptyNameIndex = 1; const defaultName = '""'; - 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 displayName = hero.element(by.tagName('h3')).getText(); @@ -66,38 +66,36 @@ describe('Component Communication Cookbook Tests', () => { 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 newMinorButton = repoTag.all(by.tagName('button')).get(0); - newMinorButton.click().then(() => { - newMinorButton.click().then(() => { - const actual = getActual(); + await newMinorButton.click(); + await newMinorButton.click(); - const labelAfter2Minor = 'Version 1.25'; - const logAfter2Minor = 'minor changed from 24 to 25'; + const actual = getActual(); - expect(actual.label).toBe(labelAfter2Minor); - expect(actual.count).toBe(3); - expect(actual.logs.get(2).getText()).toBe(logAfter2Minor); - }); - }); + const labelAfter2Minor = 'Version 1.25'; + const logAfter2Minor = 'minor changed from 24 to 25'; + + expect(actual.label).toBe(labelAfter2Minor); + expect(actual.count).toBe(3); + 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 newMajorButton = repoTag.all(by.tagName('button')).get(1); - newMajorButton.click().then(() => { - const actual = getActual(); + await newMajorButton.click(); + const actual = getActual(); - const labelAfterMajor = 'Version 2.0'; - const logAfterMajor = 'major changed from 1 to 2, minor changed from 25 to 0'; + const labelAfterMajor = 'Version 2.0'; + const logAfterMajor = 'major changed from 1 to 2, minor changed from 23 to 0'; - expect(actual.label).toBe(labelAfterMajor); - expect(actual.count).toBe(4); - expect(actual.logs.get(3).getText()).toBe(logAfterMajor); - }); + expect(actual.label).toBe(labelAfterMajor); + expect(actual.count).toBe(2); + expect(actual.logs.get(1).getText()).toBe(logAfterMajor); }); function getActual() { @@ -114,36 +112,34 @@ describe('Component Communication Cookbook Tests', () => { } // ... // #enddocregion parent-to-child-onchanges - }); describe('Child-to-parent communication', () => { // #docregion child-to-parent // ... it('should not emit the event initially', () => { - const voteLabel = element(by.tagName('app-vote-taker')) - .element(by.tagName('h3')).getText(); - expect(voteLabel).toBe('Agree: 0, Disagree: 0'); + const voteLabel = element(by.tagName('app-vote-taker')).element(by.tagName('h3')); + expect(voteLabel.getText()).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) .all(by.tagName('button')).get(0); - agreeButton1.click().then(() => { - const voteLabel = element(by.tagName('app-vote-taker')) - .element(by.tagName('h3')).getText(); - expect(voteLabel).toBe('Agree: 1, Disagree: 0'); - }); + + await agreeButton1.click(); + + 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) .all(by.tagName('button')).get(1); - agreeButton1.click().then(() => { - const voteLabel = element(by.tagName('app-vote-taker')) - .element(by.tagName('h3')).getText(); - expect(voteLabel).toBe('Agree: 1, Disagree: 1'); - }); + + await agreeButton1.click(); + + expect(voteLabel.getText()).toBe('Agree: 0, Disagree: 1'); }); // ... // #enddocregion child-to-parent @@ -162,66 +158,71 @@ describe('Component Communication Cookbook Tests', () => { function countDownTimerTests(parentTag: string) { // #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 startButton = parent.element(by.tagName('button')).get(0); - const message = parent.element(by.tagName('app-countdown-timer')).getText(); + const startButton = parent.element(by.buttonText('Start')); + const seconds = parent.element(by.className('seconds')); + const timer = parent.element(by.tagName('app-countdown-timer')); - startButton.click().then(() => { - browser.sleep(10); // give `seconds` a chance to catchup with `message` - const seconds = parent.element(by.className('seconds')).getText(); - expect(message).toContain(seconds); - }); + await startButton.click(); + await browser.sleep(10); // give `seconds` a chance to catchup with `timer` + + 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 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(() => { - const message = parent.element(by.tagName('app-countdown-timer')).getText(); - expect(message).toContain('Holding'); - }); + await startButton.click(); + expect(await timer.getText()).not.toContain('Holding'); + + await stopButton.click(); + expect(await timer.getText()).toContain('Holding'); }); // ... // #enddocregion countdown-timer-tests } - describe('Parent and children communicate via a service', () => { // #docregion bidirectional-service // ... - it('should announce a mission', () => { + it('should announce a mission', async () => { const missionControl = element(by.tagName('app-mission-control')); const announceButton = missionControl.all(by.tagName('button')).get(0); - announceButton.click().then(() => { - const history = missionControl.all(by.tagName('li')); - expect(history.count()).toBe(1); - expect(history.get(0).getText()).toMatch(/Mission.* announced/); - }); + const history = missionControl.all(by.tagName('li')); + + await announceButton.click(); + + expect(history.count()).toBe(1); + expect(history.get(0).getText()).toMatch(/Mission.* announced/); }); - it('should confirm the mission by Lovell', () => { - testConfirmMission(1, 2, 'Lovell'); + it('should confirm the mission by Lovell', async () => { + await testConfirmMission(1, 'Lovell'); }); - it('should confirm the mission by Haise', () => { - testConfirmMission(3, 3, 'Haise'); + it('should confirm the mission by Haise', async () => { + await testConfirmMission(3, 'Haise'); }); - it('should confirm the mission by Swigert', () => { - testConfirmMission(2, 4, 'Swigert'); + it('should confirm the mission by Swigert', async () => { + await testConfirmMission(2, 'Swigert'); }); - function testConfirmMission(buttonIndex: number, expectedLogCount: number, astronaut: string) { - const confirmedLog = ' confirmed the mission'; + async function testConfirmMission(buttonIndex: number, astronaut: string) { 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); - confirmButton.click().then(() => { - const history = missionControl.all(by.tagName('li')); - expect(history.count()).toBe(expectedLogCount); - expect(history.get(expectedLogCount - 1).getText()).toBe(astronaut + confirmedLog); - }); + const history = missionControl.all(by.tagName('li')); + + await announceButton.click(); + await confirmButton.click(); + + expect(history.count()).toBe(2); + expect(history.get(1).getText()).toBe(`${astronaut} confirmed the mission`); } // ... // #enddocregion bidirectional-service