fix(uiSref): open new tab when a tag has target="_blank"

Author: Rafael Fernandez Serra

src/directives/uiSref.ts

@@ -1,7 +1,7 @@
 /** @ng2api @module directives */
 /** */
 import { UIRouter, UIRouterGlobals, extend, Obj, TransitionOptions, TargetState } from "@uirouter/core";
-import { Directive, Inject, Input, Optional, ElementRef, Renderer } from "@angular/core";
+import { Directive, Inject, Input, Optional, ElementRef, Renderer2 } from "@angular/core";
 import { UIView, ParentUIViewInject } from "./uiView";
 import { ReplaySubject } from "rxjs/ReplaySubject";
 import { Subscription } from "rxjs/Subscription";
@@ -12,10 +12,13 @@ import { Subscription } from "rxjs/Subscription";
  */
 @Directive({ selector: 'a[uiSref]' })
 export class AnchorUISref {
-  constructor(public _el: ElementRef, public _renderer: Renderer) { }
+  constructor(public _el: ElementRef, public _renderer: Renderer2) { }
+  openInNewTab() {
+    return this._el.nativeElement.target === '_blank';
+  }
   update(href: string) {
     if (href && href != '') {
-      this._renderer.setElementProperty(this._el.nativeElement, 'href', href);
+      this._renderer.setProperty(this._el.nativeElement, 'href', href);
     } else {
       this._el.nativeElement.removeAttribute('href');
     }
@@ -161,6 +164,10 @@ export class UISref {
 
   /** When triggered by a (click) event, this function transitions to the UISref's target state */
   go() {
+    if (this._anchorUISref && this._anchorUISref.openInNewTab()) {
+      return ;
+    }
+
     this._router.stateService.go(this.state, this.params, this.getOptions());
     return false;
   }

test/uiSref.spec.ts

@@ -1,37 +1,118 @@
-import { Component, NO_ERRORS_SCHEMA } from "@angular/core";
+import { Component, DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
 
 import { UIRouterModule } from '../src/uiRouterNgModule';
 import { UISref } from '../src/directives/uiSref';
+import { UIRouter } from '@uirouter/core';
+import { Subject } from 'rxjs/Subject';
 
 describe('uiSref', () => {
-  describe('empty links', () => {
-    @Component({
-      template: `
-        <a [uiSref]="null"></a>
-        <a [uiSref]="''"></a>
-      `
-    })
-    class TestComponent { }
-
-    let des: DebugElement[];
-    let comp: TestComponent;
-    let fixture: ComponentFixture<TestComponent>;
-
-    beforeEach(() => {
-      fixture = TestBed.configureTestingModule({
-        declarations: [ TestComponent ],
-        imports:      [ UIRouterModule ]
-      }).createComponent(TestComponent);
-      fixture.detectChanges();
-      des = fixture.debugElement.queryAll(By.directive(UISref));
+  @Component({
+    template: `
+      <a [uiSref]="linkA" [target]="targetA"></a>
+      <a [uiSref]="linkB"></a>
+    `
+  })
+  class TestComponent {
+    linkA: string;
+    targetA: string;
+    linkB: string;
+
+    constructor() {
+      this.linkA = null;
+      this.targetA = '';
+      this.linkB = '';
+    }
+  }
+
+  describe('when applied to a link tag', () => {
+    describe('when the uiSref is empty', () => {
+      let des: DebugElement[];
+      let fixture: ComponentFixture<TestComponent>;
+
+      beforeEach(() => {
+        fixture = TestBed.configureTestingModule({
+          declarations: [TestComponent],
+          imports: [UIRouterModule]
+        }).createComponent(TestComponent);
+        fixture.detectChanges();
+        des = fixture.debugElement.queryAll(By.directive(UISref));
+      });
+
+      it('should not bind "null" string to `href`', () => {
+        expect(des[0].nativeElement.hasAttribute('href')).toBeFalsy();
+        expect(des[1].nativeElement.hasAttribute('href')).toBeFalsy();
+      });
     });
 
-    it('should not bind "null" string to `href`', () => {
-      expect(des[0].nativeElement.hasAttribute('href')).toBeFalsy();
-      expect(des[1].nativeElement.hasAttribute('href')).toBeFalsy();
+    describe('when the uiSref is not empty', () => {
+      let des: DebugElement[];
+      let comp: TestComponent;
+      let uiRouterMock: UIRouter;
+      let fixture: ComponentFixture<TestComponent>;
+
+      beforeEach(async(() => {
+        uiRouterMock = {
+          globals: {
+            states$: new Subject()
+          },
+          stateService: jasmine.createSpyObj('stateService', ['go', 'target', 'href'])
+        } as any;
+        TestBed.configureTestingModule({
+          declarations: [TestComponent],
+          imports: [UIRouterModule]
+        }).overrideComponent(TestComponent, {
+          set: {
+            providers: [
+              { provide: UIRouter, useValue: uiRouterMock }
+            ]
+          }
+        }).compileComponents();
+      }));
+
+      beforeEach(() => {
+        fixture = TestBed.createComponent(TestComponent);
+
+        comp = fixture.componentInstance;
+        comp.linkA = '';
+        fixture.detectChanges();
+        des = fixture.debugElement.queryAll(By.directive(UISref));
+      });
+
+      describe('when target is _blank', () => {
+        beforeEach(() => {
+          comp.targetA = '_blank';
+          fixture.detectChanges();
+        });
+
+        describe('when clicked', () => {
+          beforeEach(() => {
+            des[0].triggerEventHandler('click', {});
+          });
+
+          it('should ignore the click event', () => {
+            expect(uiRouterMock.stateService.go).not.toHaveBeenCalled();
+          });
+        });
+      });
+
+      describe('when target is not _blank', () => {
+        beforeEach(() => {
+          comp.targetA = '';
+          fixture.detectChanges();
+        });
+
+        describe('when clicked', () => {
+          beforeEach(() => {
+            des[0].triggerEventHandler('click', {});
+          });
+
+          it('should navigate to the state', () => {
+            expect(uiRouterMock.stateService.go).toHaveBeenCalled();
+          });
+        });
+      });
     });
   });
 });