Updated dependencies, readded Travis CI and added cross browser testing.

.circleci/config.yml

@@ -37,22 +37,18 @@ jobs:
             CODECOV_TOKEN: 82961927-13cb-4813-928f-55e6d09daa93
           command: cat ./coverage/lcov.info | ./node_modules/.bin/codecov
 
+      - run:
+          name: Build
+          # shell js shouldn't be necessary, but it is. yay ionic
+          command: npm install shelljs && npm run build && npm run build -- --prod
+
       - run:
           name: e2e test
           environment:
             DISPLAY: :99
             CHROME_BIN: /usr/bin/google-chrome
             JUNIT_REPORT_PATH: $CIRCLE_TEST_REPORTS/junit/
-          command: xvfb-run npm run e2e
-
-      - run:
-          name: Prepare
-          command: ionic cordova prepare
-
-      - run:
-          name: Build
-          # shell js shouldn't be necessary, but it is. yay ionic
-          command: npm install shelljs && ionic cordova build browser
+          command: xvfb-run npm run e2e-ci
 
       - run:
           name: Deploy

.travis.yml

@@ -0,0 +1,85 @@
+matrix:
+  include:
+  - name: "Build Android"
+    os: linux
+    sudo: required
+    language: android
+    android:
+      components:
+        - tools
+        - platform-tools
+        - tools
+        - build-tools-27.0.3
+        - android-27
+      licenses:
+        - 'android-sdk-preview-license-.+'
+        - 'android-sdk-license-.+'
+        - 'google-gdk-license-.+'
+    before_install:
+      - nvm install node
+      - nvm use node
+      - npm install -g cordova ionic
+    before_script:
+      - ionic cordova platform add android
+    script:
+      - ionic cordova build android
+      - ionic cordova build android --prod
+  - name: "Build iOS"
+    os: osx
+    language: objective-c
+    before_install:
+      - nvm install node
+      - nvm use node
+      - npm install -g cordova ionic
+    before_script:
+      - ionic cordova platform add ios
+    script:
+      - ionic cordova build ios
+      - ionic cordova build ios --prod
+  - name: "Build Windows (UWP)"
+    os: windows
+    language: node_js
+    node_js: node
+    env: MSBUILDDIR="c:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin"
+    before_install:
+      - npm install -g cordova ionic
+    before_script:
+      - ionic cordova platform add windows
+    script:
+      - ionic cordova build windows
+      - ionic cordova build windows --prod
+  - name: "Test on Chrome and Firefox Quantum"
+    os: linux
+    language: node_js
+    node_js: node
+    addons:
+      chrome: stable
+      firefox: latest
+    before_install:
+      - npm install --save-dev karma-firefox-launcher
+    before_script:
+      # Temporary fix for https://github.com/angular/webdriver-manager/issues/303
+      # GitHub API cache is from here https://github.com/wp-cli/wp-cli/issues/3426#issuecomment-251443347
+      - (cd node_modules/protractor/node_modules/webdriver-manager/built/lib/binaries/ && sed -i 's/api.github.com/github-api-cache.unyson.io/' config_source.js gecko_driver_github.js)
+      - npm run postinstall
+      - sed -i '/<!-- un-comment this code to enable service worker/d' src/index.html
+      - sed -i 's/<\/script>-->/<\/script>/' src/index.html
+      - npm run lint
+    script:
+      # Build PWA
+      - npm run build
+      - npm run build -- --prod
+      # Test on Chrome
+      - npm run test-ci -- --browsers ChromeHeadless
+      - npm run e2e-ci -- --browser=chrome --capabilities.chromeOptions.args="--headless"
+      # Test on Firefox Quantum
+      - sed -i 's/chrome/firefox/' karma.conf.js
+      - npm run test-ci -- --browsers FirefoxHeadless
+      - npm run e2e-ci -- --browser=firefox --capabilities.moz:firefoxOptions.args="--headless" --capabilities.moz:firefoxOptions.args=""
+    after_success:
+      - ./node_modules/.bin/codecov
+cache:
+  directories:
+    - node_modules
+install:
+  - npm install

README.md

