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

test(docs-infra): disable the Selenium Promise Manager in docs examples e2e tests (#39818)

Browse Source 
This commit disables the Selenium Promise Manager when running e2e tests
for docs examples in order to more closely align them with new apps
created with CLI v11. This change requires that any async operations in
tests are handled explicitly (e.g. using `async/await` or
`Promise#then()`).

PR Close #39818
This commit is contained in:
George Kalpakas 2020-11-23 20:17:10 +02:00 committed by Andrew Kushnir
parent 1fd09277a6
commit 23c36a24ed
77 changed files with 1668 additions and 1883 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
aio/content/examples/accessibility/e2e/src/app.e2e-spec.ts
View File

@ -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', async () => {
expect(await element(by.css('h1')).getText()).toEqual('Accessibility Example');
});
it('should display Accessibility Example', () => {
expect(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');
});
});

73
aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts
View File

@ -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', async () => {
await testImagesAreDisplayed(false);
});
it('should display no poster images after bootstrap', () => {
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);
}
}
});

22
aio/content/examples/animations/e2e/src/app.e2e-spec.ts
View File

@ -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', () => {
});
});
});

26
aio/content/examples/architecture/e2e/src/app.e2e-spec.ts
View File

@ -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');
});
}

35
aio/content/examples/attribute-binding/e2e/src/app.e2e-spec.ts
View File

@ -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', async () => {
expect(await element(by.css('h1')).getText()).toEqual('Attribute, class, and style bindings');
});
it('should display Property Binding with Angular', () => {
expect(element(by.css('h1')).getText()).toEqual('Attribute, class, and style bindings');
it('should display a table', async () => {
expect(await element.all(by.css('table')).isPresent()).toBe(true);
});
it('should display a table', () => {
expect(element.all(by.css('table')).isPresent()).toBe(true);
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 an Aria button', () => {
expect(element.all(by.css('button')).get(0).getText()).toBe('Go for it with Aria');
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 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 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 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 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');
});
});

20
aio/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts
View File

@ -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}`, async () => {
expect(await element(by.css('h1')).getText()).toEqual(title);
});
it(`should display correct title: ${title}`, () => {
expect(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);
});
});

34
aio/content/examples/binding-syntax/e2e/src/app.e2e-spec.ts
View File

@ -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);
});
});

6
aio/content/examples/bootstrapping/e2e/src/app.e2e-spec.ts
View File

@ -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!');
});
});

53
aio/content/examples/built-in-directives/e2e/src/app.e2e-spec.ts
View File

@ -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');
});
});

12
aio/content/examples/built-in-template-functions/e2e/src/app.e2e-spec.ts
View File

@ -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( )');
});
});

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

@ -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 = '"<no name set>"';
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

8
aio/content/examples/component-overview/e2e/src/app.e2e-spec.ts
View File

@ -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!');
});
});

46
aio/content/examples/component-styles/e2e/src/app.e2e-spec.ts
View File

@ -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 <link>s', () => {
it('processes template <link>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');
});
});

36
aio/content/examples/dependency-injection-in-action/e2e/src/app.e2e-spec.ts
View File

@ -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');
});
});
});

146
aio/content/examples/dependency-injection/e2e/src/app.e2e-spec.ts
View File

@ -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);
expect(await heroes.count()).toBeGreaterThan(0);
const filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
return elem.getText().then((text: string) => /secret/.test(text));
});
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);
expect(await heroes.count()).toBeGreaterThan(0);
const filteredHeroes = heroes.filter((elem: ElementFinder, index: number) => {
return elem.getText().then((text: string) => /secret/.test(text));
});
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);
});
});
});

22
aio/content/examples/displaying-data/e2e/src/app.e2e-spec.ts
View File

@ -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}`, async () => {
expect(await element(by.css('h1')).getText()).toEqual(title);
});
it('should display correct title: ' + title, () => {
expect(element(by.css('h1')).getText()).toEqual(title);
it(`should have correct default hero: ${defaultHero}`, async () => {
expect(await element(by.css('h2')).getText()).toContain(defaultHero);
});
it('should have correct default hero: ' + defaultHero, () => {
expect(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!');
});
});

8
aio/content/examples/docs-style-guide/e2e/src/app.e2e-spec.ts
View File

@ -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);
});
});

