chore: add sample unit and e2e tests and explain them.

.gitignore

@@ -2,3 +2,5 @@ typings/
 node_modules/
 *.js
 *.js.map
+!**/*e2e-spec.js
+_test-output

CHANGELOG.md

@@ -14,6 +14,7 @@
   * a2-in-memory-web-api
   
 * add testing dev-dependency packages
+  * canonical-path: 0.0.2,
   * http-server: ^0.9.0,
   * jasmine-core: ~2.4.1,
   * karma: ^0.13.22,

README.md

@@ -3,6 +3,14 @@
 This repository holds the TypeScript source code of the [angular.io quickstart](https://angular.io/docs/ts/latest/quickstart.html),
 the foundation for most of the documentation samples and potentially a good starting point for your application.
 
+It's been extended with testing support so you can start writing tests immediately.
+
+**This is not the perfect arrangement for your application. It is not designed for production. 
+It exists primarily to get you started quickly with learning and prototyping in Angular 2**
+
+We are unlikely to accept suggestions about how to grow this QuickStart into something it is not.
+Please keep that in mind before posting issues and PRs.
+
 ## Create a new project based on the QuickStart
 
 Clone this repo into new project folder (e.g., `my-proj`).
@@ -35,17 +43,28 @@ Grab its address (e.g. *`https://github.com/<my-org>/my-proj.git`*) and push the
 git remote add origin <repo-address>
 git push -u origin master
 ```
-### Start development
+## Install npm packages
 
 Install the npm packages described in the `package.json` and verify that it works:
 
+**Attention Windows Developers:  You must run all of these commands in administrator mode**
+
 ```bash
 npm install
 npm start
 ```
+
+The `npm start` command first compiles the application, 
+then simultaneously re-compiles and runs the `lite-server`.
+Both the compiler and the server watch for file changes.
+
+Shut it down manually with Ctrl-C.
+
 You're ready to write your application.
 
-Remember the npm scripts in `package.json`:
+### npm scripts
+
+We've captured many of the most useful commands in npm scripts defined in the `package.json`:
 
 * `npm start` - runs the compiler and a server at the same time, both in "watch mode".
 * `npm run tsc` - runs the TypeScript compiler once.
@@ -56,3 +75,52 @@ Remember the npm scripts in `package.json`:
 with excellent support for Angular apps that use routing.
 * `npm run typings` - runs the typings tool.
 * `npm run postinstall` - called by *npm* automatically *after* it successfully completes package installation. This script installs the TypeScript definition files this app requires.
+
+Here are the test related scripts:
+* `npm test` - compiles, runs and watches the karma unit tests
+* `npm webdriver:update` - ONE TIME update for protractor end-to-end (e2e) tests
+* `npm run e2e` - run protractor e2e tests, written in JavaScript (*e2e-spec.js)
+
+## Testing
+
+The QuickStart documentation doesn't discuss testing. 
+This repo adds both karma/jasmine unit test and protractor end-to-end testing support.
+
+These tools are configured for specific conventions described below.
+
+*It is unwise and rarely possible to run the application, the unit tests, and the e2e tests at the same time.
+We recommend that you shut down one before starting another.*
+
+### Unit Tests
+TypeScript unit-tests are usually in the `app` folder. Their filenames must end in `.spec`.
+
+Look for the example `app/app.component.spec.ts`.
+Add more `.spec.ts` files as you wish; we configured karma to find them.
+
+Run it with `npm tests`.
+
+That command first compiles the application, then simultaneously re-compiles and runs the karma test-runner.
+Both the compiler and the karma watch for (different) file changes.
+
+Shut it down manually with Ctrl-C.
+
+### End-to-end (E2E) Tests
+
+**BEFORE RUNNING THE FIRST TEST** you must update the Selenium webdriver. Run `npm webdriver:update`.
+
+E2E tests are usually at the project root, above the `app` folder. 
+Their filenames must end in `e2e-spec.js`.
+
+E2E tests must be written in JavaScript (the author has not figured out how to write them in TS yet).
+
+Look for the example `e2e-spec.ts` in the root folder.
+Add more `e2e-spec.js` files as you wish (although one usually suffices for small projects); 
+we configured protractor to find them.
+
+
+Thereafter, run them with `npm run e2e`.
+
+That command first compiles, then simultaneously starts the Http-Server at `localhost:8080`
+and launches protractor.  The pass/fail test results appear at the bottom of the terminal window.
+
+Shut it down manually with Ctrl-C.

app/app.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { AppComponent } from './app.component';
+
+import {
+  it,
+  iit,
+  xit,
+  describe,
+  ddescribe,
+  xdescribe,
+  expect,
+  fakeAsync,
+  tick,
+  beforeEach,
+  inject,
+  injectAsync,
+  withProviders,
+  beforeEachProviders,
+  TestComponentBuilder
+} from 'angular2/testing';
+
+import { provide }        from 'angular2/core';
+import { ViewMetadata }   from 'angular2/core';
+import { PromiseWrapper } from 'angular2/src/facade/promise';
+
+/////////// Module Preparation ///////////////////////
+interface Done {
+    (): void;
+    fail: (err: any) => void;
+}
+
+////////  SPECS  /////////////
+
+/// Delete thesVerify can use Angular testing's DOM abstraction to access DOM
+
+describe('Smoke test', () => {
+  it('should run a passing test', () => {
+    expect(true).toEqual(true, 'should pass');
+  });
+});
+
+describe('AppComponent', function() {
+  it('should instantiate component',
+      injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+
+        return tcb.createAsync(AppComponent).then(fixture => {
+          expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent');
+        });
+      }));
+
+  it('should have expected <h1> text',
+      injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+
+        return tcb.createAsync(AppComponent).then(fixture => {
+          // fixture.detectChanges();  // need for a binding; we don't have one
+          let h1 = fixture.debugElement.query(el => el.name === 'h1').nativeElement;
+          expect(h1.innerText).toMatch(/angular 2 app/i, '<h1> should say something about "Angular 2 App"');
+        });
+      }));
+});

e2e-spec.js

+
+describe('QuickStart E2E Tests', function () {
+
+	var expectedMsg = 'My First Angular 2 App';
+
+
+  beforeEach(function () {
+    browser.get('');
+  });
+
+  it('should display: ' + expectedMsg, function () {
+    expect(element(by.css('h1')).getText()).toEqual(expectedMsg);
+  });
+
+});

package.json

@@ -6,12 +6,13 @@
     "build-and-test": "npm run tsc && npm run test",
     "docker-build": "docker build -t ng2-quickstart .",
     "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
-    "e2e": "tsc && http-server && protractor protractor.config.js",
+    "e2e": "tsc && concurrently \"http-server\" \"protractor protractor.config.js\"",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "lite": "lite-server",
     "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
     "typings": "typings",
+    "webdriver:update": "webdriver-manager update",
     "postinstall": "typings install"
   },
   "license": "ISC",
@@ -26,6 +27,7 @@
     "zone.js": "0.6.10"
   },
   "devDependencies": {
+    "canonical-path": "0.0.2",
     "concurrently": "^2.0.0",
     "http-server": "^0.9.0",
     "jasmine-core": "~2.4.1",

protractor.config.js

-// TO RUN THE TESTS
-//
-// The first time, run:
+// FIRST TIME ONLY- run:
 //   ./node_modules/.bin/webdriver-manager update
-// Make sure the test server is running. Then do.
-//   ./node_modules/.bin/protractor protractor.config.js
+//
+//   Try: `npm run webdriver:update`
+//
+// AND THEN EVERYTIME ...
+//   1. Compile with `tsc`
+//   2. Make sure the test server (e.g., http-server: localhost:8080) is running.
+//   3. ./node_modules/.bin/protractor protractor.config.js
+//
+// To do all steps, try:  `npm run e2e`
 
 var fs = require('fs');
 var path = require('canonical-path');