angular - 模拟@ngrx/router-store 的 selectRouteParam

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

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