3

我有一个使用 NgRx 和@ngrx/router-store(8.4.0) 的 Angular 8 应用程序（核心 8.1.2），但在模拟由fromRouter.getSelectors(selectRouter).

我编写并尝试测试的选择器如下所示：

export const selectFilteredPagedFeaturedPlaylists = createSelector(
  selectFilteredFeaturedPlaylists,
  selectRoutePageIndex,
  selectPageSize,
  (featuredPlaylists, pageIndex, pageSize) => ({
    ...featuredPlaylists,
    content: featuredPlaylists.content.slice(+pageIndex * pageSize, (+pageIndex + 1) * pageSize)
  })
);

选择器selectRoutePageIndex，调用商店生成的方法，看起来像这样：

export const selectRoutePageIndex = selectRouteParam('pageIndex');

实际上，我不一定关心模拟选择selectRouteParam器，但我需要模拟我的selectRoutePageIndex选择器。不幸的是，文档中描述的技术似乎不适用于由@ngrx/router-store.

任何想法我怎么能做到这一点？

4

2 回答 2

3

只是想在 2019 年提供我的解决方案。它已经和你的很相似了。这是我为路由器设置选择器的方式。

export const selectRouter = createSelector(
    (state: fromRoot.State) => state.router,
    value => value,
);

const {
    selectQueryParams, // select the current route query params
    selectQueryParam, // factory function to select a query param
    selectRouteParams, // select the current route params
    selectRouteParam, // factory function to select a route param
    selectRouteData, // select the current route data
    selectUrl, // select the current url
}: RouterStateSelectors<any> = fromRouter.getSelectors(selectRouter);

然后，在我的测试中，我可以像这样模拟路由器状态。

mockStore.overrideSelector(fromCore.selectRouter, {
    state: {
        root: {
            params: {
                't': 'test', // query string parameter
            },
        },
    },
    navigationId: null,
});
于 2019-11-28T15:47:03.050 回答
2

我没有找到问题的答案，但我创建了一个解决方法。我已将路由器商店的选择器包装在一个createSelector()电话中，然后将其返回。它看起来像这样：

export const innerSelectRoutePageIndex = selectRouteParam('pageIndex');

export const selectRoutePageIndex = createSelector(
  innerSelectRoutePageIndex,
  (routePageIndex) => routePageIndex
);

所以客户端代码仍然使用selectRoutePageIndex选择器，并且MockStore.overrideSelector()对这种安排感到满意。似乎createSelector()对它传递的选择器的签名更宽容。

于 2019-10-17T13:51:15.187 回答