Replace Angular $location service.

app/state/spec/stateSvc.spec.js

@@ -1,12 +1,12 @@
 describe("stateSvc", () => {
-  let location;
+  let locationSvc;
   let stateSvc;
 
   beforeEach(module("composer"));
   beforeEach(
-    inject(($location, _stateSvc_) => {
+    inject((_stateSvc_, _navigationSvc_) => {
       stateSvc = _stateSvc_;
-      location = $location;
+      locationSvc = _navigationSvc_.locationSvc;
     })
   );
 
@@ -22,7 +22,7 @@ describe("stateSvc", () => {
     });
 
     it("should return the number of the current chapter (value: 2)", () => {
-      spyOn(location, "path").and.returnValue("/chapter/2");
+      spyOn(locationSvc, "path").and.returnValue("/chapter/2");
       expect(stateSvc.getChapter()).toBe(2);
     });
   });
@@ -33,7 +33,7 @@ describe("stateSvc", () => {
     });
 
     it("should return the number of the current chapter (value: 1)", () => {
-      spyOn(location, "path").and.returnValue("/chapter/2");
+      spyOn(locationSvc, "path").and.returnValue("/chapter/2");
       expect(stateSvc.getChapterIndex()).toBe(1);
     });
   });
@@ -102,7 +102,7 @@ describe("stateSvc", () => {
       const testConfig = { chapters: [{}, { test: "pass" }, {}] };
       stateSvc.setConfig(testConfig);
       expect(stateSvc.currentChapter).toBeNull();
-      spyOn(location, "path").and.returnValue("/chapter/2");
+      spyOn(locationSvc, "path").and.returnValue("/chapter/2");
       stateSvc.updateCurrentChapterConfig();
       expect(stateSvc.currentChapter.test).toBe("pass");
     });

app/state/stateSvc.js

@@ -1,8 +1,9 @@
 import PubSub from "pubsub-js";
 import MinimalConfig from "app/state/MinimalConfig";
 import headerSvc from "app/ui/headerSvc";
+import locationSvc from "app/ui/locationSvc";
 
-function stateSvc($http, $location, configSvc) {
+function stateSvc($http, configSvc) {
   const svc = {};
   svc.currentChapter = null;
   svc.previousChapter = null;
@@ -20,9 +21,11 @@ function stateSvc($http, $location, configSvc) {
   });
 
   svc.addNewChapter = () => {
-    const newChapter = configSvc.generateChapterConfig(svc.config.chapters.length + 1)
+    const newChapter = configSvc.generateChapterConfig(
+      svc.config.chapters.length + 1
+    );
     svc.config.chapters.push(newChapter);
-    PubSub.publish("chapterCreated", newChapter.index)
+    PubSub.publish("chapterCreated", newChapter.index);
   };
 
   svc.removeChapter = chapterId => {
@@ -241,7 +244,7 @@ function stateSvc($http, $location, configSvc) {
 
   svc.getChapter = () => {
     let chapter = 1;
-    const path = $location.path();
+    const path = locationSvc.path();
     if (path && path.indexOf("/chapter") === 0) {
       const matches = /\d+/.exec(path);
       if (matches !== null) {
@@ -322,7 +325,7 @@ function stateSvc($http, $location, configSvc) {
 
   svc.onChapterSort = () => {
     // Iterate through the chapters and update their indexes anytime they are sorted
-    for (let i = 0; i < svc.config.chapters.length; i += 1 ) {
+    for (let i = 0; i < svc.config.chapters.length; i += 1) {
       svc.config.chapters[i].index = i + 1;
     }
   };
@@ -396,11 +399,14 @@ function stateSvc($http, $location, configSvc) {
                     body: JSON.stringify(layer.styleConfig),
                     headers: {
                       "X-CSRFToken": window.mapstory.composer.config.csrfToken
-                    }});
+                    }
+                  });
                 }
                 return Promise.resolve(true);
               });
-              Promise.all(promises).then(() => svc.updateLocationUsingStoryId(data.storyID));
+              Promise.all(promises).then(() =>
+                svc.updateLocationUsingStoryId(data.storyID)
+              );
             }
             svc.config.removedChapters = [];
             svc.config.removedFrames = [];

app/ui/locationSvc.js

