chore(example): add a protractor typescript example (#3323)

Author: cnishina

exampleTypescript/.gitignore

@@ -0,0 +1 @@
+*.js

exampleTypescript/README.md

@@ -0,0 +1,84 @@
+# Protractor with Typescript
+
+Typescript provides code auto completion and helpful hints with a text editor like Microsoft's Visual Studio Code or another text editor with Typescript support.
+
+## Examples
+
+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`
+* Page objects example
+  * Follows the [protractortest.org page objects example](http://www.protractortest.org/#/page-objects)
+  * Files `confPageObjects.ts`, `specPageObjects.ts`, and `angularPage.ts`
+
+## File organization
+
+```
+exampleTypescript/
+|- node_modules/       // downloaded node modules
+|- typings/            // downloaded ambient types
+|   |- index.d.ts      // generated typings file
+|- .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
+|- package.json        // node dependencies for the project
+|- readme.md           // this file
+|- spec.ts             // spec for the simple protractor example
+|- specPageObjects.ts  // spec for the page objects example
+|- tsconfig.json       // typescript transpile configuration
+|- typings.json        // ambient typing imports (jasmine, node, etc)
+```
+
+
+## Getting started
+
+Install the node_modules and ambient typings:
+
+```
+npm install
+```
+
+The ambient typings are downloaded from DefinitelyTyped in the `postinstall` step. The files that are downloaded are listed in the `typings.json` file.
+
+
+## Protractor typings
+
+To use Protractor types, you'll need to import `protractor/globals`. After this is imported, you should have auto completition hints when typing.
+
+```
+import {browser, element, by, By, $, $$, ExpectedConditions} from 'protractor/globals';
+```
+
+Although the Protractor configuration file can be written in javascript, creating it in typescript will have some hints. These hints and the reference configuration can be found in `lib/config.ts`. Below we are importing the Config interface and applying that interface to the config variable:
+
+```
+import {Config} from 'protractor';
+
+export let config: Config = {
+  ...
+}
+```
+
+## Ambient typings
+
+Protractor also uses ambient types including jasmine and node. These are brought in via the `typings.json` file. The ambient typings files are imported from the `typings/index.d.ts` generated file and are included in the project via the tsconfig.json configuration file.
+
+
+## Compiling your code
+
+To convert your typescript to javascript (transpiling), you'll use the Typescript comipler (tsc). If you install typescript globally, the command is `tsc`. If it is not installed globally, the typescript compiler can be executed with `npm run tsc`.
+
+## Running Protractor
+
+After transpiling your code to javascript, you'll run Protractor like before: `protractor conf.js`
+
+## Helpful links
+
+* [TypescriptLang.org tutorial](http://www.typescriptlang.org/docs/tutorial.html)
+* [TypescriptLang.org tsconfig.json](http://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
+* [Typescript gitter](https://gitter.im/Microsoft/TypeScript)
+* [Typescript stackoverflow](http://stackoverflow.com/questions/tagged/typescript)
+

exampleTypescript/angularPage.ts

@@ -0,0 +1,26 @@
+// 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:
+//
+// import {browser, element, by, By, $, $$, ExpectedConditions}
+//   from 'protractor/globals';
+//
+import {browser, element, by} from 'protractor/globals';
+
+export class AngularHomepage {
+  nameInput = element(by.model('yourName'));
+  greeting = element(by.binding('yourName'));
+
+  get() {
+    browser.get('http://www.angularjs.org');
+  }
+
+  setName(name: string) {
+    this.nameInput.sendKeys(name);
+  }
+
+  // getGreeting returns a webdriver.promise.Promise.<string>. For simplicity
+  // setting the return value to any
+  getGreeting(): any {
+    return this.greeting.getText();
+  }
+}

exampleTypescript/conf.ts

@@ -0,0 +1,20 @@
+// 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:
+// edtiors like Microsoft Visual Studio Code will have autocomplete and
+// description hints.
+//
+// To run this example, run 'npm run tsc' to transpile the typescript to
+// javascript. run with 'protractor conf.js'
+import {Config} from 'protractor';
+
+export let config: Config  = {
+  framework: 'jasmine',
+  capabilities: {
+    browserName: 'chrome'
+  },
+  specs: [ 'spec.js' ],
+  seleniumAddress: 'http://localhost:4444/wd/hub'
+};

exampleTypescript/confPageObjects.ts

@@ -0,0 +1,20 @@
+// 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:
+// edtiors like Microsoft Visual Studio Code will have autocomplete and
+// description hints.
+//
+// To run this example, run 'npm run tsc' to transpile the typescript to
+// javascript. run with 'protractor conf_withPageObjects.js'
+import {Config} from 'protractor';
+
+export let config: Config  = {
+  framework: 'jasmine',
+  capabilities: {
+    browserName: 'chrome'
+  },
+  specs: [ 'specPageObjects.js' ],
+  seleniumAddress: 'http://localhost:4444/wd/hub'
+};

exampleTypescript/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "example-typescript",
+  "version": "1.0.0",
+  "description": "a typescript example",
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "tsc": "tsc",
+    "typings": "typings install",
+    "postinstall": "typings install"
+  },
+  "dependencies": {
+    "jasmine": "^2.4.1",
+    "protractor": "^4.0.0",
+    "typescript": "^1.8.10",
+    "typings": "^1.0.5"
+  }
+}

exampleTypescript/spec.ts

@@ -0,0 +1,26 @@
+// 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:
+//
+// import {browser, element, by, By, $, $$, ExpectedConditions}
+//   from 'protractor/globals';
+//
+// The jasmine typings are brought in via DefinitelyTyped ambient typings.
+import {browser, element, by, By, $, $$, ExpectedConditions} from 'protractor/globals';
+
+describe('protractor with typescript typings', () => {
+  beforeEach(() => {
+    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 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');
+  });
+});

exampleTypescript/specPageObjects.ts

@@ -0,0 +1,12 @@
+// local import of the exported AngularPage class
+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!');
+  });
+});

exampleTypescript/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": false,
+    "declaration": false,
+    "noImplicitAny": false
+  },
+  "exclude": [
+    "node_modules",
+    "typings/globals"
+  ]
+}

exampleTypescript/typings.json

@@ -0,0 +1,6 @@
+{
+  "globalDependencies": {
+    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
+    "node": "registry:dt/node#4.0.0+20160423143914"
+  }
+}

tsconfig.json

@@ -16,6 +16,7 @@
     "website",
     "typings/globals",
     "scripts",
-    "globals.ts"
+    "globals.ts",
+    "exampleTypescript"
   ]
 }