21
aio/content/examples/dynamic-form/e2e/src/app.e2e-spec.ts
View File

@ -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);
});
});

70
aio/content/examples/elements/e2e/src/app.e2e-spec.ts
View File

@ -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);
});
});
});

54
aio/content/examples/event-binding/e2e/src/app.e2e-spec.ts
View File

@ -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();
});
});

9
aio/content/examples/feature-modules/e2e/src/app.e2e-spec.ts
View File

@ -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!');
});
});

190
aio/content/examples/form-validation/e2e/src/app.e2e-spec.ts
View File

@ -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);
});
}

12
aio/content/examples/forms-overview/e2e/src/app.e2e-spec.ts
View File

@ -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');
});
});

73
aio/content/examples/forms/e2e/src/app.e2e-spec.ts
View File

@ -2,61 +2,56 @@ import { browser, element, by } from 'protractor';
describe('Forms Tests', () => {
beforeEach(() => {
browser.get('');
beforeEach(() => browser.get(''));
it('should display correct title', async () => {
expect(await element.all(by.css('h1')).get(0).getText()).toEqual('Hero Form');
});
it('should display correct title', () => {
expect(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}`);
});
});

2
aio/content/examples/getting-started/e2e/src/app.e2e-spec.ts
View File

@ -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 = {

87
aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts
View File

@ -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');
});
});
});

130
aio/content/examples/http/e2e/src/app.e2e-spec.ts
View File

@ -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"');
});
});

46
aio/content/examples/i18n/e2e/src/app.e2e-spec.ts
View File

@ -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 !', async () => {
expect(await element(by.css('h1')).getText()).toEqual('Bonjour i18n !');
});
it('should display i18n translated welcome: Bonjour !', () => {
expect(element(by.css('h1')).getText()).toEqual('Bonjour i18n !');
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 node texts without elements', () => {
expect(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`);
});
});

22
aio/content/examples/inputs-outputs/e2e/src/app.e2e-spec.ts
View File

@ -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');
});
});

44
aio/content/examples/interpolation/e2e/src/app.e2e-spec.ts
View File

@ -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', async () => {
expect(await element(by.css('h1')).getText()).toEqual('Interpolation and Template Expressions');
});
it('should display Interpolation and Template Expressions', () => {
expect(element(by.css('h1')).getText()).toEqual('Interpolation and Template Expressions');
it('should display Current customer: Maria', async () => {
expect(await element.all(by.css('h3')).get(0).getText()).toBe(`Current customer: Maria`);
});
it('should display Current customer: Maria', () => {
expect(element.all(by.css('h3')).get(0).getText()).toBe(`Current customer: Maria`);
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 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 Expression Context', async () => {
expect(await element.all(by.css('h2')).get(1).getText()).toBe(`Expression Context`);
});
it('should display Expression Context', () => {
expect(element.all(by.css('h2')).get(1).getText()).toBe(`Expression Context`);
it('should display a list of customers', async () => {
expect(await element.all(by.css('li')).get(0).getText()).toBe(`Maria`);
});
it('should display a list of customers', () => {
expect(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');
});
});

33
aio/content/examples/lazy-loading-ngmodules/e2e/src/app.e2e-spec.ts
View File

@ -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!');
});
});
});

107
aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts
View File

@ -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');
});
});

119
aio/content/examples/ngmodules/e2e/src/app.e2e-spec.ts
View File

@ -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', async () => {
const item = getItemSectionStruct();
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('shows a list of items', () => {
it('can navigate to one item details', 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');
});
it('can navigate to one item details', () => {
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', async () => {
const customers = getCustomersSectionStruct();
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('shows a list of customers', () => {
it('can navigate and edit one customer details', 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');
});
it('can navigate and edit one customer details', () => {
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');
});
});
});

122
aio/content/examples/pipes/e2e/src/app.e2e-spec.ts
View File

