如何用泛型类模拟 route.snapshot.params？答案

【问题标题】：How to mock route.snapshot.params with generic class?如何用泛型类模拟 route.snapshot.params？
【发布时间】：2021-05-08 20:37:11
【问题描述】：

我正在尝试使用通用类模拟数据路由器快照，我们可以在其中动态添加数据而不是手动添加数据。我可以模拟数据，但它会被硬编码在我不想要的提供程序部分。

有没有相同的参考资料？

【问题讨论】：

标签： angular unit-testing

【解决方案1】：

如果是测试，这是我的提议：

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [
            MdToolbarModule,
        ],
        providers: [
            {
                provide: Router,
                useClass: MockRouter,
            },
            {
                provide: ActivatedRoute,
                useValue: {
                    data: {
                        subscribe: (fn: (value: Data) => void) => fn({
                            company: COMPANY,
                        }),
                    },
                    params: {
                        subscribe: (fn: (value: Params) => void) => fn({
                            tab: 0,
                        }),
                    },
                    snapshot: {
                        url: [
                            {
                                path: 'foo',
                            },
                            {
                                path: 'bar',
                            },
                            {
                                path: 'baz',
                            },
                        ],
                    },
                },
            },
        ],
    })
    .overrideComponent(ConversationsComponent, {
        set: {
            template: '',
        }
    });
}));

【讨论】：

感谢您的回复，但它仍然是“使用价值”的硬编码。面对这个问题，因为想把它作为一个可以动态分配值的类
据我所知，测试过程总是在某种状态下运行，并且输入值是硬编码的。
我猜convertToParamMap 会避免一些样板文件。

【解决方案2】：

您可以创建一个 mockActivateRoute 类并添加以下方法：

public class mockActivateRoute {

setParams(params){

} 
setSnapshotData(data){

}
setQueryParams(params){

}

getParams(){
}

getSnapshotData(){

}

getQueryParams(){

}

}

然后在你的方法构造函数中你可以使用上面的类：

provide: ActivatedRoute,
useValue: mockActivateRoute

关注这篇文章以获得更深入的信息 https://semaphoreci.com/community/tutorials/testing-routes-in-angular-2

【讨论】：