fix(LinkActive): Fix active link for base url when using hash (#74)

ngrx · Apr 26, 2016 · 12961d4 · 12961d4
1 parent 27563fd
commit 12961d4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/lib/link-active.ts b/lib/link-active.ts
@@ -43,7 +43,7 @@ export interface LinkActiveOptions {
 
    ngAfterViewInit() {
      this._sub = this.router$
-     .map(({path}) => this.router$.prepareExternalUrl(path))
+     .map(({path}) => this.router$.prepareExternalUrl(path || '/'))
      .subscribe(path => {
        this.checkActive(path);
      });
@@ -53,12 +53,12 @@ export interface LinkActiveOptions {
     let active = this.links.reduce((active, current) => {
       let [href, query] = current.linkHref.split('?');
 
-       if (this.activeOptions.exact) {
-         return active ? active : href === path;
-       } else {
-         return active ? active : path.startsWith(href);
-       }
-     }, false);
+      if (this.activeOptions.exact) {
+        return active ? active : href === path;
+      } else {
+        return active ? active : path.startsWith(href);
+      }
+    }, false);
 
      let activeClasses = this.activeClass.split(' ');
      activeClasses.forEach((activeClass) => {

diff --git a/spec/link-active.spec.ts b/spec/link-active.spec.ts
@@ -169,4 +169,23 @@ describe('Link Active', () => {
         expect(link.getAttribute('class')).toEqual('active');
       });
   })));
+
+  describe('With Hash', () => {
+    it('should add the provided class to the active element', async(inject([TestComponentBuilder, Router, LocationStrategy], (tcb, router$, ls) => {
+      ls.internalBaseHref = '#';
+
+      router$.next({
+        path: '/'
+      });
+
+      return compile(tcb, '<a linkActive="active" linkTo="/">Page</a>')
+        .then((fixture) => {
+          fixture.detectChanges();
+          let compiled = fixture.debugElement.nativeElement;
+          let link: Element = compiled.querySelector('a');
+
+          expect(link.getAttribute('class')).toEqual('active');
+        });
+    })));
+  });
 });