test(vanilla): Mock browser location for browserHistorySpec so URL in karma does not change

fix(vanilla): vanilla locations: do not parse "empty string" query key parameter

Author: christopherthielen

src/vanilla/utils.ts

@@ -5,6 +5,7 @@
 import {isArray} from "../common/index";
 import { LocationServices, LocationConfig, services } from "../common/coreservices";
 import { UIRouter } from "../router";
+import { identity } from "../common/common";
 
 const beforeAfterSubstr = (char: string) => (str: string): string[] => {
   if (!str) return ["", ""];
@@ -30,7 +31,7 @@ export const keyValsToObjectR = (accum, [key, val]) => {
 };
 
 export const getParams = (queryString: string): any =>
-  queryString.split("&").map(splitEqual).reduce(keyValsToObjectR, {});
+  queryString.split("&").filter(identity).map(splitEqual).reduce(keyValsToObjectR, {});
 
 export function locationPluginFactory(
     name: string,

test/_testUtils.ts

@@ -6,8 +6,8 @@ let stateProps = ["resolve", "resolvePolicy", "data", "template", "templateUrl",
 export function tree2Array(tree, inheritName) {
 
   function processState(parent, state, name) {
-    var substates = omit.apply(null, [state].concat(stateProps));
-    var thisState = pick.apply(null, [state].concat(stateProps));
+    let substates = omit.apply(null, [state].concat(stateProps));
+    let thisState = pick.apply(null, [state].concat(stateProps));
     thisState.name = name;
     if (!inheritName) thisState.parent = parent;
 
@@ -27,19 +27,19 @@ export function tree2Array(tree, inheritName) {
 }
 
 export function PromiseResult(promise?) {
-  var self = this, _promise: Promise<any>;
-  var resolve, reject, complete;
+  let self = this, _promise: Promise<any>;
+  let resolve, reject, complete;
 
   this.setPromise = function(promise) {
     if (_promise) {
       throw new Error("Already have with'd a promise.");
     }
 
-    var onfulfilled = (data) =>
+    let onfulfilled = (data) =>
         resolve = data || true;
-    var onrejected = (err) =>
+    let onrejected = (err) =>
         reject = err || true;
-    var done = () =>
+    let done = () =>
         complete = true;
 
     _promise = promise;

test/vanilla.browserHistorySpec.ts

@@ -1,23 +1,43 @@
-
-import {services, UrlMatcher} from '../src/index';
+import { UrlMatcher } from "../src/index";
 import { UIRouter } from "../src/router";
-import * as vanilla from "../src/vanilla"
+import { UrlService } from "../src/url/urlService";
+import * as vanilla from "../src/vanilla";
 
 describe('browserHistory implementation', () => {
 
   let router: UIRouter;
-  let locationProvider;
+  let urlService: UrlService;
   let makeMatcher;
 
-  // Replace the `history` reference because PhantomJS does not support spying on it.
-  function mockHistoryObject() {
-    let plugin: any = router.getPlugin('vanilla.pushStateLocation');
+  let mockHistory, mockLocation;
+
+  // Replace the history and location
+  function mockPushState(_router) {
+    let plugin: any = _router.getPlugin('vanilla.pushStateLocation');
+
+    mockHistory = {
+      replaceState: (a, b, url) => mockLocation.href = url,
+      pushState: (a, b, url) => mockLocation.href = url
+    };
 
-    plugin.service._history = {
-      replaceState: () => null,
-      pushState: () => null
+    mockLocation = {
+      _href: "/",
+      pathname: "/",
+      search: "",
+      get href() {
+        return this._href
+      },
+      set href(val) {
+        this._href = val;
+        var [pathname, search] = val.split("?");
+        this.pathname = pathname;
+        this.search = search ? "?" + search : "";
+      }
     };
 
+    plugin.service._history = mockHistory;
+    plugin.service._location = mockLocation;
+
     return plugin.service;
   }
 
@@ -26,7 +46,7 @@ describe('browserHistory implementation', () => {
     router.plugin(vanilla.servicesPlugin);
     router.plugin(vanilla.pushStateLocationPlugin);
     router.stateRegistry.stateQueue.autoFlush(router.stateService);
-    locationProvider = router.urlService;
+    urlService = router.urlService;
     makeMatcher = (url, config?) => {
       return new UrlMatcher(url, router.urlMatcherFactory.paramTypes, config)
     };
@@ -38,34 +58,41 @@ describe('browserHistory implementation', () => {
   });
 
   it('uses history.pushState when setting a url', () => {
-    let service = mockHistoryObject();
+    let service = mockPushState(router);
     expect(router.urlService.config.html5Mode()).toBe(true);
     let stub = spyOn(service._history, 'pushState');
     router.urlRouter.push(makeMatcher('/hello/:name'), { name: 'world' }, {});
     expect(stub.calls.first().args[2]).toBe('/hello/world');
   });
 
   it('uses history.replaceState when setting a url with replace', () => {
-    let service = mockHistoryObject();
+    let service = mockPushState(router);
     let stub = spyOn(service._history, 'replaceState');
     router.urlRouter.push(makeMatcher('/hello/:name'), { name: 'world' }, { replace: true });
     expect(stub.calls.first().args[2]).toBe('/hello/world');
   });
 
-  it('returns the correct url query', () => {
+  it('returns the correct url query', async(done) => {
+    let service = mockPushState(router);
     expect(router.urlService.config.html5Mode()).toBe(true);
-    return router.stateService.go('path', {urlParam: 'bar'}).then(() => {
-      expect(window.location.toString().includes('/path/bar')).toBe(true);
-      expect(window.location.toString().includes('/#/path/bar')).toBe(false);
-      expect(locationProvider.path()).toBe('/path/bar');
-      expect(locationProvider.search()).toEqual({'':''});
-      return router.stateService.go('path', {urlParam: 'bar', queryParam: 'query'});
-    }).then(() => {
-      expect(window.location.toString().includes('/path/bar?queryParam=query')).toBe(true);
-      expect(window.location.toString().includes('/#/path/bar?queryParam=query')).toBe(false);
-      expect(locationProvider.path()).toBe('/path/bar');
-      expect(locationProvider.search()).toEqual({queryParam:'query'});
-    });
+
+    await router.stateService.go('path', { urlParam: 'bar' });
+
+    expect(mockLocation.href.includes('/path/bar')).toBe(true);
+    expect(mockLocation.href.includes('#')).toBe(false);
+
+    expect(urlService.path()).toBe('/path/bar');
+    expect(urlService.search()).toEqual({});
+
+    await router.stateService.go('path', { urlParam: 'bar', queryParam: 'query' });
+
+    expect(mockLocation.href.includes('/path/bar?queryParam=query')).toBe(true);
+    expect(mockLocation.href.includes('#')).toBe(false);
+
+    expect(urlService.path()).toBe('/path/bar');
+    expect(urlService.search()).toEqual({ queryParam: 'query' });
+
+    done();
   });
 
 });

test/vanilla.hashHistorySpec.ts

@@ -1,5 +1,5 @@
-import { UIRouter, services, UrlMatcher} from '../src/index';
-import * as vanilla from '../src/vanilla';
+import { UIRouter, UrlMatcher } from "../src/index";
+import * as vanilla from "../src/vanilla";
 
 describe('hashHistory implementation', () => {
 
@@ -30,17 +30,20 @@ describe('hashHistory implementation', () => {
     expect(router.urlService.config.html5Mode()).toBe(false);
   });
 
-  it('returns the correct url query', (done) => {
-    return $state.go('path', {urlParam: 'bar'}).then(() => {
-      expect(window.location.toString().includes('#/path/bar')).toBe(true);
-      expect(locationProvider.path()).toBe('/path/bar');
-      expect(locationProvider.search()).toEqual({'':''});
-      return $state.go('path', {urlParam: 'bar', queryParam: 'query'});
-    }).then(() => {
-      expect(window.location.toString().includes('#/path/bar?queryParam=query')).toBe(true);
-      expect(locationProvider.path()).toBe('/path/bar');
-      expect(locationProvider.search()).toEqual({queryParam:'query'});
-    }).then(done);
+  it('returns the correct url query', async(done) => {
+    await $state.go('path', { urlParam: 'bar' });
+
+    expect(window.location.toString().includes('#/path/bar')).toBe(true);
+    expect(locationProvider.path()).toBe('/path/bar');
+    expect(locationProvider.search()).toEqual({});
+
+    await $state.go('path', { urlParam: 'bar', queryParam: 'query' });
+
+    expect(window.location.toString().includes('#/path/bar?queryParam=query')).toBe(true);
+    expect(locationProvider.path()).toBe('/path/bar');
+    expect(locationProvider.search()).toEqual({ queryParam: 'query' });
+
+    done();
   });
 
 });