@@ -1,5 +1,5 @@
 ## Ionic 2 Demo / Seed Project : + i18n + Unit Testing + E2E Testing + CI + CD
-[![CircleCI](https://circleci.com/gh/lathonez/clicker.svg?style=shield)](https://circleci.com/gh/lathonez/clicker) [![Build status](https://ci.appveyor.com/api/projects/status/github/lathonez/clicker?svg=true)](https://ci.appveyor.com/project/lathonez/clicker) [![codecov.io](https://codecov.io/github/lathonez/clicker/coverage.svg?branch=master)](https://codecov.io/github/lathonez/clicker?branch=master) [![Code Climate](https://codeclimate.com/github/lathonez/clicker/badges/gpa.svg)](https://codeclimate.com/github/lathonez/clicker) [![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT) [![Dependency Status](https://david-dm.org/lathonez/clicker/status.svg)](https://david-dm.org/lathonez/clicker) [![devDependency Status](https://david-dm.org/lathonez/clicker/dev-status.svg)](https://david-dm.org/lathonez/clicker#info=devDependencies)
+[![Build Status](https://travis-ci.org/lathonez/clicker.svg?branch=master)](https://travis-ci.org/lathonez/clicker) [![CircleCI](https://circleci.com/gh/lathonez/clicker.svg?style=shield)](https://circleci.com/gh/lathonez/clicker) [![Build status](https://ci.appveyor.com/api/projects/status/github/lathonez/clicker?svg=true)](https://ci.appveyor.com/project/lathonez/clicker) [![codecov.io](https://codecov.io/github/lathonez/clicker/coverage.svg?branch=master)](https://codecov.io/github/lathonez/clicker?branch=master) [![Code Climate](https://codeclimate.com/github/lathonez/clicker/badges/gpa.svg)](https://codeclimate.com/github/lathonez/clicker) [![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT) [![Dependency Status](https://david-dm.org/lathonez/clicker/status.svg)](https://david-dm.org/lathonez/clicker) [![devDependency Status](https://david-dm.org/lathonez/clicker/dev-status.svg)](https://david-dm.org/lathonez/clicker#info=devDependencies)
 
 [Click here for the live demo](http://lathonez.com/clicker)
 
@@ -9,7 +9,7 @@
 
 ## Ionic's official repo
 
-Ionic have created an official unit testing example over at [driftyco/ionic-unit-testing-example](https://github.com/driftyco/ionic-unit-testing-example). To understand why this repo still exists, see [#239](https://github.com/lathonez/clicker/issues/239), where we looked at deprecating `clicker` in favour of `ionic-unit-testing-example`.
+Ionic has created an official unit testing example over at [driftyco/ionic-unit-testing-example](https://github.com/driftyco/ionic-unit-testing-example). To understand why this repo still exists, see [#239](https://github.com/lathonez/clicker/issues/239), where we looked at deprecating `clicker` in favour of `ionic-unit-testing-example`.
 
 Broadly, the official example repo:
 
@@ -18,7 +18,7 @@ Broadly, the official example repo:
 * Does not support e2e
 * Does not use `@angular/cli` and thus lacks testing support from the wider ng2 community
 
-For ~large or production projects, I suggest using clicker. For small apps / side projects the official example should suffice.
+For ~large or production projects, I suggest using clicker. For small apps / side projects, the official example should suffice.
 
 ## Install & Start
 
@@ -27,22 +27,33 @@ You need to be running [the latest node LTS](https://nodejs.org/en/download/) or
 ```bash
 git clone https://github.com/lathonez/clicker.git
 cd clicker
+npm install -g cordova ionic
 npm install
-npm start         # start the application (ionic serve)
+ionic serve         # start the application or `ionic serve --lab` to view the mobile apps
 ```
 
-Running as root? You probably shouldn't be. If you need to: `npm run postinstall` before `npm start`. [#111](https://github.com/lathonez/clicker/issues/111) for more info.
+Running as root? You probably shouldn't be. If you need to: `npm run postinstall` before `ionic serve`. [#111](https://github.com/lathonez/clicker/issues/111) for more info.
 
 ## Run Unit Tests
+
+### Test in Chrome
 ```bash
 npm test          # run unit tests
 ```
 
-## Run E2E
+### Test in Firefox Quantum
+```bash
+npm install --save-dev karma-firefox-launcher
+sed -i 's/chrome/firefox/' karma.conf.js
+npm run test -- --browsers Firefox          # run unit tests
 ```
-npm run webdriver
+
+## Run E2E
+```bash
+npm run postinstall
 npm run e2e
 ```
+Use `npm run e2e -- --browser=firefox` to test in Firefox Quantum
 
 ## Blog Topics
 
@@ -65,7 +76,7 @@ PRs are welcome, see the [roadmap sticky](https://github.com/lathonez/clicker/is
 * @bengro for the lightweightify inspiration (#68)
 * @ric9176 and @DanielaGSB for E2E tests (#50)
 * @tja4472 for the ngrx implementation (#133)
-* [Everyone else](https://github.com/lathonez/clicker/graphs/contributors) for the advice, help, PRs etc
+* [Everyone else](https://github.com/lathonez/clicker/graphs/contributors) for the advice, help, PRs etc.
 
 ## Changelog
 

appveyor.yml

@@ -7,22 +7,22 @@ install:
   # Get the latest stable version of Node.js or io.js
   - ps: Install-Product node $env:nodejs_version
   # install modules
-  - npm install -g cordova@8.0.0 ionic@3.19.0
+  - npm install -g cordova ionic
   - npm install
 
 build: none
 
 # Post-install test scripts.
 test_script:
   # Output useful info for debugging.
-  - ionic --info
+  - ionic info
   # run tests
   - npm run lint
   - npm run test-ci
   # http://help.appveyor.com/discussions/problems/2917-upgrade-chrome-browser-please#comment_39289617
   - choco install googlechrome
-  - npm run e2e
   # build
-  - ionic cordova prepare
-  - ionic cordova build browser
+  - npm run build
+  - npm run build -- --prod
+  - npm run e2e-ci
 

config.xml

@@ -81,7 +81,7 @@
     <plugin name="cordova-plugin-statusbar" spec="2.4.1" />
     <plugin name="cordova-plugin-whitelist" spec="1.3.3" />
     <plugin name="ionic-plugin-keyboard" spec="2.2.1" />
-    <engine name="android" spec="7.0.0" />
-    <engine name="browser" spec="5.0.3" />
+    <engine name="android" spec="7.1.4" />
+    <engine name="windows" spec="6.0.1" />
     <engine name="ios" spec="4.5.4" />
 </widget>

docker/Dockerfile

@@ -13,7 +13,7 @@ RUN apt-get update && \
   apt-get install -y nodejs && \
 \
 # Install Ionic global deps \
-npm install -g ionic@3.19.0 cordova@8.0.0 && \
+npm install -g ionic cordova && \
 \
 # Install Chrome \
 wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \

package.json

@@ -4,61 +4,61 @@
   "homepage": "https://github.com/lathonez/clicker",
   "private": true,
   "scripts": {
+    "start": "ionic-app-scripts serve",
     "clean": "ionic-app-scripts clean",
     "build": "ionic-app-scripts build",
     "deploy": "ngh --dir www --no-silent",
     "lint": "ionic-app-scripts lint",
-    "ionic:build": "ionic-app-scripts build",
-    "ionic:serve": "ionic-app-scripts serve",
     "e2e": "ionic-app-scripts build && protractor",
-    "postinstall": "webdriver-manager update --gecko false",
-    "start": "ionic serve",
+    "e2e-ci": "protractor",
+    "postinstall": "webdriver-manager update",
     "test": "ng test",
     "test-coverage": "ng test --code-coverage",
-    "test-ci": "ng test --watch=false --code-coverage --no-progress"
+    "test-ci": "ng test --watch=false --progress=false --code-coverage"
   },
   "version": "2.24.0",
   "dependencies": {
-    "@angular/common": "5.0.3",
-    "@angular/compiler": "5.0.3",
-    "@angular/compiler-cli": "5.0.3",
-    "@angular/core": "5.0.3",
-    "@angular/forms": "5.0.3",
-    "@angular/http": "5.0.3",
-    "@angular/platform-browser": "5.0.3",
-    "@angular/platform-browser-dynamic": "5.0.3",
-    "@angular/router": "5.0.3",
-    "@ionic-native/core": "4.5.2",
-    "@ionic-native/splash-screen": "4.5.2",
-    "@ionic-native/status-bar": "4.5.2",
-    "@ionic/storage": "2.1.3",
+    "@angular/animations": "5.2.11",
+    "@angular/common": "5.2.11",
+    "@angular/compiler": "5.2.11",
+    "@angular/compiler-cli": "5.2.11",
+    "@angular/core": "5.2.11",
+    "@angular/forms": "5.2.11",
+    "@angular/http": "5.2.11",
+    "@angular/platform-browser": "5.2.11",
+    "@angular/platform-browser-dynamic": "5.2.11",
+    "@angular/router": "5.2.11",
+    "@ionic-native/core": "~4.18.0",
+    "@ionic-native/splash-screen": "~4.18.0",
+    "@ionic-native/status-bar": "~4.18.0",
+    "@ionic/storage": "2.2.0",
     "@ngx-translate/core": "9.1.0",
     "@ngx-translate/http-loader": "2.0.1",
     "angular-cli-ghpages": "0.5.2",
-    "cordova-android": "7.0.0",
-    "cordova-browser": "5.0.3",
+    "cordova-android": "7.1.4",
     "cordova-ios": "4.5.4",
     "cordova-plugin-device": "2.0.1",
     "cordova-plugin-splashscreen": "5.0.1",
     "cordova-plugin-statusbar": "2.4.1",
     "cordova-plugin-whitelist": "1.3.3",
+    "cordova-windows": "6.0.1",
     "ionic-angular": "3.9.2",
     "ionic-plugin-keyboard": "2.2.1",
     "ionicons": "3.0.0",
-    "rxjs": "5.5.6",
+    "rxjs": "5.5.11",
     "sw-toolbox": "3.6.0",
-    "zone.js": "0.8.19"
+    "zone.js": "0.8.26"
   },
   "devDependencies": {
     "@angular/cli": "1.6.4",
-    "@ionic/app-scripts": "3.1.6",
-    "@types/jasmine": "2.8.4",
+    "@ionic/app-scripts": "3.2.1",
+    "@types/jasmine": "2.8.6",
     "@types/jasminewd2": "2.0.3",
     "@types/node": "8.5.8",
     "codecov": "3.0.0",
     "connect": "3.6.5",
-    "ionic-mocks": "1.2.1",
-    "jasmine-core": "2.8.0",
+    "ionic-mocks": "1.3.0",
+    "jasmine-core": "2.99.1",
     "jasmine-reporters": "2.3.0",
     "karma": "2.0.0",
     "karma-chrome-launcher": "2.2.0",
@@ -72,7 +72,7 @@
     "ts-node": "4.1.0",
     "tslint": "5.9.1",
     "tslint-eslint-rules": "4.1.1",
-    "typescript": "2.4.2"
+    "typescript": "~2.6.2"
   },
   "repository": {
     "type": "git",
@@ -83,7 +83,7 @@
   "cordova": {
     "platforms": [
       "android",
-      "browser",
+      "windows",
       "ios"
     ],
     "plugins": {

src/components/components.module.ts

@@ -5,12 +5,14 @@ import { IonicModule }                      from 'ionic-angular';
 import { ClickerButton }                    from './clickerButton/clickerButton';
 import { ClickerForm }                      from './clickerForm/clickerForm';
 import { LanguagePicker }                   from './languagePicker/languagePicker';
+import { TranslatePipeMock }                from '../pipes/translate.pipe.mock';
 
 @NgModule({
   declarations: [
     ClickerForm,
     ClickerButton,
     LanguagePicker,
+    TranslatePipeMock,
   ],
   imports: [
     FormsModule,
@@ -22,6 +24,7 @@ import { LanguagePicker }                   from './languagePicker/languagePicke
     ClickerButton,
     ClickerForm,
     LanguagePicker,
+    TranslatePipeMock,
   ],
   entryComponents: [],
   providers: [ ],