chore: extend with testing support (preliminary)

.editorconfig

+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+# Indentation override
+#[lib/**.js]
+#[{package.json,.travis.yml}]
+#[**/**.js]

CHANGELOG.md

+<a name="0.1.15"></a>
+# 0.1.15 (2016-04-13)
+* Add testing support
+  * npm scripts
+  * karma/jasmine
+  * protractor
+
+* update packages
+  * Angular 2 beta 15
+  * lite-server 2.2.0
+  * typings 0.7.12
+  
+* add run packages
+  * a2-in-memory-web-api
+  
+* add testing dev-dependency packages  
+  * http-server: ^0.9.0,
+  * jasmine-core: ~2.4.1,
+  * karma: ^0.13.22,
+  * karma-chrome-launcher: ^0.2.3,
+  * karma-cli: ^0.1.2,
+  * karma-htmlfile-reporter: ^0.2.2,
+  * karma-jasmine: ^0.3.8,
+  * protractor: ^3.2.2,
+  * rimraf: ^2.5.2  
+
 <a name="0.1.14"></a>
-# 0.1.13 (2016-04-07)
+# 0.1.14 (2016-04-07)
 * update packages
   * Angular 2 beta 14
   * lite-server 2.2.0

karma-test-shim.js

+/*global jasmine, __karma__, window*/
+(function () {
+
+// Error.stackTraceLimit = Infinity;
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
+
+// Cancel Karma's synchronous start,
+// we call `__karma__.start()` later, once all the specs are loaded.
+__karma__.loaded = function () { };
+
+// SET THE RUNTIME APPLICATION ROOT HERE
+var appRoot ='app'; // no trailing slash!
+
+// RegExp for client application base path within karma (which always starts 'base\')
+var karmaBase = '^\/base\/'; // RegEx string for base of karma folders
+var appPackage = 'base/' + appRoot; //e.g., base/app
+var appRootRe = new RegExp(karmaBase + appRoot + '\/');
+var onlyAppFilesRe = new RegExp(karmaBase + appRoot + '\/(?!.*\.spec\.js$)([a-z0-9-_\.\/]+)\.js$');
+
+var moduleNames = [];
+
+// Configure systemjs packages to use the .js extension for imports from the app folder
+var packages = {};
+packages[appPackage] = {
+    defaultExtension: false,
+    format: 'register',
+    map: Object.keys(window.__karma__.files)
+      .filter(onlyAppFiles)
+      // Create local module name mapping to karma file path for app files
+      // with karma's fingerprint in query string, e.g.:
+      // './hero.service': '/base/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
+      .reduce(function (pathsMapping, appPath) {
+        var moduleName = appPath.replace(appRootRe, './').replace(/\.js$/, '');
+        pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath];
+        return pathsMapping;
+      }, {})
+  }
+
+System.config({ packages: packages });
+
+// Configure Angular for the browser and
+// with test versions of the platform providers
+System.import('angular2/testing')
+  .then(function (testing) {
+    return System.import('angular2/platform/testing/browser')
+      .then(function (providers) {
+        testing.setBaseTestProviders(
+          providers.TEST_BROWSER_PLATFORM_PROVIDERS,
+          providers.TEST_BROWSER_APPLICATION_PROVIDERS
+        );
+      });
+  })
+
+// Load all spec files
+// (e.g. 'base/app/hero.service.spec.js')
+.then(function () {
+  return Promise.all(
+    Object.keys(window.__karma__.files)
+      .filter(onlySpecFiles)
+      .map(function (moduleName) {
+        moduleNames.push(moduleName);
+        return System.import(moduleName);
+      }));
+})
+
+.then(success, fail);
+
+////// Helpers //////
+
+function onlyAppFiles(filePath) {
+  return onlyAppFilesRe.test(filePath);
+}
+
+function onlySpecFiles(filePath) {
+  return /\.spec\.js$/.test(filePath);
+}
+
+function success () {
+  console.log(
+    'Spec files loaded:\n  ' +
+    moduleNames.join('\n  ') +
+    '\nStarting Jasmine testrunner');
+  __karma__.start();
+}
+
+function fail(error) {
+  __karma__.error(error.stack || error);
+}
+
+})();

karma.conf.js

