Question

我有一个使用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选择器。不幸的是，technique described in the docs似乎不适用于@ngrx/router-store生成的选择器。

有什么想法我该怎么做？

Answer 1

我没有找到问题的答案，但是我创建了一种解决方法。我已经将路由器存储的选择器包装在一个createSelector()调用中并返回了它。看起来像这样：

export const innerSelectRoutePageIndex = selectRouteParam('pageIndex');

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

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

Answer 2

只想在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,
});

模拟@ ngrx /路由器商店的selectRouteParam

2 个答案: