Added tests for inferno-router SSR and <Switch> and fixed a bug. Also…

… added support for subclassing Route
infernojs · Dec 2, 2023 · 4f9a4d9 · 4f9a4d9
1 parent 30bd8f1
commit 4f9a4d9
Show file tree

Hide file tree

Showing 3 changed files with 206 additions and 103 deletions.
diff --git a/packages/inferno-router/__tests__/loaderOnRoute.spec.tsx b/packages/inferno-router/__tests__/loaderOnRoute.spec.tsx
@@ -693,4 +693,44 @@ describe('Resolve loaders during server side rendering', () => {
     const result = await resolveLoaders(loaderEntries);
     expect(result).toEqual(initialData);
   });
+
+
+  it('Can resolve with sub classed Route', async () => {
+    class MyRoute extends Route {
+      constructor(props, context) {
+        super(props, context);
+      }
+    }
+    const TEXT = 'bubblegum';
+    const Component = (props) => {
+      const res = useLoaderData(props);
+      return <h1>{res?.message}</h1>;
+    };
+
+    const loaderFuncNoHit = async () => {
+      return { message: 'no' };
+    };
+    const loaderFunc = async () => {
+      return { message: TEXT };
+    };
+
+    const initialData = {
+      '/flowers': { res: await loaderFunc() },
+      '/flowers/birds': { res: await loaderFunc() }
+    };
+
+    const app = (
+      <StaticRouter context={{}} location="/flowers/birds">
+        <MyRoute path="/flowers" render={Component} loader={loaderFunc}>
+          <MyRoute path="/flowers/birds" render={Component} loader={loaderFunc} />
+          <MyRoute path="/flowers/bees" render={Component} loader={loaderFuncNoHit} />
+          {null}
+        </MyRoute>
+      </StaticRouter>
+    );
+
+    const loaderEntries = traverseLoaders('/flowers/birds', app);
+    const result = await resolveLoaders(loaderEntries);
+    expect(result).toEqual(initialData);
+  });
 });
diff --git a/packages/inferno-router/__tests__/loaderWithSwitch.spec.tsx b/packages/inferno-router/__tests__/loaderWithSwitch.spec.tsx
@@ -1,12 +1,5 @@
 import { render, rerender } from 'inferno';
-import {
-  MemoryRouter,
-  Route,
-  Switch,
-  NavLink,
-  useLoaderData,
-  useLoaderError,
-} from 'inferno-router';
+import { MemoryRouter, StaticRouter, Route, Switch, NavLink, useLoaderData, useLoaderError, resolveLoaders, traverseLoaders } from 'inferno-router';
 // Cherry picked relative import so we don't get node-stuff from inferno-server in browser test
 import { createEventGuard } from './testUtils';
 
