Upgrade to new Angular and CLI

angular-cli.json → .angular-cli.json

@@ -1,24 +1,29 @@
 {
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "version": "1.0.0-beta.14",
     "name": "known-for-web"
   },
   "apps": [
     {
       "root": "src",
       "outDir": "dist",
-      "assets": "assets",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
       "index": "index.html",
       "main": "main.ts",
+      "polyfills": "polyfills.ts",
       "test": "test.ts",
-      "tsconfig": "tsconfig.json",
-      "prefix": "app",
-      "mobile": false,
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "kf",
       "styles": [
         "../node_modules/ng2-slim-loading-bar/style.css",
         "styles.scss"
       ],
       "scripts": [],
+      "environmentSource": "environments/environment.ts",
       "environments": {
         "source": "environments/environment.ts",
         "ci": "environments/environment.ci.ts",
@@ -29,21 +34,29 @@
       }
     }
   ],
-  "addons": [],
-  "packages": [],
   "e2e": {
     "protractor": {
       "config": "./protractor.conf.js"
     }
   },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json"
+    },
+    {
+      "project": "src/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
+    }
+  ],
   "test": {
     "karma": {
       "config": "./karma.conf.js"
     }
   },
   "defaults": {
     "styleExt": "scss",
-    "prefixInterfaces": false,
-    "lazyRoutePrefix": "+"
+    "component": {}
   }
 }

.travis.yml

@@ -1,22 +1,28 @@
+dist: trusty
+
+addons:
+  chrome: stable
+
 language: node_js
+
 node_js:
   - "6"
 
 install:
-  - npm install -g angular-cli
+  - npm install -g @angular/cli
   - npm install -g karma
   - npm install
 
 before_script:
+  - "export DISPLAY=:99.0"
+  - "sh -e /etc/init.d/xvfb start"
+  - sleep 3 # give xvfb some time to start
   - ng -v
-  - npm run pree2e
-  - ng serve --env=ci &
-  - sleep 30
 
 script:
   - ng lint
-  - ng test --no-watch
-  - npm run endtoend
+  - ng test --no-watch --code-coverage
+  - npm run cie2e
 
 after_success:
   - npm run coveralls
@@ -25,11 +31,11 @@ before_deploy:
   - npm run package
 
 deploy:
-    edge: true
-    provider: cloudfoundry
-    api: https://api.run.pez.pivotal.io
-    username: $CF_USERNAME
-    password: $CF_PASSWORD
-    organization: pivot-jsharpe
-    space: known-for
-    manifest: manifest.yml
+  edge: true
+  provider: cloudfoundry
+  api: https://api.run.pez.pivotal.io
+  username: $CF_USERNAME
+  password: $CF_PASSWORD
+  organization: pivot-jsharpe
+  space: known-for
+  manifest: manifest.yml

Dockerfile

@@ -2,15 +2,15 @@ FROM node:latest
 
 MAINTAINER Jonathan Sharpe <mail@jonrshar.pe>
 
-RUN npm install -g angular-cli
+RUN npm install -g @angular/cli
 
 RUN mkdir -p /usr
 WORKDIR /usr
 
 COPY ./package.json /usr
 RUN npm install
 
-COPY ./angular-cli.json /usr
+COPY ./.angular-cli.json /usr
 
 COPY ./src /usr/src
 

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2016, Jonathan Sharpe
+Copyright (c) 2017, Jonathan Sharpe
 
 Permission to use, copy, modify, and/or distribute this software for any
 purpose with or without fee is hereby granted, provided that the above

README.md

@@ -17,13 +17,13 @@ were "known for". Having built [aTMDb] and as I'm currently using
 
 ## Development
 
-This project was generated with [`angular-cli`]. The easiest way to get
+This project was generated with [`@angular/cli`]. The easiest way to get
 it up and running is:
 
  - Fork and clone the repository
  - Run `npm install` to pull in the required packages
  - Run `npm run pree2e` to update the webdriver for end-to-end testing
- - Install the CLI globally using `npm install -g angular-cli`
+ - Install the CLI globally using `npm install -g @angular/cli`
  - Set the `apiBaseUrl` in `src/environments/environment.dev.ts` to an
    appropriate value (see the instructions on [`known-for-api`] to get
    that running locally using e.g. PCF Dev or Docker)
@@ -59,10 +59,8 @@ the output:
  - `ng lint` to run the linter
  - `ng test` to run the unit tests (add `--watch false` to run once and
    then stop)
