enabled karma tests to load the tagit-module before tests.

README.md

@@ -15,10 +15,13 @@ Prerequisites:
 1. Run `npm install`
 1. Run `npm start` to serve up the prototype for live development. To configure what browser is started please see the `npm start` command found in the package.json file.  
 
-`npm test` will run unit tests.
-
 Please note: A [workaround for CORS](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-app-launcher-info-dialog) is needed for allowing the live development version to talk to the server.
 
+## Testing
+
+1. Run `npm run webpack:watch` in one terminal window to activate running code compilation.
+2. Run `npm run test` in another terminal window to start Karma tests. 
+
 ## Deployment
 
 Steps to deploy an update to the Chrome extension.

karma.conf.js

@@ -15,6 +15,8 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
+      'karma.pre-test.js',
+      'dist/app.js',
       'src/**/*.spec.ts'
     ],
 
@@ -30,6 +32,12 @@ module.exports = function(config) {
       "**/*.ts": ["karma-typescript"],
     },
 
+    karmaTypescriptConfig: {
+      bundlerOptions: {
+          transforms: [require("karma-typescript-es6-transform")()]
+      },
+      tsconfig: "./tsconfig.json"         
+    },
 
     // test results reporter to use
     // possible values: 'dots', 'progress'

karma.pre-test.js

@@ -0,0 +1,3 @@
+// put a dev flag in before code 
+// and test code starts running
+window.karmaTestMode = true

package.json

@@ -10,6 +10,7 @@
     "start": "browser-sync start --no-notify -b chromium --startPath test/ --server --files 'src/**/*'",
     "package": "rm dist.zip || true && zip -r dist.zip dist",
     "webpack": "webpack",
+    "webpack:watch": "webpack --watch",
     "karma": "karma"
   },
   "repository": {
@@ -53,7 +54,11 @@
     "jasmine-core": "^2.6.2",
     "karma": "^1.7.0",
     "karma-chrome-launcher": "^2.1.1",
+    "karma-es6-shim": "^1.0.0",
     "karma-jasmine": "^1.1.0",
-    "karma-typescript": "^3.0.3"
+    "karma-requirejs": "^1.1.0",
+    "karma-typescript": "^3.0.3",
+    "karma-typescript-es6-transform": "^1.0.1",
+    "requirejs": "^2.3.3"
   }
 }

src/app/globalAugments.d.ts

@@ -4,6 +4,7 @@ export {};
 declare global {
     interface Window {
         tagitTestMode: boolean;
+        karmaTestMode: boolean;
     }
 
     interface RangyStatic {

src/app/main.ts

@@ -17,21 +17,24 @@ import 'ngstorage';
 
 console.log('Finished importing');
 
-if (!window.tagitTestMode) {
+if (window.tagitTestMode) {
-  preparePage(function () {
-    loadAngular()
-    chrome.runtime.sendMessage({command: 'injectCSS'})
-  });
-}
-else {
   /**
    * Cannot load too fast when served locally. The iframes won't be fully
    * loaded when Angular tries to bootstrap itself.
    */
   setTimeout((loadAngular), 1000)
 }
+else if (window.karmaTestMode) {
+  loadAngular(false)
+}
+else {
+  preparePage(function () {
+    loadAngular()
+    chrome.runtime.sendMessage({command: 'injectCSS'})
+  });
+}
 
-function loadAngular() {
+function loadAngular(bootstrap?: boolean) {
   console.log('Start loading angular')
   angular.module('tagit', ['ngStorage'])
     .service('SettingsService', SettingsService)
@@ -42,12 +45,16 @@ function loadAngular() {
     .controller('SettingsCtrl', SettingsCtrl)
     .controller('MenuCtrl', MenuCtrl)
 
-  angular.bootstrap(
+  if (bootstrap) {
+    angular.bootstrap(
     (<HTMLIFrameElement>document.getElementById("tagit-iframe"))
     .contentDocument.getElementById('tagit-menu'),
     ['tagit']);
 
-  setupChromeListener()
+    setupChromeListener()  
+  } else {
+    console.log('skipped bootstrapping')
+  }
 
   console.log('TagIt menu loaded');
 }

tsconfig.json

@@ -3,6 +3,7 @@
     "target": "es5",
     "noImplicitAny": false,
     "module": "commonjs",
-    "outDir": "tmp-js-build/"
+    "outDir": "tmp-js-build/",
+    "inlineSourceMap": true
   }
 }

webpack.config.js

@@ -6,6 +6,7 @@ module.exports = {
     filename: 'app.js',
     path: path.resolve(__dirname, 'dist')
   },
+  devtool: 'inline-source-map',
   module: {
     rules: [
       {