+module.exports = function(config) {
+
+  var appBase   = 'app/';     // transpiled app JS files
+  var appAssets ='base/app/'; // component assets fetched by Angular's compiler
+
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-htmlfile-reporter')
+    ],
+
+    customLaunchers: {
+      // From the CLI. Not used here but interesting
+      // chrome setup for travis CI using chromium
+      Chrome_travis_ci: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      }
+    },
+
+    files: [
+      // Angular and shim libraries loaded by Karma
+      { pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: true, watched: true },
+      { pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true },
+      { pattern: 'node_modules/es6-shim/es6-shim.js', included: true, watched: true },
+      { pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', included: true, watched: true },
+      { pattern: 'node_modules/rxjs/bundles/Rx.js', included: true, watched: true },
+      { pattern: 'node_modules/angular2/bundles/angular2.js', included: true, watched: true },
+      { pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: true },
+
+      // External libraries loaded by Karma
+      { pattern: 'node_modules/angular2/bundles/http.dev.js', included: true, watched: true },
+      { pattern: 'node_modules/angular2/bundles/router.dev.js', included: true, watched: true },
+      { pattern: 'node_modules/a2-in-memory-web-api/web-api.js', included: true, watched: true },
+
+      // Configures module loader w/ app and specs, then launch karma
+      { pattern: 'karma-test-shim.js', included: true, watched: true },
+
+      // transpiled application & spec code paths loaded via module imports
+      {pattern: appBase + '**/*.js', included: false, watched: true},
+
+      // asset (HTML & CSS) paths loaded via Angular's component compiler
+      // (these paths need to be rewritten, see proxies section)
+      {pattern: appBase + '**/*.html', included: false, watched: true},
+      {pattern: appBase + '**/*.css', included: false, watched: true},
+
+      // paths for debugging with source maps in dev tools
+      {pattern: appBase + '**/*.ts', included: false, watched: false},
+      {pattern: appBase + '**/*.js.map', included: false, watched: false}
+    ],
+
+    // proxied base paths for loading assets
+    proxies: {
+      // required for component assets fetched by Angular's compiler
+      "/app/": appAssets
+    },
+
+    exclude: [],
+    preprocessors: {},
+    reporters: ['progress', 'html'],
+
+    // HtmlReporter configuration
+    htmlReporter: {
+      // Open this file to see results in browser
+      outputFile: '_test-output/tests.html',
+
+      // Optional
+      pageTitle: 'Unit Tests',
+      subPageTitle: __dirname
+    },
+
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  })
+}

package.json

@@ -2,28 +2,42 @@
   "name": "angular2-quickstart",
   "version": "1.0.0",
   "scripts": {
-    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
+    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
+    "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",
     "tsc": "tsc",
     "tsc:w": "tsc -w",
     "lite": "lite-server",
+    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
     "typings": "typings",
-    "docker-build": "docker build -t ng2-quickstart .",
-    "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
     "postinstall": "typings install"
   },
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-beta.14",
+    "angular2": "2.0.0-beta.15",
+    "a2-in-memory-web-api": "^0.1.14",
+    
     "systemjs": "0.19.25",
     "es6-shim": "^0.35.0",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.2",
-    "zone.js": "0.6.6"
+    "zone.js": "0.6.10"
   },
   "devDependencies": {
     "concurrently": "^2.0.0",
+    "http-server": "^0.9.0",    
+    "jasmine-core": "~2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "^0.2.3",
+    "karma-cli": "^0.1.2",
+    "karma-htmlfile-reporter": "^0.2.2",
+    "karma-jasmine": "^0.3.8",    
     "lite-server": "^2.2.0",
-    "typescript": "^1.8.9",
+    "protractor": "^3.2.2",
+    "rimraf": "^2.5.2",    
+    "typescript": "^1.8.10",
     "typings":"^0.7.12"
   }
 }
\ No newline at end of file

protractor.config.js