@@ -44,7 +37,7 @@ describe('A <Route> with loader in a MemoryRouter', () => {
           loader={loaderFunc}
         />
       </MemoryRouter>,
-      container,
+      container
     );
 
     // Wait until async loader has completed
@@ -73,7 +66,7 @@ describe('A <Route> with loader in a MemoryRouter', () => {
           loader={loaderFunc}
         />
       </MemoryRouter>,
-      container,
+      container
     );
 
     // Wait until async loader has completed
@@ -92,14 +85,14 @@ describe('A <Route> with loader in a MemoryRouter', () => {
       return { message: TEXT };
     };
     const initialData = {
-      '/flowers': { res: await loaderFunc(), err: undefined },
+      '/flowers': { res: await loaderFunc(), err: undefined }
     };
 
     render(
       <MemoryRouter initialEntries={['/flowers']} initialData={initialData}>
         <Route path="/flowers" render={Component} loader={loaderFunc} />
       </MemoryRouter>,
-      container,
+      container
     );
 
     expect(container.innerHTML).toContain(TEXT);
@@ -178,14 +171,14 @@ describe('A <Route> with loader in a MemoryRouter', () => {
       return { message: TEXT };
     };
     const initialData = {
-      '/flowers': { res: await loaderFunc(), err: undefined },
+      '/flowers': { res: await loaderFunc(), err: undefined }
     };
 
     render(
       <MemoryRouter initialEntries={['/flowers']} initialData={initialData}>
         <Route path="/flowers" render={Component} loader={loaderFunc} />
       </MemoryRouter>,
-      container,
+      container
     );
 
     expect(container.innerHTML).toContain(TEXT);
@@ -283,7 +276,7 @@ describe('A <Route> with loader in a MemoryRouter', () => {
           />
         </Switch>
       </MemoryRouter>,
-      container,
+      container
     );
 
     // Check that we are starting in the right place
@@ -371,3 +364,102 @@ describe('A <Route> with loader in a MemoryRouter', () => {
     expect(container.querySelector('#publish')).toBeNull();
   });
 });
+
+describe('Resolve loaders during server side rendering', () => {
+  it('Can resolve with single route', async () => {
+    const TEXT = 'bubblegum';
+    const Component = (props) => {
+      const res = useLoaderData(props);
+      return <h1>{res?.message}</h1>;
+    };
+
+    const loaderFunc = async () => {
+      return { message: TEXT };
+    };
+
+    const initialData = {
+      '/flowers': { res: await loaderFunc() }
+    };
+
+    const app = (
+      <StaticRouter context={{}} location="/flowers">
+        <Switch>
+          <Route path="/flowers" render={Component} loader={loaderFunc} />
+        </Switch>
+      </StaticRouter>
+    );
+
+    const loaderEntries = traverseLoaders('/flowers', app);
+    const result = await resolveLoaders(loaderEntries);
+    expect(result).toEqual(initialData);
+  });
+
+  it('Can resolve with multiple routes', async () => {
+    const TEXT = 'bubblegum';
+    const Component = (props) => {
+      const res = useLoaderData(props);
+      return <h1>{res?.message}</h1>;
+    };
+
+    const loaderFuncNoHit = async () => {
+      return { message: 'no' };
+    };
+    const loaderFunc = async () => {
+      return { message: TEXT };
+    };
+
+    const initialData = {
+      '/birds': { res: await loaderFunc() }
+    };
+
+    const app = (
+      <StaticRouter context={{}} location="/birds">
+        <Switch>
+          <Route path="/flowers" render={Component} loader={loaderFuncNoHit} />
+          <Route path="/birds" render={Component} loader={loaderFunc} />
+          <Route path="/birds" render={Component} loader={loaderFuncNoHit} />
+        </Switch>
+      </StaticRouter>
+    );
+
+    const loaderEntries = traverseLoaders('/birds', app);
+    const result = await resolveLoaders(loaderEntries);
+    expect(result).toEqual(initialData);
+  });
+
+  it('Can resolve with nested routes', async () => {
+    const TEXT = 'bubblegum';
+    const Component = (props) => {
+      const res = useLoaderData(props);
+      return <h1>{res?.message}</h1>;
+    };
+
+    const loaderFuncNoHit = async () => {
+      return { message: 'no' };
+    };
+    const loaderFunc = async () => {
+      return { message: TEXT };
+    };
+
+    const initialData = {
+      '/flowers': { res: await loaderFunc() },
+      '/flowers/birds': { res: await loaderFunc() }
+    };
+
+    const app = (
+      <StaticRouter context={{}} location="/flowers/birds">
+        <Route path="/flowers" render={Component} loader={loaderFunc}>
+          <Switch>
+            <Route path="/flowers/birds" render={Component} loader={loaderFunc} />
+            <Route path="/flowers/bees" render={Component} loader={loaderFuncNoHit} />
+            {null}
+          </Switch>
+        </Route>
+      </StaticRouter>
+    );
+
+    const loaderEntries = traverseLoaders('/flowers/birds', app);
+    const result = await resolveLoaders(loaderEntries);
+    expect(result).toEqual(initialData);
+  });
+});