Add test for abort signal on nav

infernojs · Dec 26, 2022 · eecd2d7 · eecd2d7
1 parent 802d2b7
commit eecd2d7
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 2 deletions.
diff --git a/packages/inferno-router/__tests__/loaderOnRoute.spec.jsx b/packages/inferno-router/__tests__/loaderOnRoute.spec.jsx
@@ -180,6 +180,80 @@ describe('A <Route> with loader in a MemoryRouter', () => {
     expect(container.innerHTML).toContain(TEXT);
     expect(container.innerHTML).toContain('flowers');
   });
+
+  it('Can abort fetch', async () => {
+    const abortSpy = jest.spyOn(AbortController.prototype, 'abort');
+    const [setDone, waitForRerender] = createEventGuard();
+
+    const TEST = "ok";
+
+    const loaderFunc = async ({ request }) => {
+      expect(request).toBeDefined();
+      expect(request.signal).toBeDefined();
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          setDone();
+          resolve({ message: TEST })
+        }, 5);
+      });
+    };
+
+    function RootComp() {
+      return <div id="root">ROOT</div>;
+    }
+
+    function CreateComp(props) {
+      const res = useLoaderData(props);
+      const err = useLoaderError(props);
+      return <div id="create">{res.message}</div>;
+    }
+
+    function PublishComp() {
+      return <div id="publish">PUBLISH</div>;
+    }
+
+    const tree = (
+      <MemoryRouter>
+        <div>
+          <nav>
+            <ul>
+              <li>
+                <NavLink exact to="/">
+                  Play
+                </NavLink>
+              </li>
+              <li id="createNav">
+                <NavLink to="/create">
+                  Create
+                </NavLink>
+              </li>
+              <li id="publishNav">
+                <NavLink to="/publish">
+                  Publish
+                </NavLink>
+              </li>
+            </ul>
+          </nav>
+          <Route exact path="/" component={RootComp} />
+          <Route path="/create" component={CreateComp} loader={loaderFunc} />
+          <Route path="/publish" component={PublishComp} />
+        </div>
+      </MemoryRouter>
+    );
+
+    render(tree, container);
+
+    expect(container.innerHTML).toContain("ROOT");
+
+    // Click create
+    container.querySelector('#createNav').firstChild.click();
+    container.querySelector('#publishNav').firstChild.click();
+
+    await waitForRerender();
+
+    expect(abortSpy).toBeCalledTimes(1);
+    expect(container.querySelector('#create')).toBeNull();
+  });
 });
 
 describe('A <Route> with loader in a BrowserRouter', () => {

diff --git a/packages/inferno-router/src/resolveLoaders.ts b/packages/inferno-router/src/resolveLoaders.ts
@@ -34,8 +34,8 @@ export function traverseLoaders(location: string, tree: any): TLoaderEntry[] {
 
 
   let outp: TLoaderEntry[] = [];
-  // Add any loader on this node
-  if (tree.props?.loader && tree.props?.path) {
+  // Add any loader on this node (but only on the VNode)
+  if (!tree.context && tree.props?.loader && tree.props?.path) {
     // TODO: If we traverse a switch, only the first match should be returned
     // TODO: Should we check if we are in Router? It is defensive and could save a bit of time, but is it worth it?
     const { path, exact = false, strict = false, sensitive = false } = tree.props;