diff --git a/aio/content/examples/accessibility/e2e/src/app.e2e-spec.ts b/aio/content/examples/accessibility/e2e/src/app.e2e-spec.ts index 7da554198d197..9f95e2f9f25eb 100644 --- a/aio/content/examples/accessibility/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/accessibility/e2e/src/app.e2e-spec.ts @@ -2,18 +2,16 @@ import { browser, element, by } from 'protractor'; describe('Accessibility example e2e tests', () => { - beforeEach(() => { - browser.get(''); - }); + beforeEach(() => browser.get('')); - it('should display Accessibility Example', () => { - expect(element(by.css('h1')).getText()).toEqual('Accessibility Example'); + it('should display Accessibility Example', async () => { + expect(await element(by.css('h1')).getText()).toEqual('Accessibility Example'); }); - it('should take a number and change progressbar width', () => { - element(by.css('input')).sendKeys('16'); - expect(element(by.css('input')).getAttribute('value')).toEqual('16'); - expect(element(by.css('app-example-progressbar div')).getCssValue('width')).toBe('48px'); + it('should take a number and change progressbar width', async () => { + await element(by.css('input')).sendKeys('16'); + expect(await element(by.css('input')).getAttribute('value')).toEqual('16'); + expect(await element(by.css('app-example-progressbar div')).getCssValue('width')).toBe('48px'); }); }); diff --git a/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts b/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts index cc4c47c127b17..7a8e7e62181ff 100644 --- a/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts @@ -2,15 +2,13 @@ import { browser, element, by } from 'protractor'; describe('AngularJS to Angular Quick Reference Tests', () => { - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); - it('should display no poster images after bootstrap', () => { - testImagesAreDisplayed(false); + it('should display no poster images after bootstrap', async () => { + await testImagesAreDisplayed(false); }); - it('should display proper movie data', () => { + it('should display proper movie data', async () => { // We check only a few samples const expectedSamples: any[] = [ {row: 0, column: 0, element: 'img', attr: 'src', value: 'images/hero.png', contains: true}, @@ -34,8 +32,8 @@ describe('AngularJS to Angular Quick Reference Tests', () => { // Check element attribute or text const valueToCheck = sample.attr - ? elementToCheck.getAttribute(sample.attr) - : elementToCheck.getText(); + ? await elementToCheck.getAttribute(sample.attr) + : await elementToCheck.getText(); // Test for equals/contains/match if (sample.contains) { @@ -48,65 +46,64 @@ describe('AngularJS to Angular Quick Reference Tests', () => { } }); - it('should display images after Show Poster', () => { - testPosterButtonClick('Show Poster', true); + it('should display images after Show Poster', async () => { + await testPosterButtonClick('Show Poster', true); }); - it('should hide images after Hide Poster', () => { - testPosterButtonClick('Hide Poster', false); + it('should hide images after Hide Poster', async () => { + await testPosterButtonClick('Hide Poster', false); }); - it('should display no movie when no favorite hero is specified', () => { - testFavoriteHero(null, 'Please enter your favorite hero.'); + it('should display no movie when no favorite hero is specified', async () => { + await testFavoriteHero(null, 'Please enter your favorite hero.'); }); - it('should display no movie for Magneta', () => { - testFavoriteHero('Magneta', 'No movie, sorry!'); + it('should display no movie for Magneta', async () => { + await testFavoriteHero('Magneta', 'No movie, sorry!'); }); - it('should display a movie for Dr Nice', () => { - testFavoriteHero('Dr Nice', 'Excellent choice!'); + it('should display a movie for Dr Nice', async () => { + await testFavoriteHero('Dr Nice', 'Excellent choice!'); }); - function testImagesAreDisplayed(isDisplayed: boolean) { + async function testImagesAreDisplayed(isDisplayed: boolean) { const expectedMovieCount = 3; const movieRows = getMovieRows(); - expect(movieRows.count()).toBe(expectedMovieCount); + expect(await movieRows.count()).toBe(expectedMovieCount); for (let i = 0; i < expectedMovieCount; i++) { const movieImage = movieRows.get(i).element(by.css('td > img')); - expect(movieImage.isDisplayed()).toBe(isDisplayed); + expect(await movieImage.isDisplayed()).toBe(isDisplayed); } } - function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) { + async function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) { const posterButton = element(by.css('app-movie-list tr > th > button')); - expect(posterButton.getText()).toBe(expectedButtonText); + expect(await posterButton.getText()).toBe(expectedButtonText); - posterButton.click().then(() => { - testImagesAreDisplayed(isDisplayed); - }); + await posterButton.click(); + await testImagesAreDisplayed(isDisplayed); } function getMovieRows() { return element.all(by.css('app-movie-list tbody > tr')); } - function testFavoriteHero(heroName: string, expectedLabel: string) { + async function testFavoriteHero(heroName: string, expectedLabel: string) { const movieListComp = element(by.tagName('app-movie-list')); const heroInput = movieListComp.element(by.tagName('input')); const favoriteHeroLabel = movieListComp.element(by.tagName('h3')); const resultLabel = movieListComp.element(by.css('span > p')); - heroInput.clear().then(() => { - heroInput.sendKeys(heroName || ''); - expect(resultLabel.getText()).toBe(expectedLabel); - if (heroName) { - expect(favoriteHeroLabel.isDisplayed()).toBe(true); - expect(favoriteHeroLabel.getText()).toContain(heroName); - } else { - expect(favoriteHeroLabel.isDisplayed()).toBe(false); - } - }); + await heroInput.clear(); + await heroInput.sendKeys(heroName || ''); + + expect(await resultLabel.getText()).toBe(expectedLabel); + if (heroName) { + expect(await favoriteHeroLabel.isDisplayed()).toBe(true); + expect(await favoriteHeroLabel.getText()).toContain(heroName); + } else { + expect(await favoriteHeroLabel.isDisplayed()).toBe(false); + } } }); diff --git a/aio/content/examples/animations/e2e/src/app.e2e-spec.ts b/aio/content/examples/animations/e2e/src/app.e2e-spec.ts index 504b7ad6341df..f19b62f7ee2cb 100644 --- a/aio/content/examples/animations/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/animations/e2e/src/app.e2e-spec.ts @@ -1,4 +1,4 @@ -import { browser, ExpectedConditions as EC } from 'protractor'; +import { browser } from 'protractor'; import { logging } from 'selenium-webdriver'; import * as openClose from './open-close.po'; import * as statusSlider from './status-slider.po'; @@ -18,9 +18,7 @@ describe('Animation Tests', () => { const filterHref = getLinkById('heroes'); const heroGroupsHref = getLinkById('hero-groups'); - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); describe('Open/Close Component', () => { const closedHeight = '100px'; @@ -28,7 +26,7 @@ describe('Animation Tests', () => { beforeAll(async () => { await openCloseHref.click(); - sleepFor(); + await sleepFor(); }); it('should be open', async () => { @@ -84,7 +82,7 @@ describe('Animation Tests', () => { beforeAll(async () => { await statusSliderHref.click(); - sleepFor(2000); + await sleepFor(2000); }); it('should be inactive with a blue background', async () => { @@ -125,7 +123,7 @@ describe('Animation Tests', () => { describe('Toggle Animations Component', () => { beforeAll(async () => { await toggleHref.click(); - sleepFor(); + await sleepFor(); }); it('should disabled animations on the child element', async () => { @@ -143,7 +141,7 @@ describe('Animation Tests', () => { describe('Enter/Leave Component', () => { beforeAll(async () => { await enterLeaveHref.click(); - sleepFor(100); + await sleepFor(100); }); it('should attach a flyInOut trigger to the list of items', async () => { @@ -169,7 +167,7 @@ describe('Animation Tests', () => { describe('Auto Calculation Component', () => { beforeAll(async () => { await autoHref.click(); - sleepFor(0); + await sleepFor(0); }); it('should attach a shrinkOut trigger to the list of items', async () => { @@ -193,7 +191,7 @@ describe('Animation Tests', () => { describe('Filter/Stagger Component', () => { beforeAll(async () => { await filterHref.click(); - sleepFor(); + await sleepFor(); }); it('should attach a filterAnimations trigger to the list container', async () => { @@ -220,7 +218,7 @@ describe('Animation Tests', () => { describe('Hero Groups Component', () => { beforeAll(async () => { await heroGroupsHref.click(); - sleepFor(300); + await sleepFor(300); }); it('should attach a flyInOut trigger to the list of items', async () => { @@ -245,5 +243,3 @@ describe('Animation Tests', () => { }); }); }); - - diff --git a/aio/content/examples/architecture/e2e/src/app.e2e-spec.ts b/aio/content/examples/architecture/e2e/src/app.e2e-spec.ts index df32e14effcb1..4be469461f927 100644 --- a/aio/content/examples/architecture/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/architecture/e2e/src/app.e2e-spec.ts @@ -14,12 +14,12 @@ describe('Architecture', () => { beforeAll(() => browser.get('')); - it(`has title '${expectedTitle}'`, () => { - expect(browser.getTitle()).toEqual(expectedTitle); + it(`has title '${expectedTitle}'`, async () => { + expect(await browser.getTitle()).toEqual(expectedTitle); }); - it(`has h2 '${expectedH2}'`, () => { - const h2 = element.all(by.css('h2')).map((elt: any) => elt.getText()); + it(`has h2 '${expectedH2}'`, async () => { + const h2 = await element.all(by.css('h2')).map((elt: any) => elt.getText()); expect(h2).toEqual(expectedH2); }); @@ -31,14 +31,14 @@ function heroTests() { const targetHero: Hero = { id: 2, name: 'Dr Nice' }; - it('has the right number of heroes', () => { + it('has the right number of heroes', async () => { const page = getPageElts(); - expect(page.heroes.count()).toEqual(3); + expect(await page.heroes.count()).toEqual(3); }); - it('has no hero details initially', () => { + it('has no hero details initially', async () => { const page = getPageElts(); - expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail'); + expect(await page.heroDetail.isPresent()).toBeFalsy('no hero detail'); }); it('shows selected hero details', async () => { @@ -51,7 +51,7 @@ function heroTests() { it(`shows updated hero name in details`, async () => { const input = element.all(by.css('input')).first(); - input.sendKeys(nameSuffix); + await input.sendKeys(nameSuffix); const page = getPageElts(); const hero = await heroFromDetail(page.heroDetail); const newName = targetHero.name + nameSuffix; @@ -61,15 +61,15 @@ function heroTests() { } function salesTaxTests() { - it('has no sales tax initially', () => { + it('has no sales tax initially', async () => { const page = getPageElts(); - expect(page.salesTaxDetail.isPresent()).toBeFalsy('no sales tax info'); + expect(await page.salesTaxDetail.isPresent()).toBeFalsy('no sales tax info'); }); it('shows sales tax', async () => { const page = getPageElts(); - page.salesTaxAmountInput.sendKeys('10', protractor.Key.ENTER); - expect(page.salesTaxDetail.getText()).toEqual('The sales tax is $1.00'); + await page.salesTaxAmountInput.sendKeys('10', protractor.Key.ENTER); + expect(await page.salesTaxDetail.getText()).toEqual('The sales tax is $1.00'); }); } diff --git a/aio/content/examples/attribute-binding/e2e/src/app.e2e-spec.ts b/aio/content/examples/attribute-binding/e2e/src/app.e2e-spec.ts index 5248ab5f5d03f..cf08ae5bbabbe 100644 --- a/aio/content/examples/attribute-binding/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/attribute-binding/e2e/src/app.e2e-spec.ts @@ -2,33 +2,34 @@ import { browser, element, by } from 'protractor'; describe('Attribute binding example', () => { - beforeEach(() => { - browser.get(''); - }); + beforeEach(() => browser.get('')); - it('should display Property Binding with Angular', () => { - expect(element(by.css('h1')).getText()).toEqual('Attribute, class, and style bindings'); + it('should display Property Binding with Angular', async () => { + expect(await element(by.css('h1')).getText()).toEqual('Attribute, class, and style bindings'); }); - it('should display a table', () => { - expect(element.all(by.css('table')).isPresent()).toBe(true); + it('should display a table', async () => { + expect(await element.all(by.css('table')).isPresent()).toBe(true); }); - it('should display an Aria button', () => { - expect(element.all(by.css('button')).get(0).getText()).toBe('Go for it with Aria'); + it('should display an Aria button', async () => { + expect(await element.all(by.css('button')).get(0).getText()).toBe('Go for it with Aria'); }); - it('should display a blue background on div', () => { - expect(element.all(by.css('div')).get(1).getCssValue('background-color')).toEqual('rgba(25, 118, 210, 1)'); + it('should display a blue background on div', async () => { + const div = element.all(by.css('div')).get(1); + expect(await div.getCssValue('background-color')).toEqual('rgba(25, 118, 210, 1)'); }); - it('should display a blue div with a red border', () => { - expect(element.all(by.css('div')).get(1).getCssValue('border')).toEqual('2px solid rgb(212, 30, 46)'); + it('should display a blue div with a red border', async () => { + const div = element.all(by.css('div')).get(1); + expect(await div.getCssValue('border')).toEqual('2px solid rgb(212, 30, 46)'); }); - it('should display a div with many classes', () => { - expect(element.all(by.css('div')).get(1).getAttribute('class')).toContain('special'); - expect(element.all(by.css('div')).get(1).getAttribute('class')).toContain('clearance'); + it('should display a div with many classes', async () => { + const div = element.all(by.css('div')).get(1); + expect(await div.getAttribute('class')).toContain('special'); + expect(await div.getAttribute('class')).toContain('clearance'); }); }); diff --git a/aio/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts b/aio/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts index bb03f8c912021..771543102c929 100644 --- a/aio/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts @@ -4,27 +4,25 @@ describe('Attribute directives', () => { const title = 'My First Attribute Directive'; - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); - it(`should display correct title: ${title}`, () => { - expect(element(by.css('h1')).getText()).toEqual(title); + it(`should display correct title: ${title}`, async () => { + expect(await element(by.css('h1')).getText()).toEqual(title); }); - it('should be able to select green highlight', () => { + it('should be able to select green highlight', async () => { const highlightedEle = element(by.cssContainingText('p', 'Highlight me!')); const lightGreen = 'rgba(144, 238, 144, 1)'; const getBgColor = () => highlightedEle.getCssValue('background-color'); - expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen); + expect(await highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen); const greenRb = element.all(by.css('input')).get(0); - greenRb.click(); - browser.actions().mouseMove(highlightedEle).perform(); + await greenRb.click(); + await browser.actions().mouseMove(highlightedEle).perform(); // Wait for up to 4s for the background color to be updated, // to account for slow environments (e.g. CI). - browser.wait(() => highlightedEle.getCssValue('background-color').then(c => c === lightGreen), 4000); + await browser.wait(async () => await getBgColor() === lightGreen, 4000); }); }); diff --git a/aio/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts b/aio/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts index 81d4cbf075ae1..ca8c6bc1f58eb 100644 --- a/aio/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts @@ -7,31 +7,31 @@ describe('Binding syntax e2e tests', () => { // helper function used to test what's logged to the console - async function logChecker(button, contents) { + async function logChecker(contents) { const logs = await browser.manage().logs().get(logging.Type.BROWSER); const messages = logs.filter(({ message }) => message.indexOf(contents) !== -1 ? true : false); expect(messages.length).toBeGreaterThan(0); } - it('should display Binding syntax', () => { - expect(element(by.css('h1')).getText()).toEqual('Binding syntax'); + it('should display Binding syntax', async () => { + expect(await element(by.css('h1')).getText()).toEqual('Binding syntax'); }); - it('should display Save button', () => { - expect(element.all(by.css('button')).get(0).getText()).toBe('Save'); + it('should display Save button', async () => { + expect(await element.all(by.css('button')).get(0).getText()).toBe('Save'); }); - it('should display HTML attributes and DOM properties', () => { - expect(element.all(by.css('h2')).get(1).getText()).toBe('HTML attributes and DOM properties'); + it('should display HTML attributes and DOM properties', async () => { + expect(await element.all(by.css('h2')).get(1).getText()).toBe('HTML attributes and DOM properties'); }); - it('should display 1. Use the inspector...', () => { - expect(element.all(by.css('p')).get(0).getText()).toContain('1. Use the inspector'); + it('should display 1. Use the inspector...', async () => { + expect(await element.all(by.css('p')).get(0).getText()).toContain('1. Use the inspector'); }); - it('should display Disabled property vs. attribute', () => { - expect(element.all(by.css('h3')).get(0).getText()).toBe('Disabled property vs. attribute'); + it('should display Disabled property vs. attribute', async () => { + expect(await element.all(by.css('h3')).get(0).getText()).toBe('Disabled property vs. attribute'); }); @@ -39,36 +39,36 @@ describe('Binding syntax e2e tests', () => { const attributeButton = element.all(by.css('button')).get(1); await attributeButton.click(); const contents = 'Sarah'; - logChecker(attributeButton, contents); + await logChecker(contents); }); it('should log a message including Sarah for DOM property', async () => { const DOMPropertyButton = element.all(by.css('button')).get(2); await DOMPropertyButton.click(); const contents = 'Sarah'; - logChecker(DOMPropertyButton, contents); + await logChecker(contents); }); it('should log a message including Sally for DOM property', async () => { const DOMPropertyButton = element.all(by.css('button')).get(2); const input = element(by.css('input')); - input.sendKeys('Sally'); + await input.sendKeys('Sally'); await DOMPropertyButton.click(); const contents = 'Sally'; - logChecker(DOMPropertyButton, contents); + await logChecker(contents); }); it('should log a message that Test Button works', async () => { const testButton = element.all(by.css('button')).get(3); await testButton.click(); const contents = 'Test'; - logChecker(testButton, contents); + await logChecker(contents); }); it('should toggle Test Button disabled', async () => { const toggleButton = element.all(by.css('button')).get(4); await toggleButton.click(); const contents = 'true'; - logChecker(toggleButton, contents); + await logChecker(contents); }); }); diff --git a/aio/content/examples/bootstrapping/e2e/src/app.e2e-spec.ts b/aio/content/examples/bootstrapping/e2e/src/app.e2e-spec.ts index 676d41469ca04..78e8b1ee46b6f 100644 --- a/aio/content/examples/bootstrapping/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/bootstrapping/e2e/src/app.e2e-spec.ts @@ -7,8 +7,8 @@ describe('feature-modules App', () => { page = new AppPage(); }); - it('should display message saying app works', () => { - page.navigateTo(); - expect(page.getTitleText()).toEqual('app works!'); + it('should display message saying app works', async () => { + await page.navigateTo(); + expect(await page.getTitleText()).toEqual('app works!'); }); }); diff --git a/aio/content/examples/built-in-directives/e2e/src/app.e2e-spec.ts b/aio/content/examples/built-in-directives/e2e/src/app.e2e-spec.ts index 92c4640222e89..d25537cfdfe91 100644 --- a/aio/content/examples/built-in-directives/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/built-in-directives/e2e/src/app.e2e-spec.ts @@ -2,75 +2,72 @@ import { browser, element, by } from 'protractor'; describe('Built-in Directives', () => { - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); - it('should have title Built-in Directives', () => { + it('should have title Built-in Directives', async () => { const title = element.all(by.css('h1')).get(0); - expect(title.getText()).toEqual('Built-in Directives'); + expect(await title.getText()).toEqual('Built-in Directives'); }); it('should change first Teapot header', async () => { const firstLabel = element.all(by.css('p')).get(0); const firstInput = element.all(by.css('input')).get(0); - expect(firstLabel.getText()).toEqual('Current item name: Teapot'); - firstInput.sendKeys('abc'); - expect(firstLabel.getText()).toEqual('Current item name: Teapotabc'); + expect(await firstLabel.getText()).toEqual('Current item name: Teapot'); + await firstInput.sendKeys('abc'); + expect(await firstLabel.getText()).toEqual('Current item name: Teapotabc'); }); - it('should modify sentence when modified checkbox checked', () => { + it('should modify sentence when modified checkbox checked', async () => { const modifiedChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(1); const modifiedSentence = element.all(by.css('div')).get(1); - modifiedChkbxLabel.click(); - expect(modifiedSentence.getText()).toContain('modified'); + await modifiedChkbxLabel.click(); + expect(await modifiedSentence.getText()).toContain('modified'); }); - it('should modify sentence when normal checkbox checked', () => { + it('should modify sentence when normal checkbox checked', async () => { const normalChkbxLabel = element.all(by.css('input[type="checkbox"]')).get(4); const normalSentence = element.all(by.css('div')).get(7); - normalChkbxLabel.click(); - expect(normalSentence.getText()).toContain('normal weight and, extra large'); + await normalChkbxLabel.click(); + expect(await normalSentence.getText()).toContain('normal weight and, extra large'); }); - it('should toggle app-item-detail', () => { + it('should toggle app-item-detail', async () => { const toggleButton = element.all(by.css('button')).get(3); const toggledDiv = element.all(by.css('app-item-detail')).get(0); - toggleButton.click(); - expect(toggledDiv.isDisplayed()).toBe(true); + await toggleButton.click(); + expect(await toggledDiv.isDisplayed()).toBe(true); }); - it('should hide app-item-detail', () => { + it('should hide app-item-detail', async () => { const hiddenMessage = element.all(by.css('p')).get(11); const hiddenDiv = element.all(by.css('app-item-detail')).get(2); - expect(hiddenMessage.getText()).toContain('in the DOM'); - expect(hiddenDiv.isDisplayed()).toBe(true); + expect(await hiddenMessage.getText()).toContain('in the DOM'); + expect(await hiddenDiv.isDisplayed()).toBe(true); }); - it('should have 10 lists each containing the string Teapot', () => { + it('should have 10 lists each containing the string Teapot', async () => { const listDiv = element.all(by.cssContainingText('.box', 'Teapot')); - expect(listDiv.count()).toBe(10); + expect(await listDiv.count()).toBe(10); }); - it('should switch case', () => { + it('should switch case', async () => { const tvRadioButton = element.all(by.css('input[type="radio"]')).get(3); const tvDiv = element(by.css('app-lost-item')); const fishbowlRadioButton = element.all(by.css('input[type="radio"]')).get(4); const fishbowlDiv = element(by.css('app-unknown-item')); - tvRadioButton.click(); - expect(tvDiv.getText()).toContain('Television'); - fishbowlRadioButton.click(); - expect(fishbowlDiv.getText()).toContain('mysterious'); + await tvRadioButton.click(); + expect(await tvDiv.getText()).toContain('Television'); + await fishbowlRadioButton.click(); + expect(await fishbowlDiv.getText()).toContain('mysterious'); }); - }); diff --git a/aio/content/examples/built-in-template-functions/e2e/src/app.e2e-spec.ts b/aio/content/examples/built-in-template-functions/e2e/src/app.e2e-spec.ts index a8bc7f0adf2aa..03e4a2e5e374a 100644 --- a/aio/content/examples/built-in-template-functions/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/built-in-template-functions/e2e/src/app.e2e-spec.ts @@ -1,18 +1,16 @@ import { browser, element, by } from 'protractor'; describe('Built Template Functions Example', () => { - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); - it('should have title Built-in Template Functions', () => { + it('should have title Built-in Template Functions', async () => { const title = element.all(by.css('h1')).get(0); - expect(title.getText()).toEqual('Built-in Template Functions'); + expect(await title.getText()).toEqual('Built-in Template Functions'); }); - it('should display $any( ) in h2', () => { + it('should display $any( ) in h2', async () => { const header = element(by.css('h2')); - expect(header.getText()).toContain('$any( )'); + expect(await header.getText()).toContain('$any( )'); }); }); 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 d5727cc70c64a..6f2c27990a995 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 @@ -10,13 +10,13 @@ describe('Component Communication Cookbook Tests', () => { const heroNames = ['Dr IQ', 'Magneta', 'Bombasto']; const masterName = 'Master'; - it('should pass properties to children properly', () => { + it('should pass properties to children properly', async () => { 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++) { - const childTitle = heroes.get(i).element(by.tagName('h3')).getText(); - const childDetail = heroes.get(i).element(by.tagName('p')).getText(); + const childTitle = await heroes.get(i).element(by.tagName('h3')).getText(); + const childDetail = await heroes.get(i).element(by.tagName('p')).getText(); expect(childTitle).toEqual(heroNames[i] + ' says:'); expect(childDetail).toContain(masterName); } @@ -28,23 +28,23 @@ describe('Component Communication Cookbook Tests', () => { describe('Parent-to-child communication with setter', () => { // #docregion parent-to-child-setter // ... - it('should display trimmed, non-empty names', () => { + it('should display trimmed, non-empty names', async () => { const nonEmptyNameIndex = 0; const nonEmptyName = '"Dr IQ"'; 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(); + const displayName = await hero.element(by.tagName('h3')).getText(); expect(displayName).toEqual(nonEmptyName); }); - it('should replace empty name with default name', () => { + it('should replace empty name with default name', async () => { const emptyNameIndex = 1; const defaultName = '""'; 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(); + const displayName = await hero.element(by.tagName('h3')).getText(); expect(displayName).toEqual(defaultName); }); // ... @@ -55,15 +55,15 @@ describe('Component Communication Cookbook Tests', () => { // #docregion parent-to-child-onchanges // ... // Test must all execute in this exact order - it('should set expected initial values', () => { - const actual = getActual(); + it('should set expected initial values', async () => { + const actual = await getActual(); const initialLabel = 'Version 1.23'; const initialLog = 'Initial value of major set to 1, Initial value of minor set to 23'; expect(actual.label).toBe(initialLabel); expect(actual.count).toBe(1); - expect(actual.logs.get(0).getText()).toBe(initialLog); + expect(await actual.logs.get(0).getText()).toBe(initialLog); }); it('should set expected values after clicking \'Minor\' twice', async () => { @@ -73,14 +73,14 @@ describe('Component Communication Cookbook Tests', () => { await newMinorButton.click(); await newMinorButton.click(); - const actual = getActual(); + const actual = await getActual(); 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); + expect(await actual.logs.get(2).getText()).toBe(logAfter2Minor); }); it('should set expected values after clicking \'Major\' once', async () => { @@ -88,26 +88,26 @@ describe('Component Communication Cookbook Tests', () => { const newMajorButton = repoTag.all(by.tagName('button')).get(1); await newMajorButton.click(); - const actual = getActual(); + const actual = await getActual(); 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(2); - expect(actual.logs.get(1).getText()).toBe(logAfterMajor); + expect(await actual.logs.get(1).getText()).toBe(logAfterMajor); }); - function getActual() { + async function getActual() { const versionTag = element(by.tagName('app-version-child')); - const label = versionTag.element(by.tagName('h3')).getText(); + const label = await versionTag.element(by.tagName('h3')).getText(); const ul = versionTag.element((by.tagName('ul'))); const logs = ul.all(by.tagName('li')); return { label, logs, - count: logs.count() + count: await logs.count(), }; } // ... @@ -117,9 +117,9 @@ describe('Component Communication Cookbook Tests', () => { describe('Child-to-parent communication', () => { // #docregion child-to-parent // ... - it('should not emit the event initially', () => { + it('should not emit the event initially', async () => { const voteLabel = element(by.tagName('app-vote-taker')).element(by.tagName('h3')); - expect(voteLabel.getText()).toBe('Agree: 0, Disagree: 0'); + expect(await voteLabel.getText()).toBe('Agree: 0, Disagree: 0'); }); it('should process Agree vote', async () => { @@ -129,7 +129,7 @@ describe('Component Communication Cookbook Tests', () => { await agreeButton1.click(); - expect(voteLabel.getText()).toBe('Agree: 1, Disagree: 0'); + expect(await voteLabel.getText()).toBe('Agree: 1, Disagree: 0'); }); it('should process Disagree vote', async () => { @@ -139,7 +139,7 @@ describe('Component Communication Cookbook Tests', () => { await agreeButton1.click(); - expect(voteLabel.getText()).toBe('Agree: 0, Disagree: 1'); + expect(await voteLabel.getText()).toBe('Agree: 0, Disagree: 1'); }); // ... // #enddocregion child-to-parent @@ -204,8 +204,8 @@ describe('Component Communication Cookbook Tests', () => { await announceButton.click(); - expect(history.count()).toBe(1); - expect(history.get(0).getText()).toMatch(/Mission.* announced/); + expect(await history.count()).toBe(1); + expect(await history.get(0).getText()).toMatch(/Mission.* announced/); }); it('should confirm the mission by Lovell', async () => { @@ -229,8 +229,8 @@ describe('Component Communication Cookbook Tests', () => { await announceButton.click(); await confirmButton.click(); - expect(history.count()).toBe(2); - expect(history.get(1).getText()).toBe(`${astronaut} confirmed the mission`); + expect(await history.count()).toBe(2); + expect(await history.get(1).getText()).toBe(`${astronaut} confirmed the mission`); } // ... // #enddocregion bidirectional-service diff --git a/aio/content/examples/component-overview/e2e/src/app.e2e-spec.ts b/aio/content/examples/component-overview/e2e/src/app.e2e-spec.ts index c6047b3a6907d..4ddd1bcef1089 100644 --- a/aio/content/examples/component-overview/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/component-overview/e2e/src/app.e2e-spec.ts @@ -2,12 +2,10 @@ import { browser, element, by } from 'protractor'; describe('Component Overview', () => { - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); - it('should display component overview works ', () => { - expect(element(by.css('p')).getText()).toEqual('component-overview works!'); + it('should display component overview works ', async () => { + expect(await element(by.css('p')).getText()).toEqual('component-overview works!'); }); }); diff --git a/aio/content/examples/component-styles/e2e/src/app.e2e-spec.ts b/aio/content/examples/component-styles/e2e/src/app.e2e-spec.ts index 2265e95f6e9a9..34f854693c0b3 100644 --- a/aio/content/examples/component-styles/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/component-styles/e2e/src/app.e2e-spec.ts @@ -2,67 +2,65 @@ import { browser, element, by } from 'protractor'; describe('Component Style Tests', () => { - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); - it('scopes component styles to component view', () => { + it('scopes component styles to component view', async () => { const componentH1 = element(by.css('app-root > h1')); const externalH1 = element(by.css('body > h1')); // Note: sometimes webdriver returns the fontWeight as "normal", // other times as "400", both of which are equal in CSS terms. - expect(componentH1.getCssValue('fontWeight')).toMatch(/normal|400/); - expect(externalH1.getCssValue('fontWeight')).not.toMatch(/normal|400/); + expect(await componentH1.getCssValue('fontWeight')).toMatch(/normal|400/); + expect(await externalH1.getCssValue('fontWeight')).not.toMatch(/normal|400/); }); - it('allows styling :host element', () => { + it('allows styling :host element', async () => { const host = element(by.css('app-hero-details')); - expect(host.getCssValue('borderWidth')).toEqual('1px'); + expect(await host.getCssValue('borderWidth')).toEqual('1px'); }); - it('supports :host() in function form', () => { + it('supports :host() in function form', async () => { const host = element(by.css('app-hero-details')); - host.element(by.buttonText('Activate')).click(); - expect(host.getCssValue('borderWidth')).toEqual('3px'); + await host.element(by.buttonText('Activate')).click(); + expect(await host.getCssValue('borderWidth')).toEqual('3px'); }); - it('allows conditional :host-context() styling', () => { + it('allows conditional :host-context() styling', async () => { const h2 = element(by.css('app-hero-details h2')); - expect(h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff + expect(await h2.getCssValue('backgroundColor')).toEqual('rgba(238, 238, 255, 1)'); // #eeeeff }); - it('styles both view and content children with /deep/', () => { + it('styles both view and content children with /deep/', async () => { const viewH3 = element(by.css('app-hero-team h3')); const contentH3 = element(by.css('app-hero-controls h3')); - expect(viewH3.getCssValue('fontStyle')).toEqual('italic'); - expect(contentH3.getCssValue('fontStyle')).toEqual('italic'); + expect(await viewH3.getCssValue('fontStyle')).toEqual('italic'); + expect(await contentH3.getCssValue('fontStyle')).toEqual('italic'); }); - it('includes styles loaded with CSS @import', () => { + it('includes styles loaded with CSS @import', async () => { const host = element(by.css('app-hero-details')); - expect(host.getCssValue('padding')).toEqual('10px'); + expect(await host.getCssValue('padding')).toEqual('10px'); }); - it('processes template inline styles', () => { + it('processes template inline styles', async () => { const button = element(by.css('app-hero-controls button')); const externalButton = element(by.css('body > button')); - expect(button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff - expect(externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)'); + expect(await button.getCssValue('backgroundColor')).toEqual('rgba(255, 255, 255, 1)'); // #ffffff + expect(await externalButton.getCssValue('backgroundColor')).not.toEqual('rgba(255, 255, 255, 1)'); }); - it('processes template s', () => { + it('processes template s', async () => { const li = element(by.css('app-hero-team li:first-child')); const externalLi = element(by.css('body > ul li')); - expect(li.getCssValue('listStyleType')).toEqual('square'); - expect(externalLi.getCssValue('listStyleType')).not.toEqual('square'); + expect(await li.getCssValue('listStyleType')).toEqual('square'); + expect(await externalLi.getCssValue('listStyleType')).not.toEqual('square'); }); }); diff --git a/aio/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts b/aio/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts index 857468f5b6f58..f13d6ad0423ac 100644 --- a/aio/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts @@ -2,9 +2,7 @@ import { browser, element, by } from 'protractor'; describe('Dependency Injection Cookbook', () => { - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); it('should render Logged in User example', async () => { const loggedInUser = element(by.cssContainingText('h3', 'Logged in user')); @@ -49,27 +47,27 @@ describe('Dependency Injection Cookbook', () => { expect(await magmaPhone.isPresent()).toBe(true); }); - it('should render Hero-of-the-Month runner-ups', () => { - const runnersUp = element(by.id('rups1')).getText(); + it('should render Hero-of-the-Month runner-ups', async () => { + const runnersUp = await element(by.id('rups1')).getText(); expect(runnersUp).toContain('RubberMan, Dr Nice'); }); - it('should render DateLogger log entry in Hero-of-the-Month', () => { - const logs = element.all(by.id('logs')).get(0).getText(); + it('should render DateLogger log entry in Hero-of-the-Month', async () => { + const logs = await element.all(by.id('logs')).get(0).getText(); expect(logs).toContain('INFO: starting up at'); }); - it('should highlight Hero Bios and Contacts container when mouseover', () => { + it('should highlight Hero Bios and Contacts container when mouseover', async () => { const target = element(by.css('div[appHighlight="yellow"]')); const yellow = 'rgba(255, 255, 0, 1)'; - expect(target.getCssValue('background-color')).not.toEqual(yellow); + expect(await target.getCssValue('background-color')).not.toEqual(yellow); - browser.actions().mouseMove(target).perform(); + await browser.actions().mouseMove(target).perform(); // Wait for up to 2s for the background color to be updated, // to account for slow environments (e.g. CI). - browser.wait(() => target.getCssValue('background-color').then(c => c === yellow), 2000); + await browser.wait(async () => await target.getCssValue('background-color') === yellow, 2000); }); describe('in Parent Finder', () => { @@ -78,20 +76,20 @@ describe('Dependency Injection Cookbook', () => { const carol1 = element(by.css('alex carol p')); const carol2 = element(by.css('barry carol p')); - it('"Cathy" should find "Alex" via the component class', () => { - expect(cathy1.getText()).toContain('Found Alex via the component'); + it('"Cathy" should find "Alex" via the component class', async () => { + expect(await cathy1.getText()).toContain('Found Alex via the component'); }); - it('"Craig" should not find "Alex" via the base class', () => { - expect(craig1.getText()).toContain('Did not find Alex via the base'); + it('"Craig" should not find "Alex" via the base class', async () => { + expect(await craig1.getText()).toContain('Did not find Alex via the base'); }); - it('"Carol" within "Alex" should have "Alex" parent', () => { - expect(carol1.getText()).toContain('Alex'); + it('"Carol" within "Alex" should have "Alex" parent', async () => { + expect(await carol1.getText()).toContain('Alex'); }); - it('"Carol" within "Barry" should have "Barry" parent', () => { - expect(carol2.getText()).toContain('Barry'); + it('"Carol" within "Barry" should have "Barry" parent', async () => { + expect(await carol2.getText()).toContain('Barry'); }); }); }); diff --git a/aio/content/examples/dependency-injection/e2e/src/app.e2e-spec.ts b/aio/content/examples/dependency-injection/e2e/src/app.e2e-spec.ts index 81b065f6257fa..622c4d9142ee4 100644 --- a/aio/content/examples/dependency-injection/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/dependency-injection/e2e/src/app.e2e-spec.ts @@ -5,193 +5,185 @@ describe('Dependency Injection Tests', () => { let expectedMsg: string; let expectedMsgRx: RegExp; - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); describe('Cars:', () => { - it('DI car displays as expected', () => { + it('DI car displays as expected', async () => { expectedMsg = 'DI car with 4 cylinders and Flintstone tires.'; - expect(element(by.css('#di')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#di')).getText()).toEqual(expectedMsg); }); - it('No DI car displays as expected', () => { + it('No DI car displays as expected', async () => { expectedMsg = 'No DI car with 4 cylinders and Flintstone tires.'; - expect(element(by.css('#nodi')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#nodi')).getText()).toEqual(expectedMsg); }); - it('Injector car displays as expected', () => { + it('Injector car displays as expected', async () => { expectedMsg = 'Injector car with 4 cylinders and Flintstone tires.'; - expect(element(by.css('#injector')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#injector')).getText()).toEqual(expectedMsg); }); - it('Factory car displays as expected', () => { + it('Factory car displays as expected', async () => { expectedMsg = 'Factory car with 4 cylinders and Flintstone tires.'; - expect(element(by.css('#factory')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#factory')).getText()).toEqual(expectedMsg); }); - it('Simple car displays as expected', () => { + it('Simple car displays as expected', async () => { expectedMsg = 'Simple car with 4 cylinders and Flintstone tires.'; - expect(element(by.css('#simple')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#simple')).getText()).toEqual(expectedMsg); }); - it('Super car displays as expected', () => { + it('Super car displays as expected', async () => { expectedMsg = 'Super car with 12 cylinders and Flintstone tires.'; - expect(element(by.css('#super')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#super')).getText()).toEqual(expectedMsg); }); - it('Test car displays as expected', () => { + it('Test car displays as expected', async () => { expectedMsg = 'Test car with 8 cylinders and YokoGoodStone tires.'; - expect(element(by.css('#test')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#test')).getText()).toEqual(expectedMsg); }); }); describe('Other Injections:', () => { - it('DI car displays as expected', () => { + it('DI car displays as expected', async () => { expectedMsg = 'DI car with 4 cylinders and Flintstone tires.'; - expect(element(by.css('#car')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#car')).getText()).toEqual(expectedMsg); }); - it('Hero displays as expected', () => { + it('Hero displays as expected', async () => { expectedMsg = 'Dr Nice'; - expect(element(by.css('#hero')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#hero')).getText()).toEqual(expectedMsg); }); - it('Optional injection displays as expected', () => { + it('Optional injection displays as expected', async () => { expectedMsg = 'R.O.U.S.\'s? I don\'t think they exist!'; - expect(element(by.css('#rodent')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#rodent')).getText()).toEqual(expectedMsg); }); }); describe('Tests:', () => { - it('Tests display as expected', () => { + it('Tests display as expected', async () => { expectedMsgRx = /Tests passed/; - expect(element(by.css('#tests')).getText()).toMatch(expectedMsgRx); + expect(await element(by.css('#tests')).getText()).toMatch(expectedMsgRx); }); }); describe('Provider variations:', () => { - it('P1 (class) displays as expected', () => { + it('P1 (class) displays as expected', async () => { expectedMsg = 'Hello from logger provided with Logger class'; - expect(element(by.css('#p1')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#p1')).getText()).toEqual(expectedMsg); }); - it('P3 (provide) displays as expected', () => { + it('P3 (provide) displays as expected', async () => { expectedMsg = 'Hello from logger provided with useClass:Logger'; - expect(element(by.css('#p3')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#p3')).getText()).toEqual(expectedMsg); }); - it('P4 (useClass:BetterLogger) displays as expected', () => { + it('P4 (useClass:BetterLogger) displays as expected', async () => { expectedMsg = 'Hello from logger provided with useClass:BetterLogger'; - expect(element(by.css('#p4')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#p4')).getText()).toEqual(expectedMsg); }); - it('P5 (useClass:EvenBetterLogger - dependency) displays as expected', () => { + it('P5 (useClass:EvenBetterLogger - dependency) displays as expected', async () => { expectedMsg = 'Message to Bob: Hello from EvenBetterlogger'; - expect(element(by.css('#p5')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#p5')).getText()).toEqual(expectedMsg); }); - it('P6a (no alias) displays as expected', () => { + it('P6a (no alias) displays as expected', async () => { expectedMsg = 'Hello OldLogger (but we want NewLogger)'; - expect(element(by.css('#p6a')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#p6a')).getText()).toEqual(expectedMsg); }); - it('P6b (alias) displays as expected', () => { + it('P6b (alias) displays as expected', async () => { expectedMsg = 'Hello from NewLogger (via aliased OldLogger)'; - expect(element(by.css('#p6b')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#p6b')).getText()).toEqual(expectedMsg); }); - it('P7 (useValue) displays as expected', () => { + it('P7 (useValue) displays as expected', async () => { expectedMsg = 'Silent logger says "Shhhhh!". Provided via "useValue"'; - expect(element(by.css('#p7')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#p7')).getText()).toEqual(expectedMsg); }); - it('P8 (useFactory) displays as expected', () => { + it('P8 (useFactory) displays as expected', async () => { expectedMsg = 'Hero service injected successfully via heroServiceProvider'; - expect(element(by.css('#p8')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#p8')).getText()).toEqual(expectedMsg); }); - it('P9 (InjectionToken) displays as expected', () => { + it('P9 (InjectionToken) displays as expected', async () => { expectedMsg = 'APP_CONFIG Application title is Dependency Injection'; - expect(element(by.css('#p9')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#p9')).getText()).toEqual(expectedMsg); }); - it('P10 (optional dependency) displays as expected', () => { + it('P10 (optional dependency) displays as expected', async () => { expectedMsg = 'Optional logger was not available'; - expect(element(by.css('#p10')).getText()).toEqual(expectedMsg); + expect(await element(by.css('#p10')).getText()).toEqual(expectedMsg); }); }); describe('User/Heroes:', () => { - it('User is Bob - unauthorized', () => { + it('User is Bob - unauthorized', async () => { expectedMsgRx = /Bob, is not authorized/; - expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx); + expect(await element(by.css('#user')).getText()).toMatch(expectedMsgRx); }); - it('should have button', () => { - expect(element.all(by.cssContainingText('button', 'Next User')) + it('should have button', async () => { + expect(await element.all(by.cssContainingText('button', 'Next User')) .get(0).isDisplayed()).toBe(true, '\'Next User\' button should be displayed'); }); - it('unauthorized user should have multiple unauthorized heroes', () => { + it('unauthorized user should have multiple unauthorized heroes', async () => { const heroes = element.all(by.css('#unauthorized app-hero-list div')); - expect(heroes.count()).toBeGreaterThan(0); + expect(await heroes.count()).toBeGreaterThan(0); }); - it('unauthorized user should have no secret heroes', () => { + it('unauthorized user should have no secret heroes', async () => { const heroes = element.all(by.css('#unauthorized app-hero-list div')); - expect(heroes.count()).toBeGreaterThan(0); - - const filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => { - return elem.getText().then((text: string) => /secret/.test(text)); - }); + expect(await heroes.count()).toBeGreaterThan(0); - expect(filteredHeroes.count()).toEqual(0); + const filteredHeroes = heroes.filter(async elem => /secret/.test(await elem.getText())); + expect(await filteredHeroes.count()).toEqual(0); }); - it('unauthorized user should have no authorized heroes listed', () => { - expect(element.all(by.css('#authorized app-hero-list div')).count()).toEqual(0); + it('unauthorized user should have no authorized heroes listed', async () => { + expect(await element.all(by.css('#authorized app-hero-list div')).count()).toEqual(0); }); describe('after button click', () => { - beforeAll((done: any) => { + beforeAll(async () => { const buttonEle = element.all(by.cssContainingText('button', 'Next User')).get(0); - buttonEle.click().then(done, done); + await buttonEle.click(); }); - it('User is Alice - authorized', () => { + it('User is Alice - authorized', async () => { expectedMsgRx = /Alice, is authorized/; - expect(element(by.css('#user')).getText()).toMatch(expectedMsgRx); + expect(await element(by.css('#user')).getText()).toMatch(expectedMsgRx); }); - it('authorized user should have multiple authorized heroes ', () => { + it('authorized user should have multiple authorized heroes ', async () => { const heroes = element.all(by.css('#authorized app-hero-list div')); - expect(heroes.count()).toBeGreaterThan(0); + expect(await heroes.count()).toBeGreaterThan(0); }); - it('authorized user should have multiple authorized heroes with tree-shakeable HeroesService', () => { + it('authorized user should have multiple authorized heroes with tree-shakeable HeroesService', async () => { const heroes = element.all(by.css('#tspAuthorized app-hero-list div')); - expect(heroes.count()).toBeGreaterThan(0); + expect(await heroes.count()).toBeGreaterThan(0); }); - it('authorized user should have secret heroes', () => { + it('authorized user should have secret heroes', async () => { const heroes = element.all(by.css('#authorized app-hero-list div')); - expect(heroes.count()).toBeGreaterThan(0); - - const filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => { - return elem.getText().then((text: string) => /secret/.test(text)); - }); + expect(await heroes.count()).toBeGreaterThan(0); - expect(filteredHeroes.count()).toBeGreaterThan(0); + const filteredHeroes = heroes.filter(async elem => /secret/.test(await elem.getText())); + expect(await filteredHeroes.count()).toBeGreaterThan(0); }); - it('authorized user should have no unauthorized heroes listed', () => { - expect(element.all(by.css('#unauthorized app-hero-list div')).count()).toEqual(0); + it('authorized user should have no unauthorized heroes listed', async () => { + expect(await element.all(by.css('#unauthorized app-hero-list div')).count()).toEqual(0); }); }); }); diff --git a/aio/content/examples/displaying-data/e2e/src/app.e2e-spec.ts b/aio/content/examples/displaying-data/e2e/src/app.e2e-spec.ts index 001708d383411..6ede202dae8c7 100644 --- a/aio/content/examples/displaying-data/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/displaying-data/e2e/src/app.e2e-spec.ts @@ -4,24 +4,22 @@ describe('Displaying Data Tests', () => { const title = 'Tour of Heroes'; const defaultHero = 'Windstorm'; - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); - it('should display correct title: ' + title, () => { - expect(element(by.css('h1')).getText()).toEqual(title); + it(`should display correct title: ${title}`, async () => { + expect(await element(by.css('h1')).getText()).toEqual(title); }); - it('should have correct default hero: ' + defaultHero, () => { - expect(element(by.css('h2')).getText()).toContain(defaultHero); + it(`should have correct default hero: ${defaultHero}`, async () => { + expect(await element(by.css('h2')).getText()).toContain(defaultHero); }); - it('should have heroes', () => { + it('should have heroes', async () => { const heroEls = element.all(by.css('li')); - expect(heroEls.count()).not.toBe(0, 'should have heroes'); + expect(await heroEls.count()).not.toBe(0, 'should have heroes'); }); - it('should display "there are many heroes!"', () => { - expect(element(by.css('ul ~ p')).getText()).toContain('There are many heroes!'); + it('should display "there are many heroes!"', async () => { + expect(await element(by.css('ul ~ p')).getText()).toContain('There are many heroes!'); }); }); diff --git a/aio/content/examples/docs-style-guide/e2e/src/app.e2e-spec.ts b/aio/content/examples/docs-style-guide/e2e/src/app.e2e-spec.ts index c877f9cce94e4..05f5e145a0935 100644 --- a/aio/content/examples/docs-style-guide/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/docs-style-guide/e2e/src/app.e2e-spec.ts @@ -3,11 +3,9 @@ import { browser, element, by } from 'protractor'; describe('Docs Style Guide', () => { const title = 'Authors Style Guide Sample'; - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); - it('should display correct title: ' + title, () => { - expect(element(by.css('h1')).getText()).toEqual(title); + it(`should display correct title: ${title}`, async () => { + expect(await element(by.css('h1')).getText()).toEqual(title); }); }); diff --git a/aio/content/examples/dynamic-form/e2e/src/app.e2e-spec.ts b/aio/content/examples/dynamic-form/e2e/src/app.e2e-spec.ts index 7f01f3100eb4d..4dc15e1b77bd3 100644 --- a/aio/content/examples/dynamic-form/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/dynamic-form/e2e/src/app.e2e-spec.ts @@ -3,25 +3,20 @@ import { browser, element, by } from 'protractor'; /* tslint:disable:quotemark */ describe('Dynamic Form', () => { - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); - it('should submit form', () => { + it('should submit form', async () => { const firstNameElement = element.all(by.css('input[id=firstName]')).get(0); - expect(firstNameElement.getAttribute('value')).toEqual('Bombasto'); + expect(await firstNameElement.getAttribute('value')).toEqual('Bombasto'); const emailElement = element.all(by.css('input[id=emailAddress]')).get(0); const email = 'test@test.com'; - emailElement.sendKeys(email); - expect(emailElement.getAttribute('value')).toEqual(email); + await emailElement.sendKeys(email); + expect(await emailElement.getAttribute('value')).toEqual(email); - element(by.css('select option[value="solid"]')).click(); - - const saveButton = element.all(by.css('button')).get(0); - saveButton.click().then(() => { - expect(element(by.xpath("//strong[contains(text(),'Saved the following values')]")).isPresent()).toBe(true); - }); + await element(by.css('select option[value="solid"]')).click(); + await element.all(by.css('button')).get(0).click(); + expect(await element(by.cssContainingText('strong', 'Saved the following values')).isPresent()).toBe(true); }); }); diff --git a/aio/content/examples/elements/e2e/src/app.e2e-spec.ts b/aio/content/examples/elements/e2e/src/app.e2e-spec.ts index ad5de6efcdadc..99abc4309a125 100644 --- a/aio/content/examples/elements/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/elements/e2e/src/app.e2e-spec.ts @@ -6,14 +6,14 @@ describe('Elements', () => { const popupButtons = element.all(by.css('button')); // Helpers - const click = (elem: ElementFinder) => { + const click = async (elem: ElementFinder) => { // Waiting for the element to be clickable, makes the tests less flaky. - browser.wait(EC.elementToBeClickable(elem), 5000); - elem.click(); + await browser.wait(EC.elementToBeClickable(elem), 5000); + await elem.click(); }; - const waitForText = (elem: ElementFinder) => { + const waitForText = async (elem: ElementFinder) => { // Waiting for the element to have some text, makes the tests less flaky. - browser.wait(async () => /\S/.test(await elem.getText()), 5000); + await browser.wait(async () => /\S/.test(await elem.getText()), 5000); }; beforeEach(() => browser.get('')); @@ -23,29 +23,29 @@ describe('Elements', () => { const popupComponent = element(by.css('popup-component')); const closeButton = popupComponent.element(by.css('button')); - it('should be displayed on button click', () => { - expect(popupComponent.isPresent()).toBe(false); + it('should be displayed on button click', async () => { + expect(await popupComponent.isPresent()).toBe(false); - click(popupComponentButton); - expect(popupComponent.isPresent()).toBe(true); + await click(popupComponentButton); + expect(await popupComponent.isPresent()).toBe(true); }); - it('should display the specified message', () => { - messageInput.clear(); - messageInput.sendKeys('Angular rocks!'); + it('should display the specified message', async () => { + await messageInput.clear(); + await messageInput.sendKeys('Angular rocks!'); - click(popupComponentButton); - waitForText(popupComponent); + await click(popupComponentButton); + await waitForText(popupComponent); - expect(popupComponent.getText()).toContain('Popup: Angular rocks!'); + expect(await popupComponent.getText()).toContain('Popup: Angular rocks!'); }); - it('should be closed on "close" button click', () => { - popupComponentButton.click(); - expect(popupComponent.isPresent()).toBe(true); + it('should be closed on "close" button click', async () => { + await click(popupComponentButton); + expect(await popupComponent.isPresent()).toBe(true); - click(closeButton); - expect(popupComponent.isPresent()).toBe(false); + await click(closeButton); + expect(await popupComponent.isPresent()).toBe(false); }); }); @@ -54,29 +54,29 @@ describe('Elements', () => { const popupElement = element(by.css('popup-element')); const closeButton = popupElement.element(by.css('button')); - it('should be displayed on button click', () => { - expect(popupElement.isPresent()).toBe(false); + it('should be displayed on button click', async () => { + expect(await popupElement.isPresent()).toBe(false); - click(popupElementButton); - expect(popupElement.isPresent()).toBe(true); + await click(popupElementButton); + expect(await popupElement.isPresent()).toBe(true); }); - it('should display the specified message', () => { - messageInput.clear(); - messageInput.sendKeys('Angular rocks!'); + it('should display the specified message', async () => { + await messageInput.clear(); + await messageInput.sendKeys('Angular rocks!'); - click(popupElementButton); - waitForText(popupElement); + await click(popupElementButton); + await waitForText(popupElement); - expect(popupElement.getText()).toContain('Popup: Angular rocks!'); + expect(await popupElement.getText()).toContain('Popup: Angular rocks!'); }); - it('should be closed on "close" button click', () => { - popupElementButton.click(); - expect(popupElement.isPresent()).toBe(true); + it('should be closed on "close" button click', async () => { + await click(popupElementButton); + expect(await popupElement.isPresent()).toBe(true); - click(closeButton); - expect(popupElement.isPresent()).toBe(false); + await click(closeButton); + expect(await popupElement.isPresent()).toBe(false); }); }); }); diff --git a/aio/content/examples/event-binding/e2e/src/app.e2e-spec.ts b/aio/content/examples/event-binding/e2e/src/app.e2e-spec.ts index 67b3792ef638c..a5a1dbf5588a1 100644 --- a/aio/content/examples/event-binding/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/event-binding/e2e/src/app.e2e-spec.ts @@ -2,9 +2,7 @@ import { browser, element, by } from 'protractor'; describe('Event binding example', () => { - beforeEach(() => { - browser.get(''); - }); + beforeEach(() => browser.get('')); const saveButton = element.all(by.css('button')).get(0); const onSaveButton = element.all(by.css('button')).get(1); @@ -14,55 +12,55 @@ describe('Event binding example', () => { const saveProp = element.all(by.css('button')).get(5); - it('should display Event Binding with Angular', () => { - expect(element(by.css('h1')).getText()).toEqual('Event Binding'); + it('should display Event Binding with Angular', async () => { + expect(await element(by.css('h1')).getText()).toEqual('Event Binding'); }); - it('should display 6 buttons', () => { - expect(saveButton.getText()).toBe('Save'); - expect(onSaveButton.getText()).toBe('on-click Save'); - expect(myClick.getText()).toBe('click with myClick'); - expect(deleteButton.getText()).toBe('Delete'); - expect(saveNoProp.getText()).toBe('Save, no propagation'); - expect(saveProp.getText()).toBe('Save with propagation'); + it('should display 6 buttons', async () => { + expect(await saveButton.getText()).toBe('Save'); + expect(await onSaveButton.getText()).toBe('on-click Save'); + expect(await myClick.getText()).toBe('click with myClick'); + expect(await deleteButton.getText()).toBe('Delete'); + expect(await saveNoProp.getText()).toBe('Save, no propagation'); + expect(await saveProp.getText()).toBe('Save with propagation'); }); - it('should support user input', () => { + it('should support user input', async () => { const input = element(by.css('input')); const bindingResult = element.all(by.css('h4')).get(1); - expect(bindingResult.getText()).toEqual('Result: teapot'); - input.sendKeys('abc'); - expect(bindingResult.getText()).toEqual('Result: teapotabc'); + expect(await bindingResult.getText()).toEqual('Result: teapot'); + await input.sendKeys('abc'); + expect(await bindingResult.getText()).toEqual('Result: teapotabc'); }); it('should hide the item img', async () => { await deleteButton.click(); - browser.switchTo().alert().accept(); - expect(element.all(by.css('img')).get(0).getCssValue('display')).toEqual('none'); + await browser.switchTo().alert().accept(); + expect(await element.all(by.css('img')).get(0).getCssValue('display')).toEqual('none'); }); it('should show two alerts', async () => { const parentDiv = element.all(by.css('.parent-div')); const childDiv = element.all(by.css('div > div')).get(1); await parentDiv.click(); - browser.switchTo().alert().accept(); - expect(childDiv.getText()).toEqual('Click me too! (child)'); + await browser.switchTo().alert().accept(); + expect(await childDiv.getText()).toEqual('Click me too! (child)'); await childDiv.click(); - expect(browser.switchTo().alert().getText()).toEqual('Click me. Event target class is child-div'); - browser.switchTo().alert().accept(); + expect(await browser.switchTo().alert().getText()).toEqual('Click me. Event target class is child-div'); + await browser.switchTo().alert().accept(); }); it('should show 1 alert from Save, no prop, button', async () => { await saveNoProp.click(); - expect(browser.switchTo().alert().getText()).toEqual('Saved. Event target is Save, no propagation'); - browser.switchTo().alert().accept(); + expect(await browser.switchTo().alert().getText()).toEqual('Saved. Event target is Save, no propagation'); + await browser.switchTo().alert().accept(); }); it('should show 2 alerts from Save w/prop button', async () => { await saveProp.click(); - expect(browser.switchTo().alert().getText()).toEqual('Saved.'); - browser.switchTo().alert().accept(); - expect(browser.switchTo().alert().getText()).toEqual('Saved.'); - browser.switchTo().alert().accept(); + expect(await browser.switchTo().alert().getText()).toEqual('Saved.'); + await browser.switchTo().alert().accept(); + expect(await browser.switchTo().alert().getText()).toEqual('Saved.'); + await browser.switchTo().alert().accept(); }); }); diff --git a/aio/content/examples/feature-modules/e2e/src/app.e2e-spec.ts b/aio/content/examples/feature-modules/e2e/src/app.e2e-spec.ts index fbc7dc198aed1..78e8b1ee46b6f 100644 --- a/aio/content/examples/feature-modules/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/feature-modules/e2e/src/app.e2e-spec.ts @@ -7,11 +7,8 @@ describe('feature-modules App', () => { page = new AppPage(); }); - it('should display message saying app works', () => { - page.navigateTo(); - expect(page.getTitleText()).toEqual('app works!'); + it('should display message saying app works', async () => { + await page.navigateTo(); + expect(await page.getTitleText()).toEqual('app works!'); }); }); - - - diff --git a/aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts b/aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts index b2590fcfd2e75..f81c63b253c5a 100644 --- a/aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts @@ -3,9 +3,7 @@ import { browser, element, by, protractor, ElementFinder, ElementArrayFinder } f // THESE TESTS ARE INCOMPLETE describe('Form Validation Tests', () => { - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); describe('Template-driven form', () => { beforeAll(() => { @@ -71,178 +69,178 @@ function getPage(sectionTag: string) { function tests(title: string) { - it('should display correct title', () => { - expect(page.title.getText()).toContain(title); + it('should display correct title', async () => { + expect(await page.title.getText()).toContain(title); }); - it('should not display submitted message before submit', () => { - expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(false); + it('should not display submitted message before submit', async () => { + expect(await page.heroSubmitted.isElementPresent(by.css('p'))).toBe(false); }); - it('should have form buttons', () => { - expect(page.heroFormButtons.count()).toEqual(2); + it('should have form buttons', async () => { + expect(await page.heroFormButtons.count()).toEqual(2); }); - it('should have error at start', () => { - expectFormIsInvalid(); + it('should have error at start', async () => { + await expectFormIsInvalid(); }); // it('showForm', () => { // page.form.getInnerHtml().then(html => console.log(html)); // }); - it('should have disabled submit button', () => { - expect(page.heroFormButtons.get(0).isEnabled()).toBe(false); + it('should have disabled submit button', async () => { + expect(await page.heroFormButtons.get(0).isEnabled()).toBe(false); }); - it('resetting name to valid name should clear errors', () => { + it('resetting name to valid name should clear errors', async () => { const ele = page.nameInput; - expect(ele.isPresent()).toBe(true, 'nameInput should exist'); - ele.clear(); - ele.sendKeys(testName); - expectFormIsValid(); + expect(await ele.isPresent()).toBe(true, 'nameInput should exist'); + await ele.clear(); + await ele.sendKeys(testName); + await expectFormIsValid(); }); - it('should produce "required" error after clearing name', () => { - page.nameInput.clear(); - // page.alterEgoInput.click(); // to blur ... didn't work - page.nameInput.sendKeys('x', protractor.Key.BACK_SPACE); // ugh! - expect(page.form.getAttribute('class')).toMatch('ng-invalid'); - expect(page.errorMessages.get(0).getText()).toContain('required'); + it('should produce "required" error after clearing name', async () => { + await page.nameInput.clear(); + // await page.alterEgoInput.click(); // to blur ... didn't work + await page.nameInput.sendKeys('x', protractor.Key.BACK_SPACE); // ugh! + expect(await page.form.getAttribute('class')).toMatch('ng-invalid'); + expect(await page.errorMessages.get(0).getText()).toContain('required'); }); - it('should produce "at least 4 characters" error when name="x"', () => { - page.nameInput.clear(); - page.nameInput.sendKeys('x'); // too short - expectFormIsInvalid(); - expect(page.errorMessages.get(0).getText()).toContain('at least 4 characters'); + it('should produce "at least 4 characters" error when name="x"', async () => { + await page.nameInput.clear(); + await page.nameInput.sendKeys('x'); // too short + await expectFormIsInvalid(); + expect(await page.errorMessages.get(0).getText()).toContain('at least 4 characters'); }); - it('resetting name to valid name again should clear errors', () => { - page.nameInput.sendKeys(testName); - expectFormIsValid(); + it('resetting name to valid name again should clear errors', async () => { + await page.nameInput.sendKeys(testName); + await expectFormIsValid(); }); - it('should have enabled submit button', () => { + it('should have enabled submit button', async () => { const submitBtn = page.heroFormButtons.get(0); - expect(submitBtn.isEnabled()).toBe(true); + expect(await submitBtn.isEnabled()).toBe(true); }); - it('should hide form after submit', () => { - page.heroFormButtons.get(0).click(); - expect(page.heroFormButtons.get(0).isDisplayed()).toBe(false); + it('should hide form after submit', async () => { + await page.heroFormButtons.get(0).click(); + expect(await page.heroFormButtons.get(0).isDisplayed()).toBe(false); }); - it('submitted form should be displayed', () => { - expect(page.heroSubmitted.isElementPresent(by.css('p'))).toBe(true); + it('submitted form should be displayed', async () => { + expect(await page.heroSubmitted.isElementPresent(by.css('p'))).toBe(true); }); - it('submitted form should have new hero name', () => { - expect(page.heroSubmitted.getText()).toContain(testName); + it('submitted form should have new hero name', async () => { + expect(await page.heroSubmitted.getText()).toContain(testName); }); - it('clicking edit button should reveal form again', () => { + it('clicking edit button should reveal form again', async () => { const newFormBtn = page.heroSubmitted.element(by.css('button')); - newFormBtn.click(); - expect(page.heroSubmitted.isElementPresent(by.css('p'))) + await newFormBtn.click(); + expect(await page.heroSubmitted.isElementPresent(by.css('p'))) .toBe(false, 'submitted hidden again'); - expect(page.title.isDisplayed()).toBe(true, 'can see form title'); + expect(await page.title.isDisplayed()).toBe(true, 'can see form title'); }); } -function expectFormIsValid() { - expect(page.form.getAttribute('class')).toMatch('ng-valid'); +async function expectFormIsValid() { + expect(await page.form.getAttribute('class')).toMatch('ng-valid'); } -function expectFormIsInvalid() { - expect(page.form.getAttribute('class')).toMatch('ng-invalid'); +async function expectFormIsInvalid() { + expect(await page.form.getAttribute('class')).toMatch('ng-invalid'); } -function triggerAlterEgoValidation() { +async function triggerAlterEgoValidation() { // alterEgo has updateOn set to 'blur', click outside of the input to trigger the blur event - element(by.css('app-root')).click(); + await element(by.css('app-root')).click(); } -function waitForAlterEgoValidation() { +async function waitForAlterEgoValidation() { // alterEgo async validation will be performed in 400ms - browser.sleep(400); + await browser.sleep(400); } function bobTests() { const emsg = 'Name cannot be Bob.'; - it('should produce "no bob" error after setting name to "Bobby"', () => { + it('should produce "no bob" error after setting name to "Bobby"', async () => { // Re-populate select element - page.powerSelect.click(); - page.powerOption.click(); + await page.powerSelect.click(); + await page.powerOption.click(); - page.nameInput.clear(); - page.nameInput.sendKeys('Bobby'); - expectFormIsInvalid(); - expect(page.errorMessages.get(0).getText()).toBe(emsg); + await page.nameInput.clear(); + await page.nameInput.sendKeys('Bobby'); + await expectFormIsInvalid(); + expect(await page.errorMessages.get(0).getText()).toBe(emsg); }); - it('should be ok again with valid name', () => { - page.nameInput.clear(); - page.nameInput.sendKeys(testName); - expectFormIsValid(); + it('should be ok again with valid name', async () => { + await page.nameInput.clear(); + await page.nameInput.sendKeys(testName); + await expectFormIsValid(); }); } function asyncValidationTests() { const emsg = 'Alter ego is already taken.'; - it(`should produce "${emsg}" error after setting alterEgo to Eric`, () => { - page.alterEgoInput.clear(); - page.alterEgoInput.sendKeys('Eric'); + it(`should produce "${emsg}" error after setting alterEgo to Eric`, async () => { + await page.alterEgoInput.clear(); + await page.alterEgoInput.sendKeys('Eric'); - triggerAlterEgoValidation(); - waitForAlterEgoValidation(); + await triggerAlterEgoValidation(); + await waitForAlterEgoValidation(); - expectFormIsInvalid(); - expect(page.alterEgoErrors.getText()).toBe(emsg); + await expectFormIsInvalid(); + expect(await page.alterEgoErrors.getText()).toBe(emsg); }); - it('should be ok again with different values', () => { - page.alterEgoInput.clear(); - page.alterEgoInput.sendKeys('John'); + it('should be ok again with different values', async () => { + await page.alterEgoInput.clear(); + await page.alterEgoInput.sendKeys('John'); - triggerAlterEgoValidation(); - waitForAlterEgoValidation(); + await triggerAlterEgoValidation(); + await waitForAlterEgoValidation(); - expectFormIsValid(); - expect(page.alterEgoErrors.isPresent()).toBe(false); + await expectFormIsValid(); + expect(await page.alterEgoErrors.isPresent()).toBe(false); }); } function crossValidationTests() { const emsg = 'Name cannot match alter ego.'; - it(`should produce "${emsg}" error after setting name and alter ego to the same value`, () => { - page.nameInput.clear(); - page.nameInput.sendKeys('Batman'); + it(`should produce "${emsg}" error after setting name and alter ego to the same value`, async () => { + await page.nameInput.clear(); + await page.nameInput.sendKeys('Batman'); - page.alterEgoInput.clear(); - page.alterEgoInput.sendKeys('Batman'); + await page.alterEgoInput.clear(); + await page.alterEgoInput.sendKeys('Batman'); - triggerAlterEgoValidation(); - waitForAlterEgoValidation(); + await triggerAlterEgoValidation(); + await waitForAlterEgoValidation(); - expectFormIsInvalid(); - expect(page.crossValidationErrorMessage.getText()).toBe(emsg); + await expectFormIsInvalid(); + expect(await page.crossValidationErrorMessage.getText()).toBe(emsg); }); - it('should be ok again with different values', () => { - page.nameInput.clear(); - page.nameInput.sendKeys('Batman'); + it('should be ok again with different values', async () => { + await page.nameInput.clear(); + await page.nameInput.sendKeys('Batman'); - page.alterEgoInput.clear(); - page.alterEgoInput.sendKeys('Superman'); + await page.alterEgoInput.clear(); + await page.alterEgoInput.sendKeys('Superman'); - triggerAlterEgoValidation(); - waitForAlterEgoValidation(); + await triggerAlterEgoValidation(); + await waitForAlterEgoValidation(); - expectFormIsValid(); - expect(page.crossValidationErrorMessage.isPresent()).toBe(false); + await expectFormIsValid(); + expect(await page.crossValidationErrorMessage.isPresent()).toBe(false); }); } diff --git a/aio/content/examples/forms-overview/e2e/src/app.e2e-spec.ts b/aio/content/examples/forms-overview/e2e/src/app.e2e-spec.ts index 364159569d3a1..bfcfba08461c7 100644 --- a/aio/content/examples/forms-overview/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/forms-overview/e2e/src/app.e2e-spec.ts @@ -1,10 +1,14 @@ -import { browser, element, by } from 'protractor'; +import { AppPage } from './app.po'; -describe('Forms Overview Tests', () => { +describe('forms-overvoew App', () => { + let page: AppPage; beforeEach(() => { - browser.get(''); + page = new AppPage(); }); + it('should display a title', async () => { + await page.navigateTo(); + expect(await page.getTitleText()).toEqual('Forms Overview'); + }); }); - diff --git a/aio/content/examples/forms/e2e/src/app.e2e-spec.ts b/aio/content/examples/forms/e2e/src/app.e2e-spec.ts index 5c208c7e41846..3b43373382a9d 100644 --- a/aio/content/examples/forms/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/forms/e2e/src/app.e2e-spec.ts @@ -2,61 +2,56 @@ import { browser, element, by } from 'protractor'; describe('Forms Tests', () => { - beforeEach(() => { - browser.get(''); - }); + beforeEach(() => browser.get('')); - it('should display correct title', () => { - expect(element.all(by.css('h1')).get(0).getText()).toEqual('Hero Form'); + it('should display correct title', async () => { + expect(await element.all(by.css('h1')).get(0).getText()).toEqual('Hero Form'); }); - - it('should not display message before submit', () => { + it('should not display message before submit', async () => { const ele = element(by.css('h2')); - expect(ele.isDisplayed()).toBe(false); + expect(await ele.isDisplayed()).toBe(false); }); - it('should hide form after submit', () => { + it('should hide form after submit', async () => { const ele = element.all(by.css('h1')).get(0); - expect(ele.isDisplayed()).toBe(true); + expect(await ele.isDisplayed()).toBe(true); + const b = element.all(by.css('button[type=submit]')).get(0); - b.click().then(() => { - expect(ele.isDisplayed()).toBe(false); - }); + await b.click(); + expect(await ele.isDisplayed()).toBe(false); }); - it('should display message after submit', () => { + it('should display message after submit', async () => { const b = element.all(by.css('button[type=submit]')).get(0); - b.click().then(() => { - expect(element(by.css('h2')).getText()).toContain('You submitted the following'); - }); + await b.click(); + expect(await element(by.css('h2')).getText()).toContain('You submitted the following'); }); - it('should hide form after submit', () => { + it('should hide form after submit', async () => { const alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0); - expect(alterEgoEle.isDisplayed()).toBe(true); + expect(await alterEgoEle.isDisplayed()).toBe(true); + const submitButtonEle = element.all(by.css('button[type=submit]')).get(0); - submitButtonEle.click().then(() => { - expect(alterEgoEle.isDisplayed()).toBe(false); - }); + await submitButtonEle.click(); + expect(await alterEgoEle.isDisplayed()).toBe(false); }); - it('should reflect submitted data after submit', () => { - const test = 'testing 1 2 3'; - let newValue: string; + it('should reflect submitted data after submit', async () => { const alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0); - alterEgoEle.getAttribute('value').then((value: string) => { - alterEgoEle.sendKeys(test); - newValue = value + test; - expect(alterEgoEle.getAttribute('value')).toEqual(newValue); - const b = element.all(by.css('button[type=submit]')).get(0); - return b.click(); - }).then(() => { - const alterEgoTextEle = element(by.cssContainingText('div', 'Alter Ego')); - expect(alterEgoTextEle.isPresent()).toBe(true, 'cannot locate "Alter Ego" label'); - const divEle = element(by.cssContainingText('div', newValue)); - expect(divEle.isPresent()).toBe(true, 'cannot locate div with this text: ' + newValue); - }); + const value = await alterEgoEle.getAttribute('value'); + const test = 'testing 1 2 3'; + const newValue = value + test; + + await alterEgoEle.sendKeys(test); + expect(await alterEgoEle.getAttribute('value')).toEqual(newValue); + + const b = element.all(by.css('button[type=submit]')).get(0); + await b.click(); + + const alterEgoTextEle = element(by.cssContainingText('div', 'Alter Ego')); + expect(await alterEgoTextEle.isPresent()).toBe(true, 'cannot locate "Alter Ego" label'); + const divEle = element(by.cssContainingText('div', newValue)); + expect(await divEle.isPresent()).toBe(true, `cannot locate div with this text: ${newValue}`); }); }); - diff --git a/aio/content/examples/getting-started/e2e/src/app.e2e-spec.ts b/aio/content/examples/getting-started/e2e/src/app.e2e-spec.ts index d2eb506938adf..0dfcc856c942f 100644 --- a/aio/content/examples/getting-started/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/getting-started/e2e/src/app.e2e-spec.ts @@ -1,4 +1,4 @@ -import { browser, element, by, ExpectedConditions as EC, logging, ElementFinder, ElementArrayFinder } from 'protractor'; +import { browser, element, by, ExpectedConditions as EC, logging } from 'protractor'; describe('Getting Started', () => { const pageElements = { diff --git a/aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts b/aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts index 277b2cc4140d8..5c418770ea979 100644 --- a/aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts @@ -2,9 +2,7 @@ import { browser, by, element } from 'protractor'; describe('Hierarchical dependency injection', () => { - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); describe('Heroes Scenario', () => { const page = { @@ -21,81 +19,68 @@ describe('Hierarchical dependency injection', () => { saveButtonEl: element(by.cssContainingText('app-heroes-list app-hero-tax-return button', 'Save')) }; - it('should list multiple heroes', () => { - expect(element.all(by.css('app-heroes-list li')).count()).toBeGreaterThan(1); + it('should list multiple heroes', async () => { + expect(await element.all(by.css('app-heroes-list li')).count()).toBeGreaterThan(1); }); - it('should show no hero tax-returns at the start', () => { - expect(element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0); + it('should show no hero tax-returns at the start', async () => { + expect(await element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0); }); - it('should open first hero in app-hero-tax-return view after click', () => { - page.heroEl.getText() - .then(val => { - page.heroName = val; - }) - .then(() => page.heroEl.click()) - .then(() => { - expect(page.heroCardEl.isDisplayed()).toBe(true); - }); + it('should open first hero in app-hero-tax-return view after click', async () => { + page.heroName = await page.heroEl.getText(); + await page.heroEl.click(); + expect(await page.heroCardEl.isDisplayed()).toBe(true); }); - it('hero tax-return should have first hero\'s name', () => { + it('hero tax-return should have first hero\'s name', async () => { // Not `page.tax-returnNameInputEl.getAttribute('value')` although later that is essential - expect(page.taxReturnNameEl.getText()).toEqual(page.heroName); + expect(await page.taxReturnNameEl.getText()).toEqual(page.heroName); }); - it('should be able to cancel change', () => { - page.incomeInputEl.clear() - .then(() => page.incomeInputEl.sendKeys('777')) - .then(() => { - expect(page.incomeInputEl.getAttribute('value')).toBe('777', 'income should be 777'); - return page.cancelButtonEl.click(); - }) - .then(() => { - expect(page.incomeInputEl.getAttribute('value')).not.toBe('777', 'income should not be 777'); - }); + it('should be able to cancel change', async () => { + await page.incomeInputEl.clear(); + await page.incomeInputEl.sendKeys('777'); + expect(await page.incomeInputEl.getAttribute('value')).toBe('777', 'income should be 777'); + + await page.cancelButtonEl.click(); + expect(await page.incomeInputEl.getAttribute('value')).not.toBe('777', 'income should not be 777'); }); - it('should be able to save change', () => { - page.incomeInputEl.clear() - .then(() => page.incomeInputEl.sendKeys('999')) - .then(() => { - expect(page.incomeInputEl.getAttribute('value')).toBe('999', 'income should be 999'); - return page.saveButtonEl.click(); - }) - .then(() => { - expect(page.incomeInputEl.getAttribute('value')).toBe('999', 'income should still be 999'); - }); + it('should be able to save change', async () => { + await page.incomeInputEl.clear(); + await page.incomeInputEl.sendKeys('999'); + expect(await page.incomeInputEl.getAttribute('value')).toBe('999', 'income should be 999'); + + await page.saveButtonEl.click(); + expect(await page.incomeInputEl.getAttribute('value')).toBe('999', 'income should still be 999'); }); - it('should be able to close tax-return', () => { - page.saveButtonEl.click() - .then(() => { - expect(element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0); - }); + it('should be able to close tax-return', async () => { + await page.saveButtonEl.click(); + expect(await element.all(by.css('app-heroes-list li app-hero-tax-return')).count()).toBe(0); }); }); describe('Villains Scenario', () => { - it('should list multiple villains', () => { - expect(element.all(by.css('app-villains-list li')).count()).toBeGreaterThan(1); + it('should list multiple villains', async () => { + expect(await element.all(by.css('app-villains-list li')).count()).toBeGreaterThan(1); }); }); describe('Cars Scenario', () => { - it('A-component should use expected services', () => { - expect(element(by.css('a-car')).getText()).toContain('C1-E1-T1'); + it('A-component should use expected services', async () => { + expect(await element(by.css('a-car')).getText()).toContain('C1-E1-T1'); }); - it('B-component should use expected services', () => { - expect(element(by.css('b-car')).getText()).toContain('C2-E2-T1'); + it('B-component should use expected services', async () => { + expect(await element(by.css('b-car')).getText()).toContain('C2-E2-T1'); }); - it('C-component should use expected services', () => { - expect(element(by.css('c-car')).getText()).toContain('C3-E2-T1'); + it('C-component should use expected services', async () => { + expect(await element(by.css('c-car')).getText()).toContain('C3-E2-T1'); }); }); }); diff --git a/aio/content/examples/http/e2e/src/app.e2e-spec.ts b/aio/content/examples/http/e2e/src/app.e2e-spec.ts index b74d2ea951dfa..41a4c2e3c7bec 100644 --- a/aio/content/examples/http/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/http/e2e/src/app.e2e-spec.ts @@ -1,4 +1,4 @@ -import { browser, element, by, ElementFinder } from 'protractor'; +import { browser, element, by } from 'protractor'; import { resolve } from 'path'; const page = { @@ -24,115 +24,113 @@ const page = { uploadMessage: element(by.css('app-uploader p')) }; -const checkLogForMessage = (message: string) => { - expect(page.logList.getText()).toContain(message); +const checkLogForMessage = async (message: string) => { + expect(await page.logList.getText()).toContain(message); }; describe('Http Tests', () => { - beforeEach(() => { - browser.get(''); - }); + beforeEach(() => browser.get('')); describe('Heroes', () => { - it('retrieves the list of heroes at startup', () => { - expect(page.heroesListItems.count()).toBe(4); - expect(page.heroesListItems.get(0).getText()).toContain('Dr Nice'); - checkLogForMessage('GET "api/heroes"'); + it('retrieves the list of heroes at startup', async () => { + expect(await page.heroesListItems.count()).toBe(4); + expect(await page.heroesListItems.get(0).getText()).toContain('Dr Nice'); + await checkLogForMessage('GET "api/heroes"'); }); - it('makes a POST to add a new hero', () => { - page.heroesListInput.sendKeys('Magneta'); - page.heroesListAddButton.click(); - expect(page.heroesListItems.count()).toBe(5); - checkLogForMessage('POST "api/heroes"'); + it('makes a POST to add a new hero', async () => { + await page.heroesListInput.sendKeys('Magneta'); + await page.heroesListAddButton.click(); + expect(await page.heroesListItems.count()).toBe(5); + await checkLogForMessage('POST "api/heroes"'); }); - it('makes a GET to search for a hero', () => { - page.heroesListInput.sendKeys('Celeritas'); - page.heroesListSearchButton.click(); - checkLogForMessage('GET "api/heroes?name=Celeritas"'); + it('makes a GET to search for a hero', async () => { + await page.heroesListInput.sendKeys('Celeritas'); + await page.heroesListSearchButton.click(); + await checkLogForMessage('GET "api/heroes?name=Celeritas"'); }); }); describe('Messages', () => { - it('can clear the logs', () => { - expect(page.logListItems.count()).toBe(1); - page.logClearButton.click(); - expect(page.logListItems.count()).toBe(0); + it('can clear the logs', async () => { + expect(await page.logListItems.count()).toBe(1); + await page.logClearButton.click(); + expect(await page.logListItems.count()).toBe(0); }); }); describe('Configuration', () => { - it('can fetch the configuration JSON file', () => { - page.configGetButton.click(); - checkLogForMessage('GET "assets/config.json"'); - expect(page.configSpan.getText()).toContain('Heroes API URL is "api/heroes"'); - expect(page.configSpan.getText()).toContain('Textfile URL is "assets/textfile.txt"'); + it('can fetch the configuration JSON file', async () => { + await page.configGetButton.click(); + await checkLogForMessage('GET "assets/config.json"'); + expect(await page.configSpan.getText()).toContain('Heroes API URL is "api/heroes"'); + expect(await page.configSpan.getText()).toContain('Textfile URL is "assets/textfile.txt"'); }); - it('can fetch the configuration JSON file with headers', () => { - page.configGetResponseButton.click(); - checkLogForMessage('GET "assets/config.json"'); - expect(page.configSpan.getText()).toContain('Response headers:'); - expect(page.configSpan.getText()).toContain('content-type: application/json; charset=UTF-8'); + it('can fetch the configuration JSON file with headers', async () => { + await page.configGetResponseButton.click(); + await checkLogForMessage('GET "assets/config.json"'); + expect(await page.configSpan.getText()).toContain('Response headers:'); + expect(await page.configSpan.getText()).toContain('content-type: application/json; charset=UTF-8'); }); - it('can clear the configuration log', () => { - page.configGetResponseButton.click(); - expect(page.configSpan.getText()).toContain('Response headers:'); - page.configClearButton.click(); - expect(page.configSpan.isPresent()).toBeFalsy(); + it('can clear the configuration log', async () => { + await page.configGetResponseButton.click(); + expect(await page.configSpan.getText()).toContain('Response headers:'); + await page.configClearButton.click(); + expect(await page.configSpan.isPresent()).toBeFalsy(); }); - it('throws an error for a non valid url', () => { - page.configErrorButton.click(); - checkLogForMessage('GET "not/a/real/url"'); - expect(page.configErrorMessage.getText()).toContain('"Something bad happened; please try again later."'); + it('throws an error for a non valid url', async () => { + await page.configErrorButton.click(); + await checkLogForMessage('GET "not/a/real/url"'); + expect(await page.configErrorMessage.getText()).toContain('"Something bad happened; please try again later."'); }); }); describe('Download', () => { - it('can download a txt file and show it', () => { - page.downloadButton.click(); - checkLogForMessage('DownloaderService downloaded "assets/textfile.txt"'); - checkLogForMessage('GET "assets/textfile.txt"'); - expect(page.downloadMessage.getText()).toContain('Contents: "This is the downloaded text file "'); + it('can download a txt file and show it', async () => { + await page.downloadButton.click(); + await checkLogForMessage('DownloaderService downloaded "assets/textfile.txt"'); + await checkLogForMessage('GET "assets/textfile.txt"'); + expect(await page.downloadMessage.getText()).toContain('Contents: "This is the downloaded text file "'); }); - it('can clear the log of the download', () => { - page.downloadButton.click(); - expect(page.downloadMessage.getText()).toContain('Contents: "This is the downloaded text file "'); - page.downloadClearButton.click(); - expect(page.downloadMessage.isPresent()).toBeFalsy(); + it('can clear the log of the download', async () => { + await page.downloadButton.click(); + expect(await page.downloadMessage.getText()).toContain('Contents: "This is the downloaded text file "'); + await page.downloadClearButton.click(); + expect(await page.downloadMessage.isPresent()).toBeFalsy(); }); }); describe('Upload', () => { - it('can upload a file', () => { + it('can upload a file', async () => { const filename = 'app.po.ts'; const url = resolve(__dirname, filename); - page.uploadInput.sendKeys(url); - checkLogForMessage('POST "/upload/file" succeeded in'); - expect(page.uploadMessage.getText()).toContain( + await page.uploadInput.sendKeys(url); + await checkLogForMessage('POST "/upload/file" succeeded in'); + expect(await page.uploadMessage.getText()).toContain( `File "${filename}" was completely uploaded!`); }); }); describe('PackageSearch', () => { - it('can search for npm package and find in cache', () => { + it('can search for npm package and find in cache', async () => { const packageName = 'angular'; - page.searchInput.sendKeys(packageName); - checkLogForMessage( + await page.searchInput.sendKeys(packageName); + await checkLogForMessage( 'Caching response from "https://npmsearch.com/query?q=angular"'); - expect(page.searchListItems.count()).toBeGreaterThan(1, 'angular items'); + expect(await page.searchListItems.count()).toBeGreaterThan(1, 'angular items'); - page.searchInput.clear(); - page.searchInput.sendKeys(' '); - expect(page.searchListItems.count()).toBe(0, 'search empty'); + await page.searchInput.clear(); + await page.searchInput.sendKeys(' '); + expect(await page.searchListItems.count()).toBe(0, 'search empty'); - page.searchInput.clear(); - page.searchInput.sendKeys(packageName); - checkLogForMessage( + await page.searchInput.clear(); + await page.searchInput.sendKeys(packageName); + await checkLogForMessage( 'Found cached response for "https://npmsearch.com/query?q=angular"'); }); }); diff --git a/aio/content/examples/i18n/e2e/src/app.e2e-spec.ts b/aio/content/examples/i18n/e2e/src/app.e2e-spec.ts index 734110a36fb95..42c50f03a7beb 100644 --- a/aio/content/examples/i18n/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/i18n/e2e/src/app.e2e-spec.ts @@ -2,44 +2,42 @@ import { browser, element, by } from 'protractor'; describe('i18n E2E Tests', () => { - beforeEach(() => { - browser.get(''); - }); + beforeEach(() => browser.get('')); - it('should display i18n translated welcome: Bonjour !', () => { - expect(element(by.css('h1')).getText()).toEqual('Bonjour i18n !'); + it('should display i18n translated welcome: Bonjour !', async () => { + expect(await element(by.css('h1')).getText()).toEqual('Bonjour i18n !'); }); - it('should display the node texts without elements', () => { - expect(element(by.css('app-root')).getText()).toContain(`Je n'affiche aucun élément`); + it('should display the node texts without elements', async () => { + expect(await element(by.css('app-root')).getText()).toContain(`Je n'affiche aucun élément`); }); - it('should display the translated title attribute', () => { - const title = element(by.css('img')).getAttribute('title'); + it('should display the translated title attribute', async () => { + const title = await element(by.css('img')).getAttribute('title'); expect(title).toBe(`Logo d'Angular`); }); - it('should display the ICU plural expression', () => { - expect(element.all(by.css('span')).get(0).getText()).toBe(`Mis à jour à l'instant`); + it('should display the ICU plural expression', async () => { + expect(await element.all(by.css('span')).get(0).getText()).toBe(`Mis à jour à l'instant`); }); - it('should display the ICU select expression', () => { + it('should display the ICU select expression', async () => { const selectIcuExp = element.all(by.css('span')).get(1); - expect(selectIcuExp.getText()).toBe(`L'auteur est une femme`); - element.all(by.css('button')).get(2).click(); - expect(selectIcuExp.getText()).toBe(`L'auteur est un homme`); + expect(await selectIcuExp.getText()).toBe(`L'auteur est une femme`); + await element.all(by.css('button')).get(2).click(); + expect(await selectIcuExp.getText()).toBe(`L'auteur est un homme`); }); - it('should display the nested expression', () => { + it('should display the nested expression', async () => { const nestedExp = element.all(by.css('span')).get(2); const incBtn = element.all(by.css('button')).get(0); - expect(nestedExp.getText()).toBe(`Mis à jour: à l'instant`); - incBtn.click(); - expect(nestedExp.getText()).toBe(`Mis à jour: il y a une minute`); - incBtn.click(); - incBtn.click(); - element.all(by.css('button')).get(4).click(); - expect(nestedExp.getText()).toBe(`Mis à jour: il y a 3 minutes par autre`); + expect(await nestedExp.getText()).toBe(`Mis à jour: à l'instant`); + await incBtn.click(); + expect(await nestedExp.getText()).toBe(`Mis à jour: il y a une minute`); + await incBtn.click(); + await incBtn.click(); + await element.all(by.css('button')).get(4).click(); + expect(await nestedExp.getText()).toBe(`Mis à jour: il y a 3 minutes par autre`); }); }); diff --git a/aio/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts b/aio/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts index 9fa48c7eb52c0..50816b32608a5 100644 --- a/aio/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts @@ -1,14 +1,11 @@ -import { browser, element, by } from 'protractor'; -import { logging } from 'selenium-webdriver'; +import { browser, element, by, logging } from 'protractor'; describe('Inputs and Outputs', () => { - beforeEach(() => browser.get('')); - // helper function used to test what's logged to the console - async function logChecker(button, contents) { + async function logChecker(contents) { const logs = await browser .manage() .logs() @@ -17,9 +14,9 @@ describe('Inputs and Outputs', () => { expect(messages.length).toBeGreaterThan(0); } - it('should have title Inputs and Outputs', () => { + it('should have title Inputs and Outputs', async () => { const title = element.all(by.css('h1')).get(0); - expect(title.getText()).toEqual('Inputs and Outputs'); + expect(await title.getText()).toEqual('Inputs and Outputs'); }); it('should add 123 to the parent list', async () => { @@ -28,36 +25,35 @@ describe('Inputs and Outputs', () => { const addedItem = element.all(by.css('li')).get(4); await addToListInput.sendKeys('123'); await addToParentButton.click(); - expect(addedItem.getText()).toEqual('123'); + expect(await addedItem.getText()).toEqual('123'); }); it('should delete item', async () => { const deleteButton = element.all(by.css('button')).get(1); const contents = 'Child'; await deleteButton.click(); - await logChecker(deleteButton, contents); + await logChecker(contents); }); it('should log buy the item', async () => { const buyButton = element.all(by.css('button')).get(2); const contents = 'Child'; await buyButton.click(); - await logChecker(buyButton, contents); + await logChecker(contents); }); it('should save item for later', async () => { const saveButton = element.all(by.css('button')).get(3); const contents = 'Child'; await saveButton.click(); - await logChecker(saveButton, contents); + await logChecker(contents); }); it('should add item to wishlist', async () => { const addToParentButton = element.all(by.css('button')).get(4); const addedItem = element.all(by.css('li')).get(6); await addToParentButton.click(); - expect(addedItem.getText()).toEqual('Television'); + expect(await addedItem.getText()).toEqual('Television'); }); }); - diff --git a/aio/content/examples/interpolation/e2e/src/app.e2e-spec.ts b/aio/content/examples/interpolation/e2e/src/app.e2e-spec.ts index 63e713bd981f8..d12b2c47f35b3 100644 --- a/aio/content/examples/interpolation/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/interpolation/e2e/src/app.e2e-spec.ts @@ -2,46 +2,44 @@ import { browser, element, by } from 'protractor'; describe('Interpolation e2e tests', () => { - beforeEach(() => { - browser.get(''); - }); + beforeEach(() => browser.get('')); - it('should display Interpolation and Template Expressions', () => { - expect(element(by.css('h1')).getText()).toEqual('Interpolation and Template Expressions'); + it('should display Interpolation and Template Expressions', async () => { + expect(await element(by.css('h1')).getText()).toEqual('Interpolation and Template Expressions'); }); - it('should display Current customer: Maria', () => { - expect(element.all(by.css('h3')).get(0).getText()).toBe(`Current customer: Maria`); + it('should display Current customer: Maria', async () => { + expect(await element.all(by.css('h3')).get(0).getText()).toBe(`Current customer: Maria`); }); - it('should display The sum of 1 + 1 is not 4.', () => { - expect(element.all(by.css('p:last-child')).get(0).getText()).toBe(`The sum of 1 + 1 is not 4.`); + it('should display The sum of 1 + 1 is not 4.', async () => { + expect(await element.all(by.css('p:last-child')).get(0).getText()).toBe(`The sum of 1 + 1 is not 4.`); }); - it('should display Expression Context', () => { - expect(element.all(by.css('h2')).get(1).getText()).toBe(`Expression Context`); + it('should display Expression Context', async () => { + expect(await element.all(by.css('h2')).get(1).getText()).toBe(`Expression Context`); }); - it('should display a list of customers', () => { - expect(element.all(by.css('li')).get(0).getText()).toBe(`Maria`); + it('should display a list of customers', async () => { + expect(await element.all(by.css('li')).get(0).getText()).toBe(`Maria`); }); - it('should display two pictures', () => { + it('should display two pictures', async () => { const pottedPlant = element.all(by.css('img')).get(0); const lamp = element.all(by.css('img')).get(1); - expect(pottedPlant.getAttribute('src')).toContain('potted-plant'); - expect(pottedPlant.isDisplayed()).toBe(true); + expect(await pottedPlant.getAttribute('src')).toContain('potted-plant'); + expect(await pottedPlant.isDisplayed()).toBe(true); - expect(lamp.getAttribute('src')).toContain('lamp'); - expect(lamp.isDisplayed()).toBe(true); + expect(await lamp.getAttribute('src')).toContain('lamp'); + expect(await lamp.isDisplayed()).toBe(true); }); - it('should support user input', () => { + it('should support user input', async () => { const input = element(by.css('input')); const label = element(by.css('label')); - expect(label.getText()).toEqual('Type something:'); - input.sendKeys('abc'); - expect(label.getText()).toEqual('Type something: abc'); + expect(await label.getText()).toEqual('Type something:'); + await input.sendKeys('abc'); + expect(await label.getText()).toEqual('Type something: abc'); }); }); diff --git a/aio/content/examples/lazy-loading-ngmodules/e2e/src/app.e2e-spec.ts b/aio/content/examples/lazy-loading-ngmodules/e2e/src/app.e2e-spec.ts index 744abfa7efb65..b7c0eef894faa 100644 --- a/aio/content/examples/lazy-loading-ngmodules/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/lazy-loading-ngmodules/e2e/src/app.e2e-spec.ts @@ -1,5 +1,5 @@ +import { element, by } from 'protractor'; import { AppPage } from './app.po'; -import { browser, element, by } from 'protractor'; describe('providers App', () => { @@ -7,41 +7,34 @@ describe('providers App', () => { const buttons = element.all(by.css('button')); const customersButton = buttons.get(0); const ordersButton = buttons.get(1); - const homeButton = buttons.get(2); - beforeEach(() => { + beforeEach(async () => { page = new AppPage(); + await page.navigateTo(); }); - it('should display message saying app works', () => { - page.navigateTo(); - expect(page.getTitleText()).toEqual('Lazy loading feature modules'); + it('should display message saying app works', async () => { + expect(await page.getTitleText()).toEqual('Lazy loading feature modules'); }); describe('Customers', () => { - beforeEach(() => { - customersButton.click(); - }); + beforeEach(() => customersButton.click()); - it('should show customers when the button is clicked', () => { - const customersMessage = element(by.css('app-customers > p')); - expect(customersMessage.getText()).toBe('customers works!'); + it('should show customers when the button is clicked', async () => { + const customersMessage = element(by.css('app-customers > p')); + expect(await customersMessage.getText()).toBe('customers works!'); }); }); describe('Orders', () => { - beforeEach(() => { - ordersButton.click(); - }); + beforeEach(() => ordersButton.click()); - it('should show orders when the button is clicked', () => { - const ordersMessage = element(by.css('app-orders > p')); - expect(ordersMessage.getText()).toBe('orders works!'); + it('should show orders when the button is clicked', async () => { + const ordersMessage = element(by.css('app-orders > p')); + expect(await ordersMessage.getText()).toBe('orders works!'); }); }); }); - - diff --git a/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts b/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts index 6ec9eb2e63d97..45422afe34539 100644 --- a/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts @@ -1,40 +1,41 @@ import { browser, element, ElementFinder, by } from 'protractor'; describe('Lifecycle hooks', () => { - const sendKeys = (el: ElementFinder, input: string) => - input.split('').reduce((prev, c) => prev.then(() => el.sendKeys(c)), Promise.resolve()); + const sendKeys = async (el: ElementFinder, input: string) => { + for (const c of input.split('')) { + await el.sendKeys(c); + } + }; - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); - it('should open correctly', () => { - expect(element.all(by.css('h2')).get(0).getText()).toEqual('Peek-A-Boo'); + it('should open correctly', async () => { + expect(await element.all(by.css('h2')).get(0).getText()).toEqual('Peek-A-Boo'); }); it('should support peek-a-boo', async () => { const pabComp = element(by.css('peek-a-boo-parent peek-a-boo')); - expect(pabComp.isPresent()).toBe(false, 'should not be able to find the "peek-a-boo" component'); + expect(await pabComp.isPresent()).toBe(false, 'should not be able to find the "peek-a-boo" component'); const pabButton = element.all(by.css('peek-a-boo-parent button')).get(0); const updateHeroButton = element.all(by.css('peek-a-boo-parent button')).get(1); - expect(pabButton.getText()).toContain('Create Peek'); + expect(await pabButton.getText()).toContain('Create Peek'); await pabButton.click(); - expect(pabButton.getText()).toContain('Destroy Peek'); - expect(pabComp.isDisplayed()).toBe(true, 'should be able to see the "peek-a-boo" component'); - expect(pabComp.getText()).toContain('Windstorm'); - expect(pabComp.getText()).not.toContain('Windstorm!'); - expect(updateHeroButton.isPresent()).toBe(true, 'should be able to see the update hero button'); + expect(await pabButton.getText()).toContain('Destroy Peek'); + expect(await pabComp.isDisplayed()).toBe(true, 'should be able to see the "peek-a-boo" component'); + expect(await pabComp.getText()).toContain('Windstorm'); + expect(await pabComp.getText()).not.toContain('Windstorm!'); + expect(await updateHeroButton.isPresent()).toBe(true, 'should be able to see the update hero button'); await updateHeroButton.click(); - expect(pabComp.getText()).toContain('Windstorm!'); + expect(await pabComp.getText()).toContain('Windstorm!'); await pabButton.click(); - expect(pabComp.isPresent()).toBe(false, 'should no longer be able to find the "peek-a-boo" component'); + expect(await pabComp.isPresent()).toBe(false, 'should no longer be able to find the "peek-a-boo" component'); }); - it('should support OnChanges hook', () => { + it('should support OnChanges hook', async () => { const onChangesViewEle = element.all(by.css('on-changes div')).get(0); const inputEles = element.all(by.css('on-changes-parent input')); const heroNameInputEle = inputEles.get(1); @@ -42,15 +43,15 @@ describe('Lifecycle hooks', () => { const titleEle = onChangesViewEle.element(by.css('p')); const changeLogEles = onChangesViewEle.all(by.css('div')); - expect(titleEle.getText()).toContain('Windstorm can sing'); - expect(changeLogEles.count()).toEqual(2, 'should start with 2 messages'); - heroNameInputEle.sendKeys('-foo-'); - expect(titleEle.getText()).toContain('Windstorm-foo- can sing'); - expect(changeLogEles.count()).toEqual(2, 'should still have 2 messages'); - powerInputEle.sendKeys('-bar-'); - expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-'); + expect(await titleEle.getText()).toContain('Windstorm can sing'); + expect(await changeLogEles.count()).toEqual(2, 'should start with 2 messages'); + await heroNameInputEle.sendKeys('-foo-'); + expect(await titleEle.getText()).toContain('Windstorm-foo- can sing'); + expect(await changeLogEles.count()).toEqual(2, 'should still have 2 messages'); + await powerInputEle.sendKeys('-bar-'); + expect(await titleEle.getText()).toContain('Windstorm-foo- can sing-bar-'); // 7 == 2 previously + length of '-bar-' - expect(changeLogEles.count()).toEqual(7, 'should have 7 messages now'); + expect(await changeLogEles.count()).toEqual(7, 'should have 7 messages now'); }); it('should support DoCheck hook', async () => { @@ -62,7 +63,7 @@ describe('Lifecycle hooks', () => { const changeLogEles = doCheckViewEle.all(by.css('div')); let logCount: number; - expect(titleEle.getText()).toContain('Windstorm can sing'); + expect(await titleEle.getText()).toContain('Windstorm can sing'); let count = await changeLogEles.count(); // 3 messages to start @@ -71,13 +72,13 @@ describe('Lifecycle hooks', () => { logCount = count; await sendKeys(heroNameInputEle, '-foo-'); count = await changeLogEles.count(); - expect(titleEle.getText()).toContain('Windstorm-foo- can sing'); + expect(await titleEle.getText()).toContain('Windstorm-foo- can sing'); expect(count).toBeGreaterThanOrEqual(logCount + 5, 'should add at least one more message for each keystroke'); logCount = count; await sendKeys(powerInputEle, '-bar-'); count = await changeLogEles.count(); - expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-'); + expect(await titleEle.getText()).toContain('Windstorm-foo- can sing-bar-'); expect(count).toBeGreaterThanOrEqual(logCount + 5, 'should add at least one more message for each keystroke'); }); @@ -89,15 +90,15 @@ describe('Lifecycle hooks', () => { const childViewInputEle = parentEle.element(by.css('app-child-view input')); let logCount: number; - expect(childViewInputEle.getAttribute('value')).toContain('Magneta'); - expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM'); + expect(await childViewInputEle.getAttribute('value')).toContain('Magneta'); + expect(await commentEle.isPresent()).toBe(false, 'comment should not be in DOM'); logCount = await logEles.count(); await childViewInputEle.sendKeys('-test-'); - expect(childViewInputEle.getAttribute('value')).toContain('-test-'); - expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars'); - expect(commentEle.getText()).toContain('long name'); + expect(await childViewInputEle.getAttribute('value')).toContain('-test-'); + expect(await commentEle.isPresent()).toBe(true, 'should have comment because >10 chars'); + expect(await commentEle.getText()).toContain('long name'); const count = await logEles.count(); expect(logCount + 7).toBeGreaterThan(count - 3, '7 additional log messages should have been added'); @@ -105,7 +106,7 @@ describe('Lifecycle hooks', () => { logCount = count; await buttonEle.click(); - expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset'); + expect(await logEles.count()).toBeLessThan(logCount, 'log should shrink after reset'); }); it('should support AfterContent hooks', async () => { @@ -116,19 +117,19 @@ describe('Lifecycle hooks', () => { const childViewInputEle = parentEle.element(by.css('app-child input')); let logCount = await logEles.count(); - expect(childViewInputEle.getAttribute('value')).toContain('Magneta'); - expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM'); + expect(await childViewInputEle.getAttribute('value')).toContain('Magneta'); + expect(await commentEle.isPresent()).toBe(false, 'comment should not be in DOM'); await sendKeys(childViewInputEle, '-test-'); const count = await logEles.count(); - expect(childViewInputEle.getAttribute('value')).toContain('-test-'); - expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars'); - expect(commentEle.getText()).toContain('long name'); + expect(await childViewInputEle.getAttribute('value')).toContain('-test-'); + expect(await commentEle.isPresent()).toBe(true, 'should have comment because >10 chars'); + expect(await commentEle.getText()).toContain('long name'); expect(count).toBeGreaterThanOrEqual(logCount + 5, 'additional log messages should have been added'); logCount = count; await buttonEle.click(); - expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset'); + expect(await logEles.count()).toBeLessThan(logCount, 'log should shrink after reset'); }); it('should support spy\'s OnInit & OnDestroy hooks', async () => { @@ -138,18 +139,18 @@ describe('Lifecycle hooks', () => { const heroEles = element.all(by.css('spy-parent div[appSpy')); const logEles = element.all(by.css('spy-parent h4 ~ div')); - expect(heroEles.count()).toBe(2, 'should have two heroes displayed'); - expect(logEles.count()).toBe(2, 'should have two log entries'); + expect(await heroEles.count()).toBe(2, 'should have two heroes displayed'); + expect(await logEles.count()).toBe(2, 'should have two log entries'); await inputEle.sendKeys('-test-'); await addHeroButtonEle.click(); - expect(heroEles.count()).toBe(3, 'should have added one hero'); - expect(heroEles.get(2).getText()).toContain('-test-'); - expect(logEles.count()).toBe(3, 'should now have 3 log entries'); + expect(await heroEles.count()).toBe(3, 'should have added one hero'); + expect(await heroEles.get(2).getText()).toContain('-test-'); + expect(await logEles.count()).toBe(3, 'should now have 3 log entries'); await resetHeroesButtonEle.click(); - expect(heroEles.count()).toBe(0, 'should no longer have any heroes'); - expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 orig + 1 reset + 3 removeall'); + expect(await heroEles.count()).toBe(0, 'should no longer have any heroes'); + expect(await logEles.count()).toBe(7, 'should now have 7 log entries - 3 orig + 1 reset + 3 removeall'); }); it('should support "spy counter"', async () => { @@ -158,15 +159,15 @@ describe('Lifecycle hooks', () => { const textEle = element(by.css('counter-parent app-counter > div')); const logEles = element.all(by.css('counter-parent h4 ~ div')); - expect(textEle.getText()).toContain('Counter = 0'); - expect(logEles.count()).toBe(2, 'should start with two log entries'); + expect(await textEle.getText()).toContain('Counter = 0'); + expect(await logEles.count()).toBe(2, 'should start with two log entries'); await updateCounterButtonEle.click(); - expect(textEle.getText()).toContain('Counter = 1'); - expect(logEles.count()).toBe(3, 'should now have 3 log entries'); + expect(await textEle.getText()).toContain('Counter = 1'); + expect(await logEles.count()).toBe(3, 'should now have 3 log entries'); await resetCounterButtonEle.click(); - expect(textEle.getText()).toContain('Counter = 0'); - expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 prev + 1 reset + 2 destroy + 1 init'); + expect(await textEle.getText()).toContain('Counter = 0'); + expect(await logEles.count()).toBe(7, 'should now have 7 log entries - 3 prev + 1 reset + 2 destroy + 1 init'); }); }); diff --git a/aio/content/examples/ngmodules/e2e/src/app.e2e-spec.ts b/aio/content/examples/ngmodules/e2e/src/app.e2e-spec.ts index 4660126083e3b..9e7613caf3a13 100644 --- a/aio/content/examples/ngmodules/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/ngmodules/e2e/src/app.e2e-spec.ts @@ -56,116 +56,109 @@ describe('NgModule-example', () => { // tests function appTitleTests(color: string, name?: string) { return () => { - it('should have a gray header', () => { + it('should have a gray header', async () => { const commons = getCommonsSectionStruct(); - expect(commons.title.getCssValue('backgroundColor')).toBe(color); + expect(await commons.title.getCssValue('backgroundColor')).toBe(color); }); - it('should welcome us', () => { + it('should welcome us', async () => { const commons = getCommonsSectionStruct(); - expect(commons.subtitle.getText()).toBe('Welcome, ' + (name || 'Miss Marple')); + expect(await commons.subtitle.getText()).toBe(`Welcome, ${name || 'Miss Marple'}`); }); }; } function contactTests(color: string, name?: string) { return () => { - it('shows the contact\'s owner', () => { + it('shows the contact\'s owner', async () => { const contacts = getContactSectionStruct(); - expect(contacts.header.getText()).toBe((name || 'Miss Marple') + '\'s Contacts'); + expect(await contacts.header.getText()).toBe(`${name || 'Miss Marple'}'s Contacts`); }); - it('can cycle between contacts', () => { + it('can cycle between contacts', async () => { const contacts = getContactSectionStruct(); const nextButton = contacts.nextContactButton; - expect(contacts.contactNameHeader.getText()).toBe('Awesome Yasha'); - expect(contacts.contactNameHeader.getCssValue('backgroundColor')).toBe(color); - nextButton.click().then(() => { - expect(contacts.contactNameHeader.getText()).toBe('Awesome Iulia'); - return nextButton.click(); - }).then(() => { - expect(contacts.contactNameHeader.getText()).toBe('Awesome Karina'); - }); + expect(await contacts.contactNameHeader.getText()).toBe('Awesome Yasha'); + expect(await contacts.contactNameHeader.getCssValue('backgroundColor')).toBe(color); + + await nextButton.click(); + expect(await contacts.contactNameHeader.getText()).toBe('Awesome Iulia'); + + await nextButton.click(); + expect(await contacts.contactNameHeader.getText()).toBe('Awesome Karina'); }); - it('can create a new contact', () => { + it('can create a new contact', async () => { const contacts = getContactSectionStruct(); const newContactButton = contacts.newContactButton; const nextButton = contacts.nextContactButton; const input = contacts.input; const saveButton = contacts.saveButton; - newContactButton.click().then(() => { - input.click(); - nextButton.click(); - expect(contacts.validationError.getText()).toBe('Name is required.'); - input.click(); - contacts.input.sendKeys('Watson'); - saveButton.click(); - expect(contacts.contactNameHeader.getText()).toBe('Awesome Watson'); + await newContactButton.click(); + await input.click(); + await nextButton.click(); + expect(await contacts.validationError.getText()).toBe('Name is required.'); - }); + await input.click(); + await contacts.input.sendKeys('Watson'); + await saveButton.click(); + expect(await contacts.contactNameHeader.getText()).toBe('Awesome Watson'); }); }; } describe('index.html', () => { - beforeEach(() => { - browser.get(''); - }); + beforeEach(() => browser.get('')); describe('app-title', appTitleTests(white, 'Miss Marple')); describe('contact', contactTests(lightgray, 'Miss Marple')); describe('item center', () => { - beforeEach(() => { - getCommonsSectionStruct().itemButton.click(); - }); + beforeEach(() => getCommonsSectionStruct().itemButton.click()); - it('shows a list of items', () => { + it('shows a list of items', async () => { const item = getItemSectionStruct(); - expect(item.title.getText()).toBe('Items List'); - expect(item.items.count()).toBe(4); - expect(item.items.get(0).getText()).toBe('1 - Sticky notes'); + expect(await item.title.getText()).toBe('Items List'); + expect(await item.items.count()).toBe(4); + expect(await item.items.get(0).getText()).toBe('1 - Sticky notes'); }); - it('can navigate to one item details', () => { + it('can navigate to one item details', async () => { const item = getItemSectionStruct(); - item.items.get(0).click().then(() => { - expect(item.itemId.getText()).toBe('Item id: 1'); - return item.listLink.click(); - }).then(() => { - // We are back to the list - expect(item.items.count()).toBe(4); - }); + + await item.items.get(0).click(); + expect(await item.itemId.getText()).toBe('Item id: 1'); + + await item.listLink.click(); + // We are back to the list + expect(await item.items.count()).toBe(4); }); }); describe('customers', () => { - beforeEach(() => { - getCommonsSectionStruct().customersButton.click(); - }); + beforeEach(() => getCommonsSectionStruct().customersButton.click()); - it('shows a list of customers', () => { + it('shows a list of customers', async () => { const customers = getCustomersSectionStruct(); - expect(customers.header.getText()).toBe('Customers of Miss Marple times 2'); - expect(customers.title.getText()).toBe('Customer List'); - expect(customers.items.count()).toBe(6); - expect(customers.items.get(0).getText()).toBe('11 - Julian'); + expect(await customers.header.getText()).toBe('Customers of Miss Marple times 2'); + expect(await customers.title.getText()).toBe('Customer List'); + expect(await customers.items.count()).toBe(6); + expect(await customers.items.get(0).getText()).toBe('11 - Julian'); }); - it('can navigate and edit one customer details', () => { + it('can navigate and edit one customer details', async () => { const customers = getCustomersSectionStruct(); - customers.items.get(0).click().then(() => { - expect(customers.itemId.getText()).toBe('Id: 11'); - customers.itemInput.sendKeys(' try'); - return customers.listLink.click(); - }).then(() => { - // We are back to the list - expect(customers.items.count()).toBe(6); - expect(customers.items.get(0).getText()).toBe('11 - Julian try'); - }); + + await customers.items.get(0).click(); + expect(await customers.itemId.getText()).toBe('Id: 11'); + + await customers.itemInput.sendKeys(' try'); + await customers.listLink.click(); + // We are back to the list + expect(await customers.items.count()).toBe(6); + expect(await customers.items.get(0).getText()).toBe('11 - Julian try'); }); }); }); diff --git a/aio/content/examples/pipes/e2e/src/app.e2e-spec.ts b/aio/content/examples/pipes/e2e/src/app.e2e-spec.ts index e4ef900a6c24a..cabb8f0baae07 100644 --- a/aio/content/examples/pipes/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/pipes/e2e/src/app.e2e-spec.ts @@ -1,114 +1,108 @@ import { browser, element, by } from 'protractor'; -const { version: angularVersion } = require('@angular/core/package.json'); describe('Pipes', () => { - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); - it('should open correctly', () => { - expect(element.all(by.tagName('h1')).get(0).getText()).toEqual('Pipes'); - expect(element(by.css('app-hero-birthday p')).getText()).toEqual(`The hero's birthday is Apr 15, 1988`); + it('should open correctly', async () => { + expect(await element.all(by.tagName('h1')).get(0).getText()).toEqual('Pipes'); + expect(await element(by.css('app-hero-birthday p')).getText()).toEqual(`The hero's birthday is Apr 15, 1988`); }); - it('should show 4 heroes', () => { - expect(element.all(by.css('app-hero-list div')).count()).toEqual(4); + it('should show 4 heroes', async () => { + expect(await element.all(by.css('app-hero-list div')).count()).toEqual(4); }); - it('should show a familiar hero in json', () => { - expect(element(by.cssContainingText('app-hero-list p', 'Heroes as JSON')).getText()).toContain('Bombasto'); + it('should show a familiar hero in json', async () => { + expect(await element(by.cssContainingText('app-hero-list p', 'Heroes as JSON')).getText()).toContain('Bombasto'); }); - it('should show alternate birthday formats', () => { - expect(element(by.cssContainingText('app-root > p', `The hero's birthday is Apr 15, 1988`)).isDisplayed()).toBe(true); - expect(element(by.cssContainingText('app-root > p', `The hero's birthday is 04/15/88`)).isDisplayed()).toBe(true); + it('should show alternate birthday formats', async () => { + expect(await element(by.cssContainingText('app-root > p', `The hero's birthday is Apr 15, 1988`)).isDisplayed()) + .toBe(true); + expect(await element(by.cssContainingText('app-root > p', `The hero's birthday is 04/15/88`)).isDisplayed()) + .toBe(true); }); - it('should be able to toggle birthday formats', () => { + it('should be able to toggle birthday formats', async () => { const birthDayEle = element(by.css('app-hero-birthday2 > p')); - if (angularVersion.indexOf('4.') === 0) { // Breaking change between v4 and v5 (https://github.com/angular/angular/commit/079d884) - expect(birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/1988`); - } else { - expect(birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/88`); - } + expect(await birthDayEle.getText()).toEqual(`The hero's birthday is 4/15/88`); + const buttonEle = element(by.cssContainingText('app-hero-birthday2 > button', 'Toggle Format')); - expect(buttonEle.isDisplayed()).toBe(true); - buttonEle.click().then(() => { - expect(birthDayEle.getText()).toEqual(`The hero's birthday is Friday, April 15, 1988`); - }); + expect(await buttonEle.isDisplayed()).toBe(true); + + await buttonEle.click(); + expect(await birthDayEle.getText()).toEqual(`The hero's birthday is Friday, April 15, 1988`); }); - it('should be able to chain and compose pipes', () => { + it('should be able to chain and compose pipes', async () => { const chainedPipeEles = element.all(by.cssContainingText('app-root p', `The chained hero's`)); - expect(chainedPipeEles.count()).toBe(3, 'should have 3 chained pipe examples'); - expect(chainedPipeEles.get(0).getText()).toContain('APR 15, 1988'); - expect(chainedPipeEles.get(1).getText()).toContain('FRIDAY, APRIL 15, 1988'); - expect(chainedPipeEles.get(2).getText()).toContain('FRIDAY, APRIL 15, 1988'); + expect(await chainedPipeEles.count()).toBe(3, 'should have 3 chained pipe examples'); + expect(await chainedPipeEles.get(0).getText()).toContain('APR 15, 1988'); + expect(await chainedPipeEles.get(1).getText()).toContain('FRIDAY, APRIL 15, 1988'); + expect(await chainedPipeEles.get(2).getText()).toContain('FRIDAY, APRIL 15, 1988'); }); - it('should be able to use ExponentialStrengthPipe pipe', () => { + it('should be able to use ExponentialStrengthPipe pipe', async () => { const ele = element(by.css('app-power-booster p')); - expect(ele.getText()).toContain('Super power boost: 1024'); + expect(await ele.getText()).toContain('Super power boost: 1024'); }); - it('should be able to use the exponential calculator', () => { + it('should be able to use the exponential calculator', async () => { const eles = element.all(by.css('app-power-boost-calculator input')); const baseInputEle = eles.get(0); const factorInputEle = eles.get(1); const outputEle = element(by.css('app-power-boost-calculator p')); - baseInputEle.clear().then(() => { - baseInputEle.sendKeys('7'); - return factorInputEle.clear(); - }).then(() => { - factorInputEle.sendKeys('3'); - expect(outputEle.getText()).toContain('343'); - }); + + await baseInputEle.clear(); + await baseInputEle.sendKeys('7'); + await factorInputEle.clear(); + await factorInputEle.sendKeys('3'); + expect(await outputEle.getText()).toContain('343'); }); - it('should support flying heroes (pure) ', () => { + it('should support flying heroes (pure) ', async () => { const nameEle = element(by.css('app-flying-heroes input[type="text"]')); const canFlyCheckEle = element(by.css('app-flying-heroes #can-fly')); const mutateCheckEle = element(by.css('app-flying-heroes #mutate')); const resetEle = element(by.css('app-flying-heroes button')); const flyingHeroesEle = element.all(by.css('app-flying-heroes #flyers div')); - expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"'); - expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array'); - expect(flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly'); - - nameEle.sendKeys('test1\n'); - expect(flyingHeroesEle.count()).toEqual(2, 'no change while mutating array'); - mutateCheckEle.click().then(() => { - nameEle.sendKeys('test2\n'); - expect(flyingHeroesEle.count()).toEqual(4, 'not mutating; should see both adds'); - expect(flyingHeroesEle.get(2).getText()).toContain('test1'); - expect(flyingHeroesEle.get(3).getText()).toContain('test2'); - return resetEle.click(); - }) - .then(() => { - expect(flyingHeroesEle.count()).toEqual(2, 'reset should restore original flying heroes'); - }); + expect(await canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"'); + expect(await mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array'); + expect(await flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly'); + + await nameEle.sendKeys('test1\n'); + expect(await flyingHeroesEle.count()).toEqual(2, 'no change while mutating array'); + + await mutateCheckEle.click(); + await nameEle.sendKeys('test2\n'); + expect(await flyingHeroesEle.count()).toEqual(4, 'not mutating; should see both adds'); + expect(await flyingHeroesEle.get(2).getText()).toContain('test1'); + expect(await flyingHeroesEle.get(3).getText()).toContain('test2'); + + await resetEle.click(); + expect(await flyingHeroesEle.count()).toEqual(2, 'reset should restore original flying heroes'); }); - it('should support flying heroes (impure) ', () => { + it('should support flying heroes (impure) ', async () => { const nameEle = element(by.css('app-flying-heroes-impure input[type="text"]')); const canFlyCheckEle = element(by.css('app-flying-heroes-impure #can-fly')); const mutateCheckEle = element(by.css('app-flying-heroes-impure #mutate')); const flyingHeroesEle = element.all(by.css('app-flying-heroes-impure #flyers div')); - expect(canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"'); - expect(mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array'); - expect(flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly'); + expect(await canFlyCheckEle.getAttribute('checked')).toEqual('true', 'should default to "can fly"'); + expect(await mutateCheckEle.getAttribute('checked')).toEqual('true', 'should default to mutating array'); + expect(await flyingHeroesEle.count()).toEqual(2, 'only two of the original heroes can fly'); - nameEle.sendKeys('test1\n'); - expect(flyingHeroesEle.count()).toEqual(3, 'new flying hero should show in mutating array'); + await nameEle.sendKeys('test1\n'); + expect(await flyingHeroesEle.count()).toEqual(3, 'new flying hero should show in mutating array'); }); - it('should show an async hero message', () => { - expect(element.all(by.tagName('app-hero-message')).get(0).getText()).toContain('hero'); + it('should show an async hero message', async () => { + expect(await element.all(by.tagName('app-hero-message')).get(0).getText()).toContain('hero'); }); }); diff --git a/aio/content/examples/property-binding/e2e/src/app.e2e-spec.ts b/aio/content/examples/property-binding/e2e/src/app.e2e-spec.ts index 97a9060e96cb3..b134930d07475 100644 --- a/aio/content/examples/property-binding/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/property-binding/e2e/src/app.e2e-spec.ts @@ -3,52 +3,50 @@ import { browser, element, by } from 'protractor'; describe('Property binding e2e tests', () => { - beforeEach(() => { - browser.get(''); - }); + beforeEach(() => browser.get('')); - it('should display Property Binding with Angular', () => { - expect(element(by.css('h1')).getText()).toEqual('Property Binding with Angular'); + it('should display Property Binding with Angular', async () => { + expect(await element(by.css('h1')).getText()).toEqual('Property Binding with Angular'); }); - it('should display four phone pictures', () => { - expect(element.all(by.css('img')).isPresent()).toBe(true); - expect(element.all(by.css('img')).count()).toBe(4); - + it('should display four phone pictures', async () => { + expect(await element.all(by.css('img')).isPresent()).toBe(true); + expect(await element.all(by.css('img')).count()).toBe(4); }); - it('should display Disabled button', () => { - expect(element.all(by.css('button')).get(0).getText()).toBe(`Disabled Button`); + it('should display Disabled button', async () => { + expect(await element.all(by.css('button')).get(0).getText()).toBe(`Disabled Button`); }); - it('should display Binding to a property of a directive', () => { - expect(element.all(by.css('h2')).get(4).getText()).toBe(`Binding to a property of a directive`); + it('should display Binding to a property of a directive', async () => { + expect(await element.all(by.css('h2')).get(4).getText()).toBe(`Binding to a property of a directive`); }); - it('should display Your item is: lamp', () => { - expect(element.all(by.css('p')).get(0).getText()).toContain(`blue`); + it('should display blue', async () => { + expect(await element.all(by.css('p')).get(0).getText()).toContain(`blue`); }); - it('should display Your item is: lamp', () => { - expect(element.all(by.css('p')).get(1).getText()).toContain(`Your item is: lamp`); + + it('should display Your item is: lamp', async () => { + expect(await element.all(by.css('p')).get(1).getText()).toContain(`Your item is: lamp`); }); - it('should display Your item is: parentItem', () => { - expect(element.all(by.css('p')).get(2).getText()).toBe(`Your item is: parentItem`); + it('should display Your item is: parentItem', async () => { + expect(await element.all(by.css('p')).get(2).getText()).toBe(`Your item is: parentItem`); }); - it('should display a ul', () => { - expect(element.all(by.css('ul')).get(0).getText()).toContain(`tv`); + it('should display a ul', async () => { + expect(await element.all(by.css('ul')).get(0).getText()).toContain(`tv`); }); - it('should display a ul containing phone', () => { - expect(element.all(by.css('ul')).get(1).getText()).toBe(`21 phone`); + it('should display a ul containing phone', async () => { + expect(await element.all(by.css('ul')).get(1).getText()).toBe(`21 phone`); }); - it('should display one-time initialized string', () => { - expect(element.all(by.css('p')).get(3).getText()).toContain(`one-time initialized`); + it('should display one-time initialized string', async () => { + expect(await element.all(by.css('p')).get(3).getText()).toContain(`one-time initialized`); }); - it('should display Malicious content', () => { - expect(element.all(by.css('h2')).get(8).getText()).toBe(`Malicious content`); + it('should display Malicious content', async () => { + expect(await element.all(by.css('h2')).get(8).getText()).toBe(`Malicious content`); }); }); diff --git a/aio/content/examples/providers-viewproviders/e2e/src/app.e2e-spec.ts b/aio/content/examples/providers-viewproviders/e2e/src/app.e2e-spec.ts index e9ff9138bbcfc..a351968b704d5 100644 --- a/aio/content/examples/providers-viewproviders/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/providers-viewproviders/e2e/src/app.e2e-spec.ts @@ -1,24 +1,19 @@ import { browser, element, by } from 'protractor'; -import { logging } from 'selenium-webdriver'; describe('Providers and ViewProviders', () => { + beforeEach(() => browser.get('')); - beforeEach(() => { - browser.get(''); + it('shows basic flower emoji', async () => { + expect(await element.all(by.css('p')).get(0).getText()).toContain('🌺'); }); - it('shows basic flower emoji', () => { - expect(element.all(by.css('p')).get(0).getText()).toContain('🌺'); + it('shows whale emoji', async () => { + expect(await element.all(by.css('p')).get(1).getText()).toContain('🐳'); }); - it('shows whale emoji', () => { - expect(element.all(by.css('p')).get(1).getText()).toContain('🐳'); - }); - - it('shows sunflower from FlowerService', () => { - expect(element.all(by.css('p')).get(8).getText()).toContain('🌻'); + it('shows sunflower from FlowerService', async () => { + expect(await element.all(by.css('p')).get(8).getText()).toContain('🌻'); }); }); - diff --git a/aio/content/examples/providers/e2e/src/app.e2e-spec.ts b/aio/content/examples/providers/e2e/src/app.e2e-spec.ts index 76a09e389f2ef..1281bd979593f 100644 --- a/aio/content/examples/providers/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/providers/e2e/src/app.e2e-spec.ts @@ -1,37 +1,23 @@ +import { element, by } from 'protractor'; import { AppPage } from './app.po'; -import { browser, element, by } from 'protractor'; describe('providers App', () => { let page: AppPage; - beforeEach(() => { + beforeEach(async () => { page = new AppPage(); + await page.navigateTo(); }); - function getUsersStruct() { - return { - user: element.all(by.css('ng-component li')).get(0), - userId: element.all(by.css('ng-component span')).get(0) - }; - } - - function getListSectionStruct() { - return { - items: element.all(by.css('app-root li')) - }; - } - - it('should display header that says Users list', () => { - page.navigateTo(); - expect(page.getTitleText()).toEqual('Users list'); + it('should display header that says Users list', async () => { + expect(await page.getTitleText()).toEqual('Users list'); }); - - it('shows a list of customers', () => { - const list = getListSectionStruct(); - expect(list.items.count()).toBe(10); - expect(list.items.get(0).getText()).toBe('1 Maria'); - expect(list.items.get(9).getText()).toBe('10 Seth'); + it('shows a list of customers', async () => { + const items = element.all(by.css('app-root li')); + expect(await items.count()).toBe(10); + expect(await items.get(0).getText()).toBe('1 Maria'); + expect(await items.get(9).getText()).toBe('10 Seth'); }); }); diff --git a/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts b/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts index 8fe627ced7116..53c3d756b7db5 100644 --- a/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts @@ -6,9 +6,7 @@ describe('Reactive forms', () => { const nameEditorLink = element(by.cssContainingText('app-root > nav > a', 'Name Editor')); const profileEditorLink = element(by.cssContainingText('app-root > nav > a', 'Profile Editor')); - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); describe('Name Editor', () => { const nameInput = nameEditor.element(by.css('input')); @@ -55,7 +53,6 @@ describe('Reactive forms', () => { describe('Profile Editor', () => { const firstNameInput = getInput('firstName'); - const lastNameInput = getInput('lastName'); const streetInput = getInput('street'); const addAliasButton = element(by.buttonText('Add Alias')); const updateButton = profileEditor.element(by.buttonText('Update Profile')); @@ -117,7 +114,7 @@ describe('Reactive forms', () => { it('should update the displayed form value when form inputs are updated', async () => { const aliasText = 'Johnny'; - const inputs = await Promise.all( + await Promise.all( Object.keys(profile) .map(key => getInput(key).sendKeys(`${profile[key]}`) diff --git a/aio/content/examples/resolution-modifiers/e2e/src/app.e2e-spec.ts b/aio/content/examples/resolution-modifiers/e2e/src/app.e2e-spec.ts index dc78e01102fa8..1f1b85d289165 100644 --- a/aio/content/examples/resolution-modifiers/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/resolution-modifiers/e2e/src/app.e2e-spec.ts @@ -2,20 +2,18 @@ import { browser, element, by } from 'protractor'; describe('Resolution-modifiers-example', () => { - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); - it('shows basic flower emoji', () => { - expect(element.all(by.css('p')).get(0).getText()).toContain('🌸'); + it('shows basic flower emoji', async () => { + expect(await element.all(by.css('p')).get(0).getText()).toContain('🌸'); }); - it('shows basic leaf emoji', () => { - expect(element.all(by.css('p')).get(1).getText()).toContain('🌿'); + it('shows basic leaf emoji', async () => { + expect(await element.all(by.css('p')).get(1).getText()).toContain('🌿'); }); - it('shows yellow flower in host child', () => { - expect(element.all(by.css('p')).get(9).getText()).toContain('🌼'); + it('shows yellow flower in host child', async () => { + expect(await element.all(by.css('p')).get(9).getText()).toContain('🌼'); }); }); diff --git a/aio/content/examples/router-tutorial/e2e/src/app.e2e-spec.ts b/aio/content/examples/router-tutorial/e2e/src/app.e2e-spec.ts index ac01714126ee3..c73d879e8ec6d 100644 --- a/aio/content/examples/router-tutorial/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/router-tutorial/e2e/src/app.e2e-spec.ts @@ -2,41 +2,39 @@ import { browser, element, by } from 'protractor'; describe('Router basic tutorial e2e tests', () => { - beforeEach(() => { - browser.get(''); - }); + beforeEach(() => browser.get('')); - it('should display Angular Router Sample', () => { - expect(element(by.css('h1')).getText()).toBe('Angular Router Sample'); + it('should display Angular Router Sample', async () => { + expect(await element(by.css('h1')).getText()).toBe('Angular Router Sample'); }); - it('should display Crisis Center button', () => { - expect(element.all(by.css('a')).get(0).getText()).toBe('Crisis Center'); + it('should display Crisis Center button', async () => { + expect(await element.all(by.css('a')).get(0).getText()).toBe('Crisis Center'); }); - it('should display Heroes button', () => { - expect(element.all(by.css('a')).get(1).getText()).toBe('Heroes'); + it('should display Heroes button', async () => { + expect(await element.all(by.css('a')).get(1).getText()).toBe('Heroes'); }); - it('should display HEROES', () => { - expect(element(by.css('h3')).getText()).toBe('HEROES'); + it('should display HEROES', async () => { + expect(await element(by.css('h3')).getText()).toBe('HEROES'); }); it('should change to display crisis list component', async () => { const crisisButton = element.all(by.css('a')).get(0); await crisisButton.click(); - expect(element(by.css('h3')).getText()).toBe('CRISIS CENTER'); + expect(await element(by.css('h3')).getText()).toBe('CRISIS CENTER'); }); it('should change to display heroes component', async () => { const heroesButton = element.all(by.css('a')).get(1); await heroesButton.click(); - expect(element(by.css('h3')).getText()).toBe('HEROES'); + expect(await element(by.css('h3')).getText()).toBe('HEROES'); }); it('should use wildcard route', async () => { - browser.get('/fake-page'); - expect(browser.getCurrentUrl()).toContain('fake-page'); - expect(element(by.css('h2')).getText()).toBe('Page Not Found'); + await browser.get('/fake-page'); + expect(await browser.getCurrentUrl()).toContain('fake-page'); + expect(await element(by.css('h2')).getText()).toBe('Page Not Found'); }); }); diff --git a/aio/content/examples/router/e2e/src/app.e2e-spec.ts b/aio/content/examples/router/e2e/src/app.e2e-spec.ts index 00d3bad6dea14..ae174e549eaf0 100644 --- a/aio/content/examples/router/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/router/e2e/src/app.e2e-spec.ts @@ -1,9 +1,8 @@ -import { browser, element, by, ExpectedConditions } from 'protractor'; +import { browser, element, by, ExpectedConditions as EC } from 'protractor'; const numDashboardTabs = 5; const numCrises = 4; const numHeroes = 10; -const EC = ExpectedConditions; describe('Router', () => { @@ -43,43 +42,43 @@ describe('Router', () => { }; } - it('has expected dashboard tabs', () => { + it('has expected dashboard tabs', async () => { const page = getPageStruct(); - expect(page.hrefs.count()).toEqual(numDashboardTabs, 'dashboard tab count'); - expect(page.crisisHref.getText()).toEqual('Crisis Center'); - expect(page.heroesHref.getText()).toEqual('Heroes'); - expect(page.adminHref.getText()).toEqual('Admin'); - expect(page.loginHref.getText()).toEqual('Login'); - expect(page.contactHref.getText()).toEqual('Contact'); + expect(await page.hrefs.count()).toEqual(numDashboardTabs, 'dashboard tab count'); + expect(await page.crisisHref.getText()).toEqual('Crisis Center'); + expect(await page.heroesHref.getText()).toEqual('Heroes'); + expect(await page.adminHref.getText()).toEqual('Admin'); + expect(await page.loginHref.getText()).toEqual('Login'); + expect(await page.contactHref.getText()).toEqual('Contact'); }); - it('has heroes selected as opening tab', () => { + it('has heroes selected as opening tab', async () => { const page = getPageStruct(); - expect(page.activeHref.getText()).toEqual('Heroes'); + expect(await page.activeHref.getText()).toEqual('Heroes'); }); it('has crises center items', async () => { const page = getPageStruct(); await page.crisisHref.click(); - expect(page.activeHref.getText()).toEqual('Crisis Center'); - expect(page.crisisList.count()).toBe(numCrises, 'crisis list count'); + expect(await page.activeHref.getText()).toEqual('Crisis Center'); + expect(await page.crisisList.count()).toBe(numCrises, 'crisis list count'); }); it('has hero items', async () => { const page = getPageStruct(); await page.heroesHref.click(); - expect(page.activeHref.getText()).toEqual('Heroes'); - expect(page.heroesList.count()).toBe(numHeroes, 'hero list count'); + expect(await page.activeHref.getText()).toEqual('Heroes'); + expect(await page.heroesList.count()).toBe(numHeroes, 'hero list count'); }); it('toggles views', async () => { const page = getPageStruct(); await page.crisisHref.click(); - expect(page.activeHref.getText()).toEqual('Crisis Center'); - expect(page.crisisList.count()).toBe(numCrises, 'crisis list count'); + expect(await page.activeHref.getText()).toEqual('Crisis Center'); + expect(await page.crisisList.count()).toBe(numCrises, 'crisis list count'); await page.heroesHref.click(); - expect(page.activeHref.getText()).toEqual('Heroes'); - expect(page.heroesList.count()).toBe(numHeroes, 'hero list count'); + expect(await page.activeHref.getText()).toEqual('Heroes'); + expect(await page.heroesList.count()).toBe(numHeroes, 'hero list count'); }); it('saves changed crisis details', async () => { @@ -107,17 +106,17 @@ describe('Router', () => { await heroEle.click(); await browser.sleep(600); - expect(page.heroesList.count()).toBe(0, 'hero list count'); - expect(page.heroDetail.isPresent()).toBe(true, 'hero detail'); - expect(page.heroDetailTitle.getText()).toContain(heroText); + expect(await page.heroesList.count()).toBe(0, 'hero list count'); + expect(await page.heroDetail.isPresent()).toBe(true, 'hero detail'); + expect(await page.heroDetailTitle.getText()).toContain(heroText); const inputEle = page.heroDetail.element(by.css('input')); await inputEle.sendKeys('-foo'); - expect(page.heroDetailTitle.getText()).toContain(heroText + '-foo'); + expect(await page.heroDetailTitle.getText()).toContain(heroText + '-foo'); const buttonEle = page.heroDetail.element(by.css('button')); await buttonEle.click(); await browser.sleep(600); - expect(heroEle.getText()).toContain(heroText + '-foo'); + expect(await heroEle.getText()).toContain(heroText + '-foo'); }); it('sees preloaded modules', async () => { @@ -125,7 +124,7 @@ describe('Router', () => { await page.loginHref.click(); await page.loginButton.click(); const list = page.adminPreloadList; - expect(list.count()).toBe(1, 'preloaded module'); + expect(await list.count()).toBe(1, 'preloaded module'); expect(await list.first().getText()).toBe('crisis-center', 'first preloaded module'); }); @@ -133,8 +132,8 @@ describe('Router', () => { const page = getPageStruct(); await page.heroesHref.click(); await page.contactHref.click(); - expect(page.primaryOutlet.count()).toBe(1, 'primary outlet'); - expect(page.secondaryOutlet.count()).toBe(1, 'secondary outlet'); + expect(await page.primaryOutlet.count()).toBe(1, 'primary outlet'); + expect(await page.secondaryOutlet.count()).toBe(1, 'secondary outlet'); }); it('should redirect with secondary route', async () => { @@ -159,7 +158,7 @@ describe('Router', () => { await page.loginButton.click(); expect(await page.adminPage.isDisplayed()).toBeTruthy(); - expect(page.secondaryOutlet.count()).toBeTruthy(); + expect(await page.secondaryOutlet.count()).toBeTruthy(); }); async function crisisCenterEdit(index: number, save: boolean) { @@ -172,8 +171,8 @@ describe('Router', () => { const crisisText = text.substr(text.indexOf(' ')).trim(); await crisisEle.click(); - expect(page.crisisDetail.isPresent()).toBe(true, 'crisis detail present'); - expect(page.crisisDetailTitle.getText()).toContain(crisisText); + expect(await page.crisisDetail.isPresent()).toBe(true, 'crisis detail present'); + expect(await page.crisisDetailTitle.getText()).toContain(crisisText); const inputEle = page.crisisDetail.element(by.css('input')); await inputEle.sendKeys('-foo'); @@ -181,11 +180,11 @@ describe('Router', () => { await buttonEle.click(); crisisEle = page.crisisList.get(index); if (save) { - expect(crisisEle.getText()).toContain(crisisText + '-foo'); + expect(await crisisEle.getText()).toContain(crisisText + '-foo'); } else { await browser.wait(EC.alertIsPresent(), 4000); await browser.switchTo().alert().accept(); - expect(crisisEle.getText()).toContain(crisisText); + expect(await crisisEle.getText()).toContain(crisisText); } } diff --git a/aio/content/examples/security/e2e/src/app.e2e-spec.ts b/aio/content/examples/security/e2e/src/app.e2e-spec.ts index 2a071ab074389..fb8c75ae5870e 100644 --- a/aio/content/examples/security/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/security/e2e/src/app.e2e-spec.ts @@ -3,33 +3,33 @@ import { browser, element, By } from 'protractor'; describe('Security E2E Tests', () => { beforeAll(() => browser.get('')); - it('sanitizes innerHTML', () => { + it('sanitizes innerHTML', async () => { const interpolated = element(By.className('e2e-inner-html-interpolated')); - expect(interpolated.getText()) + expect(await interpolated.getText()) .toContain('Template Syntax'); const bound = element(By.className('e2e-inner-html-bound')); - expect(bound.getText()).toContain('Template Syntax'); + expect(await bound.getText()).toContain('Template Syntax'); const bold = element(By.css('.e2e-inner-html-bound b')); - expect(bold.getText()).toContain('Syntax'); + expect(await bold.getText()).toContain('Syntax'); }); - it('escapes untrusted URLs', () => { + it('escapes untrusted URLs', async () => { const untrustedUrl = element(By.className('e2e-dangerous-url')); - expect(untrustedUrl.getAttribute('href')).toMatch(/^unsafe:javascript/); + expect(await untrustedUrl.getAttribute('href')).toMatch(/^unsafe:javascript/); }); - it('binds trusted URLs', () => { + it('binds trusted URLs', async () => { const trustedUrl = element(By.className('e2e-trusted-url')); - expect(trustedUrl.getAttribute('href')).toMatch(/^javascript:alert/); + expect(await trustedUrl.getAttribute('href')).toMatch(/^javascript:alert/); }); - it('escapes untrusted resource URLs', () => { + it('escapes untrusted resource URLs', async () => { const iframe = element(By.className('e2e-iframe-untrusted-src')); - expect(iframe.getAttribute('src')).toBe(''); + expect(await iframe.getAttribute('src')).toBe(''); }); - it('binds trusted resource URLs', () => { + it('binds trusted resource URLs', async () => { const iframe = element(By.className('e2e-iframe-trusted-src')); - expect(iframe.getAttribute('src')).toMatch(/^https:\/\/www.youtube.com\//); + expect(await iframe.getAttribute('src')).toMatch(/^https:\/\/www.youtube.com\//); }); }); diff --git a/aio/content/examples/service-worker-getting-started/e2e/src/app.e2e-spec.ts b/aio/content/examples/service-worker-getting-started/e2e/src/app.e2e-spec.ts index bfb5f1c5bb66c..e0d18fc72cc1d 100755 --- a/aio/content/examples/service-worker-getting-started/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/service-worker-getting-started/e2e/src/app.e2e-spec.ts @@ -1,45 +1,44 @@ import { AppPage } from './app.po'; -import { browser, element, by } from 'protractor'; +import { element, by } from 'protractor'; describe('sw-example App', () => { let page: AppPage; - beforeEach(() => { + beforeEach(async () => { page = new AppPage(); + await page.navigateTo(); }); - it('should display welcome message', () => { - page.navigateTo(); - expect(page.getTitleText()).toEqual('Welcome to Service Workers!'); + it('should display welcome message', async () => { + expect(await page.getTitleText()).toEqual('Welcome to Service Workers!'); }); - it('should display the Angular logo', () => { + it('should display the Angular logo', async () => { const logo = element(by.css('img')); - page.navigateTo(); - expect(logo.isPresent()).toBe(true); + expect(await logo.isPresent()).toBe(true); }); - it('should show a header for the list of links', () => { + it('should show a header for the list of links', async () => { const listHeader = element(by.css('app-root > h2')); - expect(listHeader.getText()).toEqual('Here are some links to help you start:'); + expect(await listHeader.getText()).toEqual('Here are some links to help you start:'); }); - it('should show a list of links', () => { - element.all(by.css('ul > li > h2 > a')).then((items) => { - expect(items.length).toBe(4); - expect(items[0].getText()).toBe('Angular Service Worker Intro'); - expect(items[1].getText()).toBe('Tour of Heroes'); - expect(items[2].getText()).toBe('CLI Documentation'); - expect(items[3].getText()).toBe('Angular blog'); - }); + it('should show a list of links', async () => { + const items = await element.all(by.css('ul > li > h2 > a')); + + expect(items.length).toBe(4); + expect(await items[0].getText()).toBe('Angular Service Worker Intro'); + expect(await items[1].getText()).toBe('Tour of Heroes'); + expect(await items[2].getText()).toBe('CLI Documentation'); + expect(await items[3].getText()).toBe('Angular blog'); }); // Check for a rejected promise as the service worker is not enabled - it('SwUpdate.checkForUpdate() should return a rejected promise', () => { + it('SwUpdate.checkForUpdate() should return a rejected promise', async () => { const button = element(by.css('button')); const rejectMessage = element(by.css('p')); - button.click(); - expect(rejectMessage.getText()).toContain('rejected: '); + await button.click(); + expect(await rejectMessage.getText()).toContain('rejected: '); }); }); diff --git a/aio/content/examples/set-document-title/e2e/src/app.e2e-spec.ts b/aio/content/examples/set-document-title/e2e/src/app.e2e-spec.ts index 86b9bc76ebc44..c94d0dbd2327e 100644 --- a/aio/content/examples/set-document-title/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/set-document-title/e2e/src/app.e2e-spec.ts @@ -1,26 +1,21 @@ -import { browser, element, by, ElementFinder } from 'protractor'; +import { browser, element, by } from 'protractor'; describe('Set Document Title', () => { - beforeAll(() => browser.get('')); - - it('should set the document title', () => { + beforeEach(() => browser.get('')); + it('should set the document title', async () => { + const elems = await element.all(by.css('ul li a')); const titles = [ 'Good morning!', 'Good afternoon!', - 'Good evening!' + 'Good evening!', ]; - element.all( by.css( 'ul li a' ) ).each( - function iterator( elem: ElementFinder, i: number ) { - - elem.click(); - expect( browser.getTitle() ).toEqual( titles[ i ] ); - - } - ); - + for (let i = 0; i < elems.length; i++) { + await elems[i].click(); + expect(await browser.getTitle()).toEqual(titles[i]); + } }); }); diff --git a/aio/content/examples/set-document-title/src/app/app.component.ts b/aio/content/examples/set-document-title/src/app/app.component.ts index adef47a050ea4..e4d6671a47788 100644 --- a/aio/content/examples/set-document-title/src/app/app.component.ts +++ b/aio/content/examples/set-document-title/src/app/app.component.ts @@ -5,25 +5,25 @@ import { Component } from '@angular/core'; import { Title } from '@angular/platform-browser'; @Component({ -selector: 'app-root', -template: - `

- Select a title to set on the current HTML document: -

+ selector: 'app-root', + template: ` +

+ Select a title to set on the current HTML document: +

- - ` + + `, }) // #docregion class export class AppComponent { - public constructor(private titleService: Title ) { } + public constructor(private titleService: Title) { } - public setTitle( newTitle: string) { - this.titleService.setTitle( newTitle ); + public setTitle(newTitle: string) { + this.titleService.setTitle(newTitle); } } // #enddocregion class diff --git a/aio/content/examples/setup/e2e/src/app.e2e-spec.ts b/aio/content/examples/setup/e2e/src/app.e2e-spec.ts index 560d326a55fb7..db185ac5d9125 100644 --- a/aio/content/examples/setup/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/setup/e2e/src/app.e2e-spec.ts @@ -4,12 +4,10 @@ describe('QuickStart E2E Tests', () => { const expectedMsg = 'Hello Angular'; - beforeEach(() => { - browser.get(''); - }); + beforeEach(() => browser.get('')); - it(`should display: ${expectedMsg}`, () => { - expect(element(by.css('h1')).getText()).toEqual(expectedMsg); + it(`should display: ${expectedMsg}`, async () => { + expect(await element(by.css('h1')).getText()).toEqual(expectedMsg); }); }); diff --git a/aio/content/examples/structural-directives/e2e/src/app.e2e-spec.ts b/aio/content/examples/structural-directives/e2e/src/app.e2e-spec.ts index 98cac565dd5c7..12092d401e1bc 100644 --- a/aio/content/examples/structural-directives/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/structural-directives/e2e/src/app.e2e-spec.ts @@ -2,55 +2,52 @@ import { browser, element, by } from 'protractor'; describe('Structural Directives', () => { - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); - it('first div should show hero name with *ngIf', () => { + it('first div should show hero name with *ngIf', async () => { const allDivs = element.all(by.tagName('div')); - expect(allDivs.get(0).getText()).toEqual('Dr Nice'); + expect(await allDivs.get(0).getText()).toEqual('Dr Nice'); }); - it('first li should show hero name with *ngFor', () => { + it('first li should show hero name with *ngFor', async () => { const allLis = element.all(by.tagName('li')); - expect(allLis.get(0).getText()).toEqual('Dr Nice'); + expect(await allLis.get(0).getText()).toEqual('Dr Nice'); }); - it('ngSwitch have two instances', () => { + it('ngSwitch have two instances', async () => { const happyHeroEls = element.all(by.tagName('app-happy-hero')); - expect(happyHeroEls.count()).toEqual(2); + expect(await happyHeroEls.count()).toEqual(2); }); - it('should toggle *ngIf="hero" with a button', () => { + it('should toggle *ngIf="hero" with a button', async () => { const toggleHeroButton = element.all(by.cssContainingText('button', 'Toggle hero')).get(0); const paragraph = element.all(by.cssContainingText('p', 'I turned the corner')); - expect(paragraph.get(0).getText()).toContain('I waved'); - toggleHeroButton.click().then(() => { - expect(paragraph.get(0).getText()).not.toContain('I waved'); - }); + expect(await paragraph.get(0).getText()).toContain('I waved'); + await toggleHeroButton.click(); + expect(await paragraph.get(0).getText()).not.toContain('I waved'); }); - it('should have only one "Hip!" (the other is erased)', () => { + it('should have only one "Hip!" (the other is erased)', async () => { const paragraph = element.all(by.cssContainingText('p', 'Hip!')); - expect(paragraph.count()).toEqual(1); + expect(await paragraph.count()).toEqual(1); }); - it('appUnless should show 3 paragraph (A)s and (B)s at the start', () => { + it('appUnless should show 3 paragraph (A)s and (B)s at the start', async () => { const paragraph = element.all(by.css('p.unless')); - expect(paragraph.count()).toEqual(3); + expect(await paragraph.count()).toEqual(3); for (let i = 0; i < 3; i++) { - expect(paragraph.get(i).getText()).toContain('(A)'); + expect(await paragraph.get(i).getText()).toContain('(A)'); } }); - it('appUnless should show 1 paragraph (B) after toggling condition', () => { + it('appUnless should show 1 paragraph (B) after toggling condition', async () => { const toggleConditionButton = element.all(by.cssContainingText('button', 'Toggle condition')).get(0); const paragraph = element.all(by.css('p.unless')); - toggleConditionButton.click().then(() => { - expect(paragraph.count()).toEqual(1); - expect(paragraph.get(0).getText()).toContain('(B)'); - }); + await toggleConditionButton.click(); + + expect(await paragraph.count()).toEqual(1); + expect(await paragraph.get(0).getText()).toContain('(B)'); }); }); diff --git a/aio/content/examples/styleguide/e2e/src/app.e2e-spec.ts b/aio/content/examples/styleguide/e2e/src/app.e2e-spec.ts index fb1f35730df85..e92c52dff57ce 100644 --- a/aio/content/examples/styleguide/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/styleguide/e2e/src/app.e2e-spec.ts @@ -1,147 +1,147 @@ import { browser, element, by } from 'protractor'; describe('Style Guide', () => { - it('01-01', () => { - browser.get('#/01-01'); + it('01-01', async () => { + await browser.get('#/01-01'); const pre = element(by.tagName('toh-heroes > pre')); - expect(pre.getText()).toContain('Bombasto'); - expect(pre.getText()).toContain('Tornado'); - expect(pre.getText()).toContain('Magneta'); + expect(await pre.getText()).toContain('Bombasto'); + expect(await pre.getText()).toContain('Tornado'); + expect(await pre.getText()).toContain('Magneta'); }); - it('02-07', () => { - browser.get('#/02-07'); + it('02-07', async () => { + await browser.get('#/02-07'); const hero = element(by.tagName('toh-hero > div')); const users = element(by.tagName('admin-users > div')); - expect(hero.getText()).toBe('hero component'); - expect(users.getText()).toBe('users component'); + expect(await hero.getText()).toBe('hero component'); + expect(await users.getText()).toBe('users component'); }); - it('02-08', () => { - browser.get('#/02-08'); + it('02-08', async () => { + await browser.get('#/02-08'); const input = element(by.tagName('input[tohvalidate]')); - expect(input.isPresent()).toBe(true); + expect(await input.isPresent()).toBe(true); }); - it('04-10', () => { - browser.get('#/04-10'); + it('04-10', async () => { + await browser.get('#/04-10'); const div = element(by.tagName('sg-app > toh-heroes > div')); - expect(div.getText()).toBe('This is heroes component'); + expect(await div.getText()).toBe('This is heroes component'); }); - it('05-02', () => { - browser.get('#/05-02'); + it('05-02', async () => { + await browser.get('#/05-02'); const button = element(by.tagName('sg-app > toh-hero-button > button')); - expect(button.getText()).toBe('Hero button'); + expect(await button.getText()).toBe('Hero button'); }); - it('05-03', () => { - browser.get('#/05-03'); + it('05-03', async () => { + await browser.get('#/05-03'); const button = element(by.tagName('sg-app > toh-hero-button > button')); - expect(button.getText()).toBe('Hero button'); + expect(await button.getText()).toBe('Hero button'); }); - it('05-04', () => { - browser.get('#/05-04'); + it('05-04', async () => { + await browser.get('#/05-04'); const h2 = element(by.tagName('sg-app > toh-heroes > div > h2')); - expect(h2.getText()).toBe('My Heroes'); + expect(await h2.getText()).toBe('My Heroes'); }); - it('05-12', () => { - browser.get('#/05-12'); + it('05-12', async () => { + await browser.get('#/05-12'); const button = element(by.tagName('sg-app > toh-hero-button > button')); - expect(button.getText()).toBe('OK'); + expect(await button.getText()).toBe('OK'); }); - it('05-13', () => { - browser.get('#/05-13'); + it('05-13', async () => { + await browser.get('#/05-13'); const button = element(by.tagName('sg-app > toh-hero-button > button')); - expect(button.getText()).toBe('OK'); + expect(await button.getText()).toBe('OK'); }); - it('05-14', () => { - browser.get('#/05-14'); + it('05-14', async () => { + await browser.get('#/05-14'); const toast = element(by.tagName('sg-app > toh-toast')); - expect(toast.getText()).toBe('...'); + expect(await toast.getText()).toBe('...'); }); - it('05-15', () => { - browser.get('#/05-15'); + it('05-15', async () => { + await browser.get('#/05-15'); const heroList = element(by.tagName('sg-app > toh-hero-list')); - expect(heroList.getText()).toBe('...'); + expect(await heroList.getText()).toBe('...'); }); - it('05-16', () => { - browser.get('#/05-16'); + it('05-16', async () => { + await browser.get('#/05-16'); const hero = element(by.tagName('sg-app > toh-hero')); - expect(hero.getText()).toBe('...'); + expect(await hero.getText()).toBe('...'); }); - it('05-17', () => { - browser.get('#/05-17'); + it('05-17', async () => { + await browser.get('#/05-17'); const section = element(by.tagName('sg-app > toh-hero-list > section')); - expect(section.getText()).toContain('Our list of heroes'); - expect(section.getText()).toContain('Total powers'); - expect(section.getText()).toContain('Average power'); + expect(await section.getText()).toContain('Our list of heroes'); + expect(await section.getText()).toContain('Total powers'); + expect(await section.getText()).toContain('Average power'); }); - it('06-01', () => { - browser.get('#/06-01'); + it('06-01', async () => { + await browser.get('#/06-01'); const div = element(by.tagName('sg-app > div[tohhighlight]')); - expect(div.getText()).toBe('Bombasta'); + expect(await div.getText()).toBe('Bombasta'); }); - it('06-03', () => { - browser.get('#/06-03'); + it('06-03', async () => { + await browser.get('#/06-03'); const input = element(by.tagName('input[tohvalidator]')); - expect(input.isPresent()).toBe(true); + expect(await input.isPresent()).toBe(true); }); // temporarily disabled because of a weird issue when used with rxjs v6 with rxjs-compat - xit('07-01', () => { - browser.get('#/07-01'); + xit('07-01', async () => { + await browser.get('#/07-01'); const lis = element.all(by.tagName('sg-app > ul > li')); - expect(lis.get(0).getText()).toBe('Windstorm'); - expect(lis.get(1).getText()).toBe('Bombasto'); - expect(lis.get(2).getText()).toBe('Magneta'); - expect(lis.get(3).getText()).toBe('Tornado'); + expect(await lis.get(0).getText()).toBe('Windstorm'); + expect(await lis.get(1).getText()).toBe('Bombasto'); + expect(await lis.get(2).getText()).toBe('Magneta'); + expect(await lis.get(3).getText()).toBe('Tornado'); }); - it('07-03', () => { - browser.get('#/07-03'); + it('07-03', async () => { + await browser.get('#/07-03'); const pre = element(by.tagName('toh-heroes > pre')); - expect(pre.getText()).toContain('[]'); + expect(await pre.getText()).toContain('[]'); }); - it('07-04', () => { - browser.get('#/07-04'); + it('07-04', async () => { + await browser.get('#/07-04'); const pre = element(by.tagName('toh-app > pre')); - expect(pre.getText()).toContain('[]'); + expect(await pre.getText()).toContain('[]'); }); - it('09-01', () => { - browser.get('#/09-01'); + it('09-01', async () => { + await browser.get('#/09-01'); const button = element(by.tagName('sg-app > toh-hero-button > button')); - expect(button.getText()).toBe('OK'); + expect(await button.getText()).toBe('OK'); }); }); diff --git a/aio/content/examples/template-expression-operators/e2e/src/app.e2e-spec.ts b/aio/content/examples/template-expression-operators/e2e/src/app.e2e-spec.ts index 1cc2511ad9e3b..05fcf51d9b577 100644 --- a/aio/content/examples/template-expression-operators/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/template-expression-operators/e2e/src/app.e2e-spec.ts @@ -1,31 +1,27 @@ import { browser, element, by } from 'protractor'; -import { logging } from 'selenium-webdriver'; describe('Template Expression Operators', () => { - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); - it('should have title Inputs and Outputs', () => { + it('should have title Inputs and Outputs', async () => { const title = element.all(by.css('h1')).get(0); - expect(title.getText()).toEqual('Template Expression Operators'); + expect(await title.getText()).toEqual('Template Expression Operators'); }); - it('should display json data', () => { + it('should display json data', async () => { const jsonDate = element.all(by.css('p')).get(4); - expect(jsonDate.getText()).toContain('1980'); + expect(await jsonDate.getText()).toContain('1980'); }); - it('should display $98', () => { + it('should display $98', async () => { const jsonDate = element.all(by.css('p')).get(5); - expect(jsonDate.getText()).toContain('$98.00'); + expect(await jsonDate.getText()).toContain('$98.00'); }); - it('should display Telephone', () => { + it('should display Telephone', async () => { const jsonDate = element.all(by.css('p')).get(6); - expect(jsonDate.getText()).toContain('Telephone'); + expect(await jsonDate.getText()).toContain('Telephone'); }); - }); diff --git a/aio/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts b/aio/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts index 6b0cb6bd54ffd..9adeed1dae026 100644 --- a/aio/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts @@ -1,11 +1,10 @@ -import { browser, element, by } from 'protractor'; -import { logging } from 'selenium-webdriver'; +import { browser, element, by, logging } from 'protractor'; describe('Template-reference-variables-example', () => { beforeEach(() => browser.get('')); // helper function used to test what's logged to the console - async function logChecker(button, contents) { + async function logChecker(contents) { const logs = await browser .manage() .logs() @@ -14,8 +13,8 @@ describe('Template-reference-variables-example', () => { expect(messages.length).toBeGreaterThan(0); } - it('should display Template reference variables', () => { - expect(element(by.css('h1')).getText()).toEqual( + it('should display Template reference variables', async () => { + expect(await element(by.css('h1')).getText()).toEqual( 'Template reference variables' ); }); @@ -26,7 +25,7 @@ describe('Template-reference-variables-example', () => { await phoneInput.sendKeys('123'); await callButton.click(); const contents = 'Calling 123 ...'; - await logChecker(callButton, contents); + await logChecker(contents); }); it('should log a Faxing 123 ... message', async () => { @@ -35,12 +34,12 @@ describe('Template-reference-variables-example', () => { await faxInput.sendKeys('123'); await faxButton.click(); const contents = 'Faxing 123 ...'; - await logChecker(faxButton, contents); + await logChecker(contents); }); - it('should display a disabled button', () => { + it('should display a disabled button', async () => { const disabledButton = element.all(by.css('button')).get(2); - expect(disabledButton.isEnabled()).toBe(false); + expect(await disabledButton.isEnabled()).toBe(false); }); it('should submit form', async () => { @@ -48,8 +47,7 @@ describe('Template-reference-variables-example', () => { const nameInput = element.all(by.css('input')).get(2); await nameInput.sendKeys('123'); await submitButton.click(); - expect(element.all(by.css('div > p')).get(2).getText()).toEqual('Submitted. Form value is {"name":"123"}'); + expect(await element.all(by.css('div > p')).get(2).getText()).toEqual('Submitted. Form value is {"name":"123"}'); }); - }); diff --git a/aio/content/examples/template-syntax/e2e/src/app.e2e-spec.ts b/aio/content/examples/template-syntax/e2e/src/app.e2e-spec.ts index b44aeb7cdf32a..88f94ec10d583 100644 --- a/aio/content/examples/template-syntax/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/template-syntax/e2e/src/app.e2e-spec.ts @@ -3,30 +3,28 @@ import { browser, element, by } from 'protractor'; // TODO Not yet complete describe('Template Syntax', () => { - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); - it('should be able to use interpolation with a hero', () => { + it('should be able to use interpolation with a hero', async () => { const heroInterEle = element.all(by.css('h2+p')).get(0); - expect(heroInterEle.getText()).toEqual('My current hero is Hercules'); + expect(await heroInterEle.getText()).toEqual('My current hero is Hercules'); }); - it('should be able to use interpolation with a calculation', () => { + it('should be able to use interpolation with a calculation', async () => { const theSumEles = element.all(by.cssContainingText('h3~p', 'The sum of')); - expect(theSumEles.count()).toBe(2); - expect(theSumEles.get(0).getText()).toEqual('The sum of 1 + 1 is 2'); - expect(theSumEles.get(1).getText()).toEqual('The sum of 1 + 1 is not 4'); + expect(await theSumEles.count()).toBe(2); + expect(await theSumEles.get(0).getText()).toEqual('The sum of 1 + 1 is 2'); + expect(await theSumEles.get(1).getText()).toEqual('The sum of 1 + 1 is not 4'); }); - it('should be able to use class binding syntax', () => { + it('should be able to use class binding syntax', async () => { const specialEle = element(by.cssContainingText('div', 'Special')); - expect(specialEle.getAttribute('class')).toMatch('special'); + expect(await specialEle.getAttribute('class')).toMatch('special'); }); - it('should be able to use style binding syntax', () => { + it('should be able to use style binding syntax', async () => { const specialButtonEle = element(by.cssContainingText('div.special~button', 'button')); - expect(specialButtonEle.getAttribute('style')).toMatch('color: red'); + expect(await specialButtonEle.getAttribute('style')).toMatch('color: red'); }); it('should two-way bind to sizer', async () => { @@ -34,15 +32,15 @@ describe('Template Syntax', () => { const incButton = div.element(by.buttonText('+')); const input = div.element(by.css('input')); const initSize = await input.getAttribute('value'); - incButton.click(); - expect(input.getAttribute('value')).toEqual((+initSize + 1).toString()); + await incButton.click(); + expect(await input.getAttribute('value')).toEqual((+initSize + 1).toString()); }); it('should change SVG rectangle\'s fill color on click', async () => { const div = element(by.css('app-svg')); const colorSquare = div.element(by.css('rect')); const initialColor = await colorSquare.getAttribute('fill'); - colorSquare.click(); - expect(colorSquare.getAttribute('fill')).not.toEqual(initialColor); + await colorSquare.click(); + expect(await colorSquare.getAttribute('fill')).not.toEqual(initialColor); }); }); diff --git a/aio/content/examples/testing/e2e/src/app.e2e-spec.ts b/aio/content/examples/testing/e2e/src/app.e2e-spec.ts index b06b7a095d377..d458faa747499 100644 --- a/aio/content/examples/testing/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/testing/e2e/src/app.e2e-spec.ts @@ -1,4 +1,4 @@ -import { browser, element, by, ElementFinder } from 'protractor'; +import { browser, element, by } from 'protractor'; describe('Testing Example', () => { const expectedViewNames = ['Dashboard', 'Heroes', 'About']; @@ -6,11 +6,8 @@ describe('Testing Example', () => { beforeAll(() => browser.get('')); function getPageElts() { - const navElts = element.all(by.css('app-root nav a')); - return { - navElts, - + navElts: element.all(by.css('app-root nav a')), appDashboard: element(by.css('app-root app-dashboard')), }; } @@ -20,14 +17,14 @@ describe('Testing Example', () => { }); it(`has views ${expectedViewNames}`, async () => { - const viewNames = getPageElts().navElts.map(async (el: ElementFinder) => await el.getText()); + const viewNames = await getPageElts().navElts.map(el => el.getText()); expect(viewNames).toEqual(expectedViewNames); }); - it('has dashboard as the active view', () => { + it('has dashboard as the active view', async () => { const page = getPageElts(); - expect(page.appDashboard.isPresent()).toBeTruthy(); + expect(await page.appDashboard.isPresent()).toBeTruthy(); }); }); diff --git a/aio/content/examples/toh-pt0/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt0/e2e/src/app.e2e-spec.ts index e05a1b4b21a99..4dccb587639f2 100644 --- a/aio/content/examples/toh-pt0/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/toh-pt0/e2e/src/app.e2e-spec.ts @@ -3,8 +3,8 @@ import { browser, element, by } from 'protractor'; describe('Tour of Heroes', () => { beforeEach(() => browser.get('/')); - it('should display "Tour of Heroes"', () => { - const title = element(by.css('app-root h1')).getText(); + it('should display "Tour of Heroes"', async () => { + const title = await element(by.css('app-root h1')).getText(); expect(title).toEqual('Tour of Heroes'); }); }); diff --git a/aio/content/examples/toh-pt1/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt1/e2e/src/app.e2e-spec.ts index 6d9cd078b60b4..b9724c090e43e 100644 --- a/aio/content/examples/toh-pt1/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/toh-pt1/e2e/src/app.e2e-spec.ts @@ -1,5 +1,4 @@ import { browser, element, by, ElementFinder } from 'protractor'; -import { promise } from 'selenium-webdriver'; const expectedH1 = 'Tour of Heroes'; const expectedTitle = `${expectedH1}`; @@ -23,9 +22,9 @@ class Hero { } const nameSuffix = 'X'; -function addToHeroName(text: string): promise.Promise { +async function addToHeroName(text: string): Promise { const input = element(by.css('input')); - return input.sendKeys(text); + await input.sendKeys(text); } describe('Tutorial part 1', () => { @@ -34,12 +33,12 @@ describe('Tutorial part 1', () => { beforeAll(() => browser.get('')); - it(`has title '${expectedTitle}'`, () => { - expect(browser.getTitle()).toEqual(expectedTitle); + it(`has title '${expectedTitle}'`, async () => { + expect(await browser.getTitle()).toEqual(expectedTitle); }); - it(`has h1 '${expectedH1}'`, () => { - const hText = element(by.css('h1')).getText(); + it(`has h1 '${expectedH1}'`, async () => { + const hText = await element(by.css('h1')).getText(); expect(hText).toEqual(expectedH1, 'h1'); }); @@ -51,7 +50,7 @@ describe('Tutorial part 1', () => { }); it(`shows updated hero name`, async () => { - addToHeroName(nameSuffix); + await addToHeroName(nameSuffix); const page = getPageElts(); const hero = await Hero.fromDetail(page.heroDetail); const newName = expectedHero.name + nameSuffix; diff --git a/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts index acc6f83229946..edf3b10fc6260 100644 --- a/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts @@ -1,5 +1,4 @@ import { browser, element, by, ElementFinder } from 'protractor'; -import { promise } from 'selenium-webdriver'; const expectedH1 = 'Tour of Heroes'; const expectedTitle = `${expectedH1}`; @@ -8,30 +7,30 @@ const targetHero = { id: 16, name: 'RubberMan' }; const nameSuffix = 'X'; class Hero { - id: number; - name: string; - - // Factory methods - - // Get hero from s formatted as ' '. - static fromString(s: string): Hero { - return { - id: +s.substr(0, s.indexOf(' ')), - name: s.substr(s.indexOf(' ') + 1), - }; - } - - // Get hero id and name from the given detail element. - static async fromDetail(detail: ElementFinder): Promise { - // Get hero id from the first
- const id = await detail.all(by.css('div')).first().getText(); - // Get name from the h2 - const name = await detail.element(by.css('h2')).getText(); - return { - id: +id.substr(id.indexOf(' ') + 1), - name: name.substr(0, name.lastIndexOf(' ')) - }; - } + id: number; + name: string; + + // Factory methods + + // Get hero from s formatted as ' '. + static fromString(s: string): Hero { + return { + id: +s.substr(0, s.indexOf(' ')), + name: s.substr(s.indexOf(' ') + 1), + }; + } + + // Get hero id and name from the given detail element. + static async fromDetail(detail: ElementFinder): Promise { + // Get hero id from the first
+ const id = await detail.all(by.css('div')).first().getText(); + // Get name from the h2 + const name = await detail.element(by.css('h2')).getText(); + return { + id: +id.substr(id.indexOf(' ') + 1), + name: name.substr(0, name.lastIndexOf(' ')) + }; + } } describe('Tutorial part 2', () => { @@ -42,41 +41,41 @@ describe('Tutorial part 2', () => { }); function initialPageTests() { - it(`has title '${expectedTitle}'`, () => { - expect(browser.getTitle()).toEqual(expectedTitle); + it(`has title '${expectedTitle}'`, async () => { + expect(await browser.getTitle()).toEqual(expectedTitle); }); - it(`has h1 '${expectedH1}'`, () => { - expectHeading(1, expectedH1); + it(`has h1 '${expectedH1}'`, async () => { + await expectHeading(1, expectedH1); }); - it(`has h2 '${expectedH2}'`, () => { - expectHeading(2, expectedH2); + it(`has h2 '${expectedH2}'`, async () => { + await expectHeading(2, expectedH2); }); - it('has the right number of heroes', () => { + it('has the right number of heroes', async () => { const page = getPageElts(); - expect(page.heroes.count()).toEqual(10); + expect(await page.heroes.count()).toEqual(10); }); - it('has no selected hero and no hero details', () => { + it('has no selected hero and no hero details', async () => { const page = getPageElts(); - expect(page.selected.isPresent()).toBeFalsy('selected hero'); - expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail'); + expect(await page.selected.isPresent()).toBeFalsy('selected hero'); + expect(await page.heroDetail.isPresent()).toBeFalsy('no hero detail'); }); } function selectHeroTests() { - it(`selects ${targetHero.name} from hero list`, () => { + it(`selects ${targetHero.name} from hero list`, async () => { const hero = element(by.cssContainingText('li span.badge', targetHero.id.toString())); - hero.click(); + await hero.click(); // Nothing specific to expect other than lack of exceptions. }); - it(`has selected ${targetHero.name}`, () => { + it(`has selected ${targetHero.name}`, async () => { const page = getPageElts(); const expectedText = `${targetHero.id} ${targetHero.name}`; - expect(page.selected.getText()).toBe(expectedText); + expect(await page.selected.getText()).toBe(expectedText); }); it('shows selected hero details', async () => { @@ -88,8 +87,8 @@ function selectHeroTests() { } function updateHeroTests() { - it(`can update hero name`, () => { - addToHeroName(nameSuffix); + it(`can update hero name`, async () => { + await addToHeroName(nameSuffix); // Nothing specific to expect other than lack of exceptions. }); @@ -111,15 +110,15 @@ function updateHeroTests() { } -function addToHeroName(text: string): promise.Promise { +async function addToHeroName(text: string): Promise { const input = element(by.css('input')); - return input.sendKeys(text); + await input.sendKeys(text); } -function expectHeading(hLevel: number, expectedText: string): void { - const hTag = `h${hLevel}`; - const hText = element(by.css(hTag)).getText(); - expect(hText).toEqual(expectedText, hTag); +async function expectHeading(hLevel: number, expectedText: string): Promise { + const hTag = `h${hLevel}`; + const hText = await element(by.css(hTag)).getText(); + expect(hText).toEqual(expectedText, hTag); } function getPageElts() { diff --git a/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts index 4eb601fee6016..b312ec9e67799 100644 --- a/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts @@ -1,5 +1,4 @@ import { browser, element, by, ElementFinder } from 'protractor'; -import { promise } from 'selenium-webdriver'; const expectedH1 = 'Tour of Heroes'; const expectedTitle = `${expectedH1}`; @@ -8,30 +7,30 @@ const targetHero = { id: 16, name: 'RubberMan' }; const nameSuffix = 'X'; class Hero { - id: number; - name: string; - - // Factory methods - - // Get hero from s formatted as ' '. - static fromString(s: string): Hero { - return { - id: +s.substr(0, s.indexOf(' ')), - name: s.substr(s.indexOf(' ') + 1), - }; - } - - // Get hero id and name from the given detail element. - static async fromDetail(detail: ElementFinder): Promise { - // Get hero id from the first
- const id = await detail.all(by.css('div')).first().getText(); - // Get name from the h2 - const name = await detail.element(by.css('h2')).getText(); - return { - id: +id.substr(id.indexOf(' ') + 1), - name: name.substr(0, name.lastIndexOf(' ')) - }; - } + id: number; + name: string; + + // Factory methods + + // Get hero from s formatted as ' '. + static fromString(s: string): Hero { + return { + id: +s.substr(0, s.indexOf(' ')), + name: s.substr(s.indexOf(' ') + 1), + }; + } + + // Get hero id and name from the given detail element. + static async fromDetail(detail: ElementFinder): Promise { + // Get hero id from the first
+ const id = await detail.all(by.css('div')).first().getText(); + // Get name from the h2 + const name = await detail.element(by.css('h2')).getText(); + return { + id: +id.substr(id.indexOf(' ') + 1), + name: name.substr(0, name.lastIndexOf(' ')) + }; + } } describe('Tutorial part 3', () => { @@ -42,41 +41,41 @@ describe('Tutorial part 3', () => { }); function initialPageTests() { - it(`has title '${expectedTitle}'`, () => { - expect(browser.getTitle()).toEqual(expectedTitle); + it(`has title '${expectedTitle}'`, async () => { + expect(await browser.getTitle()).toEqual(expectedTitle); }); - it(`has h1 '${expectedH1}'`, () => { - expectHeading(1, expectedH1); + it(`has h1 '${expectedH1}'`, async () => { + await expectHeading(1, expectedH1); }); - it(`has h2 '${expectedH2}'`, () => { - expectHeading(2, expectedH2); + it(`has h2 '${expectedH2}'`, async () => { + await expectHeading(2, expectedH2); }); - it('has the right number of heroes', () => { + it('has the right number of heroes', async () => { const page = getPageElts(); - expect(page.heroes.count()).toEqual(10); + expect(await page.heroes.count()).toEqual(10); }); - it('has no selected hero and no hero details', () => { + it('has no selected hero and no hero details', async () => { const page = getPageElts(); - expect(page.selected.isPresent()).toBeFalsy('selected hero'); - expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail'); + expect(await page.selected.isPresent()).toBeFalsy('selected hero'); + expect(await page.heroDetail.isPresent()).toBeFalsy('no hero detail'); }); } function selectHeroTests() { - it(`selects ${targetHero.name} from hero list`, () => { + it(`selects ${targetHero.name} from hero list`, async () => { const hero = element(by.cssContainingText('li span.badge', targetHero.id.toString())); - hero.click(); + await hero.click(); // Nothing specific to expect other than lack of exceptions. }); - it(`has selected ${targetHero.name}`, () => { + it(`has selected ${targetHero.name}`, async () => { const page = getPageElts(); const expectedText = `${targetHero.id} ${targetHero.name}`; - expect(page.selected.getText()).toBe(expectedText); + expect(await page.selected.getText()).toBe(expectedText); }); it('shows selected hero details', async () => { @@ -88,8 +87,8 @@ function selectHeroTests() { } function updateHeroTests() { - it(`can update hero name`, () => { - addToHeroName(nameSuffix); + it(`can update hero name`, async () => { + await addToHeroName(nameSuffix); // Nothing specific to expect other than lack of exceptions. }); @@ -111,15 +110,15 @@ function updateHeroTests() { } -function addToHeroName(text: string): promise.Promise { +async function addToHeroName(text: string): Promise { const input = element(by.css('input')); - return input.sendKeys(text); + await input.sendKeys(text); } -function expectHeading(hLevel: number, expectedText: string): void { - const hTag = `h${hLevel}`; - const hText = element(by.css(hTag)).getText(); - expect(hText).toEqual(expectedText, hTag); +async function expectHeading(hLevel: number, expectedText: string): Promise { + const hTag = `h${hLevel}`; + const hText = await element(by.css(hTag)).getText(); + expect(hText).toEqual(expectedText, hTag); } function getPageElts() { diff --git a/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts index 02330926afc59..450d520246c1c 100644 --- a/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts @@ -1,5 +1,4 @@ import { browser, element, by, ElementFinder } from 'protractor'; -import { promise } from 'selenium-webdriver'; const expectedH1 = 'Tour of Heroes'; const expectedTitle = `${expectedH1}`; @@ -8,30 +7,30 @@ const targetHero = { id: 16, name: 'RubberMan' }; const nameSuffix = 'X'; class Hero { - id: number; - name: string; - - // Factory methods - - // Get hero from s formatted as ' '. - static fromString(s: string): Hero { - return { - id: +s.substr(0, s.indexOf(' ')), - name: s.substr(s.indexOf(' ') + 1), - }; - } - - // Get hero id and name from the given detail element. - static async fromDetail(detail: ElementFinder): Promise { - // Get hero id from the first
- const id = await detail.all(by.css('div')).first().getText(); - // Get name from the h2 - const name = await detail.element(by.css('h2')).getText(); - return { - id: +id.substr(id.indexOf(' ') + 1), - name: name.substr(0, name.lastIndexOf(' ')) - }; - } + id: number; + name: string; + + // Factory methods + + // Get hero from s formatted as ' '. + static fromString(s: string): Hero { + return { + id: +s.substr(0, s.indexOf(' ')), + name: s.substr(s.indexOf(' ') + 1), + }; + } + + // Get hero id and name from the given detail element. + static async fromDetail(detail: ElementFinder): Promise { + // Get hero id from the first
+ const id = await detail.all(by.css('div')).first().getText(); + // Get name from the h2 + const name = await detail.element(by.css('h2')).getText(); + return { + id: +id.substr(id.indexOf(' ') + 1), + name: name.substr(0, name.lastIndexOf(' ')) + }; + } } describe('Tutorial part 4', () => { @@ -42,58 +41,57 @@ describe('Tutorial part 4', () => { }); function initialPageTests() { - it(`has title '${expectedTitle}'`, () => { - expect(browser.getTitle()).toEqual(expectedTitle); + it(`has title '${expectedTitle}'`, async () => { + expect(await browser.getTitle()).toEqual(expectedTitle); }); - it(`has h1 '${expectedH1}'`, () => { - expectHeading(1, expectedH1); + it(`has h1 '${expectedH1}'`, async () => { + await expectHeading(1, expectedH1); }); - it(`has h2 '${expectedH2}'`, () => { - expectHeading(2, expectedH2); + it(`has h2 '${expectedH2}'`, async () => { + await expectHeading(2, expectedH2); }); - it('has the right number of heroes', () => { + it('has the right number of heroes', async () => { const page = getPageElts(); - expect(page.heroes.count()).toEqual(10); + expect(await page.heroes.count()).toEqual(10); }); - it('has no selected hero and no hero details', () => { + it('has no selected hero and no hero details', async () => { const page = getPageElts(); - expect(page.selected.isPresent()).toBeFalsy('selected hero'); - expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail'); + expect(await page.selected.isPresent()).toBeFalsy('selected hero'); + expect(await page.heroDetail.isPresent()).toBeFalsy('no hero detail'); }); } function selectHeroTests() { - it(`selects ${targetHero.name} from hero list`, () => { + it(`selects ${targetHero.name} from hero list`, async () => { const hero = element(by.cssContainingText('li span.badge', targetHero.id.toString())); - hero.click(); + await hero.click(); // Nothing specific to expect other than lack of exceptions. }); - it(`has selected ${targetHero.name}`, () => { + it(`has selected ${targetHero.name}`, async () => { const page = getPageElts(); const expectedText = `${targetHero.id} ${targetHero.name}`; - expect(page.selected.getText()).toBe(expectedText); + expect(await page.selected.getText()).toBe(expectedText); }); it('shows selected hero details', async () => { const page = getPageElts(); - const message = getMessage(); + const message = await getMessage(); const hero = await Hero.fromDetail(page.heroDetail); expect(hero.id).toEqual(targetHero.id); expect(hero.name).toEqual(targetHero.name.toUpperCase()); // Message text contain id number matches the hero.id number - expect(message.getText()).toContain(hero.id); - + expect(await message.getText()).toContain(hero.id); }); } function updateHeroTests() { - it(`can update hero name`, () => { - addToHeroName(nameSuffix); + it(`can update hero name`, async () => { + await addToHeroName(nameSuffix); // Nothing specific to expect other than lack of exceptions. }); @@ -115,15 +113,15 @@ function updateHeroTests() { } -function addToHeroName(text: string): promise.Promise { +async function addToHeroName(text: string): Promise { const input = element(by.css('input')); - return input.sendKeys(text); + await input.sendKeys(text); } -function expectHeading(hLevel: number, expectedText: string): void { - const hTag = `h${hLevel}`; - const hText = element(by.css(hTag)).getText(); - expect(hText).toEqual(expectedText, hTag); +async function expectHeading(hLevel: number, expectedText: string): Promise { + const hTag = `h${hLevel}`; + const hText = await element(by.css(hTag)).getText(); + expect(hText).toEqual(expectedText, hTag); } function getPageElts() { @@ -134,8 +132,8 @@ function getPageElts() { }; } -function getMessage() { +async function getMessage() { const hero = element(by.cssContainingText('li span.badge', targetHero.id.toString())); - hero.click(); + await hero.click(); return element.all(by.css('app-root > app-messages > div > div')).get(1); } diff --git a/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts index ff0c0b5ff7eda..205d500afe80d 100644 --- a/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts @@ -1,5 +1,4 @@ import { browser, element, by, ElementFinder } from 'protractor'; -import { promise } from 'selenium-webdriver'; const expectedH1 = 'Tour of Heroes'; const expectedTitle = `${expectedH1}`; @@ -9,30 +8,30 @@ const nameSuffix = 'X'; const newHeroName = targetHero.name + nameSuffix; class Hero { - id: number; - name: string; - - // Factory methods - - // Get hero from s formatted as ' '. - static fromString(s: string): Hero { - return { - id: +s.substr(0, s.indexOf(' ')), - name: s.substr(s.indexOf(' ') + 1), - }; - } - - // Get hero id and name from the given detail element. - static async fromDetail(detail: ElementFinder): Promise { - // Get hero id from the first
- const id = await detail.all(by.css('div')).first().getText(); - // Get name from the h2 - const name = await detail.element(by.css('h2')).getText(); - return { - id: +id.substr(id.indexOf(' ') + 1), - name: name.substr(0, name.lastIndexOf(' ')) - }; - } + id: number; + name: string; + + // Factory methods + + // Get hero from s formatted as ' '. + static fromString(s: string): Hero { + return { + id: +s.substr(0, s.indexOf(' ')), + name: s.substr(s.indexOf(' ') + 1), + }; + } + + // Get hero id and name from the given detail element. + static async fromDetail(detail: ElementFinder): Promise { + // Get hero id from the first
+ const id = await detail.all(by.css('div')).first().getText(); + // Get name from the h2 + const name = await detail.element(by.css('h2')).getText(); + return { + id: +id.substr(id.indexOf(' ') + 1), + name: name.substr(0, name.lastIndexOf(' ')) + }; + } } describe('Tutorial part 5', () => { @@ -58,23 +57,23 @@ describe('Tutorial part 5', () => { describe('Initial page', () => { - it(`has title '${expectedTitle}'`, () => { - expect(browser.getTitle()).toEqual(expectedTitle); + it(`has title '${expectedTitle}'`, async () => { + expect(await browser.getTitle()).toEqual(expectedTitle); }); - it(`has h1 '${expectedH1}'`, () => { - expectHeading(1, expectedH1); + it(`has h1 '${expectedH1}'`, async () => { + await expectHeading(1, expectedH1); }); const expectedViewNames = ['Dashboard', 'Heroes']; - it(`has views ${expectedViewNames}`, () => { - const viewNames = getPageElts().navElts.map((el: ElementFinder) => el.getText()); + it(`has views ${expectedViewNames}`, async () => { + const viewNames = await getPageElts().navElts.map(el => el.getText()); expect(viewNames).toEqual(expectedViewNames); }); - it('has dashboard as the active view', () => { + it('has dashboard as the active view', async () => { const page = getPageElts(); - expect(page.appDashboard.isPresent()).toBeTruthy(); + expect(await page.appDashboard.isPresent()).toBeTruthy(); }); }); @@ -83,19 +82,19 @@ describe('Tutorial part 5', () => { beforeAll(() => browser.get('')); - it('has top heroes', () => { + it('has top heroes', async () => { const page = getPageElts(); - expect(page.topHeroes.count()).toEqual(4); + expect(await page.topHeroes.count()).toEqual(4); }); it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero); it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); - it(`saves and shows ${newHeroName} in Dashboard`, () => { - element(by.buttonText('go back')).click(); + it(`saves and shows ${newHeroName} in Dashboard`, async () => { + await element(by.buttonText('go back')).click(); const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); - expect(targetHeroElt.getText()).toEqual(newHeroName); + expect(await targetHeroElt.getText()).toEqual(newHeroName); }); }); @@ -104,18 +103,18 @@ describe('Tutorial part 5', () => { beforeAll(() => browser.get('')); - it('can switch to Heroes view', () => { - getPageElts().appHeroesHref.click(); + it('can switch to Heroes view', async () => { + await getPageElts().appHeroesHref.click(); const page = getPageElts(); - expect(page.appHeroes.isPresent()).toBeTruthy(); - expect(page.allHeroes.count()).toEqual(10, 'number of heroes'); + expect(await page.appHeroes.isPresent()).toBeTruthy(); + expect(await page.allHeroes.count()).toEqual(10, 'number of heroes'); }); it('can route to hero details', async () => { - getHeroLiEltById(targetHero.id).click(); + await getHeroLiEltById(targetHero.id).click(); const page = getPageElts(); - expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); + expect(await page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); const hero = await Hero.fromDetail(page.heroDetail); expect(hero.id).toEqual(targetHero.id); expect(hero.name).toEqual(targetHero.name.toUpperCase()); @@ -123,21 +122,21 @@ describe('Tutorial part 5', () => { it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); - it(`shows ${newHeroName} in Heroes list`, () => { - element(by.buttonText('go back')).click(); + it(`shows ${newHeroName} in Heroes list`, async () => { + await element(by.buttonText('go back')).click(); const expectedText = `${targetHero.id} ${newHeroName}`; - expect(getHeroLiEltById(targetHero.id).getText()).toEqual(expectedText); + expect(await getHeroLiEltById(targetHero.id).getText()).toEqual(expectedText); }); }); async function dashboardSelectTargetHero() { const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); - expect(targetHeroElt.getText()).toEqual(targetHero.name); - targetHeroElt.click(); + expect(await targetHeroElt.getText()).toEqual(targetHero.name); + await targetHeroElt.click(); const page = getPageElts(); - expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); + expect(await page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); const hero = await Hero.fromDetail(page.heroDetail); expect(hero.id).toEqual(targetHero.id); expect(hero.name).toEqual(targetHero.name.toUpperCase()); @@ -145,7 +144,7 @@ describe('Tutorial part 5', () => { async function updateHeroNameInDetailView() { // Assumes that the current view is the hero details view. - addToHeroName(nameSuffix); + await addToHeroName(nameSuffix); const page = getPageElts(); const hero = await Hero.fromDetail(page.heroDetail); @@ -155,15 +154,15 @@ describe('Tutorial part 5', () => { }); -function addToHeroName(text: string): promise.Promise { +async function addToHeroName(text: string): Promise { const input = element(by.css('input')); - return input.sendKeys(text); + await input.sendKeys(text); } -function expectHeading(hLevel: number, expectedText: string): void { - const hTag = `h${hLevel}`; - const hText = element(by.css(hTag)).getText(); - expect(hText).toEqual(expectedText, hTag); +async function expectHeading(hLevel: number, expectedText: string): Promise { + const hTag = `h${hLevel}`; + const hText = await element(by.css(hTag)).getText(); + expect(hText).toEqual(expectedText, hTag); } function getHeroLiEltById(id: number) { diff --git a/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts index 58f5677d9d70c..c92e101fb0b71 100644 --- a/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts @@ -1,5 +1,4 @@ import { browser, element, by, ElementFinder, ElementArrayFinder } from 'protractor'; -import { promise } from 'selenium-webdriver'; const expectedH1 = 'Tour of Heroes'; const expectedTitle = `${expectedH1}`; @@ -24,9 +23,9 @@ class Hero { // Hero from hero list
  • element. static async fromLi(li: ElementFinder): Promise { - const stringsFromA = await li.all(by.css('a')).getText(); - const strings = stringsFromA[0].split(' '); - return { id: +strings[0], name: strings[1] }; + const stringsFromA = await li.all(by.css('a')).getText(); + const strings = stringsFromA[0].split(' '); + return { id: +strings[0], name: strings[1] }; } // Hero id and name from the given detail element. @@ -36,8 +35,8 @@ class Hero { // Get name from the h2 const name = await detail.element(by.css('h2')).getText(); return { - id: +id.substr(id.indexOf(' ') + 1), - name: name.substr(0, name.lastIndexOf(' ')) + id: +id.substr(id.indexOf(' ') + 1), + name: name.substr(0, name.lastIndexOf(' ')) }; } } @@ -70,23 +69,23 @@ describe('Tutorial part 6', () => { describe('Initial page', () => { - it(`has title '${expectedTitle}'`, () => { - expect(browser.getTitle()).toEqual(expectedTitle); + it(`has title '${expectedTitle}'`, async () => { + expect(await browser.getTitle()).toEqual(expectedTitle); }); - it(`has h1 '${expectedH1}'`, () => { - expectHeading(1, expectedH1); + it(`has h1 '${expectedH1}'`, async () => { + await expectHeading(1, expectedH1); }); const expectedViewNames = ['Dashboard', 'Heroes']; - it(`has views ${expectedViewNames}`, () => { - const viewNames = getPageElts().navElts.map((el: ElementFinder) => el.getText()); + it(`has views ${expectedViewNames}`, async () => { + const viewNames = await getPageElts().navElts.map(el => el.getText()); expect(viewNames).toEqual(expectedViewNames); }); - it('has dashboard as the active view', () => { + it('has dashboard as the active view', async () => { const page = getPageElts(); - expect(page.appDashboard.isPresent()).toBeTruthy(); + expect(await page.appDashboard.isPresent()).toBeTruthy(); }); }); @@ -95,33 +94,33 @@ describe('Tutorial part 6', () => { beforeAll(() => browser.get('')); - it('has top heroes', () => { + it('has top heroes', async () => { const page = getPageElts(); - expect(page.topHeroes.count()).toEqual(4); + expect(await page.topHeroes.count()).toEqual(4); }); it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero); it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); - it(`cancels and shows ${targetHero.name} in Dashboard`, () => { - element(by.buttonText('go back')).click(); - browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6 + it(`cancels and shows ${targetHero.name} in Dashboard`, async () => { + await element(by.buttonText('go back')).click(); + await browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6 const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); - expect(targetHeroElt.getText()).toEqual(targetHero.name); + expect(await targetHeroElt.getText()).toEqual(targetHero.name); }); it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero); it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); - it(`saves and shows ${newHeroName} in Dashboard`, () => { - element(by.buttonText('save')).click(); - browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6 + it(`saves and shows ${newHeroName} in Dashboard`, async () => { + await element(by.buttonText('save')).click(); + await browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6 const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); - expect(targetHeroElt.getText()).toEqual(newHeroName); + expect(await targetHeroElt.getText()).toEqual(newHeroName); }); }); @@ -130,18 +129,18 @@ describe('Tutorial part 6', () => { beforeAll(() => browser.get('')); - it('can switch to Heroes view', () => { - getPageElts().appHeroesHref.click(); + it('can switch to Heroes view', async () => { + await getPageElts().appHeroesHref.click(); const page = getPageElts(); - expect(page.appHeroes.isPresent()).toBeTruthy(); - expect(page.allHeroes.count()).toEqual(10, 'number of heroes'); + expect(await page.appHeroes.isPresent()).toBeTruthy(); + expect(await page.allHeroes.count()).toEqual(10, 'number of heroes'); }); it('can route to hero details', async () => { - getHeroLiEltById(targetHero.id).click(); + await getHeroLiEltById(targetHero.id).click(); const page = getPageElts(); - expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); + expect(await page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); const hero = await Hero.fromDetail(page.heroDetail); expect(hero.id).toEqual(targetHero.id); expect(hero.name).toEqual(targetHero.name.toUpperCase()); @@ -149,21 +148,21 @@ describe('Tutorial part 6', () => { it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); - it(`shows ${newHeroName} in Heroes list`, () => { - element(by.buttonText('save')).click(); - browser.waitForAngular(); + it(`shows ${newHeroName} in Heroes list`, async () => { + await element(by.buttonText('save')).click(); + await browser.waitForAngular(); const expectedText = `${targetHero.id} ${newHeroName}`; - expect(getHeroAEltById(targetHero.id).getText()).toEqual(expectedText); + expect(await getHeroAEltById(targetHero.id).getText()).toEqual(expectedText); }); it(`deletes ${newHeroName} from Heroes list`, async () => { const heroesBefore = await toHeroArray(getPageElts().allHeroes); const li = getHeroLiEltById(targetHero.id); - li.element(by.buttonText('x')).click(); + await li.element(by.buttonText('x')).click(); const page = getPageElts(); - expect(page.appHeroes.isPresent()).toBeTruthy(); - expect(page.allHeroes.count()).toEqual(9, 'number of heroes'); + expect(await page.appHeroes.isPresent()).toBeTruthy(); + expect(await page.allHeroes.count()).toEqual(9, 'number of heroes'); const heroesAfter = await toHeroArray(page.allHeroes); // console.log(await Hero.fromLi(page.allHeroes[0])); const expectedHeroes = heroesBefore.filter(h => h.name !== newHeroName); @@ -176,8 +175,8 @@ describe('Tutorial part 6', () => { const heroesBefore = await toHeroArray(getPageElts().allHeroes); const numHeroes = heroesBefore.length; - element(by.css('input')).sendKeys(addedHeroName); - element(by.buttonText('add')).click(); + await element(by.css('input')).sendKeys(addedHeroName); + await element(by.buttonText('add')).click(); const page = getPageElts(); const heroesAfter = await toHeroArray(page.allHeroes); @@ -190,25 +189,25 @@ describe('Tutorial part 6', () => { }); it('displays correctly styled buttons', async () => { - element.all(by.buttonText('x')).then(buttons => { - for (const button of buttons) { - // Inherited styles from styles.css - expect(button.getCssValue('font-family')).toBe('Arial'); - expect(button.getCssValue('border')).toContain('none'); - expect(button.getCssValue('padding')).toBe('5px 10px'); - expect(button.getCssValue('border-radius')).toBe('4px'); - // Styles defined in heroes.component.css - expect(button.getCssValue('left')).toBe('194px'); - expect(button.getCssValue('top')).toBe('-32px'); - } - }); + const buttons = await element.all(by.buttonText('x')); + + for (const button of buttons) { + // Inherited styles from styles.css + expect(await button.getCssValue('font-family')).toBe('Arial'); + expect(await button.getCssValue('border')).toContain('none'); + expect(await button.getCssValue('padding')).toBe('5px 10px'); + expect(await button.getCssValue('border-radius')).toBe('4px'); + // Styles defined in heroes.component.css + expect(await button.getCssValue('left')).toBe('194px'); + expect(await button.getCssValue('top')).toBe('-32px'); + } const addButton = element(by.buttonText('add')); // Inherited styles from styles.css - expect(addButton.getCssValue('font-family')).toBe('Arial'); - expect(addButton.getCssValue('border')).toContain('none'); - expect(addButton.getCssValue('padding')).toBe('5px 10px'); - expect(addButton.getCssValue('border-radius')).toBe('4px'); + expect(await addButton.getCssValue('font-family')).toBe('Arial'); + expect(await addButton.getCssValue('border')).toContain('none'); + expect(await addButton.getCssValue('padding')).toBe('5px 10px'); + expect(await addButton.getCssValue('border-radius')).toBe('4px'); }); }); @@ -218,34 +217,34 @@ describe('Tutorial part 6', () => { beforeAll(() => browser.get('')); it(`searches for 'Ma'`, async () => { - getPageElts().searchBox.sendKeys('Ma'); - browser.sleep(1000); + await getPageElts().searchBox.sendKeys('Ma'); + await browser.sleep(1000); - expect(getPageElts().searchResults.count()).toBe(4); + expect(await getPageElts().searchResults.count()).toBe(4); }); it(`continues search with 'g'`, async () => { - getPageElts().searchBox.sendKeys('g'); - browser.sleep(1000); - expect(getPageElts().searchResults.count()).toBe(2); + await getPageElts().searchBox.sendKeys('g'); + await browser.sleep(1000); + expect(await getPageElts().searchResults.count()).toBe(2); }); it(`continues search with 'e' and gets ${targetHero.name}`, async () => { - getPageElts().searchBox.sendKeys('n'); - browser.sleep(1000); + await getPageElts().searchBox.sendKeys('n'); + await browser.sleep(1000); const page = getPageElts(); - expect(page.searchResults.count()).toBe(1); + expect(await page.searchResults.count()).toBe(1); const hero = page.searchResults.get(0); - expect(hero.getText()).toEqual(targetHero.name); + expect(await hero.getText()).toEqual(targetHero.name); }); it(`navigates to ${targetHero.name} details view`, async () => { const hero = getPageElts().searchResults.get(0); - expect(hero.getText()).toEqual(targetHero.name); - hero.click(); + expect(await hero.getText()).toEqual(targetHero.name); + await hero.click(); const page = getPageElts(); - expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); + expect(await page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); const hero2 = await Hero.fromDetail(page.heroDetail); expect(hero2.id).toEqual(targetHero.id); expect(hero2.name).toEqual(targetHero.name.toUpperCase()); @@ -254,12 +253,12 @@ describe('Tutorial part 6', () => { async function dashboardSelectTargetHero() { const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); - expect(targetHeroElt.getText()).toEqual(targetHero.name); - targetHeroElt.click(); - browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6 + expect(await targetHeroElt.getText()).toEqual(targetHero.name); + await targetHeroElt.click(); + await browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6 const page = getPageElts(); - expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); + expect(await page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); const hero = await Hero.fromDetail(page.heroDetail); expect(hero.id).toEqual(targetHero.id); expect(hero.name).toEqual(targetHero.name.toUpperCase()); @@ -267,7 +266,7 @@ describe('Tutorial part 6', () => { async function updateHeroNameInDetailView() { // Assumes that the current view is the hero details view. - addToHeroName(nameSuffix); + await addToHeroName(nameSuffix); const page = getPageElts(); const hero = await Hero.fromDetail(page.heroDetail); @@ -277,15 +276,15 @@ describe('Tutorial part 6', () => { }); -function addToHeroName(text: string): promise.Promise { +async function addToHeroName(text: string): Promise { const input = element(by.css('input')); - return input.sendKeys(text); + await input.sendKeys(text); } -function expectHeading(hLevel: number, expectedText: string): void { - const hTag = `h${hLevel}`; - const hText = element(by.css(hTag)).getText(); - expect(hText).toEqual(expectedText, hTag); +async function expectHeading(hLevel: number, expectedText: string): Promise { + const hTag = `h${hLevel}`; + const hText = await element(by.css(hTag)).getText(); + expect(hText).toEqual(expectedText, hTag); } function getHeroAEltById(id: number): ElementFinder { @@ -299,7 +298,5 @@ function getHeroLiEltById(id: number): ElementFinder { } async function toHeroArray(allHeroes: ElementArrayFinder): Promise { - const promisedHeroes = await allHeroes.map(Hero.fromLi); - // The cast is necessary to get around issuing with the signature of Promise.all() - return Promise.all(promisedHeroes) as Promise; + return allHeroes.map(Hero.fromLi); } diff --git a/aio/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts b/aio/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts index 229a0987d3a4c..c0a29c9b6a64e 100644 --- a/aio/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts @@ -2,41 +2,39 @@ import { browser, element, by } from 'protractor'; describe('Two-way binding e2e tests', () => { - beforeEach(() => { - browser.get(''); - }); + beforeEach(() => browser.get('')); const minusButton = element.all(by.css('button')).get(0); const plusButton = element.all(by.css('button')).get(1); const minus2Button = element.all(by.css('button')).get(2); const plus2Button = element.all(by.css('button')).get(3); - it('should display Two-way Binding', () => { - expect(element(by.css('h1')).getText()).toEqual('Two-way Binding'); + it('should display Two-way Binding', async () => { + expect(await element(by.css('h1')).getText()).toEqual('Two-way Binding'); }); - it('should display four buttons', () => { - expect(minusButton.getText()).toBe('-'); - expect(plusButton.getText()).toBe('+'); - expect(minus2Button.getText()).toBe('-'); - expect(plus2Button.getText()).toBe('+'); + it('should display four buttons', async () => { + expect(await minusButton.getText()).toBe('-'); + expect(await plusButton.getText()).toBe('+'); + expect(await minus2Button.getText()).toBe('-'); + expect(await plus2Button.getText()).toBe('+'); }); it('should change font size labels', async () => { await minusButton.click(); - expect(element.all(by.css('label')).get(0).getText()).toEqual('FontSize: 15px'); - expect(element.all(by.css('input')).get(0).getAttribute('value')).toEqual('15'); + expect(await element.all(by.css('label')).get(0).getText()).toEqual('FontSize: 15px'); + expect(await element.all(by.css('input')).get(0).getAttribute('value')).toEqual('15'); await plusButton.click(); - expect(element.all(by.css('label')).get(0).getText()).toEqual('FontSize: 16px'); - expect(element.all(by.css('input')).get(0).getAttribute('value')).toEqual('16'); + expect(await element.all(by.css('label')).get(0).getText()).toEqual('FontSize: 16px'); + expect(await element.all(by.css('input')).get(0).getAttribute('value')).toEqual('16'); await minus2Button.click(); - await expect(element.all(by.css('label')).get(2).getText()).toEqual('FontSize: 15px'); + expect(await element.all(by.css('label')).get(2).getText()).toEqual('FontSize: 15px'); }); - it('should display De-sugared two-way binding', () => { - expect(element(by.css('h2')).getText()).toEqual('De-sugared two-way binding'); + it('should display De-sugared two-way binding', async () => { + expect(await element(by.css('h2')).getText()).toEqual('De-sugared two-way binding'); }); }); diff --git a/aio/content/examples/universal/e2e/src/app.e2e-spec.ts b/aio/content/examples/universal/e2e/src/app.e2e-spec.ts index 92cae94e31b09..ffebea3ff196e 100644 --- a/aio/content/examples/universal/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/universal/e2e/src/app.e2e-spec.ts @@ -52,74 +52,74 @@ describe('Universal', () => { describe('Initial page', () => { beforeAll(() => browser.get('')); - it(`has title '${expectedTitle}'`, () => { - expect(browser.getTitle()).toEqual(expectedTitle); + it(`has title '${expectedTitle}'`, async () => { + expect(await browser.getTitle()).toEqual(expectedTitle); }); - it(`has h1 '${expectedH1}'`, () => { - expectHeading(1, expectedH1); + it(`has h1 '${expectedH1}'`, async () => { + await expectHeading(1, expectedH1); }); const expectedViewNames = ['Dashboard', 'Heroes']; - it(`has views ${expectedViewNames}`, () => { - const viewNames = getPageElts().navElts.map((el: ElementFinder) => el.getText()); + it(`has views ${expectedViewNames}`, async () => { + const viewNames = await getPageElts().navElts.map(el => el.getText()); expect(viewNames).toEqual(expectedViewNames); }); - it('has dashboard as the active view', () => { + it('has dashboard as the active view', async () => { const page = getPageElts(); - expect(page.appDashboard.isPresent()).toBeTruthy(); + expect(await page.appDashboard.isPresent()).toBeTruthy(); }); }); describe('Dashboard tests', () => { beforeAll(() => browser.get('')); - it('has top heroes', () => { + it('has top heroes', async () => { const page = getPageElts(); - expect(page.topHeroes.count()).toEqual(4); + expect(await page.topHeroes.count()).toEqual(4); }); it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero); it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); - it(`cancels and shows ${targetHero.name} in Dashboard`, () => { - element(by.buttonText('go back')).click(); - browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6 + it(`cancels and shows ${targetHero.name} in Dashboard`, async () => { + await element(by.buttonText('go back')).click(); + await browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6 const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); - expect(targetHeroElt.getText()).toEqual(targetHero.name); + expect(await targetHeroElt.getText()).toEqual(targetHero.name); }); it(`selects and routes to ${targetHero.name} details`, dashboardSelectTargetHero); it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); - it(`saves and shows ${newHeroName} in Dashboard`, () => { - element(by.buttonText('save')).click(); - browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6 + it(`saves and shows ${newHeroName} in Dashboard`, async () => { + await element(by.buttonText('save')).click(); + await browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6 const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); - expect(targetHeroElt.getText()).toEqual(newHeroName); + expect(await targetHeroElt.getText()).toEqual(newHeroName); }); }); describe('Heroes tests', () => { beforeAll(() => browser.get('')); - it('can switch to Heroes view', () => { - getPageElts().appHeroesHref.click(); + it('can switch to Heroes view', async () => { + await getPageElts().appHeroesHref.click(); const page = getPageElts(); - expect(page.appHeroes.isPresent()).toBeTruthy(); - expect(page.allHeroes.count()).toEqual(10, 'number of heroes'); + expect(await page.appHeroes.isPresent()).toBeTruthy(); + expect(await page.allHeroes.count()).toEqual(10, 'number of heroes'); }); it('can route to hero details', async () => { - getHeroLiEltById(targetHero.id).click(); + await getHeroLiEltById(targetHero.id).click(); const page = getPageElts(); - expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); + expect(await page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); const hero = await Hero.fromDetail(page.heroDetail); expect(hero.id).toEqual(targetHero.id); expect(hero.name).toEqual(targetHero.name.toUpperCase()); @@ -127,26 +127,26 @@ describe('Universal', () => { it(`updates hero name (${newHeroName}) in details view`, updateHeroNameInDetailView); - it(`shows ${newHeroName} in Heroes list`, () => { - element(by.buttonText('save')).click(); - browser.waitForAngular(); + it(`shows ${newHeroName} in Heroes list`, async () => { + await element(by.buttonText('save')).click(); + await browser.waitForAngular(); const expectedText = `${targetHero.id} ${newHeroName}`; - expect(getHeroAEltById(targetHero.id).getText()).toEqual(expectedText); + expect(await getHeroAEltById(targetHero.id).getText()).toEqual(expectedText); }); it(`deletes ${newHeroName} from Heroes list`, async () => { const heroesBefore = await toHeroArray(getPageElts().allHeroes); const li = getHeroLiEltById(targetHero.id); - li.element(by.buttonText('x')).click(); + await li.element(by.buttonText('x')).click(); const page = getPageElts(); - expect(page.appHeroes.isPresent()).toBeTruthy(); - expect(page.allHeroes.count()).toEqual(9, 'number of heroes'); + expect(await page.appHeroes.isPresent()).toBeTruthy(); + expect(await page.allHeroes.count()).toEqual(9, 'number of heroes'); const heroesAfter = await toHeroArray(page.allHeroes); // console.log(await Hero.fromLi(page.allHeroes[0])); const expectedHeroes = heroesBefore.filter(h => h.name !== newHeroName); expect(heroesAfter).toEqual(expectedHeroes); - // expect(page.selectedHeroSubview.isPresent()).toBeFalsy(); + // expect(await page.selectedHeroSubview.isPresent()).toBeFalsy(); }); it(`adds back ${targetHero.name}`, async () => { @@ -154,8 +154,8 @@ describe('Universal', () => { const heroesBefore = await toHeroArray(getPageElts().allHeroes); const numHeroes = heroesBefore.length; - element(by.css('input')).sendKeys(updatedHeroName); - element(by.buttonText('add')).click(); + await element(by.css('input')).sendKeys(updatedHeroName); + await element(by.buttonText('add')).click(); const page = getPageElts(); const heroesAfter = await toHeroArray(page.allHeroes); @@ -168,25 +168,25 @@ describe('Universal', () => { }); it('displays correctly styled buttons', async () => { - element.all(by.buttonText('x')).then(buttons => { - for (const button of buttons) { - // Inherited styles from styles.css - expect(button.getCssValue('font-family')).toBe('Arial'); - expect(button.getCssValue('border')).toContain('none'); - expect(button.getCssValue('padding')).toBe('5px 10px'); - expect(button.getCssValue('border-radius')).toBe('4px'); - // Styles defined in heroes.component.css - expect(button.getCssValue('left')).toBe('194px'); - expect(button.getCssValue('top')).toBe('-32px'); - } - }); + const buttons = await element.all(by.buttonText('x')); + + for (const button of buttons) { + // Inherited styles from styles.css + expect(await button.getCssValue('font-family')).toBe('Arial'); + expect(await button.getCssValue('border')).toContain('none'); + expect(await button.getCssValue('padding')).toBe('5px 10px'); + expect(await button.getCssValue('border-radius')).toBe('4px'); + // Styles defined in heroes.component.css + expect(await button.getCssValue('left')).toBe('194px'); + expect(await button.getCssValue('top')).toBe('-32px'); + } const addButton = element(by.buttonText('add')); // Inherited styles from styles.css - expect(addButton.getCssValue('font-family')).toBe('Arial'); - expect(addButton.getCssValue('border')).toContain('none'); - expect(addButton.getCssValue('padding')).toBe('5px 10px'); - expect(addButton.getCssValue('border-radius')).toBe('4px'); + expect(await addButton.getCssValue('font-family')).toBe('Arial'); + expect(await addButton.getCssValue('border')).toContain('none'); + expect(await addButton.getCssValue('padding')).toBe('5px 10px'); + expect(await addButton.getCssValue('border-radius')).toBe('4px'); }); }); @@ -194,34 +194,34 @@ describe('Universal', () => { beforeAll(() => browser.get('')); it(`searches for 'Ma'`, async () => { - getPageElts().searchBox.sendKeys('Ma'); - browser.sleep(1000); + await getPageElts().searchBox.sendKeys('Ma'); + await browser.sleep(1000); - expect(getPageElts().searchResults.count()).toBe(4); + expect(await getPageElts().searchResults.count()).toBe(4); }); it(`continues search with 'g'`, async () => { - getPageElts().searchBox.sendKeys('g'); - browser.sleep(1000); - expect(getPageElts().searchResults.count()).toBe(2); + await getPageElts().searchBox.sendKeys('g'); + await browser.sleep(1000); + expect(await getPageElts().searchResults.count()).toBe(2); }); it(`continues search with 'e' and gets ${targetHero.name}`, async () => { - getPageElts().searchBox.sendKeys('n'); - browser.sleep(1000); + await getPageElts().searchBox.sendKeys('n'); + await browser.sleep(1000); const page = getPageElts(); - expect(page.searchResults.count()).toBe(1); + expect(await page.searchResults.count()).toBe(1); const hero = page.searchResults.get(0); - expect(hero.getText()).toEqual(targetHero.name); + expect(await hero.getText()).toEqual(targetHero.name); }); it(`navigates to ${targetHero.name} details view`, async () => { const hero = getPageElts().searchResults.get(0); - expect(hero.getText()).toEqual(targetHero.name); - hero.click(); + expect(await hero.getText()).toEqual(targetHero.name); + await hero.click(); const page = getPageElts(); - expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); + expect(await page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); const hero2 = await Hero.fromDetail(page.heroDetail); expect(hero2.id).toEqual(targetHero.id); expect(hero2.name).toEqual(targetHero.name.toUpperCase()); @@ -229,26 +229,26 @@ describe('Universal', () => { }); // Helpers - function addToHeroName(text: string): Promise { - return element(by.css('input')).sendKeys(text) as Promise; + async function addToHeroName(text: string): Promise { + await element(by.css('input')).sendKeys(text); } async function dashboardSelectTargetHero(): Promise { const targetHeroElt = getPageElts().topHeroes.get(targetHeroDashboardIndex); - expect(targetHeroElt.getText()).toEqual(targetHero.name); - targetHeroElt.click(); - browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6 + expect(await targetHeroElt.getText()).toEqual(targetHero.name); + await targetHeroElt.click(); + await browser.waitForAngular(); // seems necessary to gets tests to pass for toh-pt6 const page = getPageElts(); - expect(page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); + expect(await page.heroDetail.isPresent()).toBeTruthy('shows hero detail'); const hero = await Hero.fromDetail(page.heroDetail); expect(hero.id).toEqual(targetHero.id); expect(hero.name).toEqual(targetHero.name.toUpperCase()); } - function expectHeading(hLevel: number, expectedText: string): void { + async function expectHeading(hLevel: number, expectedText: string): Promise { const hTag = `h${hLevel}`; - const hText = element(by.css(hTag)).getText(); + const hText = await element(by.css(hTag)).getText(); expect(hText).toEqual(expectedText, hTag); } @@ -290,7 +290,7 @@ describe('Universal', () => { async function updateHeroNameInDetailView(): Promise { // Assumes that the current view is the hero details view. - addToHeroName(nameSuffix); + await addToHeroName(nameSuffix); const page = getPageElts(); const hero = await Hero.fromDetail(page.heroDetail); diff --git a/aio/content/examples/upgrade-module/e2e-spec.ts b/aio/content/examples/upgrade-module/e2e-spec.ts index 4d1c31c74aaa2..c38ad9dcb628c 100644 --- a/aio/content/examples/upgrade-module/e2e-spec.ts +++ b/aio/content/examples/upgrade-module/e2e-spec.ts @@ -4,48 +4,40 @@ describe('Upgrade Tests', () => { describe('AngularJS Auto-bootstrap', () => { - beforeAll(() => { - browser.get('/index-ng-app.html'); - }); + beforeAll(() => browser.get('/index-ng-app.html')); - it('bootstraps as expected', () => { - expect(element(by.css('#message')).getText()).toEqual('Hello world'); + it('bootstraps as expected', async () => { + expect(await element(by.css('#message')).getText()).toEqual('Hello world'); }); }); describe('AngularJS JavaScript Bootstrap', () => { - beforeAll(() => { - browser.get('/index-bootstrap.html'); - }); + beforeAll(() => browser.get('/index-bootstrap.html')); - it('bootstraps as expected', () => { - expect(element(by.css('#message')).getText()).toEqual('Hello world'); + it('bootstraps as expected', async () => { + expect(await element(by.css('#message')).getText()).toEqual('Hello world'); }); }); describe('AngularJS-Angular Hybrid Bootstrap', () => { - beforeAll(() => { - browser.get('/index-ajs-a-hybrid-bootstrap.html'); - }); + beforeAll(() => browser.get('/index-ajs-a-hybrid-bootstrap.html')); - it('bootstraps as expected', () => { - expect(element(by.css('#message')).getText()).toEqual('Hello world'); + it('bootstraps as expected', async () => { + expect(await element(by.css('#message')).getText()).toEqual('Hello world'); }); }); - describe('Upgraded static component', () => { + describe('Upgraded static component', async () => { - beforeAll(() => { - browser.get('/index-upgrade-static.html'); - }); + beforeAll(() => browser.get('/index-upgrade-static.html')); - it('renders', () => { - expect(element(by.css('h2')).getText()).toEqual('Windstorm details!'); + it('renders', async () => { + expect(await element(by.css('h2')).getText()).toEqual('Windstorm details!'); }); }); @@ -53,17 +45,15 @@ describe('Upgrade Tests', () => { describe('Upgraded component with IO', () => { - beforeAll(() => { - browser.get('/index-upgrade-io.html'); - }); + beforeAll(() => browser.get('/index-upgrade-io.html')); - it('has inputs', () => { - expect(element(by.css('h2')).getText()).toEqual('Windstorm details!'); + it('has inputs', async () => { + expect(await element(by.css('h2')).getText()).toEqual('Windstorm details!'); }); - it('has outputs', () => { - element(by.buttonText('Delete')).click(); - expect(element(by.css('h2')).getText()).toEqual('Ex-Windstorm details!'); + it('has outputs', async () => { + await element(by.buttonText('Delete')).click(); + expect(await element(by.css('h2')).getText()).toEqual('Ex-Windstorm details!'); }); }); @@ -71,33 +61,29 @@ describe('Upgrade Tests', () => { describe('Downgraded static component', () => { - beforeAll(() => { - browser.get('/index-downgrade-static.html'); - }); + beforeAll(() => browser.get('/index-downgrade-static.html')); - it('renders', () => { - expect(element(by.css('h2')).getText()).toEqual('Windstorm details!'); + it('renders', async () => { + expect(await element(by.css('h2')).getText()).toEqual('Windstorm details!'); }); }); describe('Downgraded component with IO', () => { - beforeAll(() => { - browser.get('/index-downgrade-io.html'); - }); + beforeAll(() => browser.get('/index-downgrade-io.html')); - it('has inputs', () => { - expect(element.all(by.css('h2')).first().getText()).toEqual('Windstorm details!'); + it('has inputs', async () => { + expect(await element.all(by.css('h2')).first().getText()).toEqual('Windstorm details!'); }); - it('has outputs', () => { - element.all(by.buttonText('Delete')).first().click(); - expect(element.all(by.css('h2')).first().getText()).toEqual('Ex-Windstorm details!'); + it('has outputs', async () => { + await element.all(by.buttonText('Delete')).first().click(); + expect(await element.all(by.css('h2')).first().getText()).toEqual('Ex-Windstorm details!'); }); - it('supports ng-repeat', () => { - expect(element.all(by.css('hero-detail')).count()).toBe(3); + it('supports ng-repeat', async () => { + expect(await element.all(by.css('hero-detail')).count()).toBe(3); }); }); @@ -105,12 +91,10 @@ describe('Upgrade Tests', () => { describe('Downgraded component with content projection', () => { - beforeAll(() => { - browser.get('/index-ajs-to-a-projection.html'); - }); + beforeAll(() => browser.get('/index-ajs-to-a-projection.html')); - it('can be transcluded into', () => { - expect(element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds'); + it('can be transcluded into', async () => { + expect(await element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds'); }); }); @@ -118,12 +102,10 @@ describe('Upgrade Tests', () => { describe('Upgraded component with transclusion', () => { - beforeAll(() => { - browser.get('/index-a-to-ajs-transclusion.html'); - }); + beforeAll(() => browser.get('/index-a-to-ajs-transclusion.html')); - it('can be projected into', () => { - expect(element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds'); + it('can be projected into', async () => { + expect(await element(by.css('hero-detail')).getText()).toContain('Specific powers of controlling winds'); }); }); @@ -131,12 +113,10 @@ describe('Upgrade Tests', () => { describe('Upgrading AngularJS Providers', () => { - beforeAll(() => { - browser.get('/index-ajs-to-a-providers.html'); - }); + beforeAll(() => browser.get('/index-ajs-to-a-providers.html')); - it('works', () => { - expect(element(by.css('h2')).getText()).toBe('1: Windstorm'); + it('works', async () => { + expect(await element(by.css('h2')).getText()).toBe('1: Windstorm'); }); }); @@ -144,12 +124,10 @@ describe('Upgrade Tests', () => { describe('Downgrading Angular Providers', () => { - beforeAll(() => { - browser.get('/index-a-to-ajs-providers.html'); - }); + beforeAll(() => browser.get('/index-a-to-ajs-providers.html')); - it('works', () => { - expect(element(by.css('h2')).getText()).toBe('1: Windstorm'); + it('works', async () => { + expect(await element(by.css('h2')).getText()).toBe('1: Windstorm'); }); }); diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts b/aio/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts index fe87205fcd641..1c5b51467ed7c 100644 --- a/aio/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts +++ b/aio/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts @@ -11,41 +11,39 @@ describe('PhoneCat Application', () => { browser.rootEl = 'body'; }); - it('should redirect `index.html` to `index.html#!/phones', () => { - browser.get('index.html'); - expect(browser.getLocationAbsUrl()).toBe('/phones'); + it('should redirect `index.html` to `index.html#!/phones', async () => { + await browser.get('index.html'); + expect(await browser.getLocationAbsUrl()).toBe('/phones'); }); describe('View: Phone list', () => { // Helpers - const waitForCount = (elems: ElementArrayFinder, count: number) => { + const waitForCount = async (elems: ElementArrayFinder, count: number) => { // Wait for the list to stabilize, which may take a while (e.g. due to animations). - browser.wait(() => elems.count().then(c => c === count), 5000); + await browser.wait(async () => await elems.count() === count, 5000); }; - beforeEach(() => { - browser.get('index.html#!/phones'); - }); + beforeEach(() => browser.get('index.html#!/phones')); - it('should filter the phone list as a user types into the search box', () => { + it('should filter the phone list as a user types into the search box', async () => { const phoneList = element.all(by.repeater('phone in $ctrl.phones')); const query = element(by.model('$ctrl.query')); - waitForCount(phoneList, 20); - expect(phoneList.count()).toBe(20); + await waitForCount(phoneList, 20); + expect(await phoneList.count()).toBe(20); - query.sendKeys('nexus'); - waitForCount(phoneList, 1); - expect(phoneList.count()).toBe(1); + await query.sendKeys('nexus'); + await waitForCount(phoneList, 1); + expect(await phoneList.count()).toBe(1); - query.clear(); - query.sendKeys('motorola'); - waitForCount(phoneList, 8); - expect(phoneList.count()).toBe(8); + await query.clear(); + await query.sendKeys('motorola'); + await waitForCount(phoneList, 8); + expect(await phoneList.count()).toBe(8); }); - it('should be possible to control phone order via the drop-down menu', () => { + it('should be possible to control phone order via the drop-down menu', async () => { const queryField = element(by.model('$ctrl.query')); const orderSelect = element(by.model('$ctrl.orderProp')); const nameOption = orderSelect.element(by.css('option[value="name"]')); @@ -55,63 +53,61 @@ describe('PhoneCat Application', () => { return phoneNameColumn.map((elem: ElementFinder) => elem.getText()); } - queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter - waitForCount(phoneNameColumn, 2); + await queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter + await waitForCount(phoneNameColumn, 2); - expect(getNames()).toEqual([ + expect(await getNames()).toEqual([ 'Motorola XOOM\u2122 with Wi-Fi', 'MOTOROLA XOOM\u2122' ]); - nameOption.click(); + await nameOption.click(); - expect(getNames()).toEqual([ + expect(await getNames()).toEqual([ 'MOTOROLA XOOM\u2122', 'Motorola XOOM\u2122 with Wi-Fi' ]); }); - it('should render phone specific links', () => { + it('should render phone specific links', async () => { const phoneList = element.all(by.repeater('phone in $ctrl.phones')); const query = element(by.model('$ctrl.query')); - query.sendKeys('nexus'); - waitForCount(phoneList, 1); + await query.sendKeys('nexus'); + await waitForCount(phoneList, 1); const nexusPhone = phoneList.first(); const detailLink = nexusPhone.all(by.css('a')).first(); - detailLink.click(); - expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s'); + await detailLink.click(); + expect(await browser.getLocationAbsUrl()).toBe('/phones/nexus-s'); }); }); describe('View: Phone detail', () => { - beforeEach(() => { - browser.get('index.html#!/phones/nexus-s'); - }); + beforeEach(() => browser.get('index.html#!/phones/nexus-s')); - it('should display the `nexus-s` page', () => { - expect(element(by.binding('$ctrl.phone.name')).getText()).toBe('Nexus S'); + it('should display the `nexus-s` page', async () => { + expect(await element(by.binding('$ctrl.phone.name')).getText()).toBe('Nexus S'); }); - it('should display the first phone image as the main phone image', () => { + it('should display the first phone image as the main phone image', async () => { const mainImage = element(by.css('img.phone.selected')); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); + expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); }); - it('should swap the main image when clicking on a thumbnail image', () => { + it('should swap the main image when clicking on a thumbnail image', async () => { const mainImage = element(by.css('img.phone.selected')); const thumbnails = element.all(by.css('.phone-thumbs img')); - thumbnails.get(2).click(); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); + await thumbnails.get(2).click(); + expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); - thumbnails.get(0).click(); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); + await thumbnails.get(0).click(); + expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); }); }); diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts b/aio/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts index 6c09547b395ab..424f91ca4a1a3 100644 --- a/aio/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts +++ b/aio/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts @@ -5,33 +5,31 @@ import { browser, element, by } from 'protractor'; describe('PhoneCat Application', () => { - it('should redirect `index.html` to `index.html#!/phones', () => { - browser.get('index.html'); - browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine. - expect(browser.getCurrentUrl()).toMatch(/\/phones$/); + it('should redirect `index.html` to `index.html#!/phones', async () => { + await browser.get('index.html'); + await browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine. + expect(await browser.getCurrentUrl()).toMatch(/\/phones$/); }); describe('View: Phone list', () => { - beforeEach(() => { - browser.get('index.html#!/phones'); - }); + beforeEach(() => browser.get('index.html#!/phones')); - it('should filter the phone list as a user types into the search box', () => { + it('should filter the phone list as a user types into the search box', async () => { const phoneList = element.all(by.css('.phones li')); const query = element(by.css('input')); - expect(phoneList.count()).toBe(20); + expect(await phoneList.count()).toBe(20); - query.sendKeys('nexus'); - expect(phoneList.count()).toBe(1); + await query.sendKeys('nexus'); + expect(await phoneList.count()).toBe(1); - query.clear(); - query.sendKeys('motorola'); - expect(phoneList.count()).toBe(8); + await query.clear(); + await query.sendKeys('motorola'); + expect(await phoneList.count()).toBe(8); }); - it('should be possible to control phone order via the drop-down menu', () => { + it('should be possible to control phone order via the drop-down menu', async () => { const queryField = element(by.css('input')); const orderSelect = element(by.css('select')); const nameOption = orderSelect.element(by.css('option[value="name"]')); @@ -41,57 +39,55 @@ describe('PhoneCat Application', () => { return phoneNameColumn.map((elem) => elem.getText()); } - queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter + await queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter - expect(getNames()).toEqual([ + expect(await getNames()).toEqual([ 'Motorola XOOM\u2122 with Wi-Fi', 'MOTOROLA XOOM\u2122' ]); - nameOption.click(); + await nameOption.click(); - expect(getNames()).toEqual([ + expect(await getNames()).toEqual([ 'MOTOROLA XOOM\u2122', 'Motorola XOOM\u2122 with Wi-Fi' ]); }); - it('should render phone specific links', () => { + it('should render phone specific links', async () => { const query = element(by.css('input')); - query.sendKeys('nexus'); + await query.sendKeys('nexus'); - element.all(by.css('.phones li a')).first().click(); - browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine. - expect(browser.getCurrentUrl()).toMatch(/\/phones\/nexus-s$/); + await element.all(by.css('.phones li a')).first().click(); + await browser.sleep(1000); // Not sure why this is needed but it is. The route change works fine. + expect(await browser.getCurrentUrl()).toMatch(/\/phones\/nexus-s$/); }); }); describe('View: Phone detail', () => { - beforeEach(() => { - browser.get('index.html#!/phones/nexus-s'); - }); + beforeEach(() => browser.get('index.html#!/phones/nexus-s')); - it('should display the `nexus-s` page', () => { - expect(element(by.css('h1')).getText()).toBe('Nexus S'); + it('should display the `nexus-s` page', async () => { + expect(await element(by.css('h1')).getText()).toBe('Nexus S'); }); - it('should display the first phone image as the main phone image', () => { + it('should display the first phone image as the main phone image', async () => { const mainImage = element(by.css('img.phone.selected')); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); + expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); }); - it('should swap the main image when clicking on a thumbnail image', () => { + it('should swap the main image when clicking on a thumbnail image', async () => { const mainImage = element(by.css('img.phone.selected')); const thumbnails = element.all(by.css('.phone-thumbs img')); - thumbnails.get(2).click(); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); + await thumbnails.get(2).click(); + expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); - thumbnails.get(0).click(); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); + await thumbnails.get(0).click(); + expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); }); }); diff --git a/aio/content/examples/upgrade-phonecat-3-final/e2e-spec.ts b/aio/content/examples/upgrade-phonecat-3-final/e2e-spec.ts index 882e38a55b04d..a9ba63978f9c1 100644 --- a/aio/content/examples/upgrade-phonecat-3-final/e2e-spec.ts +++ b/aio/content/examples/upgrade-phonecat-3-final/e2e-spec.ts @@ -6,36 +6,33 @@ import { browser, element, by } from 'protractor'; describe('PhoneCat Application', () => { // #docregion redirect - it('should redirect `index.html` to `index.html#!/phones', () => { - browser.get('index.html'); - browser.waitForAngular(); - browser.getCurrentUrl().then((url: string) => { - expect(url.endsWith('/phones')).toBe(true); - }); + it('should redirect `index.html` to `index.html#!/phones', async () => { + await browser.get('index.html'); + await browser.waitForAngular(); + const url = await browser.getCurrentUrl(); + expect(url.endsWith('/phones')).toBe(true); }); // #enddocregion redirect describe('View: Phone list', () => { - beforeEach(() => { - browser.get('index.html#!/phones'); - }); + beforeEach(() => browser.get('index.html#!/phones')); - it('should filter the phone list as a user types into the search box', () => { + it('should filter the phone list as a user types into the search box', async () => { const phoneList = element.all(by.css('.phones li')); const query = element(by.css('input')); - expect(phoneList.count()).toBe(20); + expect(await phoneList.count()).toBe(20); - query.sendKeys('nexus'); - expect(phoneList.count()).toBe(1); + await query.sendKeys('nexus'); + expect(await phoneList.count()).toBe(1); - query.clear(); - query.sendKeys('motorola'); - expect(phoneList.count()).toBe(8); + await query.clear(); + await query.sendKeys('motorola'); + expect(await phoneList.count()).toBe(8); }); - it('should be possible to control phone order via the drop-down menu', () => { + it('should be possible to control phone order via the drop-down menu', async () => { const queryField = element(by.css('input')); const orderSelect = element(by.css('select')); const nameOption = orderSelect.element(by.css('option[value="name"]')); @@ -45,29 +42,28 @@ describe('PhoneCat Application', () => { return phoneNameColumn.map((elem) => elem.getText()); } - queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter + await queryField.sendKeys('tablet'); // Let's narrow the dataset to make the assertions shorter - expect(getNames()).toEqual([ + expect(await getNames()).toEqual([ 'Motorola XOOM\u2122 with Wi-Fi', 'MOTOROLA XOOM\u2122' ]); - nameOption.click(); + await nameOption.click(); - expect(getNames()).toEqual([ + expect(await getNames()).toEqual([ 'MOTOROLA XOOM\u2122', 'Motorola XOOM\u2122 with Wi-Fi' ]); }); // #docregion links - it('should render phone specific links', () => { + it('should render phone specific links', async () => { const query = element(by.css('input')); - query.sendKeys('nexus'); - element.all(by.css('.phones li a')).first().click(); - browser.getCurrentUrl().then((url: string) => { - expect(url.endsWith('/phones/nexus-s')).toBe(true); - }); + await query.sendKeys('nexus'); + await element.all(by.css('.phones li a')).first().click(); + const url = await browser.getCurrentUrl(); + expect(url.endsWith('/phones/nexus-s')).toBe(true); }); // #enddocregion links @@ -75,29 +71,27 @@ describe('PhoneCat Application', () => { describe('View: Phone detail', () => { - beforeEach(() => { - browser.get('index.html#!/phones/nexus-s'); - }); + beforeEach(() => browser.get('index.html#!/phones/nexus-s')); - it('should display the `nexus-s` page', () => { - expect(element(by.css('h1')).getText()).toBe('Nexus S'); + it('should display the `nexus-s` page', async () => { + expect(await element(by.css('h1')).getText()).toBe('Nexus S'); }); - it('should display the first phone image as the main phone image', () => { + it('should display the first phone image as the main phone image', async () => { const mainImage = element(by.css('img.phone.selected')); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); + expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); }); - it('should swap the main image when clicking on a thumbnail image', () => { + it('should swap the main image when clicking on a thumbnail image', async () => { const mainImage = element(by.css('img.phone.selected')); const thumbnails = element.all(by.css('.phone-thumbs img')); - thumbnails.get(2).click(); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); + await thumbnails.get(2).click(); + expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/); - thumbnails.get(0).click(); - expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); + await thumbnails.get(0).click(); + expect(await mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/); }); }); diff --git a/aio/content/examples/user-input/e2e/src/app.e2e-spec.ts b/aio/content/examples/user-input/e2e/src/app.e2e-spec.ts index 02948e6bb5983..53f4e20c29342 100644 --- a/aio/content/examples/user-input/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/user-input/e2e/src/app.e2e-spec.ts @@ -2,96 +2,88 @@ import { browser, element, by, protractor } from 'protractor'; describe('User Input Tests', () => { - beforeAll(() => { - browser.get(''); - }); + beforeAll(() => browser.get('')); - it('should support the click event', () => { + it('should support the click event', async () => { const mainEle = element(by.css('app-click-me')); const buttonEle = element(by.css('app-click-me button')); - expect(mainEle.getText()).not.toContain('You are my hero!'); - buttonEle.click().then(() => { - expect(mainEle.getText()).toContain('You are my hero!'); - }); + expect(await mainEle.getText()).not.toContain('You are my hero!'); + await buttonEle.click(); + expect(await mainEle.getText()).toContain('You are my hero!'); }); - it('should support the click event with an event payload', () => { + it('should support the click event with an event payload', async () => { const mainEle = element(by.css('app-click-me2')); const buttonEle = element(by.css('app-click-me2 button')); - expect(mainEle.getText()).not.toContain('Event target is '); - buttonEle.click().then(() => { - expect(mainEle.getText()).toContain('Event target is BUTTON'); - }); + expect(await mainEle.getText()).not.toContain('Event target is '); + await buttonEle.click(); + expect(await mainEle.getText()).toContain('Event target is BUTTON'); }); - it('should support the keyup event ', () => { + it('should support the keyup event ', async () => { const mainEle = element(by.css('app-key-up1')); const inputEle = mainEle.element(by.css('input')); const outputTextEle = mainEle.element(by.css('p')); - expect(outputTextEle.getText()).toEqual(''); - inputEle.sendKeys('abc'); - expect(outputTextEle.getText()).toEqual('a | ab | abc |'); + expect(await outputTextEle.getText()).toEqual(''); + await inputEle.sendKeys('abc'); + expect(await outputTextEle.getText()).toEqual('a | ab | abc |'); }); - it('should support user input from a local template let (loopback)', () => { + it('should support user input from a local template let (loopback)', async () => { const mainEle = element(by.css('app-loop-back')); const inputEle = mainEle.element(by.css('input')); const outputTextEle = mainEle.element(by.css('p')); - expect(outputTextEle.getText()).toEqual(''); - inputEle.sendKeys('abc'); - expect(outputTextEle.getText()).toEqual('abc'); + expect(await outputTextEle.getText()).toEqual(''); + await inputEle.sendKeys('abc'); + expect(await outputTextEle.getText()).toEqual('abc'); }); - it('should be able to combine click event with a local template var', () => { + it('should be able to combine click event with a local template var', async () => { const mainEle = element(by.css('app-key-up2')); const inputEle = mainEle.element(by.css('input')); const outputTextEle = mainEle.element(by.css('p')); - expect(outputTextEle.getText()).toEqual(''); - inputEle.sendKeys('abc'); - expect(outputTextEle.getText()).toEqual('a | ab | abc |'); + expect(await outputTextEle.getText()).toEqual(''); + await inputEle.sendKeys('abc'); + expect(await outputTextEle.getText()).toEqual('a | ab | abc |'); }); - it('should be able to filter key events', () => { + it('should be able to filter key events', async () => { const mainEle = element(by.css('app-key-up3')); const inputEle = mainEle.element(by.css('input')); const outputTextEle = mainEle.element(by.css('p')); - expect(outputTextEle.getText()).toEqual(''); - inputEle.sendKeys('abc'); - expect(outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet'); + expect(await outputTextEle.getText()).toEqual(''); + await inputEle.sendKeys('abc'); + expect(await outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet'); // broken atm, see https://github.com/angular/angular/issues/9419 - inputEle.sendKeys(protractor.Key.ENTER); - expect(outputTextEle.getText()).toEqual('abc'); + await inputEle.sendKeys(protractor.Key.ENTER); + expect(await outputTextEle.getText()).toEqual('abc'); }); - it('should be able to filter blur events', () => { + it('should be able to filter blur events', async () => { const prevInputEle = element(by.css('app-key-up3 input')); const mainEle = element(by.css('app-key-up4')); const inputEle = mainEle.element(by.css('input')); const outputTextEle = mainEle.element(by.css('p')); - expect(outputTextEle.getText()).toEqual(''); - inputEle.sendKeys('abc'); - expect(outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet'); + expect(await outputTextEle.getText()).toEqual(''); + await inputEle.sendKeys('abc'); + expect(await outputTextEle.getText()).toEqual('', 'should be blank - have not sent enter yet'); // change the focus - prevInputEle.click().then(() => { - expect(outputTextEle.getText()).toEqual('abc'); - }); + await prevInputEle.click(); + expect(await outputTextEle.getText()).toEqual('abc'); }); - it('should be able to compose little tour of heroes', () => { + it('should be able to compose little tour of heroes', async () => { const mainEle = element(by.css('app-little-tour')); const inputEle = mainEle.element(by.css('input')); const addButtonEle = mainEle.element(by.css('button')); const heroEles = mainEle.all(by.css('li')); - let numHeroes: number; - expect(heroEles.count()).toBeGreaterThan(0); - heroEles.count().then((count: number) => { - numHeroes = count; - inputEle.sendKeys('abc'); - return addButtonEle.click(); - }).then(() => { - expect(heroEles.count()).toEqual(numHeroes + 1, 'should be one more hero added'); - expect(heroEles.get(numHeroes).getText()).toContain('abc'); - }); + const numHeroes = await heroEles.count(); + expect(numHeroes).toBeGreaterThan(0); + + await inputEle.sendKeys('abc'); + await addButtonEle.click(); + expect(await heroEles.count()).toEqual(numHeroes + 1, 'should be one more hero added'); + expect(await heroEles.get(numHeroes).getText()).toContain('abc'); }); }); diff --git a/aio/tools/examples/shared/boilerplate/cli-ajs/package.json b/aio/tools/examples/shared/boilerplate/cli-ajs/package.json index 5d65eb8f72849..7976895e6f176 100644 --- a/aio/tools/examples/shared/boilerplate/cli-ajs/package.json +++ b/aio/tools/examples/shared/boilerplate/cli-ajs/package.json @@ -35,7 +35,6 @@ "@types/angular": "1.7.3", "@types/angular-route": "1.7.1", "@types/jasmine": "~3.6.0", - "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", diff --git a/aio/tools/examples/shared/boilerplate/cli/e2e/protractor.conf.js b/aio/tools/examples/shared/boilerplate/cli/e2e/protractor.conf.js index 09a96840f2319..22bd9d953c77f 100644 --- a/aio/tools/examples/shared/boilerplate/cli/e2e/protractor.conf.js +++ b/aio/tools/examples/shared/boilerplate/cli/e2e/protractor.conf.js @@ -16,6 +16,7 @@ exports.config = { browserName: 'chrome' }, directConnect: true, + SELENIUM_PROMISE_MANAGER: false, baseUrl: 'http://localhost:4200/', framework: 'jasmine', jasmineNodeOpts: { diff --git a/aio/tools/examples/shared/boilerplate/cli/e2e/tsconfig.json b/aio/tools/examples/shared/boilerplate/cli/e2e/tsconfig.json index 426058ef0fbe7..0782539c045b9 100644 --- a/aio/tools/examples/shared/boilerplate/cli/e2e/tsconfig.json +++ b/aio/tools/examples/shared/boilerplate/cli/e2e/tsconfig.json @@ -7,7 +7,6 @@ "target": "es2018", "types": [ "jasmine", - "jasminewd2", "node" ] } diff --git a/aio/tools/examples/shared/boilerplate/cli/package.json b/aio/tools/examples/shared/boilerplate/cli/package.json index 73e3930b7c515..650e25fa4596c 100644 --- a/aio/tools/examples/shared/boilerplate/cli/package.json +++ b/aio/tools/examples/shared/boilerplate/cli/package.json @@ -31,7 +31,6 @@ "@angular/cli": "~11.0.2", "@angular/compiler-cli": "~11.0.1", "@types/jasmine": "~3.6.0", - "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", diff --git a/aio/tools/examples/shared/boilerplate/elements/package.json b/aio/tools/examples/shared/boilerplate/elements/package.json index 0e0ab1465d6cb..9d1f1edd39217 100644 --- a/aio/tools/examples/shared/boilerplate/elements/package.json +++ b/aio/tools/examples/shared/boilerplate/elements/package.json @@ -33,7 +33,6 @@ "@angular/cli": "~11.0.2", "@angular/compiler-cli": "~11.0.1", "@types/jasmine": "~3.6.0", - "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", diff --git a/aio/tools/examples/shared/boilerplate/i18n/package.json b/aio/tools/examples/shared/boilerplate/i18n/package.json index 251e926eb5346..00d0b723f82b5 100644 --- a/aio/tools/examples/shared/boilerplate/i18n/package.json +++ b/aio/tools/examples/shared/boilerplate/i18n/package.json @@ -35,7 +35,6 @@ "@angular/cli": "~11.0.2", "@angular/compiler-cli": "~11.0.1", "@types/jasmine": "~3.6.0", - "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", diff --git a/aio/tools/examples/shared/boilerplate/service-worker/package.json b/aio/tools/examples/shared/boilerplate/service-worker/package.json index 883a9a4c42f8b..a2857856f93d2 100644 --- a/aio/tools/examples/shared/boilerplate/service-worker/package.json +++ b/aio/tools/examples/shared/boilerplate/service-worker/package.json @@ -32,7 +32,6 @@ "@angular/cli": "~11.0.2", "@angular/compiler-cli": "~11.0.1", "@types/jasmine": "~3.6.0", - "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", diff --git a/aio/tools/examples/shared/boilerplate/systemjs/package.json b/aio/tools/examples/shared/boilerplate/systemjs/package.json index 82463380995df..74268723ea7f5 100644 --- a/aio/tools/examples/shared/boilerplate/systemjs/package.json +++ b/aio/tools/examples/shared/boilerplate/systemjs/package.json @@ -49,7 +49,6 @@ "@types/angular-resource": "1.5.16", "@types/angular-route": "1.7.1", "@types/jasmine": "~3.6.0", - "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "concurrently": "^5.0.1", "http-server": "^0.12.0", diff --git a/aio/tools/examples/shared/boilerplate/universal/package.json b/aio/tools/examples/shared/boilerplate/universal/package.json index 1b328133d8dc2..95d746fcaa906 100644 --- a/aio/tools/examples/shared/boilerplate/universal/package.json +++ b/aio/tools/examples/shared/boilerplate/universal/package.json @@ -40,7 +40,6 @@ "@nguniversal/builders": "^11.0.0", "@types/express": "^4.17.8", "@types/jasmine": "~3.6.0", - "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", diff --git a/aio/tools/examples/shared/package.json b/aio/tools/examples/shared/package.json index 31640e4dc3a42..e65d24a53cdec 100644 --- a/aio/tools/examples/shared/package.json +++ b/aio/tools/examples/shared/package.json @@ -58,7 +58,6 @@ "@types/angular-route": "1.7.1", "@types/express": "^4.17.8", "@types/jasmine": "~3.6.0", - "@types/jasminewd2": "~2.0.3", "@types/jquery": "3.5.1", "@types/node": "^12.11.1", "canonical-path": "1.0.0", diff --git a/aio/tools/examples/shared/yarn.lock b/aio/tools/examples/shared/yarn.lock index 985a164aec379..49aa795efd9a6 100644 --- a/aio/tools/examples/shared/yarn.lock +++ b/aio/tools/examples/shared/yarn.lock @@ -1696,22 +1696,11 @@ dependencies: "@types/node" "*" -"@types/jasmine@*": - version "2.6.2" - resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.6.2.tgz#6e6d4cb183cd55c7a1ad6270bced10fdd5367a3c" - "@types/jasmine@~3.6.0": version "3.6.2" resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-3.6.2.tgz#02f64450016f7de70f145d698be311136d7c6374" integrity sha512-AzfesNFLvOs6Q1mHzIsVJXSeUnqVh4ZHG8ngygKJfbkcSLwzrBVm/LKa+mR8KrOfnWtUL47112gde1MC0IXqpQ== -"@types/jasminewd2@~2.0.3": - version "2.0.8" - resolved "https://registry.yarnpkg.com/@types/jasminewd2/-/jasminewd2-2.0.8.tgz#67afe5098d5ef2386073a7b7384b69a840dfe93b" - integrity sha512-d9p31r7Nxk0ZH0U39PTH0hiDlJ+qNVGjlt1ucOoTUptxb2v+Y5VMnsxfwN+i3hK4yQnqBi3FMmoMFcd1JHDxdg== - dependencies: - "@types/jasmine" "*" - "@types/jquery@3.5.1": version "3.5.1" resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.1.tgz#cebb057acf5071c40e439f30e840c57a30d406c3"