@ -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', 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 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 show 4 heroes', async () => {
expect(await element.all(by.css('app-hero-list div')).count()).toEqual(4);
});
it('should show 4 heroes', () => {
expect(element.all(by.css('app-hero-list div')).count()).toEqual(4);
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 a familiar hero in json', () => {
expect(element(by.cssContainingText('app-hero-list p', 'Heroes as JSON')).getText()).toContain('Bombasto');
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 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 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');
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(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');
});
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');
});
});

52
aio/content/examples/property-binding/e2e/src/app.e2e-spec.ts
View File

@ -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', async () => {
expect(await element(by.css('h1')).getText()).toEqual('Property Binding with Angular');
});
it('should display Property Binding with Angular', () => {
expect(element(by.css('h1')).getText()).toEqual('Property Binding with Angular');
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 four phone pictures', () => {
expect(element.all(by.css('img')).isPresent()).toBe(true);
expect(element.all(by.css('img')).count()).toBe(4);
it('should display Disabled button', async () => {
expect(await element.all(by.css('button')).get(0).getText()).toBe(`Disabled Button`);
});
it('should display Disabled button', () => {
expect(element.all(by.css('button')).get(0).getText()).toBe(`Disabled Button`);
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 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 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(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`);
});
});

19
aio/content/examples/providers-viewproviders/e2e/src/app.e2e-spec.ts
View File

@ -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('🌻');
});
});

34
aio/content/examples/providers/e2e/src/app.e2e-spec.ts
View File

@ -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');
});
});

7
aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts
View File

@ -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]}`)

18
aio/content/examples/resolution-modifiers/e2e/src/app.e2e-spec.ts
View File

@ -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', 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 basic leaf emoji', async () => {
expect(await element.all(by.css('p')).get(1).getText()).toContain('🌿');
});
it('shows basic leaf emoji', () => {
expect(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('🌼');
});
});

32
aio/content/examples/router-tutorial/e2e/src/app.e2e-spec.ts
View File

@ -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', async () => {
expect(await element(by.css('h1')).getText()).toBe('Angular Router Sample');
});
it('should display Angular Router Sample', () => {
expect(element(by.css('h1')).getText()).toBe('Angular Router Sample');
it('should display Crisis Center button', async () => {
expect(await element.all(by.css('a')).get(0).getText()).toBe('Crisis Center');
});
it('should display Crisis Center button', () => {
expect(element.all(by.css('a')).get(0).getText()).toBe('Crisis Center');
it('should display Heroes button', async () => {
expect(await element.all(by.css('a')).get(1).getText()).toBe('Heroes');
});
it('should display Heroes button', () => {
expect(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');
});
});

63
aio/content/examples/router/e2e/src/app.e2e-spec.ts
View File

@ -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);
}
}

24
aio/content/examples/security/e2e/src/app.e2e-spec.ts
View File

@ -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 <script>alert("0wned")</script> <b>Syntax</b>');
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\//);
});
});

41
aio/content/examples/service-worker-getting-started/e2e/src/app.e2e-spec.ts
View File

@ -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: ');
});
});

23
aio/content/examples/set-document-title/e2e/src/app.e2e-spec.ts
View File

@ -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]);
}
});
});

28
aio/content/examples/set-document-title/src/app/app.component.ts
View File

@ -5,25 +5,25 @@ import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';
@Component({
selector: 'app-root',
template:
`<p>
Select a title to set on the current HTML document:
</p>
selector: 'app-root',
template: `
<p>
Select a title to set on the current HTML document:
</p>
<ul>
<li><a (click)="setTitle( 'Good morning!' )">Good morning</a>.</li>
<li><a (click)="setTitle( 'Good afternoon!' )">Good afternoon</a>.</li>
<li><a (click)="setTitle( 'Good evening!' )">Good evening</a>.</li>
</ul>
`
<ul>
<li><a (click)="setTitle('Good morning!')">Good morning</a>.</li>
<li><a (click)="setTitle('Good afternoon!')">Good afternoon</a>.</li>
<li><a (click)="setTitle('Good evening!')">Good evening</a>.</li>
</ul>
`,
})
// #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

