chore(example): update the TypeScript example to be async / await (#5203

)

exampleTypescript/.gitignore

@@ -1,4 +1,7 @@
-*.js
+plugins.js
+spec.js
+specPageObjects.js
+angularPage.js
+*.d.ts
 node_modules
-tmp/
-!asyncAwait/*.js
+package-lock.json

exampleTypescript/README.md

@@ -10,22 +10,21 @@ There are two examples in this directory:
 
 * Simple Protractor example
   * Similar to the [github protractor example](https://github.com/angular/protractor/tree/master/example)
-  * Files `conf.ts` and `spec.ts`
+  * Files `conf.js` and `spec.ts`
 * Page objects example
   * Follows the [protractortest.org page objects example](http://www.protractortest.org/#/page-objects)
-  * Files `confPageObjects.ts`, `specPageObjects.ts`, and `angularPage.ts`
+  * Files `conf.js`, `specPageObjects.ts`, and `angularPage.ts`
 
 ## File organization
 
 ```
 exampleTypescript/
 |- node_modules/       // downloaded node modules
-|- tmp/                // compiled javascript output
 |
 |- .gitignore          // since typescript produces javascript, we should not
 |                      // commit javascript to the repo
 |- angularPage.ts      // page object example
-|- confPageObjects.ts  // configuration for the page objects example
+|- conf.js             // configuration file
 |- package.json        // node dependencies for the project
 |- README.md           // this file
 |- spec.ts             // spec for the simple protractor example

exampleTypescript/angularPage.ts

@@ -1,26 +1,25 @@
 // Because this file references protractor, you'll need to have it as a project
-// dependency to use 'protractor/globals'. Here is the full list of imports:
+// dependency to use 'protractor'. Here is the full list of imports:
 //
 // import {browser, element, by, By, $, $$, ExpectedConditions}
-//   from 'protractor/globals';
+//   from 'protractor';
 //
 import {browser, element, by} from 'protractor';
 
 export class AngularHomepage {
   nameInput = element(by.model('yourName'));
   greeting = element(by.binding('yourName'));
 
-  get() {
-    browser.get('http://www.angularjs.org');
+  async get(): Promise<void> {
+    await browser.get('http://www.angularjs.org');
   }
 
-  setName(name: string) {
-    this.nameInput.sendKeys(name);
+  async setName(name: string): Promise<void> {
+    await this.nameInput.sendKeys(name);
   }
 
-  // getGreeting returns a webdriver.promise.Promise.<string>. For simplicity
-  // setting the return value to any
-  getGreeting(): any {
+  // getGreeting returns a native Promise<string>
+  async getGreeting(): Promise<string> {
     return this.greeting.getText();
   }
 }

exampleTypescript/conf.ts → exampleTypescript/conf.js

@@ -6,17 +6,17 @@
 // Editors like Microsoft Visual Studio Code will have autocomplete and
 // description hints.
 //
-// To run this example, first transpile it to javascript with `npm run tsc`,
-// then run `protractor conf.js`.
-import {Config} from 'protractor';
-
-export let config: Config = {
+// To run this example, run `protractor conf.js`.
+exports.config = {
   framework: 'jasmine',
   capabilities: {
     browserName: 'chrome'
   },
-  specs: [ 'spec.js' ],
-  seleniumAddress: 'http://localhost:4444/wd/hub',
+  specs: [
+    'spec.js',
+    'specPageObjects.js'
+  ],
+  directConnect: true,
 
   // You could set no globals to true to avoid jQuery '$' and protractor '$'
   // collisions on the global namespace.

exampleTypescript/package.json

@@ -5,20 +5,18 @@
   "author": "",
   "license": "MIT",
   "scripts": {
+    "debug": "node --inspect-brk ./node_modules/.bin/protractor conf.js",
+    "pretest": "npm run tsc && npm run webdriver-update",
+    "test": "protractor conf.js",
     "tsc": "tsc",
-    "pretest": "npm run tsc",
-    "test": "protractor tmp/conf.js",
-    "debug": "node --inspect-brk ./node_modules/.bin/protractor asyncAwait/conf.js"
+    "webdriver-update": "webdriver-manager update --standalone=false --gecko=false"
   },
   "dependencies": {
-    "@types/jasmine": "2.5.41",
-    "@types/jasminewd2": "^2.0.0",
-    "jasmine": "^2.4.1",
+    "@types/jasmine": "^3.3.12",
+    "jasmine": "^3.3.1",
     "protractor": "file:../",
-    "typescript": "~2.0.0"
+    "ts-node": "^8.0.3",
+    "typescript": "^3.4.1"
   },
-  "devDependencies": {
-    "@types/jasminewd2": "^2.0.0",
-    "ts-node": "^3.0.2"
-  }
+  "devDependencies": {}
 }

exampleTypescript/spec.ts

@@ -2,25 +2,25 @@
 // dependency to use 'protractor/globals'. Here is the full list of imports:
 //
 // import {browser, element, by, By, $, $$, ExpectedConditions}
-//   from 'protractor/globals';
+//   from 'protractor';
 //
 // The jasmine typings are brought in via DefinitelyTyped ambient typings.
 import {browser, element, by, By, $, $$, ExpectedConditions} from 'protractor';
 
 describe('protractor with typescript typings', () => {
-  beforeEach(() => {
-    browser.get('http://www.angularjs.org');
+  beforeEach(async () => {
+    await browser.get('http://www.angularjs.org');
   });
 
-  it('should greet the named user', () => {
-    element(by.model('yourName')).sendKeys('Julie');
-    let greeting = element(by.binding('yourName'));
-    expect(greeting.getText()).toEqual('Hello Julie!');
+  it('should greet the named user', async () => {
+    await element(by.model('yourName')).sendKeys('Julie');
+    const greeting = element(by.binding('yourName'));
+    expect(await greeting.getText()).toEqual('Hello Julie!');
   });
 
-  it('should list todos', function() {
-    let todoList = element.all(by.repeater('todo in todoList.todos'));
-    expect(todoList.count()).toEqual(2);
-    expect(todoList.get(1).getText()).toEqual('build an angular app');
+  it('should list todos', async () => {
+    const todoList = element.all(by.repeater('todo in todoList.todos'));
+    expect(await todoList.count()).toEqual(2);
+    expect(await todoList.get(1).getText()).toEqual('build an AngularJS app');
   });
 });

exampleTypescript/specPageObjects.ts

@@ -3,10 +3,10 @@ import {AngularHomepage} from './angularPage';
 
 // The jasmine typings are brought in via DefinitelyTyped ambient typings.
 describe('angularjs homepage', () => {
-  it('should greet the named user', () => {
-    let angularHomepage = new AngularHomepage();
-    angularHomepage.get();
-    angularHomepage.setName('Julie');
-    expect(angularHomepage.getGreeting()).toEqual('Hello Julie!');
+  it('should greet the named user', async () => {
+    const angularHomepage = new AngularHomepage();
+    await angularHomepage.get();
+    await angularHomepage.setName('Julie');
+    expect(await angularHomepage.getGreeting()).toEqual('Hello Julie!');
   });
 });

exampleTypescript/tsconfig.json

@@ -5,12 +5,10 @@
     "moduleResolution": "node",
     "inlineSourceMap": true,
     "declaration": false,
-    "noImplicitAny": false,
-    "outDir": "tmp"
+    "noImplicitAny": false
   },
   "exclude": [
     "node_modules",
-    "asyncAwait",
     "plugins.ts"
   ]
 }