+// TO RUN THE TESTS
+//
+// The first time, run:
+//   ./node_modules/.bin/webdriver-manager update
+// Make sure the test server is running. Then do.
+//   ./node_modules/.bin/protractor protractor.config.js
+
+var fs = require('fs');
+var path = require('canonical-path');
+var _ = require('lodash');
+
+
+exports.config = {
+  directConnect: true,
+
+  // Capabilities to be passed to the webdriver instance.
+  capabilities: {
+    'browserName': 'chrome'
+  },
+
+  // Framework to use. Jasmine is recommended.
+  framework: 'jasmine',
+
+  // Spec patterns are relative to this config file
+  specs: ['**/*e2e-spec.js' ],
+
+
+  // For angular2 tests
+  useAllAngular2AppRoots: true,
+
+  // Base URL for application server
+  baseUrl: 'http://localhost:8080',
+
+  // doesn't seem to work.
+  // resultJsonOutputFile: "foo.json",
+
+  onPrepare: function() {
+    //// SpecReporter
+    //var SpecReporter = require('jasmine-spec-reporter');
+    //jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: 'none'}));
+    //// jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: 'all'}));
+
+    // debugging
+    // console.log('browser.params:' + JSON.stringify(browser.params));
+
+    var appDir = browser.params.appDir;
+    if (appDir) {
+      if (appDir.match('/ts') != null) {
+        browser.appIsTs = true;
+      } else if (appDir.match('/js') != null) {
+        browser.appIsJs = true;
+      } else if (appDir.match('/dart') != null) {
+        browser.appIsDart = true;
+      } else {
+        browser.appIsUnknown = true;
+      }
+    } else {
+      browser.appIsUnknown = true;
+    }
+    jasmine.getEnv().addReporter(new Reporter( browser.params )) ;
+    global.describeIf = describeIf;
+    global.itIf = itIf;
+    global.sendKeys = sendKeys;
+
+    // Allow changing bootstrap mode to NG1 for upgrade tests
+    global.setProtractorToNg1Mode = function() {
+      browser.useAllAngular2AppRoots = false;
+      browser.rootEl = 'body';
+    };
+  },
+
+  jasmineNodeOpts: {
+    // defaultTimeoutInterval: 60000,
+    defaultTimeoutInterval: 10000,
+    showTiming: true,
+    print: function() {}
+  }
+};
+
+function describeIf(cond, name, func) {
+  if (cond) {
+    describe(name, func);
+  } else {
+    xdescribe(name, func);
+  }
+}
+
+function itIf(cond, name, func) {
+  if (cond) {
+    it(name, func);
+  } else {
+    xit(name, func);
+  }
+}
+
+// Hack - because of bug with send keys
+function sendKeys(element, str) {
+  return str.split('').reduce(function (promise, char) {
+    return promise.then(function () {
+      return element.sendKeys(char);
+    });
+  }, element.getAttribute('value'));
+  // better to create a resolved promise here but ... don't know how with protractor;
+}
+
+
+function Reporter(options) {
+  var _defaultOutputFile = path.resolve(process.cwd(), "../../", 'protractor-results.txt');
+  options.outputFile = options.outputFile || _defaultOutputFile;
+
+  var _root = { appDir: options.appDir, suites: [] };
+  log('AppDir: ' + options.appDir, +1);
+  var _currentSuite;
+
+  this.suiteStarted = function(suite) {
+    _currentSuite = { description: suite.description, status: null, specs: [] };
+    _root.suites.push(_currentSuite);
+    log('Suite: ' + suite.description, +1);
+  };
+
+  this.suiteDone = function(suite) {
+    var statuses = _currentSuite.specs.map(function(spec) {
+      return spec.status;
+    });
+    statuses = _.uniq(statuses);
+    var status = statuses.indexOf('failed') >= 0 ? 'failed' : statuses.join(', ');
+    _currentSuite.status = status;
+    log('Suite ' + _currentSuite.status + ': ' + suite.description, -1);
+  };
+
+  this.specStarted = function(spec) {
+
+  };
+
+  this.specDone = function(spec) {
+    var currentSpec = {
+      description: spec.description,
+      status: spec.status
+    };
+    if (spec.failedExpectations.length > 0) {
+      currentSpec.failedExpectations = spec.failedExpectations;
+    }
+
+    _currentSuite.specs.push(currentSpec);
+    log(spec.status + ' - ' + spec.description);
+  };
+
+  this.jasmineDone = function() {
+    outputFile = options.outputFile;
+    //// Alternate approach - just stringify the _root - not as pretty
+    //// but might be more useful for automation.
+    // var output = JSON.stringify(_root, null, 2);
+    var output = formatOutput(_root);
+    fs.appendFileSync(outputFile, output);
+  };
+
+  // for output file output
+  function formatOutput(output) {
+    var indent = '  ';
+    var pad = '  ';
+    var results = [];
+    results.push('AppDir:' + output.appDir);
+    output.suites.forEach(function(suite) {
+      results.push(pad + 'Suite: ' + suite.description + ' -- ' + suite.status);
+      pad+=indent;
+      suite.specs.forEach(function(spec) {
+        results.push(pad + spec.status + ' - ' + spec.description);
+        if (spec.failedExpectations) {
+          pad+=indent;
+          spec.failedExpectations.forEach(function (fe) {
+            results.push(pad + 'message: ' + fe.message);
+          });
+          pad=pad.substr(2);
+        }
+      });
+      pad = pad.substr(2);
+      results.push('');
+    });
+    results.push('');
+    return results.join('\n');
+  }
+
+  // for console output
+  var _pad;
+  function log(str, indent) {
+    _pad = _pad || '';
+    if (indent == -1) {
+      _pad = _pad.substr(2);
+    }
+    console.log(_pad + str);
+    if (indent == 1) {
+      _pad = _pad + '  ';
+    }
+  }
+
+}

tslint.json

+{
+  "rules": {
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "label-position": true,
+    "label-undefined": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-key": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-eval": true,
+    "no-inferrable-types": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-unused-variable": true,
+    "no-unreachable": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ]
+  }
+}