- - `npm run endtoend` to run the end-to-end tests (or `ng e2e` if you
-   don't mind the output)
-
-Alternatively, `npm run testall` to run all three in sequence.
+ - `npm run e2e` to run the end-to-end tests (or `ng e2e` if you don't mind
+   the output)
 
 ## Deployment
 
@@ -80,7 +78,7 @@ The CLI also provides functionality to deploy to GitHub Pages, although
 I haven't yet tried it: `ng github-pages:deploy`.
 
   [Angular 2]: https://angular.io
-  [`angular-cli`]: https://github.com/angular/angular-cli
+  [`@angular/cli`]: https://github.com/angular/angular-cli
   [aTMDb]: https://pythonhosted.org/atmdb/
   [Build Status]: https://travis-ci.org/textbook/known-for-web.svg?branch=master
   [Cloud Foundry]: https://www.cloudfoundry.org/

e2e/app.e2e-spec.ts

@@ -14,7 +14,7 @@ describe('Home Page', function() {
   });
 
   it('should provide an input for guessing movie titles', () => {
-    var title = 'Watch This';
+    const title = 'Watch This';
 
     page.guessMovieTitle(title);
 
@@ -23,23 +23,22 @@ describe('Home Page', function() {
 
   it('should focus the input when a movie is clicked', () => {
     page.getMovies().first().click();
-    let activeElement = browser.driver.switchTo().activeElement();
-    expect(page.getTitleInput().getId()).toBe(activeElement.getId())
+    page.validateInputFocused();
   });
 
   it('should provide suggested titles to be guessed', done => {
     page.inputMovieTitle('hello');
     expect(page.getSuggestions().count()).toBeGreaterThan(0);
 
-    let guess = page.getSuggestions().first();
+    const guess = page.getSuggestions().first();
     guess.getText().then(text => {
       guess.click();
       validateGuess(text);
       done();
     });
   });
 
-  it('should clear suggestions when a guess is removed', () => {
+  xit('should clear suggestions when a guess is removed', () => {
     expect(page.getSuggestions().count()).toBe(0);
     page.inputMovieTitle('fight club');
     expect(page.getSuggestions().count()).toBeGreaterThan(0);
@@ -50,7 +49,7 @@ describe('Home Page', function() {
   });
 
   it('should show a button to change the displayed actor', () => {
-    let lastActor = page.getActorName();
+    const lastActor = page.getActorName();
     page.inputMovieTitle('some guess');
 
     page.clickSkipButton();

e2e/pages/app.po.ts

@@ -1,4 +1,4 @@
-import { ElementFinder } from 'protractor';
+import { browser, element, by, protractor, ElementFinder } from 'protractor';
 
 import { WebPage } from './page.po';
 
@@ -26,7 +26,7 @@ export class KnownForWebPage extends WebPage {
   }
 
   getTitleInput() {
-    return element(by.name('movieTitle'))
+    return element(by.name('movieTitle'));
   }
 
   inputMovieTitle(title: string) {
@@ -66,4 +66,9 @@ export class KnownForWebPage extends WebPage {
   clickHintButton() {
     this.clickButton('Hint');
   }
+
+  validateInputFocused() {
+    const activeElement = browser.driver.switchTo().activeElement();
+    expect(this.getTitleInput().getId()).toBe(activeElement.getId());
+  }
 }

e2e/pages/page.po.ts

@@ -1,3 +1,5 @@
+import { browser, element, by, protractor } from 'protractor';
+
 export class WebPage {
   path: string;
 
@@ -10,7 +12,7 @@ export class WebPage {
   }
 
   clickButton(buttonText: string) {
-    let button = element(by.buttonText(buttonText));
+    const button = element(by.buttonText(buttonText));
     browser.wait(
       protractor.ExpectedConditions.elementToBeClickable(button),
       2000,

e2e/tsconfig.e2e.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  }
+}

karma.conf.js

@@ -14,30 +14,42 @@ if (process.env.CI) {
 module.exports = function (config) {
   config.set({
     basePath: './',
-    frameworks: ['jasmine', 'angular-cli'],
+    frameworks: ['jasmine', '@angular/cli'],
     plugins: [
       require('karma-jasmine'),
-      require('karma-phantomjs-launcher'),
-      require('karma-remap-istanbul'),
-      require('angular-cli/plugins/karma')
+      require('karma-mocha-reporter'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
     ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
     files: [
       { pattern: './src/test.ts', watched: false }
     ],
     preprocessors: {
-      './src/test.ts': ['angular-cli']
+      './src/test.ts': ['@angular/cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    coverageIstanbulReporter: {
+      reports: ['lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
     },
-    remapIstanbulReporter: { reports: reports },
     angularCli: {
-      config: './angular-cli.json',
       environment: 'dev'
     },
-    reporters: ['progress', 'karma-remap-istanbul'],
+    reporters: config.angularCli && config.angularCli.codeCoverage
+        ? ['mocha', 'coverage-istanbul']
+        : ['mocha', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['PhantomJS'],
+    browsers: ['ChromeHeadless'],
     singleRun: false
   });
 };