1

I'm trying to set some state in our NgRx Store for specific pages (I'll cause these POI - "page of interest"). If not one of those pages, I would like to set the Store to a default value. We have many pages, so I would prefer to have a default route resolver for the root page and have the specialized route resolver for the child POIs. Is this possible?

The problem I'm running into is switching from a POI to a non-POI page should revert the state back to the default.

Here's a modification of my test case that reproduces the issue:

const ROOT_PATH = 'root';
const PAGE_PATH = `${ROOT_PATH}/page`;

function valueFromStore(): boolean {
  return getFromPage(Store).selectSignal(myValueSelector)();
}

function verifiedNavigate(url: string) {
  get(Router).navigateByUrl(url);
  flush();
}

describe('PermissionsResolver', () => {
  beforeEach(() => {
    bootstrapPageTest({
      routes: [
        {
          path: ROOT_PATH,
          component: PageComponent,
          resolve: {
            'my_resolver': defaultResolver, // sets the store value to false
          },
          children: [
            {
              path: 'page',
              component: PageComponent,
              resolve: {
                'my_resolver': overrideResolver, // sets the store value to true
              },
            },
          ],
        },
      ],
      // omitted extra stuff
    });
  });

  it('sets the store to false when switching to an unsupported page', () => {
    verifiedNavigate(PAGE_PATH);
    expect(valueFromStore()).toBeTrue();

    verifiedNavigate(ROOT_PATH);

    // This expect fails
    expect(valueFromStore()).toBeFalse();
  });
});

When I run the app locally, both resolvers run on the first page load, and then subsequent navigations only trigger the overrideResolver (when navigating to that page). defaultResolver is only run the one time.

2
  • what is the code of verifiedNavigate? is the problem the test case or the resolver? Commented Dec 13, 2024 at 19:19
  • I added the gist for verifiedNavigate() in the snippet. The problem is with the resolvers. I think this test accurately reproduces the issue. Commented Dec 13, 2024 at 19:49

1 Answer 1

0

Could you fakeAsync and flush for the test cases since the reducer updates are asynchronous.

I notice that the navigate method is not wrapped on fakeAsync. so I added flush on the test case.

it('sets the store to false when switching to an unsupported page', fakeAsync(() => {
  verifiedNavigate(PAGE_PATH);
  flush();
  expect(valueFromStore()).toBeTrue();
  verifiedNavigate(ROOT_PATH);
  flush();
  expect(valueFromStore()).toBeFalse();
}));
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.