fix(pushStateLocation): When url is "" or "/", use baseHref for pushState

Author: christopherthielen

src/vanilla/pushStateLocationService.ts

@@ -57,7 +57,7 @@ export class PushStateLocationService extends BaseLocationServices {
   protected _set(state: any, title: string, url: string, replace: boolean) {
     const basePrefix = this._getBasePrefix();
     const slash = url && url[0] !== '/' ? '/' : '';
-    const fullUrl = url === '' ? this._config.baseHref() : basePrefix + slash + url;
+    const fullUrl = (url === '' || url === '/') ? this._config.baseHref() : basePrefix + slash + url;
 
     if (replace) {
       this._history.replaceState(state, title, fullUrl);

test/vanilla.pushStateLocationServiceSpec.ts

@@ -40,15 +40,17 @@ describe('pushStateLocationService', () => {
     expect($url.search()).toEqual({});
   });
 
-  it('sets and returns an empty path', () => {
+  it('returns a slash when an empty path is set', () => {
+    const base = $url.config.baseHref();
     $url.url('');
-    expect(window.location.pathname).toBe('');
-    expect($url.path()).toBe('');
+    expect(window.location.pathname).toBe(base);
+    expect($url.path()).toBe('/');
   });
 
   it('sets and returns a path with a single slash', () => {
+    const base = $url.config.baseHref();
     $url.url('/');
-    expect(window.location.pathname).toBe('/');
+    expect(window.location.pathname).toBe(base);
     expect($url.path()).toBe('/');
   });
 
@@ -60,7 +62,7 @@ describe('pushStateLocationService', () => {
     expect($url.search()).toEqual({ queryParam: 'query' });
   });
 
-  fdescribe('with base tag', () => {
+  describe('with base tag', () => {
     let baseTag: HTMLBaseElement;
     const applyBaseTag = (href: string) => {
       baseTag = document.createElement('base');
@@ -71,55 +73,57 @@ describe('pushStateLocationService', () => {
     afterEach(() => baseTag.parentElement.removeChild(baseTag));
 
     describe('/base/', () => {
-      beforeEach(() => applyBaseTag("/base/"));
+      const base = '/base/';
+      beforeEach(() => applyBaseTag(base));
 
       it('reports html5Mode to be true', () => {
         expect(router.urlService.config.html5Mode()).toBe(true);
       });
 
       it('handles bar correctly', () => {
         $url.url('bar');
-        expect(window.location.pathname).toBe('/base/bar');
+        expect(window.location.pathname).toBe(`${base}bar`);
         expect($url.path()).toBe('/bar');
       });
 
       it('handles /bar correctly', () => {
         $url.url('/bar');
-        expect(window.location.pathname).toBe('/base/bar');
+        expect(window.location.pathname).toBe(`${base}bar`);
         expect($url.path()).toBe('/bar');
       });
 
       it('handles /path/bar correctly', () => {
         $url.url('/path/bar');
-        expect(window.location.pathname).toBe('/base/path/bar');
+        expect(window.location.pathname).toBe(`${base}path/bar`);
         expect($url.path()).toBe('/path/bar');
       });
 
       it('handles / correctly', () => {
         $url.url('/');
-        expect(window.location.pathname).toBe('/base/');
+        expect(window.location.pathname).toBe(base);
         expect($url.path()).toBe('/');
       });
 
       it('handles "" correctly', () => {
         $url.url('foobar');
-        expect(window.location.pathname).toBe('/base/foobar');
+        expect(window.location.pathname).toBe(`${base}foobar`);
         $url.url('');
-        expect(window.location.pathname).toBe('/base/');
+        expect(window.location.pathname).toBe(base);
         expect($url.path()).toBe('/');
       });
 
       it('handles ?queryParam=query correctly', () => {
         $url.url('/path/bar?queryParam=query');
-        expect(window.location.pathname).toBe('/base/path/bar');
+        expect(window.location.pathname).toBe(`${base}path/bar`);
         expect(window.location.search).toBe('?queryParam=query');
         expect($url.path()).toBe('/path/bar');
         expect($url.search()).toEqual({ queryParam: 'query' });
       });
     });
 
     describe('/debug.html', () => {
-      beforeEach(() => applyBaseTag("/debug.html"));
+      const base = "/debug.html";
+      beforeEach(() => applyBaseTag(base));
 
       it('handles bar correctly', () => {
         $url.url('bar');
@@ -141,15 +145,15 @@ describe('pushStateLocationService', () => {
 
       it('handles / correctly', () => {
         $url.url('/');
-        expect(window.location.pathname).toBe('/debug.html');
+        expect(window.location.pathname).toBe(base);
         expect($url.path()).toBe('/');
       });
 
       it('handles "" correctly', () => {
         $url.url('foobar');
         expect(window.location.pathname).toBe('/foobar');
         $url.url('');
-        expect(window.location.pathname).toBe('/debug.html');
+        expect(window.location.pathname).toBe(base);
         expect($url.path()).toBe('/');
       });
 
@@ -163,7 +167,8 @@ describe('pushStateLocationService', () => {
     });
 
     describe(origin + '/debug.html', () => {
-      beforeEach(() => applyBaseTag(origin + '/debug.html'));
+      const base = '/debug.html';
+      beforeEach(() => applyBaseTag(origin + base));
 
       it('handles bar correctly', () => {
         $url.url('bar');
@@ -185,15 +190,15 @@ describe('pushStateLocationService', () => {
 
       it('handles / correctly', () => {
         $url.url('/');
-        expect(window.location.pathname).toBe('/debug.html');
+        expect(window.location.pathname).toBe(base);
         expect($url.path()).toBe('/');
       });
 
       it('handles "" correctly', () => {
         $url.url('foobar');
         expect(window.location.pathname).toBe('/foobar');
         $url.url('');
-        expect(window.location.pathname).toBe('/debug.html');
+        expect(window.location.pathname).toBe(base);
         expect($url.path()).toBe('/');
       });
 
@@ -207,7 +212,8 @@ describe('pushStateLocationService', () => {
     });
 
     describe(origin + '/base/debug.html', () => {
-      beforeEach(() => applyBaseTag(origin + '/base/debug.html'));
+      const base = '/base/debug.html';
+      beforeEach(() => applyBaseTag(origin + base));
 
       it('handles bar correctly', () => {
         $url.url('bar');
@@ -229,15 +235,15 @@ describe('pushStateLocationService', () => {
 
       it('handles / correctly', () => {
         $url.url('/');
-        expect(window.location.pathname).toBe('/base/');
+        expect(window.location.pathname).toBe(base);
         expect($url.path()).toBe('/');
       });
 
       it('handles "" correctly', () => {
         $url.url('foobar');
         expect(window.location.pathname).toBe('/base/foobar');
         $url.url('');
-        expect(window.location.pathname).toBe('/base/debug.html');
+        expect(window.location.pathname).toBe(base);
         expect($url.path()).toBe('/');
       });