test(docs-infra): disable the Selenium Promise Manager in docs exampl…

…es e2e tests (angular#39818)

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 angular#39818

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

@@ -2,18 +2,16 @@ import { browser, element, by } from 'protractor';
 
 describe('Accessibility example e2e tests', () => {
 
-  beforeEach(() => {
-    browser.get('');
-  });
+  beforeEach(() => browser.get(''));
 
-  it('should display Accessibility Example', () => {
-    expect(element(by.css('h1')).getText()).toEqual('Accessibility Example');
+  it('should display Accessibility Example', async () => {
+    expect(await element(by.css('h1')).getText()).toEqual('Accessibility Example');
   });
 
-  it('should take a number and change progressbar width', () => {
-    element(by.css('input')).sendKeys('16');
-    expect(element(by.css('input')).getAttribute('value')).toEqual('16');
-    expect(element(by.css('app-example-progressbar div')).getCssValue('width')).toBe('48px');
+  it('should take a number and change progressbar width', async () => {
+    await element(by.css('input')).sendKeys('16');
+    expect(await element(by.css('input')).getAttribute('value')).toEqual('16');
+    expect(await element(by.css('app-example-progressbar div')).getCssValue('width')).toBe('48px');
   });
 
 });

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

@@ -2,15 +2,13 @@ import { browser, element, by } from 'protractor';
 
 describe('AngularJS to Angular Quick Reference Tests', () => {
 
-  beforeAll(() => {
-    browser.get('');
-  });
+  beforeAll(() => browser.get(''));
 
-  it('should display no poster images after bootstrap', () => {
-    testImagesAreDisplayed(false);
+  it('should display no poster images after bootstrap', async () => {
+    await testImagesAreDisplayed(false);
   });
 
-  it('should display proper movie data', () => {
+  it('should display proper movie data', async () => {
     // We check only a few samples
     const expectedSamples: any[] = [
       {row: 0, column: 0, element: 'img', attr: 'src', value: 'images/hero.png', contains: true},
@@ -34,8 +32,8 @@ describe('AngularJS to Angular Quick Reference Tests', () => {
 
       // Check element attribute or text
       const valueToCheck = sample.attr
-        ? elementToCheck.getAttribute(sample.attr)
-        : elementToCheck.getText();
+        ? await elementToCheck.getAttribute(sample.attr)
+        : await elementToCheck.getText();
 
       // Test for equals/contains/match
       if (sample.contains) {
@@ -48,65 +46,64 @@ describe('AngularJS to Angular Quick Reference Tests', () => {
     }
   });
 
-  it('should display images after Show Poster', () => {
-    testPosterButtonClick('Show Poster', true);
+  it('should display images after Show Poster', async () => {
+    await testPosterButtonClick('Show Poster', true);
   });
 
-  it('should hide images after Hide Poster', () => {
-    testPosterButtonClick('Hide Poster', false);
+  it('should hide images after Hide Poster', async () => {
+    await testPosterButtonClick('Hide Poster', false);
   });
 
-  it('should display no movie when no favorite hero is specified', () => {
-    testFavoriteHero(null, 'Please enter your favorite hero.');
+  it('should display no movie when no favorite hero is specified', async () => {
+    await testFavoriteHero(null, 'Please enter your favorite hero.');
   });
 
-  it('should display no movie for Magneta', () => {
-    testFavoriteHero('Magneta', 'No movie, sorry!');
+  it('should display no movie for Magneta', async () => {
+    await testFavoriteHero('Magneta', 'No movie, sorry!');
   });
 
-  it('should display a movie for Dr Nice', () => {
-    testFavoriteHero('Dr Nice', 'Excellent choice!');
+  it('should display a movie for Dr Nice', async () => {
+    await testFavoriteHero('Dr Nice', 'Excellent choice!');
   });
 
-  function testImagesAreDisplayed(isDisplayed: boolean) {
+  async function testImagesAreDisplayed(isDisplayed: boolean) {
     const expectedMovieCount = 3;
 
     const movieRows = getMovieRows();
-    expect(movieRows.count()).toBe(expectedMovieCount);
+    expect(await movieRows.count()).toBe(expectedMovieCount);
     for (let i = 0; i < expectedMovieCount; i++) {
       const movieImage = movieRows.get(i).element(by.css('td > img'));
-      expect(movieImage.isDisplayed()).toBe(isDisplayed);
+      expect(await movieImage.isDisplayed()).toBe(isDisplayed);
     }
   }
 
-  function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
+  async function testPosterButtonClick(expectedButtonText: string, isDisplayed: boolean) {
     const posterButton = element(by.css('app-movie-list tr > th > button'));
-    expect(posterButton.getText()).toBe(expectedButtonText);
+    expect(await posterButton.getText()).toBe(expectedButtonText);
 
-    posterButton.click().then(() => {
-      testImagesAreDisplayed(isDisplayed);
-    });
+    await posterButton.click();
+    await testImagesAreDisplayed(isDisplayed);
   }
 
   function getMovieRows() {
     return element.all(by.css('app-movie-list tbody > tr'));
   }
 
-  function testFavoriteHero(heroName: string, expectedLabel: string) {
+  async function testFavoriteHero(heroName: string, expectedLabel: string) {
     const movieListComp = element(by.tagName('app-movie-list'));
     const heroInput = movieListComp.element(by.tagName('input'));
     const favoriteHeroLabel = movieListComp.element(by.tagName('h3'));
     const resultLabel = movieListComp.element(by.css('span > p'));
 
-    heroInput.clear().then(() => {
-      heroInput.sendKeys(heroName || '');
-      expect(resultLabel.getText()).toBe(expectedLabel);
-      if (heroName) {
-        expect(favoriteHeroLabel.isDisplayed()).toBe(true);
-        expect(favoriteHeroLabel.getText()).toContain(heroName);
-      } else {
-        expect(favoriteHeroLabel.isDisplayed()).toBe(false);
-      }
-    });
+    await heroInput.clear();
+    await heroInput.sendKeys(heroName || '');
+
+    expect(await resultLabel.getText()).toBe(expectedLabel);
+    if (heroName) {
+      expect(await favoriteHeroLabel.isDisplayed()).toBe(true);
+      expect(await favoriteHeroLabel.getText()).toContain(heroName);
+    } else {
+      expect(await favoriteHeroLabel.isDisplayed()).toBe(false);
+    }
   }
 });

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

@@ -1,4 +1,4 @@
-import { browser, ExpectedConditions as EC } from 'protractor';
+import { browser } from 'protractor';
 import { logging } from 'selenium-webdriver';
 import * as openClose from './open-close.po';
 import * as statusSlider from './status-slider.po';
@@ -18,17 +18,15 @@ 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';
     const openHeight = '200px';
 
     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', () => {
     });
   });
 });
-
-

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

@@ -14,12 +14,12 @@ describe('Architecture', () => {
 
   beforeAll(() => browser.get(''));
 
-  it(`has title '${expectedTitle}'`, () => {
-    expect(browser.getTitle()).toEqual(expectedTitle);
+  it(`has title '${expectedTitle}'`, async () => {
+    expect(await browser.getTitle()).toEqual(expectedTitle);
   });
 
-  it(`has h2 '${expectedH2}'`, () => {
-    const h2 = element.all(by.css('h2')).map((elt: any) => elt.getText());
+  it(`has h2 '${expectedH2}'`, async () => {
+    const h2 = await element.all(by.css('h2')).map((elt: any) => elt.getText());
     expect(h2).toEqual(expectedH2);
   });
 
@@ -31,14 +31,14 @@ function heroTests() {
 
   const targetHero: Hero = { id: 2, name: 'Dr Nice' };
 
-  it('has the right number of heroes', () => {
+  it('has the right number of heroes', async () => {
     const page = getPageElts();
-    expect(page.heroes.count()).toEqual(3);
+    expect(await page.heroes.count()).toEqual(3);
   });
 
-  it('has no hero details initially', () => {
+  it('has no hero details initially', async () => {
     const page = getPageElts();
-    expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
+    expect(await page.heroDetail.isPresent()).toBeFalsy('no hero detail');
   });
 
   it('shows selected hero details', async () => {
@@ -51,7 +51,7 @@ function heroTests() {
 
   it(`shows updated hero name in details`, async () => {
     const input = element.all(by.css('input')).first();
-    input.sendKeys(nameSuffix);
+    await input.sendKeys(nameSuffix);
     const page = getPageElts();
     const hero = await heroFromDetail(page.heroDetail);
     const newName = targetHero.name + nameSuffix;
@@ -61,15 +61,15 @@ function heroTests() {
 }
 
 function salesTaxTests() {
-  it('has no sales tax initially', () => {
+  it('has no sales tax initially', async () => {
     const page = getPageElts();
-    expect(page.salesTaxDetail.isPresent()).toBeFalsy('no sales tax info');
+    expect(await page.salesTaxDetail.isPresent()).toBeFalsy('no sales tax info');
   });
 
   it('shows sales tax', async () => {
     const page = getPageElts();
-    page.salesTaxAmountInput.sendKeys('10', protractor.Key.ENTER);
-    expect(page.salesTaxDetail.getText()).toEqual('The sales tax is $1.00');
+    await page.salesTaxAmountInput.sendKeys('10', protractor.Key.ENTER);
+    expect(await page.salesTaxDetail.getText()).toEqual('The sales tax is $1.00');
   });
 }
 

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

@@ -2,33 +2,34 @@ import { browser, element, by } from 'protractor';
 
 describe('Attribute binding example', () => {
 
-  beforeEach(() => {
-    browser.get('');
-  });
+  beforeEach(() => browser.get(''));
 
-  it('should display Property Binding with Angular', () => {
-    expect(element(by.css('h1')).getText()).toEqual('Attribute, class, and style bindings');
+  it('should display Property Binding with Angular', async () => {
+    expect(await element(by.css('h1')).getText()).toEqual('Attribute, class, and style bindings');
   });
 
-  it('should display a table', () => {
-    expect(element.all(by.css('table')).isPresent()).toBe(true);
+  it('should display a table', async () => {
+    expect(await element.all(by.css('table')).isPresent()).toBe(true);
   });
 
-  it('should display an Aria button', () => {
-    expect(element.all(by.css('button')).get(0).getText()).toBe('Go for it with Aria');
+  it('should display an Aria button', async () => {
+    expect(await element.all(by.css('button')).get(0).getText()).toBe('Go for it with Aria');
   });
 
-  it('should display a blue background on div', () => {
-    expect(element.all(by.css('div')).get(1).getCssValue('background-color')).toEqual('rgba(25, 118, 210, 1)');
+  it('should display a blue background on div', async () => {
+    const div = element.all(by.css('div')).get(1);
+    expect(await div.getCssValue('background-color')).toEqual('rgba(25, 118, 210, 1)');
   });
 
-  it('should display a blue div with a red border', () => {
-    expect(element.all(by.css('div')).get(1).getCssValue('border')).toEqual('2px solid rgb(212, 30, 46)');
+  it('should display a blue div with a red border', async () => {
+    const div = element.all(by.css('div')).get(1);
+    expect(await div.getCssValue('border')).toEqual('2px solid rgb(212, 30, 46)');
   });
 
-  it('should display a div with many classes', () => {
-    expect(element.all(by.css('div')).get(1).getAttribute('class')).toContain('special');
-    expect(element.all(by.css('div')).get(1).getAttribute('class')).toContain('clearance');
+  it('should display a div with many classes', async () => {
+    const div = element.all(by.css('div')).get(1);
+    expect(await div.getAttribute('class')).toContain('special');
+    expect(await div.getAttribute('class')).toContain('clearance');
   });
 
 });

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

@@ -4,27 +4,25 @@ describe('Attribute directives', () => {
 
   const title = 'My First Attribute Directive';
 
-  beforeAll(() => {
-    browser.get('');
-  });
+  beforeAll(() => browser.get(''));
 
-  it(`should display correct title: ${title}`, () => {
-    expect(element(by.css('h1')).getText()).toEqual(title);
+  it(`should display correct title: ${title}`, async () => {
+    expect(await element(by.css('h1')).getText()).toEqual(title);
   });
 
-  it('should be able to select green highlight', () => {
+  it('should be able to select green highlight', async () => {
     const highlightedEle = element(by.cssContainingText('p', 'Highlight me!'));
     const lightGreen = 'rgba(144, 238, 144, 1)';
     const getBgColor = () => highlightedEle.getCssValue('background-color');
 
-    expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen);
+    expect(await highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen);
 
     const greenRb = element.all(by.css('input')).get(0);
-    greenRb.click();
-    browser.actions().mouseMove(highlightedEle).perform();
+    await greenRb.click();
+    await browser.actions().mouseMove(highlightedEle).perform();
 
     // Wait for up to 4s for the background color to be updated,
     // to account for slow environments (e.g. CI).
-    browser.wait(() => highlightedEle.getCssValue('background-color').then(c => c === lightGreen), 4000);
+    await browser.wait(async () => await getBgColor() === lightGreen, 4000);
   });
 });