Angular 2中使用Karma+Jasmine测试Location订阅功能

你遇到的问题核心是空的locationStub没有实现subscribe方法，导致组件调用this.location.subscribe()时触发错误。我们只需要给存根添加模拟的订阅逻辑，同时支持手动触发PopStateEvent，就能顺利完成测试。

具体实现步骤： #

1. 导入必要依赖
   在你的component.spec.ts文件顶部，导入RxJS的Subject以及Angular的相关类型：

   import { Subject } from 'rxjs';
   import { Location, PopStateEvent } from '@angular/common';
   

2. 构建可控制的Location存根
   用Subject来模拟Location服务的事件流，这样我们就能在测试中手动发送事件。修改你的存根代码：

   let locationStub: Partial<Location>;
   // 用Subject模拟事件流，方便测试时手动触发
   let locationSubject: Subject<PopStateEvent>;
   
   beforeEach(() => {
     locationSubject = new Subject<PopStateEvent>();
   
     locationStub = {
       // 模拟subscribe方法，返回Subject的Observable
       subscribe: (callback: (ev: PopStateEvent) => void) => {
         return locationSubject.subscribe(callback);
       }
     };
   
     TestBed.configureTestingModule({
       declarations: [YourComponentName], // 替换成你的组件名称
       providers: [
         { provide: Location, useValue: locationStub }
       ]
     });
   });
   

3. 编写测试用例验证订阅逻辑
   现在可以手动触发PopStateEvent，验证组件的lastPoppedUrl是否正确更新：

   it('should update lastPoppedUrl when popstate event is triggered', () => {
     const fixture = TestBed.createComponent(YourComponentName);
     const component = fixture.componentInstance;
     fixture.detectChanges(); // 触发组件初始化，执行订阅逻辑
   
     // 模拟携带测试URL的popstate事件
     const testUrl = '/dashboard';
     locationSubject.next({ url: testUrl } as PopStateEvent);
   
     // 验证组件的lastPoppedUrl是否被正确赋值
     expect(component.lastPoppedUrl).toBe(testUrl);
   });
   

4. 清理资源避免内存泄漏
   测试完成后记得完成Subject，防止内存泄漏：

   afterEach(() => {
     locationSubject.complete();
   });
   

这样修改后，你的测试就能正常运行，完整验证组件与Location服务订阅相关的功能了。

内容的提问来源于stack exchange，提问作者Jackson Vaughan