fix(uiSref): Render empty 'href' for states that have no urls

Fixes #721
ui-router · Jul 6, 2020 · 5020c79 · 5020c79
1 parent 82225dd
commit 5020c79
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/src/directives/uiSref.ts b/src/directives/uiSref.ts
@@ -1,4 +1,4 @@
-import { UIRouter, extend, Obj, TransitionOptions, TargetState, isNumber } from '@uirouter/core';
+import { UIRouter, extend, Obj, TransitionOptions, TargetState, isNumber, isNullOrUndefined } from '@uirouter/core';
 import {
   Directive,
   Inject,
@@ -20,11 +20,13 @@ import { ReplaySubject, Subscription } from 'rxjs';
 @Directive({ selector: 'a[uiSref]' })
 export class AnchorUISref {
   constructor(public _el: ElementRef, public _renderer: Renderer2) {}
+
   openInNewTab() {
     return this._el.nativeElement.target === '_blank';
   }
+
   update(href: string) {
-    if (href && href !== '') {
+    if (!isNullOrUndefined(href)) {
       this._renderer.setProperty(this._el.nativeElement, 'href', href);
     } else {
       this._renderer.removeAttribute(this._el.nativeElement, 'href');
@@ -168,8 +170,12 @@ export class UISref implements OnChanges {
     }
 
     if (this._anchorUISref) {
-      const href = $state.href(this.state, this.params, this.getOptions());
-      this._anchorUISref.update(href);
+      if (!this.state) {
+        this._anchorUISref.update(null);
+      } else {
+        const href = $state.href(this.state, this.params, this.getOptions()) || '';
+        this._anchorUISref.update(href);
+      }
     }
   }
 

diff --git a/test/uiSref/uiSref.spec.ts b/test/uiSref/uiSref.spec.ts
@@ -56,7 +56,13 @@ describe('uiSref', () => {
   };
 
   // Extract the logical portion of the URL after the hash
-  const urlOfElement = (srefElement: DebugElement) => srefElement.nativeElement.href.replace(/^[^#]*#/, '');
+  const urlOfElement = (srefElement: DebugElement) => {
+    let href = srefElement.nativeElement.href;
+    if (typeof location === 'object' && href.startsWith(location.href)) {
+      href = href.substr(location.href.length);
+    }
+    return href.replace(/^[^#]*#/, '');
+  };
 
   it('renders an href for a state with an url', () => {
     const { fixture, srefElements, router } = setup();
@@ -67,14 +73,14 @@ describe('uiSref', () => {
     expect(urlOfElement(srefElements[0])).toBe('/myurl');
   });
 
-  // it('renders an empty href for a url-less state', () => {
-  //   const { fixture, srefElements, router } = setup();
-  //   router.stateRegistry.register({ name: 'urlless' });
-  //   fixture.componentInstance.linkA = 'urlless';
-  //   fixture.detectChanges();
-  //   expect(srefElements[0].nativeElement.hasAttribute('href')).toBeTruthy();
-  //   expect(urlOfElement(srefElements[0])).toBe('');
-  // });
+  it('renders an empty href for a url-less state', () => {
+    const { fixture, srefElements, router } = setup();
+    router.stateRegistry.register({ name: 'urlless' });
+    fixture.componentInstance.linkA = 'urlless';
+    fixture.detectChanges();
+    expect(srefElements[0].nativeElement.hasAttribute('href')).toBeTruthy();
+    expect(urlOfElement(srefElements[0])).toBe('');
+  });
 
   it('renders no href when the sref state is empty', () => {
     const { fixture, srefElements } = setup();