加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

如何在测试angular 2应用程序时正确使用SharedModules和Router?

发布时间:2020-12-17 07:11:55 所属栏目:安全 来源:网络整理
导读:我正在尝试使用routerLink和routerLinkActive对(angular 2)组件进行单元测试,但所有测试用例都会失败,并显示以下错误消息. (注意:我已经删除了路由器和其他相关的依赖项.这是我用于相同的 reference.). Cannot read property ‘subscribe’ of undefined 我
我正在尝试使用routerLink和routerLinkActive对(angular 2)组件进行单元测试,但所有测试用例都会失败,并显示以下错误消息. (注意:我已经删除了路由器和其他相关的依赖项.这是我用于相同的 reference.).

Cannot read property ‘subscribe’ of undefined

我还注意到,当从我的模板中删除routerLink和routerLinkActive时,所有测试用例都将运行而没有任何错误.

我认为错误是由RouterTestingModule或SharedModule(包含用于显示和验证密码输入字段的组件)引起的.所以我尝试删除或添加它们以找到实际导致问题的原因.这是我观察到的.

>我得到’无法读取属性’订阅’undefined’如果
存在RouterTestingModule或SharedModule.
>只有当我删除了RouterTestingModule和SharedModule时,我才会收到任何链接到路由器的错误,但是共享模块中的元素不会被加载到组件中,并且某些测试用例仍然因此而失败.

TestBed配置:

TestBed.configureTestingModule({

            imports: [CoreModule,SharedModule,RouterTestingModule],declarations: [ MyComponent,RouterLinkStubDirective,RouterOutletStubComponent ],providers: [
                FormBuilder,{ provide: Router,useClass: RouterStub },{ provide: ActivatedRoute,userClass: ActivatedRouteStub}
            ],schemas: [NO_ERRORS_SCHEMA]
        })
            .overrideComponent(MyComponent,{
                set: {
                    providers: [
                        {provide: AuthModel,useClass: MockAuthModel}    
                    ],}
            })
            .compileComponents();
    }));

ActivatedRouterStub:

@Injectable()
export class ActivatedRouteStub {

    // ActivatedRoute.params is Observable
    private subject = new BehaviorSubject(this.testParams);
    params = this.subject.asObservable();

    // Test parameters
    private _testParams: {};
    get testParams() { return this._testParams; }
    set testParams(params: {}) {
        this._testParams = params;
        this.subject.next(params);
    }

    // ActivatedRoute.snapshot.params
    get snapshot() {
        return { params: this.testParams };
    }
}

我应该做些什么改变来解决这个问题?

解决方法

我设法解决了这个问题.我将列出我为解决问题所做的更改.

>正如我在评论中提到的,routerLink仅适用于真正的路由器.所以我们需要包括RouterTestingModule(包括.withRoutes([{path:’some / path’,component:someComponent}]),如果你打算在测试时点击它).
>如果我们已经添加了RouterTestingModule,我们不需要单独提供路由器依赖项.所以我删除了我提供的Router和ActivatedRoute依赖项.现在,错误从无法读取未定义的属性’subscribe’变为无法读取null的属性’outlets’.
>我found out当routerLink指向空变量时发生此错误.在我的例子中,由于隔离的测试环境,我分配给routerLink的名为favoriteUrl的属性为null.所以我手动为beforeEach函数中的属性赋值,这解决了问题,至少对我来说.

感谢所有试图帮助的人!

(编辑:李大同)

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

    推荐文章
      热点阅读