Angular 6 - 如何在单元测试中模拟router.events url响应

Question

正如标题所示，我需要在单元测试中模拟router.events。

在我的组件中，我做了一些正则表达式来抓取 url 中斜杠之间的第一个文本实例;例如，/pdp/

constructor(
private route: ActivatedRoute,
private router: Router,
}
this.router.events.pipe(takeUntil(this.ngUnsubscribe$))
.subscribe(route => {
if (route instanceof NavigationEnd) {
// debugger
this.projectType = route.url.match(/[a-z-]+/)[0];
}
});

我的单元在构建组件时测试错误：Cannot read property '0' of null. 当我在调试器中注释时，route似乎没有正确设置，但我是在单元测试本身中设置的。 我已经用几种不同的方式完成了它(灵感来自这篇文章：Mocking router.events.subscribe(( Angular2 等(。

第一次尝试：

providers: [
{
provide: Router,
useValue: {
events: of(new NavigationEnd(0, '/pdp/project-details/4/edit', 'pdp/project-details/4/edit'))
}
},
// ActivatedRoute also being mocked
{
provide: ActivatedRoute,
useValue: {
snapshot: { url: [{ path: 'new' }, { path: 'edit' }] },
parent: {
parent: {
snapshot: {
url: [
{ path: 'pdp' }
]
}
}
}
}
}
]

第二次尝试(基于上述帖子(：

class MockRouter {
public events = of(new NavigationEnd(0, '/pdp/project-details/4/edit', '/pdp/project-details/4/edit'))
}
providers: [
{
provide: Router,
useClass: MockRouter
}
]

第三次尝试(也基于上面的帖子(：

class MockRouter {
public ne = new NavigationEnd(0, '/pdp/project-details/4/edit', '/pdp/project-details/4/edit');
public events = new Observable(observer => {
observer.next(this.ne);
observer.complete();
});
}
providers: [
{
provide: Router,
useClass: MockRouter
}
]

第四次尝试：

beforeEach(() => {
spyOn((<any>component).router, 'events').and.returnValue(of(new NavigationEnd(0, '/pdp/project-details/4/edit', 'pdp/project-details/4/edit')))
...

第五次尝试：

beforeEach(() => {
spyOn(TestBed.get(Router), 'events').and.returnValue(of({ url:'/pdp/project-details/4/edit' }))
...

在上述所有情况下，未设置route;NavigationEnd对象等于：

{ id: 1, url: "/", urlAfterRedirects: "/" }

思潮？

Answer 1

它可以像这样简单：

TestBed.configureTestingModule({
imports: [RouterTestingModule]
}).compileComponents()

...

const event = new NavigationEnd(42, '/', '/');
(TestBed.inject(Router).events as Subject<Event>).next(event);

Answer 2

这是我得出的答案。 我想我只是没有将第一种方法(上面(扩展得足够远：

import { of } from 'rxjs';
import { NavigationEnd, Router } from '@angular/router';
providers: [
{
provide: Router,
useValue: {
url: '/non-pdp/phases/8',
events: of(new NavigationEnd(0, 'http://localhost:4200/#/non-pdp/phases/8', 'http://localhost:4200/#/non-pdp/phases/8')),
navigate: jasmine.createSpy('navigate')
}
}
]

Answer 3

认为这可能会有所帮助...在模板中有一个带有路由器链接的页脚组件。 正在获取根未提供错误....不得不使用"真正的"路由器...但有一个监视变量..并将 router.events 指向我的测试可观察，以便我可以控制导航事件

export type Spied<T> = { [Method in keyof T]: jasmine.Spy };
describe("FooterComponent", () => {
let component: FooterComponent;
let fixture: ComponentFixture<FooterComponent>;
let de: DebugElement;
const routerEvent$ = new BehaviorSubject<RouterEvent>(null);
let router: Spied<Router>;
beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [provideMock(SomeService), provideMock(SomeOtherService)],
declarations: [FooterComponent],
imports: [RouterTestingModule]
}).compileComponents();
router = TestBed.get(Router);
(<any>router).events = routerEvent$.asObservable();
fixture = TestBed.createComponent(FooterComponent);
component = fixture.componentInstance;
de = fixture.debugElement;
}));
// component subscribes to router nav event...checking url to hide/show a link
it("should return false for showSomeLink()", () => {
routerEvent$.next(new NavigationEnd(1, "/someroute", "/"));
component.ngOnInit();
expect(component.showSomeLink()).toBeFalsy();
fixture.detectChanges();
const htmlComponent = de.query(By.css("#someLinkId"));
expect(htmlComponent).toBeNull();
});

Answer 4

我看到了这个替代方案，它适用于@daniel-sc 的答案RouterTestingModule

const events = new Subject<{}>();
const router = TestBed.get(Router);
spyOn(router.events, 'pipe').and.returnValue(events);
events.next('Result of pipe');

Answer 5

希望这会有所帮助，这就是我所做的：

const eventsStub = new BehaviorSubject<Event>(null);
export class RouterStub {
events = eventsStub;
}
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [AppComponent],
imports: [RouterTestingModule],
providers: [
{ provide: HttpClient, useValue: {} },
{ provide: Router, useClass: RouterStub },
Store,
CybermetrieCentralizedService,
TileMenuComponentService,
HttpErrorService
],
schemas: [NO_ERRORS_SCHEMA]
}).compileComponents();
fixture = TestBed.createComponent(AppComponent);
router = TestBed.get(Router);
tileMenuService = TestBed.get(TileMenuComponentService);
component = fixture.componentInstance;
}));

然后在测试中我这样做了：

it('should close the menu when navigation to dashboard ends', async(() => {
spyOn(tileMenuService.menuOpened, 'next');
component.checkRouterEvents();
router.events.next(new NavigationEnd (1, '/', '/'));
expect(tileMenuService.menuOpened.next).toHaveBeenCalledWith(false);
}));

这是为了验证在导航到路由"/"之后我是否执行了预期的指令

Answer 6

• 使用ReplaySubject<RouterEvent>来模拟router.events
• 将其导出到服务，以便您可以更独立于组件对其进行测试，其他组件可能也希望使用此服务;)
• 使用filter而不是instanceof

源代码

import {Injectable} from '@angular/core';
import {NavigationEnd, Router, RouterEvent} from '@angular/router';
import {filter, map} from 'rxjs/operators';
import {Observable} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class RouteEventService {
constructor(private router: Router) {
}
subscribeToRouterEventUrl(): Observable<string> {
return this.router.events
.pipe(
filter(event => event instanceof NavigationEnd),
map((event: RouterEvent) => event.url)
);
}
}

测试代码

import {TestBed} from '@angular/core/testing';
import {RouteEventService} from './route-event.service';
import {NavigationEnd, NavigationStart, Router, RouterEvent} from '@angular/router';
import {Observable, ReplaySubject} from 'rxjs';
describe('RouteEventService', () => {
let service: RouteEventService;
let routerEventRelaySubject: ReplaySubject<RouterEvent>;
let routerMock;
beforeEach(() => {
routerEventRelaySubject = new ReplaySubject<RouterEvent>(1);
routerMock = {
events: routerEventRelaySubject.asObservable()
};
TestBed.configureTestingModule({
providers: [
{provide: Router, useValue: routerMock}
]
});
service = TestBed.inject(RouteEventService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
describe('subscribeToEventUrl should', () => {
it('return route equals to mock url on firing NavigationEnd', () => {
const result: Observable<string> = service.subscribeToRouterEventUrl();
const url = '/mock';
result.subscribe((route: string) => {
expect(route).toEqual(url);
});
routerEventRelaySubject.next(new NavigationEnd(1, url, 'redirectUrl'));
});
it('return route equals to mock url on firing NavigationStart', () => {
const result: Observable<string> = service.subscribeToRouterEventUrl();
const url = '/mock';
result.subscribe((route: string) => {
expect(route).toBeNull();
});
routerEventRelaySubject.next(new NavigationStart(1, url, 'imperative', null));
});
});
});