refactor(docs-infra): switch from promises to async/await in tests (#29757)

PR Close #29757

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

@@ -2,30 +2,28 @@
 
 import { browser, element, by } from 'protractor';
 
-describe('Attribute directives', function () {
+describe('Attribute directives', () => {
 
   let _title = 'My First Attribute Directive';
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it(`should display correct title: ${_title}`, function () {
+  it(`should display correct title: ${_title}`, () => {
     expect(element(by.css('h1')).getText()).toEqual(_title);
   });
 
-  it('should be able to select green highlight', function () {
+  it('should be able to select green highlight', () => {
-    let highlightedEle = element(by.cssContainingText('p', 'Highlight me!'));
+    const highlightedEle = element(by.cssContainingText('p', 'Highlight me!'));
-    let lightGreen = 'rgba(144, 238, 144, 1)';
+    const lightGreen = 'rgba(144, 238, 144, 1)';
 
     expect(highlightedEle.getCssValue('background-color')).not.toEqual(lightGreen);
-    // let greenRb = element(by.cssContainingText('input', 'Green'));
-    let greenRb = element.all(by.css('input')).get(0);
-    greenRb.click().then(function() {
-      // TypeScript Todo: find the right type for highlightedEle
-      browser.actions().mouseMove(highlightedEle as any).perform();
-      expect(highlightedEle.getCssValue('background-color')).toEqual(lightGreen);
-    });
 
+    const greenRb = element.all(by.css('input')).get(0);
+    greenRb.click();
+    browser.actions().mouseMove(highlightedEle).perform();
+
+    expect(highlightedEle.getCssValue('background-color')).toEqual(lightGreen);
   });
 });

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

@@ -2,38 +2,39 @@
 
 import { browser, element, by } from 'protractor';
 
-describe('Lifecycle hooks', function () {
+describe('Lifecycle hooks', () => {
 
-  beforeAll(function () {
+  beforeAll(() => {
     browser.get('');
   });
 
-  it('should open correctly', function () {
+  it('should open correctly', () => {
     expect(element.all(by.css('h2')).get(0).getText()).toEqual('Peek-A-Boo');
   });
 
-  it('should support peek-a-boo', function () {
+  it('should support peek-a-boo', async () => {
     let 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');
+
     let pabButton = element.all(by.css('peek-a-boo-parent button')).get(0);
     let updateHeroButton = element.all(by.css('peek-a-boo-parent button')).get(1);
     expect(pabButton.getText()).toContain('Create Peek');
-    pabButton.click().then(function () {
+
-      expect(pabButton.getText()).toContain('Destroy Peek');
+    await pabButton.click();
-      expect(pabComp.isDisplayed()).toBe(true, 'should be able to see the "peek-a-boo" component');
+    expect(pabButton.getText()).toContain('Destroy Peek');
-      expect(pabComp.getText()).toContain('Windstorm');
+    expect(pabComp.isDisplayed()).toBe(true, 'should be able to see the "peek-a-boo" component');
-      expect(pabComp.getText()).not.toContain('Windstorm!');
+    expect(pabComp.getText()).toContain('Windstorm');
-      expect(updateHeroButton.isPresent()).toBe(true, 'should be able to see the update hero button');
+    expect(pabComp.getText()).not.toContain('Windstorm!');
-      return updateHeroButton.click();
+    expect(updateHeroButton.isPresent()).toBe(true, 'should be able to see the update hero button');
-    }).then(function () {
+
-      expect(pabComp.getText()).toContain('Windstorm!');
+    await updateHeroButton.click();
-      return pabButton.click();
+    expect(pabComp.getText()).toContain('Windstorm!');
-    }).then(function () {
+
-      expect(pabComp.isPresent()).toBe(false, 'should no longer be able to find the "peek-a-boo" component');
+    await pabButton.click();
-    });
+    expect(pabComp.isPresent()).toBe(false, 'should no longer be able to find the "peek-a-boo" component');
   });
 
-  it('should support OnChanges hook', function () {
+  it('should support OnChanges hook', () => {
     let onChangesViewEle = element.all(by.css('on-changes div')).get(0);
     let inputEles = element.all(by.css('on-changes-parent input'));
     let heroNameInputEle = inputEles.get(1);
@@ -52,7 +53,7 @@ describe('Lifecycle hooks', function () {
     expect(changeLogEles.count()).toEqual(7, 'should have 7 messages now');
   });
 
-  it('should support DoCheck hook', function () {
+  it('should support DoCheck hook', async () => {
     let doCheckViewEle = element.all(by.css('do-check div')).get(0);
     let inputEles = element.all(by.css('do-check-parent input'));
     let heroNameInputEle = inputEles.get(1);
@@ -62,26 +63,26 @@ describe('Lifecycle hooks', function () {
     let logCount: number;
 
     expect(titleEle.getText()).toContain('Windstorm can sing');
-    changeLogEles.count().then(function(count: number) {
+
-      // 3 messages to start
+    let count = await changeLogEles.count();
-      expect(count).toEqual(3, 'should start with 3 messages');
+    // 3 messages to start
-      logCount = count;
+    expect(count).toEqual(3, 'should start with 3 messages');
-      return heroNameInputEle.sendKeys('-foo-');
+
-    }).then(function () {
+    logCount = count;
-      expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
+    await heroNameInputEle.sendKeys('-foo-');
-      return changeLogEles.count();
+    expect(titleEle.getText()).toContain('Windstorm-foo- can sing');
-    }).then(function(count: number) {
+
-      // one more for each keystroke
+    count = await changeLogEles.count();
-      expect(count).toEqual(logCount + 5, 'should add 5 more messages');
+    // one more for each keystroke
-      logCount = count;
+    expect(count).toEqual(logCount + 5, 'should add 5 more messages');
-      return powerInputEle.sendKeys('-bar-');
+
-    }).then(function () {
+    logCount = count;
-      expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
+    await powerInputEle.sendKeys('-bar-');
-      expect(changeLogEles.count()).toEqual(logCount + 6, 'should add 6 more messages');
+    expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-');
-    });
+    expect(changeLogEles.count()).toEqual(logCount + 6, 'should add 6 more messages');
   });
 
-  it('should support AfterView hooks', function () {
+  it('should support AfterView hooks', async () => {
     let parentEle = element(by.tagName('after-view-parent'));
     let buttonEle = parentEle.element(by.tagName('button')); // Reset
     let commentEle = parentEle.element(by.className('comment'));
@@ -92,28 +93,23 @@ describe('Lifecycle hooks', function () {
     expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
     expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
 
-    logEles.count().then(function(count: number) {
+    logCount = await logEles.count();
-      logCount = count;
+    await childViewInputEle.sendKeys('-test-');
-      return childViewInputEle.sendKeys('-test-');
+
-    }).then(function() {
+    expect(childViewInputEle.getAttribute('value')).toContain('-test-');
-      expect(childViewInputEle.getAttribute('value')).toContain('-test-');
+    expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
-      expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
+    expect(commentEle.getText()).toContain('long name');
-      expect(commentEle.getText()).toContain('long name');
+
-      return logEles.count();
+    let count = await logEles.count();
-    }).then(function(count: number) {
+    expect(logCount + 7).toBeGreaterThan(count - 3, '7 additional log messages should have been added');
-      expect(logCount + 7).toBeGreaterThan(count - 3,
+    expect(logCount + 7).toBeLessThan(count + 3, '7 additional log messages should have been added');
-        '7 additional log messages should have been added');
+
-      expect(logCount + 7).toBeLessThan(count + 3,
+    logCount = count;
-        '7 additional log messages should have been added');
+    await buttonEle.click();
-      logCount = count;
+    expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
-      return buttonEle.click();
-    }).then(function() {
-      expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
-    });
   });
 
-
+  it('should support AfterContent hooks', async () => {
-  it('should support AfterContent hooks', function () {
     let parentEle = element(by.tagName('after-content-parent'));
     let buttonEle = parentEle.element(by.tagName('button')); // Reset
     let commentEle = parentEle.element(by.className('comment'));
@@ -124,58 +120,56 @@ describe('Lifecycle hooks', function () {
     expect(childViewInputEle.getAttribute('value')).toContain('Magneta');
     expect(commentEle.isPresent()).toBe(false, 'comment should not be in DOM');
 
-    logEles.count().then(function(count: number) {
+    logCount = await logEles.count();
-      logCount = count;
+    await childViewInputEle.sendKeys('-test-');
-      return childViewInputEle.sendKeys('-test-');
+    expect(childViewInputEle.getAttribute('value')).toContain('-test-');
-    }).then(function() {
+    expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
-      expect(childViewInputEle.getAttribute('value')).toContain('-test-');
+    expect(commentEle.getText()).toContain('long name');
-      expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars');
+
-      expect(commentEle.getText()).toContain('long name');
+    let count = await logEles.count();
-      return logEles.count();
+    expect(logCount + 5).toEqual(count, '5 additional log messages should have been added');
-    }).then(function(count: number) {
+
-      expect(logCount + 5).toEqual(count, '5 additional log messages should have been added');
+    logCount = count;
-      logCount = count;
+    await buttonEle.click();
-      return buttonEle.click();
+    expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
-    }).then(function() {
-      expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset');
-    });
   });
 
-  it('should support spy\'s OnInit & OnDestroy hooks', function () {
+  it('should support spy\'s OnInit & OnDestroy hooks', async () => {
     let inputEle = element(by.css('spy-parent input'));
     let addHeroButtonEle = element(by.cssContainingText('spy-parent button', 'Add Hero'));
     let resetHeroesButtonEle = element(by.cssContainingText('spy-parent button', 'Reset Heroes'));
     let heroEles = element.all(by.css('spy-parent div[mySpy'));
     let 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');
-    inputEle.sendKeys('-test-').then(function() {
+
-      return addHeroButtonEle.click();
+    await inputEle.sendKeys('-test-');
-    }).then(function() {
+    await addHeroButtonEle.click();
-      expect(heroEles.count()).toBe(3, 'should have added one hero');
+    expect(heroEles.count()).toBe(3, 'should have added one hero');
-      expect(heroEles.get(2).getText()).toContain('-test-');
+    expect(heroEles.get(2).getText()).toContain('-test-');
-      expect(logEles.count()).toBe(3, 'should now have 3 log entries');
+    expect(logEles.count()).toBe(3, 'should now have 3 log entries');
-      return resetHeroesButtonEle.click();
+
-    }).then(function() {
+    await resetHeroesButtonEle.click();
-      expect(heroEles.count()).toBe(0, 'should no longer have any heroes');
+    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(logEles.count()).toBe(7, 'should now have 7 log entries - 3 orig + 1 reset + 3 removeall');
-    });
   });
 
-  it('should support "spy counter"', function () {
+  it('should support "spy counter"', async () => {
     let updateCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Update'));
     let resetCounterButtonEle = element(by.cssContainingText('counter-parent button', 'Reset'));
     let textEle = element(by.css('counter-parent app-counter > div'));
     let 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');
-    updateCounterButtonEle.click().then(function() {
+
-      expect(textEle.getText()).toContain('Counter = 1');
+    await updateCounterButtonEle.click();
-      expect(logEles.count()).toBe(3, 'should now have 3 log entries');
+    expect(textEle.getText()).toContain('Counter = 1');
-      return resetCounterButtonEle.click();
+    expect(logEles.count()).toBe(3, 'should now have 3 log entries');
-    }).then(function() {
+
-      expect(textEle.getText()).toContain('Counter = 0');
+    await resetCounterButtonEle.click();
-      expect(logEles.count()).toBe(7, 'should now have 7 log entries - 3 prev + 1 reset + 2 destroy + 1 init');
+    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');
   });
 });