Add test for withLayouts

vaadin · Aug 22, 2024 · ebac3be · ebac3be
1 parent b4f8c78
commit ebac3be
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 4 deletions.
diff --git a/packages/ts/file-router/src/runtime/RouterConfigurationBuilder.ts b/packages/ts/file-router/src/runtime/RouterConfigurationBuilder.ts
@@ -172,12 +172,16 @@ export class RouterConfigurationBuilder {
       if (!routes) {
         return routes;
       }
-      const withLayout = routes.filter(
+      const withLayout = routes.filter((route) => {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        (route) => typeof route.handle === 'object' && 'flowLayout' in route.handle && route.handle.flowLayout,
-      );
+        const layout = typeof route.handle === 'object' && 'flowLayout' in route.handle && route.handle.flowLayout;
+        return layout;
+      });
       const allRoutes = routes.filter((route) => !withLayout.includes(route));
-      withLayout.push(routes[routes.length - 1]); // Add * fallback to all child routes
+      const catchAll = routes.filter((route) => route.path === '*');
+      if (catchAll.length > 0) {
+        withLayout.push(...catchAll); // Add * fallback to all child routes
+      }
 
       allRoutes.unshift(...applyLayouts(withLayout));
       return allRoutes;

diff --git a/packages/ts/file-router/test/runtime/RouterConfigurationBuilder.spec.tsx b/packages/ts/file-router/test/runtime/RouterConfigurationBuilder.spec.tsx
@@ -1,5 +1,6 @@
 import { expect, use } from '@esm-bundle/chai';
 import chaiLike from 'chai-like';
+import { createElement } from 'react';
 import sinonChai from 'sinon-chai';
 import { RouterConfigurationBuilder } from '../../src/runtime/RouterConfigurationBuilder.js';
 import { mockDocumentBaseURI } from '../mocks/dom.js';
@@ -81,6 +82,68 @@ describe('RouterBuilder', () => {
     ]);
   });
 
+  it('should add layout routes under layout component', () => {
+    const serverWildcard = {
+      path: '*',
+      element: <Server />,
+      handle: { title: 'Server' },
+    };
+    const serverIndex = {
+      index: true,
+      element: <Server />,
+      handle: { title: 'Server' },
+    };
+
+    const serverRoutes = [serverWildcard, serverIndex];
+
+    const { routes } = builder
+      .withReactRoutes([
+        {
+          path: '',
+          handle: {
+            flowLayout: true,
+          },
+        },
+        {
+          path: '/test',
+          handle: {
+            flowLayout: true,
+          },
+        },
+      ])
+      .withLayouts(Server)
+      .build();
+
+    expect(routes).to.be.like([
+      {
+        children: [
+          {
+            path: '',
+            handle: {
+              flowLayout: true,
+            },
+          },
+          {
+            path: '/test',
+            handle: {
+              flowLayout: true,
+            },
+          },
+        ],
+        element: createElement(Server),
+      },
+      {
+        children: [
+          {
+            path: '/test',
+            element: <div>Test</div>,
+          },
+        ],
+        path: '',
+      },
+    ]);
+  });
+
   it('should merge file routes deeply', () => {
     const { routes } = builder
       .withFileRoutes([