8
aio/content/examples/setup/e2e/src/app.e2e-spec.ts
View File

@ -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);
});
});

45
aio/content/examples/structural-directives/e2e/src/app.e2e-spec.ts
View File

@ -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 <happy-hero> instances', () => {
it('ngSwitch have two <happy-hero> 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)');
});
});

130
aio/content/examples/styleguide/e2e/src/app.e2e-spec.ts
View File

@ -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');
});
});

22
aio/content/examples/template-expression-operators/e2e/src/app.e2e-spec.ts
View File

@ -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');
});
});

20
aio/content/examples/template-reference-variables/e2e/src/app.e2e-spec.ts
View File

@ -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"}');
});
});

32
aio/content/examples/template-syntax/e2e/src/app.e2e-spec.ts
View File

@ -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);
});
});

13
aio/content/examples/testing/e2e/src/app.e2e-spec.ts
View File

@ -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();
});
});

4
aio/content/examples/toh-pt0/e2e/src/app.e2e-spec.ts
View File

@ -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');
});
});

15
aio/content/examples/toh-pt1/e2e/src/app.e2e-spec.ts
View File

@ -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<void> {
async function addToHeroName(text: string): Promise<void> {
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;

89
aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts
View File

@ -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;
id: number;
name: string;
// Factory methods
// Factory methods
// Get hero from s formatted as '<id> <name>'.
static fromString(s: string): Hero {
return {
id: +s.substr(0, s.indexOf(' ')),
name: s.substr(s.indexOf(' ') + 1),
};
}
// Get hero from s formatted as '<id> <name>'.
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<Hero> {
// Get hero id from the first <div>
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(' '))
};
}
// Get hero id and name from the given detail element.
static async fromDetail(detail: ElementFinder): Promise<Hero> {
// Get hero id from the first <div>
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<void> {
async function addToHeroName(text: string): Promise<void> {
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<void> {
const hTag = `h${hLevel}`;
const hText = await element(by.css(hTag)).getText();
expect(hText).toEqual(expectedText, hTag);
}
function getPageElts() {

89
aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts
View File

@ -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;
id: number;
name: string;
// Factory methods
// Factory methods
// Get hero from s formatted as '<id> <name>'.
static fromString(s: string): Hero {
return {
id: +s.substr(0, s.indexOf(' ')),
name: s.substr(s.indexOf(' ') + 1),
};
}
// Get hero from s formatted as '<id> <name>'.
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<Hero> {
// Get hero id from the first <div>
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(' '))
};
}
// Get hero id and name from the given detail element.
static async fromDetail(detail: ElementFinder): Promise<Hero> {
// Get hero id from the first <div>
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<void> {
async function addToHeroName(text: string): Promise<void> {
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<void> {
const hTag = `h${hLevel}`;
const hText = await element(by.css(hTag)).getText();
expect(hText).toEqual(expectedText, hTag);
}
function getPageElts() {

98
aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts
View File

@ -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;
id: number;
name: string;
// Factory methods
// Factory methods
// Get hero from s formatted as '<id> <name>'.
static fromString(s: string): Hero {
return {
id: +s.substr(0, s.indexOf(' ')),
name: s.substr(s.indexOf(' ') + 1),
};
}
// Get hero from s formatted as '<id> <name>'.
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<Hero> {
// Get hero id from the first <div>
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(' '))
};
}
// Get hero id and name from the given detail element.
static async fromDetail(detail: ElementFinder): Promise<Hero> {
// Get hero id from the first <div>
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<void> {
async function addToHeroName(text: string): Promise<void> {
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<void> {
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);
}

107
aio/content/examples/toh-pt5/e2e/src/app.e2e-spec.ts
View File

@ -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;
id: number;
name: string;
// Factory methods
// Factory methods
// Get hero from s formatted as '<id> <name>'.
static fromString(s: string): Hero {
return {
id: +s.substr(0, s.indexOf(' ')),
name: s.substr(s.indexOf(' ') + 1),
};
}
// Get hero from s formatted as '<id> <name>'.
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<Hero> {
// Get hero id from the first <div>
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(' '))
};
}
// Get hero id and name from the given detail element.
static async fromDetail(detail: ElementFinder): Promise<Hero> {
// Get hero id from the first <div>
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<void> {
async function addToHeroName(text: string): Promise<void> {
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<void> {
const hTag = `h${hLevel}`;
const hText = await element(by.css(hTag)).getText();
expect(hText).toEqual(expectedText, hTag);
}
function getHeroLiEltById(id: number) {

161
aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
View File

@ -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 <li> element.
static async fromLi(li: ElementFinder): Promise<Hero> {
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<void> {
async function addToHeroName(text: string): Promise<void> {
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<void> {
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<Hero[]> {
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<any>;
return allHeroes.map(Hero.fromLi);
}

32
aio/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts
View File

@ -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');
});
});

144
aio/content/examples/universal/e2e/src/app.e2e-spec.ts
View File

@ -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<void> {
return element(by.css('input')).sendKeys(text) as Promise<void>;
async function addToHeroName(text: string): Promise<void> {
await element(by.css('input')).sendKeys(text);
}
async function dashboardSelectTargetHero(): Promise<void> {
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<void> {
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<void> {
// 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);

110
aio/content/examples/upgrade-module/e2e-spec.ts
View File

@ -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', async () => {
expect(await element(by.css('h2')).getText()).toEqual('Windstorm details!');
});
it('has inputs', () => {
expect(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', async () => {
expect(await element.all(by.css('h2')).first().getText()).toEqual('Windstorm details!');
});
it('has inputs', () => {
expect(element.all(by.css('h2')).first().getText()).toEqual('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('has outputs', () => {
element.all(by.buttonText('Delete')).first().click();
expect(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');
});
});

80
aio/content/examples/upgrade-phonecat-1-typescript/e2e-spec.ts
View File

@ -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', async () => {
expect(await element(by.binding('$ctrl.phone.name')).getText()).toBe('Nexus S');
});
it('should display the `nexus-s` page', () => {
expect(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/);
});
});

70
aio/content/examples/upgrade-phonecat-2-hybrid/e2e-spec.ts
View File

@ -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', async () => {
expect(await element(by.css('h1')).getText()).toBe('Nexus S');
});
it('should display the `nexus-s` page', () => {
expect(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/);
});
});

74
aio/content/examples/upgrade-phonecat-3-final/e2e-spec.ts
View File

@ -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', async () => {
expect(await element(by.css('h1')).getText()).toBe('Nexus S');
});
it('should display the `nexus-s` page', () => {
expect(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/);
});
});

