如何以角度测试routerLinkActive [英] How can I test routerLinkActive in angular

问题描述

我尝试在以下非常简单的组件中测试路由：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'side-bar',
  templateUrl: `
    <div class="sidebar hidden-sm-down">
        <div class="sidebar-block" >
            <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Home</a>
        </div>

        <div class="sidebar-block">
            <a routerLink="/edit" routerLinkActive="active">Edit</a>
        </div>
    </div>
  `,
  styleUrls: ['./side-bar.component.scss']
})
export class SideBarComponent implements OnInit {

  ngOnInit() { }

}

我目前有：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { RouterTestingModule } from '@angular/router/testing';

import { RouterLinkStubDirective } from '../../../testing/router-stubs';
import { SideBarComponent } from './side-bar.component';

describe('SideBarComponent', () => {
    let component: SideBarComponent;
    let fixture: ComponentFixture<SideBarComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [ RouterTestingModule ],
            declarations: [SideBarComponent, RouterLinkStubDirective ]
        })
        .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(SideBarComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('can be instantiated', () => {
        expect(component).not.toBeNull();
    });

    it('can link to main pages', () => {
        var linkElements = fixture.debugElement.queryAll(By.directive(RouterLinkStubDirective));
        var links = linkElements.map(element => element.injector.get(RouterLinkStubDirective) as RouterLinkStubDirective);

        expect(links.length).toBe(2, 'should have 3 links');
        expect(links[0].linkParams).toBe('/', '1st link should go to Home');
        expect(links[1].linkParams).toBe('/edit', '2nd link should go to Edit');
    });

    it('can show the active link', () => {
        var activeLinks = fixture.debugElement.queryAll(By.css('.active')).map(element => element.injector.get(RouterLinkStubDirective) as RouterLinkStubDirective);
        expect(activeLinks.length).toBe(0, 'should only have 1 active link');
        expect(activeLinks[0].linkParams).toBe('/', 'active link should be for Home');
    });
});

前两个测试正在运行，并遵循官方angular testing documentation中的示例，唯一的不同之处是我必须导入RouterTestingModule，以便routerLinkActiveOptions不会引发错误。

最终测试的目标是断言routerLinkActive工作正常。我不期望当前实现能够工作，理想情况下，我能够设置当前路由，然后检查活动链接是否以类似于上一次测试的方式正确设置。

有关RouterTestingModule的文档不存在，因此可以使用以下方法来实现。如果有人知道实现这一点的方法，我们将不胜感激。

推荐答案

要执行此类测试，您需要使用路由器，下面是一个示例 stackblitz！

但是在内部测试中调用路由器导航有一些问题。 link to issue！

import { async, ComponentFixture, TestBed, tick, fakeAsync } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { RouterTestingModule } from '@angular/router/testing';
import { DebugElement, Component } from '@angular/core';

import { RouterLinkStubDirective } from '../testing/router-link-directive-stub';
import { SideBarComponent } from './side-bar.component';
import { Routes, Router } from '@angular/router';

@Component({
  template: ``
})
export class HomeComponent { }

@Component({
  template: ``
})
export class EditComponent { }

const routes: Routes = [
  {
    path: '', component: HomeComponent,
  },
  {
    path: 'edit', component: EditComponent
  }
];

describe('SideBarComponent', () => {
  let component: SideBarComponent;
  let fixture: ComponentFixture<SideBarComponent>;
  let router: Router;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule.withRoutes(routes)],
      declarations: [SideBarComponent, RouterLinkStubDirective, 
HomeComponent, EditComponent]
     })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SideBarComponent);
    component = fixture.componentInstance;
    router = TestBed.get(Router);
    fixture.detectChanges();
  });

  it('can be instantiated', () => {
    expect(component).not.toBeNull();
  });

  it('can link to main pages', () => {
    var linkElements = 
fixture.debugElement.queryAll(By.directive(RouterLinkStubDirective));
    var links = linkElements.map(element => element.injector.get(RouterLinkStubDirective) as RouterLinkStubDirective);

    expect(links.length).toBe(2, 'should have 3 links');
    expect(links[0].linkParams).toBe('/', '1st link should go to Home');
    expect(links[1].linkParams).toBe('/edit', '2nd link should go to Edit');
  });

  it('can show the active link', fakeAsync(() => {
    router.navigate(['edit']);
    tick();
    var activeLinks = fixture.debugElement.queryAll(By.css('.active')).map(element => element.injector.get(RouterLinkStubDirective) as RouterLinkStubDirective);
    expect(activeLinks.length).toBe(1, 'should only have 1 active link');
    expect(activeLinks[0].linkParams).toBe('/edit', 'active link should be for Home');

    router.navigate(['']);

    tick();
    var activeLinks = fixture.debugElement.queryAll(By.css('.active')).map(element => element.injector.get(RouterLinkStubDirective) as RouterLinkStubDirective);
    expect(activeLinks.length).toBe(1, 'should only have 1 active link');
    expect(activeLinks[0].linkParams).toBe('/', 'active link should be for Home');
  }));
})

这篇关于如何以角度测试routerLinkActive的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！