Merge branch 'gcca-emit-stateparams'

Author: christopherthielen

src/directives/uiSref.ts

@@ -1,7 +1,7 @@
 /** @ng2api @module directives */
 /** */
 import { UIRouter, extend, Obj, TransitionOptions, TargetState } from "@uirouter/core";
-import { Directive, Inject, Input, Optional, ElementRef, Renderer2 } from "@angular/core";
+import { Directive, Inject, Input, Optional, ElementRef, Renderer2, OnChanges, SimpleChanges } from "@angular/core";
 import { UIView, ParentUIViewInject } from "./uiView";
 import { ReplaySubject } from "rxjs/ReplaySubject";
 import { Subscription } from "rxjs/Subscription";
@@ -70,7 +70,8 @@ export class AnchorUISref {
   selector: '[uiSref]',
   host: { '(click)': 'go()' }
 })
-export class UISref {
+export class UISref implements OnChanges {
+
   /**
    * `@Input('uiSref')` The name of the state to link to
    *
@@ -134,6 +135,10 @@ export class UISref {
     this.update();
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    this.update();
+  }
+
   ngOnDestroy() {
     this._emit = false;
     this._statesSub.unsubscribe();

src/directives/uiSrefStatus.ts

@@ -3,7 +3,7 @@
 import { Directive, Output, EventEmitter, ContentChildren, QueryList } from '@angular/core';
 import { UISref } from './uiSref';
 import {
-  PathNode, Transition, TargetState, StateObject, anyTrueR, tail, unnestR, Predicate, UIRouterGlobals, Param, PathUtils
+  PathNode, Transition, TargetState, StateObject, anyTrueR, tail, unnestR, Predicate, UIRouterGlobals, Param, PathUtils, StateOrName
 } from '@uirouter/core';
 
 import { Subscription } from 'rxjs/Subscription';
@@ -32,14 +32,17 @@ export interface SrefStatus {
   entering: boolean;
   /** A transition is exiting the sref's target state */
   exiting: boolean;
+  /** The enclosed sref(s) target state(s) */
+  targetStates: TargetState[];
 }
 
 /** @internalapi */
 const inactiveStatus: SrefStatus = {
   active: false,
   exact: false,
   entering: false,
-  exiting: false
+  exiting: false,
+  targetStates: [],
 };
 
 /**
@@ -117,16 +120,18 @@ function getSrefStatus(event: TransEvt, srefTarget: TargetState): SrefStatus {
     exact: isExact(),
     entering: isStartEvent ? isEntering() : false,
     exiting: isStartEvent ? isExiting() : false,
+    targetStates: [srefTarget],
   } as SrefStatus;
 }
 
 /** @internalapi */
-function mergeSrefStatus(left: SrefStatus, right: SrefStatus) {
+function mergeSrefStatus(left: SrefStatus, right: SrefStatus): SrefStatus {
   return {
-    active:   left.active   || right.active,
-    exact:    left.exact    || right.exact,
+    active: left.active || right.active,
+    exact: left.exact || right.exact,
     entering: left.entering || right.entering,
-    exiting:  left.exiting  || right.exiting,
+    exiting: left.exiting || right.exiting,
+    targetStates: left.targetStates.concat(right.targetStates),
   };
 }
 
@@ -152,7 +157,7 @@ function mergeSrefStatus(left: SrefStatus, right: SrefStatus) {
  * ```
  *
  * The `uiSrefStatus` event is emitted whenever an enclosed `uiSref`'s status changes.
- * The event emitted is of type [[SrefStatus]], and has boolean values for `active`, `exact`, `entering`, and `exiting`.
+ * The event emitted is of type [[SrefStatus]], and has boolean values for `active`, `exact`, `entering`, and `exiting`; also has a [[StateOrName]] `identifier`value.
  *
  * The values from this event can be captured and stored on a component (then applied, e.g., using ngClass).
  *

test/uiSref/uiSref.spec.ts

@@ -1,26 +1,41 @@
-import { Component, DebugElement } from '@angular/core';
+import { Component, DebugElement, ViewChildren, QueryList } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { UIRouterModule } from '../../src/uiRouterNgModule';
 import { UISref } from '../../src/directives/uiSref';
-import { UIRouter } from '@uirouter/core';
+import { UIRouter, TargetState, TransitionOptions } from '@uirouter/core';
 import { Subject } from 'rxjs/Subject';
+import { Subscription } from "rxjs/Subscription";
 
 describe('uiSref', () => {
   @Component({
     template: `
-      <a [uiSref]="linkA" [target]="targetA"></a>
+      <a [uiSref]="linkA" [target]="targetA" [uiParams]="linkAParams" [uiOptions]="linkAOptions"></a>
       <a [uiSref]="linkB"></a>
     `
   })
   class TestComponent {
     linkA: string;
+    linkAParams: any;
+    linkAOptions: TransitionOptions;
     targetA: string;
     linkB: string;
 
+    @ViewChildren(UISref) srefs: QueryList<UISref>;
+
+    get linkASref() {
+      return this.srefs.first;
+    }
+
+    get linkBSref() {
+      return this.srefs.toArray()[1];
+    }
+
     constructor() {
       this.linkA = null;
+      this.linkAParams = null;
+      this.linkAOptions = null;
       this.targetA = '';
       this.linkB = '';
     }
@@ -40,6 +55,7 @@ describe('uiSref', () => {
         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();
@@ -114,6 +130,75 @@ describe('uiSref', () => {
         });
       });
     });
+
+    describe('when the bound values change', () => {
+      let fixture: ComponentFixture<TestComponent>;
+      let comp: TestComponent;
+      let logger: TargetState[];
+      let subscription: Subscription;
+
+      beforeEach(() => {
+        fixture = TestBed.configureTestingModule({
+          declarations: [TestComponent],
+          imports: [UIRouterModule.forRoot({ useHash: true })]
+        }).createComponent(TestComponent);
+        fixture.detectChanges();
+        comp = fixture.componentInstance;
+        logger = [];
+        subscription = comp.linkASref.targetState$.subscribe(evt => logger.push(evt));
+      });
+
+      afterEach(() => {
+        subscription.unsubscribe();
+      });
+
+      describe('when the uiSref is empty', () => {
+        it('should emit an empty target state event', () =>{
+          expect(logger.length).toBe(1);
+          expect(logger[0].name()).toBeNull();
+        });
+      })
+
+      describe('when the target state changes', () => {
+        beforeEach(() => {
+          comp.linkA = 'stateA';
+          fixture.detectChanges();
+        });
+
+        it('should emit an event', () => {
+          expect(logger.length).toBe(2);
+          expect(logger[1].name()).toBe('stateA');
+        });
+      });
+
+      describe('when the target params change', () => {
+        const params = { paramA: 'paramA' };
+
+        beforeEach(() => {
+          comp.linkAParams = params;
+          fixture.detectChanges();
+        });
+
+        it('should emit an event', () => {
+          expect(logger.length).toBe(2);
+          expect(logger[1].params()).toEqual(params);
+        });
+      });
+
+      describe('when the transition options change', () => {
+        const options: TransitionOptions = { custom: 'custom' };
+
+        beforeEach(() => {
+          comp.linkAOptions = options;
+          fixture.detectChanges();
+        });
+
+        it ('should emit an event', () => {
+          expect(logger.length).toBe(2);
+          expect(logger[1].options().custom).toEqual(options.custom);
+        });
+      })
+    });
   });
 });
 

test/uiSrefStatus/uiSrefStatus.spec.ts

@@ -0,0 +1,52 @@
+import { Component, DebugElement } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { SrefStatus, UISrefStatus } from '../../src/directives/uiSrefStatus';
+import { UIRouterModule } from '../../src/uiRouterNgModule';
+
+describe('uiSrefStatus', () => {
+  @Component({
+    template: '<a uiSref="foo" (uiSrefStatus)="updated($event)"></a>',
+  })
+  class TestComponent {
+    updated(event: SrefStatus) {
+      throw new Error('updated() method must be spied');
+    }
+  }
+
+  let component: TestComponent;
+  let de: DebugElement;
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestComponent],
+      imports: [UIRouterModule.forRoot({
+        states: [{ name: 'foo' }],
+        useHash: true,
+      })]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    de = fixture.debugElement.query(By.directive(UISrefStatus));
+  });
+
+  describe('when click on `foo` uiSref', () => {
+    beforeEach(async(() => {
+      spyOn(component, 'updated');
+      de.triggerEventHandler('click', {});
+    }));
+
+    it('should emit a event with a TargetState pointing to `foo`', () => {
+      expect(component.updated).toHaveBeenCalled();
+      const arg: SrefStatus = (component.updated as jasmine.Spy).calls.mostRecent().args[0];
+      expect(arg.targetStates.length).toEqual(1);
+      expect(arg.targetStates[0].state()).toEqual(jasmine.objectContaining({ name: 'foo' }));
+    });
+  });
+});