90
aio/content/examples/user-input/e2e/src/app.e2e-spec.ts
View File

@ -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');
});
});

1
aio/tools/examples/shared/boilerplate/cli-ajs/package.json
View File

@ -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",

1
aio/tools/examples/shared/boilerplate/cli/e2e/protractor.conf.js
View File

@ -16,6 +16,7 @@ exports.config = {
browserName: 'chrome'
},
directConnect: true,
SELENIUM_PROMISE_MANAGER: false,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {

1
aio/tools/examples/shared/boilerplate/cli/e2e/tsconfig.json
View File

@ -7,7 +7,6 @@
"target": "es2018",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}

1
aio/tools/examples/shared/boilerplate/cli/package.json
View File

@ -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",

1
aio/tools/examples/shared/boilerplate/elements/package.json
View File

@ -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",

1
aio/tools/examples/shared/boilerplate/i18n/package.json
View File

@ -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",

1
aio/tools/examples/shared/boilerplate/service-worker/package.json
View File

@ -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",

1
aio/tools/examples/shared/boilerplate/systemjs/package.json
View File

@ -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",

1
aio/tools/examples/shared/boilerplate/universal/package.json
View File

@ -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",

1
aio/tools/examples/shared/package.json
View File

@ -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",

11
aio/tools/examples/shared/yarn.lock
View File

@ -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"