如何以角度测试routerLinkActive

发布时间：2020-12-17 18:06:20 所属栏目：安全来源：网络整理

导读：我试图在以下非常简单的组件中测试路由： 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

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

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,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)],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');
  }));
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!