chore(example): update example to be async / await (#5202)

Author: cnishina

example/angular_material/conf.js

@@ -16,7 +16,7 @@ exports.config = {
         'input_spec.js',
         'mat_paginator_spec.js'
     ],
-	
+
     // Disable promise manager because we are going to use async/await
     SELENIUM_PROMISE_MANAGER: false,
 

example/angular_material/input_spec.js

@@ -1,15 +1,14 @@
-describe('angular-material input component page', function() {
+describe('angular-material input component page', () => {
   const EC = protractor.ExpectedConditions;
 
-  it('Should change input component value', async() => {
+  it('Should change input component value', async () => {
     await browser.get('https://material.angular.io/components/input/examples');
-      
-    await browser.wait(EC.elementToBeClickable($('.mat-button-wrapper>.mat-icon')), 5000);
-      
+
+    await browser.wait(
+      EC.elementToBeClickable($('.mat-button-wrapper>.mat-icon')), 5000);
+
     const emailInputField = $$('.mat-form-field-infix>input').get(1);
-      
     await emailInputField.sendKeys('invalid');
-      
-    expect($('mat-error').isPresent()).toBe(true);
+    expect(await $('mat-error').isPresent()).toBe(true);
   });
 });

example/angular_material/mat_paginator_spec.js

@@ -1,31 +1,32 @@
 describe('angular-material paginator component page', () => {
   const EC = protractor.ExpectedConditions;
 
-  beforeAll(async() => {
-    await browser.get('https://material.angular.io/components/paginator/examples');
+  beforeAll(async () => {
+    await browser.get(
+      'https://material.angular.io/components/paginator/examples');
 
-    await browser.wait(EC.elementToBeClickable($('.mat-button-wrapper>.mat-icon')), 5000);
+    await browser.wait(
+      EC.elementToBeClickable($('.mat-button-wrapper>.mat-icon')), 5000);
   });
 
-  it('Should navigate to next page', async() => {
+  it('Should navigate to next page', async () => {
     await $('button[aria-label=\'Next page\']').click();
-    
-    await expect($('.mat-paginator-range-label').getAttribute('innerText')).toEqual('11 - 20 of 100');
+    console.log(await $('.mat-paginator-range-label').getAttribute('innerText'));
+    expect(await $('.mat-paginator-range-label').getAttribute('innerText'))
+      .toEqual('11 - 20 of 100');
   });
 
-  it('Should navigate to previous page', async() => {
+  it('Should navigate to previous page', async () => {
     await $('button[aria-label=\'Previous page\']').click();
-    
-    await expect($('.mat-paginator-range-label').getAttribute('innerText')).toEqual('1 - 10 of 100');
+    expect(await $('.mat-paginator-range-label').getAttribute('innerText'))
+      .toEqual('1 - 10 of 100');
   });
 
-  it('Should change list length to 5 items per page', async() => {
+  it('Should change list length to 5 items per page', async () => {
     await $('mat-select>div').click();
-    
     const fiveItemsOption = $$('mat-option>.mat-option-text').first();
-
     await fiveItemsOption.click();
-    
-    await expect($('.mat-paginator-range-label').getAttribute('innerText')).toEqual('1 - 5 of 100');
+    expect(await $('.mat-paginator-range-label').getAttribute('innerText'))
+      .toEqual('1 - 5 of 100');
   });
 });

example/conf.js

@@ -12,7 +12,12 @@ exports.config = {
 
   // Spec patterns are relative to the current working directory when
   // protractor is called.
-  specs: ['example_spec.js'],
+  specs: [
+    'example_spec.js',
+    'angular_material/input_spec.js',
+    'angular_material/mat_paginator_spec.js'
+
+  ],
 
   // Options to be passed to Jasmine.
   jasmineNodeOpts: {

example/example_spec.js

@@ -1,37 +1,35 @@
-describe('angularjs homepage', function() {
-  it('should greet the named user', function() {
-    browser.get('http://www.angularjs.org');
+describe('angularjs homepage', () => {
+  it('should greet the named user', async () => {
+    await browser.get('http://www.angularjs.org');
 
-    element(by.model('yourName')).sendKeys('Julie');
-
-    var greeting = element(by.binding('yourName'));
-
-    expect(greeting.getText()).toEqual('Hello Julie!');
+    await element(by.model('yourName')).sendKeys('Julie');
+    const greeting = element(by.binding('yourName'));
+    expect(await greeting.getText()).toEqual('Hello Julie!');
   });
 
-  describe('todo list', function() {
-    var todoList;
-
-    beforeEach(function() {
-      browser.get('http://www.angularjs.org');
+  describe('todo list', () => {
+    let todoList;
 
+    beforeEach(async () => {
+      await browser.get('http://www.angularjs.org');
       todoList = element.all(by.repeater('todo in todoList.todos'));
     });
 
-    it('should list todos', function() {
-      expect(todoList.count()).toEqual(2);
-      expect(todoList.get(1).getText()).toEqual('build an AngularJS app');
+    it('should list todos', async () => {
+      expect(await todoList.count()).toEqual(2);
+      expect(await todoList.get(1).getText()).toEqual('build an AngularJS app');
     });
 
-    it('should add a todo', function() {
-      var addTodo = element(by.model('todoList.todoText'));
-      var addButton = element(by.css('[value="add"]'));
+    it('should add a todo', async () => {
+      const addTodo = element(by.model('todoList.todoText'));
+      const addButton = element(by.css('[value="add"]'));
 
-      addTodo.sendKeys('write a protractor test');
-      addButton.click();
+      await addTodo.sendKeys('write a protractor test');
+      await addButton.click();
 
-      expect(todoList.count()).toEqual(3);
-      expect(todoList.get(2).getText()).toEqual('write a protractor test');
+      expect(await todoList.count()).toEqual(3);
+      expect(await todoList.get(2).getText())
+        .toEqual('write a protractor test');
     });
   });
 });