diff --git a/aio/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts b/aio/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts index fd033ce32f..ebc9d5e986 100644 --- a/aio/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/attribute-directives/e2e/src/app.e2e-spec.ts @@ -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 () { - let highlightedEle = element(by.cssContainingText('p', 'Highlight me!')); - let lightGreen = 'rgba(144, 238, 144, 1)'; + it('should be able to select green highlight', () => { + const highlightedEle = element(by.cssContainingText('p', 'Highlight me!')); + 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); }); }); diff --git a/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts b/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts index 80649e801f..b90a6cefb5 100644 --- a/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts @@ -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'); - 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'); - return updateHeroButton.click(); - }).then(function () { - expect(pabComp.getText()).toContain('Windstorm!'); - return pabButton.click(); - }).then(function () { - expect(pabComp.isPresent()).toBe(false, 'should no longer be able to find the "peek-a-boo" component'); - }); + + 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'); + + await updateHeroButton.click(); + expect(pabComp.getText()).toContain('Windstorm!'); + + 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 - expect(count).toEqual(3, 'should start with 3 messages'); - logCount = count; - return heroNameInputEle.sendKeys('-foo-'); - }).then(function () { - expect(titleEle.getText()).toContain('Windstorm-foo- can sing'); - return changeLogEles.count(); - }).then(function(count: number) { - // one more for each keystroke - expect(count).toEqual(logCount + 5, 'should add 5 more messages'); - logCount = count; - return powerInputEle.sendKeys('-bar-'); - }).then(function () { - expect(titleEle.getText()).toContain('Windstorm-foo- can sing-bar-'); - expect(changeLogEles.count()).toEqual(logCount + 6, 'should add 6 more messages'); - }); + + let count = await changeLogEles.count(); + // 3 messages to start + expect(count).toEqual(3, 'should start with 3 messages'); + + logCount = count; + await heroNameInputEle.sendKeys('-foo-'); + expect(titleEle.getText()).toContain('Windstorm-foo- can sing'); + + count = await changeLogEles.count(); + // one more for each keystroke + expect(count).toEqual(logCount + 5, 'should add 5 more messages'); + + logCount = count; + await powerInputEle.sendKeys('-bar-'); + 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 = count; - return childViewInputEle.sendKeys('-test-'); - }).then(function() { - expect(childViewInputEle.getAttribute('value')).toContain('-test-'); - expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars'); - expect(commentEle.getText()).toContain('long name'); - return logEles.count(); - }).then(function(count: number) { - expect(logCount + 7).toBeGreaterThan(count - 3, - '7 additional log messages should have been added'); - expect(logCount + 7).toBeLessThan(count + 3, - '7 additional log messages should have been added'); - logCount = count; - return buttonEle.click(); - }).then(function() { - expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset'); - }); + 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'); + + let count = await logEles.count(); + expect(logCount + 7).toBeGreaterThan(count - 3, '7 additional log messages should have been added'); + expect(logCount + 7).toBeLessThan(count + 3, '7 additional log messages should have been added'); + + logCount = count; + await buttonEle.click(); + expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset'); }); - - it('should support AfterContent hooks', function () { + it('should support AfterContent hooks', async () => { 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 = count; - return childViewInputEle.sendKeys('-test-'); - }).then(function() { - expect(childViewInputEle.getAttribute('value')).toContain('-test-'); - expect(commentEle.isPresent()).toBe(true, 'should have comment because >10 chars'); - expect(commentEle.getText()).toContain('long name'); - return logEles.count(); - }).then(function(count: number) { - expect(logCount + 5).toEqual(count, '5 additional log messages should have been added'); - logCount = count; - return buttonEle.click(); - }).then(function() { - expect(logEles.count()).toBeLessThan(logCount, 'log should shrink after reset'); - }); + 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'); + + let count = await logEles.count(); + expect(logCount + 5).toEqual(count, '5 additional log messages should have been added'); + + logCount = count; + await buttonEle.click(); + 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(); - }).then(function() { - 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'); - return resetHeroesButtonEle.click(); - }).then(function() { - 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'); - }); + + 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'); + + 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'); }); - 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'); - expect(logEles.count()).toBe(3, 'should now have 3 log entries'); - return resetCounterButtonEle.click(); - }).then(function() { - 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'); - }); + + await updateCounterButtonEle.click(); + expect(textEle.getText()).toContain('Counter = 1'); + expect(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'); }); });