@@ -0,0 +1,14 @@
+export default {
+  /*
+   * `location.path` replaces the app's hashbang value if an arg is provided;
+   *  otherwise it returns the current value
+   */
+
+  path: arg => {
+    if (arg !== undefined && arg !== null) {
+      window.location.hash = `#!${arg}`;
+      return window.location.hash;
+    }
+    return window.location.hash.replace("#!", "");
+  }
+};

app/ui/navigationSvc.js

@@ -1,12 +1,21 @@
 import PubSub from "pubsub-js";
+import locationSvc from "./locationSvc";
 
 function navigationSvc($location, $log, stateSvc, appConfig) {
-  const svc = {};
+  // locationSvc is being hitched to navigationSvc temporarily in order
+  // for Karma tests to have acces.
+  // @TODO: remove locationSvc after karma tests have been configured to
+  // import ES6 modules.
+
+  const svc = {
+    locationSvc
+  };
 
   /**
    * Navigates to next chapter or loops around.
    * NOTE: Chapter number starts at 1.
    */
+
   svc.nextChapter = () => {
     const thisChapter = Number(stateSvc.getChapter());
     const nextChapter = thisChapter + 1;
@@ -18,7 +27,8 @@ function navigationSvc($location, $log, stateSvc, appConfig) {
         currentChapterIndex: thisChapter - 1,
         nextChapterIndex: nextChapter - 1
       };
-      $location.path(appConfig.routes.chapter + nextChapter);
+      // $location.path(appConfig.routes.chapter + nextChapter);
+      locationSvc.path(appConfig.routes.chapter + nextChapter);
       PubSub.publish("changingChapter", data);
     } else {
       // Go from last to first.
@@ -27,7 +37,7 @@ function navigationSvc($location, $log, stateSvc, appConfig) {
         currentChapterIndex: thisChapter - 1,
         nextChapterIndex: 0
       };
-      $location.path("");
+      locationSvc.path("");
       PubSub.publish("changingChapter", data);
     }
   };
@@ -49,7 +59,7 @@ function navigationSvc($location, $log, stateSvc, appConfig) {
       };
 
       PubSub.publish("changingChapter", data);
