我正在尝试在 Angular 应用程序中测试路由。我可以成功测试正向导航,但无法测试反向导航。
我的测试规范:
import {Location} from "@angular/common";
import {TestBed, fakeAsync, tick} from '@angular/core/testing';
import {RouterTestingModule} from "@angular/router/testing";
import {Router} from "@angular/router";
import {
HomeComponent,
SearchComponent,
AppComponent,
routes
} from "./router"
describe('Router: App', () => {
let location: Location;
let router: Router;
let fixture;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ RouterTestingModule.withRoutes(routes)],
declarations: [
HomeComponent,
SearchComponent,
AppComponent
]
});
router = TestBed.get(Router);
location = TestBed.get(Location);
fixture = TestBed.createComponent(AppComponent);
});
it('location.back()', fakeAsync(() => {
router.navigate(['']);
tick();
expect(router.routerState.snapshot.url).toBe('/home');
router.navigate(['/search']);
tick();
expect(router.routerState.snapshot.url).toBe('/search');
console.log('BACK')
location.back()
tick();
expect(location.path()).toBe('/home');
expect(router.routerState.snapshot.url).toBe('/home');
}));
});
使用时
router.navigate()
, routerState
已更新(我还检查了 router.events
发送导航事件)。但是,在调用 location.back()
时路由器状态没有更新,我没有通过 router.events
收到路由器事件.测试代码的首选方法是什么,它在 Angular 中使用后退(和前进)导航?
提前致谢。
最佳答案
我有同样的问题,也没有任何线索。所以我开始挖掘如何RouterTestingModule
在您的用例中设置 2 个最重要的“组件”:Router
和 Location
.
用过的Router是真的但是交了SpyLocation
.所以我认为它只是伪造 popstate 并且不会以任何方式修改路由器状态,但它实际上具有与真实 Location 相同的副作用 - 它发出一个事件(在您的情况下为 popstate )。现在 Router
, 不管 位置实现的,订阅 通过调用其 setUpLocationChangeListener
来访问这些事件,并且当一个事件像 popstate 一样发生时,它会在它的 routerState
中反射(reflect)它。 .我发现,在我的测试用例中,显然在你的测试用例中,事件订阅没有被创建,因为这个方法没有被调用。
解决方法很简单。您必须调用 router.initialNavigation()
在测试任何 popstate 代码之前。理想情况下,您将它作为路由器上的第一个操作。因为,正如您在下面看到的(这是唯一完成此操作的地方),位置更改监听器设置在那里。
来自 router.ts
initialNavigation(): void {
this.setUpLocationChangeListener();
if (this.navigationId === 0) {
this.navigateByUrl(this.location.path(true), {replaceUrl: true})
}
}
关于Angular - 使用后退导航测试路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47176577/