From 8e25ef9f39c6915806ef74a995ae3af96384fa98 Mon Sep 17 00:00:00 2001 From: Craig Nishina Date: Tue, 2 Apr 2019 16:30:41 -0700 Subject: [PATCH] chore(example): update the TypeScript example to be async / await (#5203) --- exampleTypescript/.gitignore | 9 ++++--- exampleTypescript/README.md | 7 +++--- exampleTypescript/angularPage.ts | 17 ++++++------- exampleTypescript/asyncAwait/README.md | 34 -------------------------- exampleTypescript/asyncAwait/conf.js | 20 --------------- exampleTypescript/asyncAwait/spec.ts | 13 ---------- exampleTypescript/{conf.ts => conf.js} | 14 +++++------ exampleTypescript/confPageObjects.ts | 20 --------------- exampleTypescript/package.json | 20 +++++++-------- exampleTypescript/spec.ts | 22 ++++++++--------- exampleTypescript/specPageObjects.ts | 10 ++++---- exampleTypescript/tsconfig.json | 4 +-- 12 files changed, 50 insertions(+), 140 deletions(-) delete mode 100644 exampleTypescript/asyncAwait/README.md delete mode 100644 exampleTypescript/asyncAwait/conf.js delete mode 100644 exampleTypescript/asyncAwait/spec.ts rename exampleTypescript/{conf.ts => conf.js} (68%) delete mode 100644 exampleTypescript/confPageObjects.ts diff --git a/exampleTypescript/.gitignore b/exampleTypescript/.gitignore index 84dd51cc7..dceb53259 100644 --- a/exampleTypescript/.gitignore +++ b/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 \ No newline at end of file diff --git a/exampleTypescript/README.md b/exampleTypescript/README.md index 288a110e3..c8acb7988 100644 --- a/exampleTypescript/README.md +++ b/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 diff --git a/exampleTypescript/angularPage.ts b/exampleTypescript/angularPage.ts index ebfa3f458..7f6a3de40 100644 --- a/exampleTypescript/angularPage.ts +++ b/exampleTypescript/angularPage.ts @@ -1,8 +1,8 @@ // 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'; @@ -10,17 +10,16 @@ export class AngularHomepage { nameInput = element(by.model('yourName')); greeting = element(by.binding('yourName')); - get() { - browser.get('http://www.angularjs.org'); + async get(): Promise { + await browser.get('http://www.angularjs.org'); } - setName(name: string) { - this.nameInput.sendKeys(name); + async setName(name: string): Promise { + await this.nameInput.sendKeys(name); } - // getGreeting returns a webdriver.promise.Promise.. For simplicity - // setting the return value to any - getGreeting(): any { + // getGreeting returns a native Promise + async getGreeting(): Promise { return this.greeting.getText(); } } diff --git a/exampleTypescript/asyncAwait/README.md b/exampleTypescript/asyncAwait/README.md deleted file mode 100644 index 52776ce62..000000000 --- a/exampleTypescript/asyncAwait/README.md +++ /dev/null @@ -1,34 +0,0 @@ -Compiling `async`/`await` syntax -================================ - -`async`/`await` syntax is currently accessible via typescript if you compile -using `--target ES2015` or above. - -Debugging with `async`/`await` -============================== - -Disabling the promise manager will break Protractor's debugging and -`browser.pause()`. However, because your tests won't be using the promise -manager, you can debug them using standard Node debugging tools. For -example, you can use the Chrome inspector to debug the test in this -directory (protractor/exampleTypescript) with `npm run debug`. You should see something like - -``` -Debugger listening on port 9229. -Warning: This is an experimental feature and could change at any time. -To start debugging, open the following URL in Chrome: - chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/f48502b0-76a3-4659-92d1-bef07a222859 -``` - -Open that URL in chrome, and you'll get an inspector that can be -used to debug your test. Instead of browser.pause, you can add `debugger` -to create a breakpoint. Note that sourcemaps don't work in the inspector -in Node v6, but do work in Node v7 (due to https://github.com/nodejs/node/issues/8369). - -More detail about how to use [chrome - inspector](/docs/debugging.md#disabled-control-flow) - -More Examples -============= - -More examples can be found under [`/spec/ts/`](/spec/ts). diff --git a/exampleTypescript/asyncAwait/conf.js b/exampleTypescript/asyncAwait/conf.js deleted file mode 100644 index e116f5e13..000000000 --- a/exampleTypescript/asyncAwait/conf.js +++ /dev/null @@ -1,20 +0,0 @@ -"use strict"; -exports.config = { - framework: 'jasmine', - capabilities: { - browserName: 'chrome' - }, - seleniumAddress: 'http://localhost:4444/wd/hub', - // You could set no globals to true to avoid jQuery '$' and protractor '$' - // collisions on the global namespace. - noGlobals: true, - specs: [ - 'spec.ts' - ], - SELENIUM_PROMISE_MANAGER: false, - beforeLaunch: function() { - require('ts-node').register({ - project: '.' - }); - } -}; diff --git a/exampleTypescript/asyncAwait/spec.ts b/exampleTypescript/asyncAwait/spec.ts deleted file mode 100644 index 2da942519..000000000 --- a/exampleTypescript/asyncAwait/spec.ts +++ /dev/null @@ -1,13 +0,0 @@ -// See README.md for important details. -import {browser, element, by, By, $, $$, ExpectedConditions} from 'protractor'; - -describe('async function', function() { - it('should wait on async function in conditional', async function() : Promise { - await browser.get('http://www.angularjs.org'); - let todoList = element.all(by.repeater('todo in todoList.todos')); - if ((await todoList.count()) > 1) { - debugger - expect((await todoList.get(1).getText())).toEqual('build an AngularJS app'); - } - }); -}); diff --git a/exampleTypescript/conf.ts b/exampleTypescript/conf.js similarity index 68% rename from exampleTypescript/conf.ts rename to exampleTypescript/conf.js index 42f6ffa6c..8a74bcf9b 100644 --- a/exampleTypescript/conf.ts +++ b/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. diff --git a/exampleTypescript/confPageObjects.ts b/exampleTypescript/confPageObjects.ts deleted file mode 100644 index 8d618a286..000000000 --- a/exampleTypescript/confPageObjects.ts +++ /dev/null @@ -1,20 +0,0 @@ -// Because this file imports from protractor, you'll need to have it as a -// project dependency. Please see the reference config: lib/config.ts for more -// information. -// -// Why you might want to create your config with typescript: -// 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 confPageObjects.js`. -import {Config} from 'protractor'; - -export let config: Config = { - framework: 'jasmine', - capabilities: { - browserName: 'chrome' - }, - specs: [ 'specPageObjects.js' ], - seleniumAddress: 'http://localhost:4444/wd/hub' -}; diff --git a/exampleTypescript/package.json b/exampleTypescript/package.json index 27dc77123..c19ddb40e 100644 --- a/exampleTypescript/package.json +++ b/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": {} } diff --git a/exampleTypescript/spec.ts b/exampleTypescript/spec.ts index e99edcf89..64ec22035 100644 --- a/exampleTypescript/spec.ts +++ b/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'); }); }); diff --git a/exampleTypescript/specPageObjects.ts b/exampleTypescript/specPageObjects.ts index ac1ee8626..1b7f9b650 100644 --- a/exampleTypescript/specPageObjects.ts +++ b/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!'); }); }); diff --git a/exampleTypescript/tsconfig.json b/exampleTypescript/tsconfig.json index f824ca096..6353b1580 100644 --- a/exampleTypescript/tsconfig.json +++ b/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" ] }