-      $location.path(appConfig.routes.chapter + previousChapter);
+      locationSvc.path(appConfig.routes.chapter + previousChapter);
     } else {
       // Go from first to last.
       $log.info("Going to Chapter ", stateSvc.getChapterCount());
@@ -77,9 +87,9 @@ function navigationSvc($location, $log, stateSvc, appConfig) {
     PubSub.publish("changingChapter", data);
     if (number > 0) {
       $log.info("Going to the Chapter ", number);
-      $location.path(appConfig.routes.chapter + number);
+      locationSvc.path(appConfig.routes.chapter + number);
     } else {
-      $location.path("");
+      locationSvc.path("");
     }
   };
 

app/ui/spec/navigationSvc.spec.js

@@ -1,37 +1,37 @@
 describe("navigationSvc", () => {
   let config;
   let navigationSvc;
-  let location;
+  let locationSvc;
   let stateSvc;
 
   beforeEach(module("composer"));
   beforeEach(
     inject(($location, _navigationSvc_, _stateSvc_, _appConfig_) => {
       config = _appConfig_;
       navigationSvc = _navigationSvc_;
+      locationSvc = navigationSvc.locationSvc;
       stateSvc = _stateSvc_;
-      location = $location;
     })
   );
-  beforeEach(()=> {
+  beforeEach(() => {
     window.PubSub.clearAllSubscriptions();
     stateSvc.setConfig({ chapters: [] });
   });
 
   describe("nextChapter", () => {
     beforeEach(
       inject(($controller, $compile) => {
-        spyOn(location, "path");
+        spyOn(locationSvc, "path");
       })
     );
 
     it("should update the location path to the next chapter if it exists", () => {
       stateSvc.setConfig({ chapters: [{}, {}] });
       navigationSvc.nextChapter();
-      expect(location.path).toHaveBeenCalledWith(config.routes.chapter + 2);
+      expect(locationSvc.path).toHaveBeenCalledWith(config.routes.chapter + 2);
     });
 
-    it("broadcast a chapter change when next chapter is selected", (done) => {
+    it("broadcast a chapter change when next chapter is selected", done => {
       window.PubSub.subscribe("changingChapter", (msg, data) => {
         expect(data.currentChapterIndex).toBe(0);
         expect(data.nextChapterIndex).toBe(1);
@@ -45,7 +45,7 @@ describe("navigationSvc", () => {
     it("should update the location path to the first chapter if there is no next chapter ", () => {
       stateSvc.setConfig({ chapters: [{}] });
       navigationSvc.nextChapter();
-      expect(location.path).toHaveBeenCalledWith("");
+      expect(locationSvc.path).toHaveBeenCalledWith("");
     });
   });
 
@@ -54,14 +54,14 @@ describe("navigationSvc", () => {
 
     it("should update the location path to the previous chapter if it exists", () => {
       stateSvc.setConfig({ chapters: [{}, {}, {}] });
-      spyOn(location, "path").and.returnValue("/chapter/3");
+      spyOn(locationSvc, "path").and.returnValue("/chapter/3");
       navigationSvc.previousChapter();
-      expect(location.path).toHaveBeenCalledWith(config.routes.chapter + 2);
+      expect(locationSvc.path).toHaveBeenCalledWith(config.routes.chapter + 2);
     });
 
-    it("broadcast a chapter change when previous chapter is selected", (done) => {
+    it("broadcast a chapter change when previous chapter is selected", done => {
       stateSvc.setConfig({ chapters: [{}, {}, {}] });
-      spyOn(location, "path").and.returnValue("/chapter/3");
+      spyOn(locationSvc, "path").and.returnValue("/chapter/3");
       window.PubSub.subscribe("changingChapter", (msg, data) => {
         expect(data.currentChapterIndex).toBe(2);
         expect(data.nextChapterIndex).toBe(1);
@@ -73,10 +73,10 @@ describe("navigationSvc", () => {
 
     it("should update the location path to the first chapter if there is no previous chapter", done => {
       stateSvc.setConfig({ chapters: [{}] });
-      spyOn(location, "path");
+      spyOn(locationSvc, "path");
       navigationSvc.previousChapter();
       setTimeout(() => {
-        expect(location.path).toHaveBeenCalledWith("/chapter/1");
+        expect(locationSvc.path).toHaveBeenCalledWith("/chapter/1");
         done();
       }, 300);
     });
@@ -97,14 +97,14 @@ describe("navigationSvc", () => {
 
     it("should update the location path to the new chapter if it exists", () => {
       stateSvc.setConfig({ chapters: [{}, {}, {}] });
-      spyOn(location, "path").and.returnValue("/chapter/3");
+      spyOn(locationSvc, "path").and.returnValue("/chapter/3");
       navigationSvc.goToChapter(2);
-      expect(location.path).toHaveBeenCalledWith(config.routes.chapter + 2);
+      expect(locationSvc.path).toHaveBeenCalledWith(config.routes.chapter + 2);
     });
 
-    it("should broadcast the new chapter if it exists", (done) => {
+    it("should broadcast the new chapter if it exists", done => {
       stateSvc.setConfig({ chapters: [{}, {}, {}] });
-      spyOn(location, "path").and.returnValue("/chapter/3");
+      spyOn(locationSvc, "path").and.returnValue("/chapter/3");
       window.PubSub.subscribe("changingChapter", (msg, data) => {
         expect(data.currentChapterIndex).toBe(2);
         expect(data.nextChapterIndex).toBe(1);
@@ -113,6 +113,5 @@ describe("navigationSvc", () => {
       });
       navigationSvc.goToChapter(2);
     });
-
   });
 });

karma.config.js

@@ -42,20 +42,11 @@ module.exports = config => {
     },
     babelPreprocessor: {
       options: {
-        presets: ["es2015"]
+        presets: ["react", "es2015", "stage-0"]
       }
     },
     webpackMiddleware: {
       noInfo: true
-    },
-    plugins: [
-      "karma-babel-preprocessor",
-      "karma-ng-html2js-preprocessor",
-      "karma-mocha-reporter",
-      "karma-chrome-launcher",
-      "karma-webpack",
-      "karma-jasmine",
-      "karma-phantomjs-launcher"
-    ]
+    }
   });
 };

package.json

@@ -45,6 +45,7 @@
     "karma-phantomjs-launcher": "1.0.4",
     "karma-spec-reporter": "0.0.32",
     "karma-webpack": "2.0.9",
+    "karma-webpack": "^3.0.5",
     "less": "2.7.3",
     "less-loader": "4.0.5",
     "prettier": "1.10.2",