test(examples): validation of layout route functionality by running e…

…2e testing on the basic examples (#2042) * chore: unify the layout ui across all the basic examples * chore: more unification * test(examples): e2e validation of layout routes
TanStack · Jul 27, 2024 · 3f6ffa5 · 3f6ffa5
1 parent 3b9976d
commit 3f6ffa5
Show file tree

Hide file tree

Showing 33 changed files with 678 additions and 133 deletions.
diff --git a/examples/react/basic-file-based/src/routeTree.gen.ts b/examples/react/basic-file-based/src/routeTree.gen.ts
@@ -12,9 +12,13 @@
 
 import { Route as rootRoute } from './routes/__root'
 import { Route as PostsImport } from './routes/posts'
+import { Route as LayoutImport } from './routes/_layout'
 import { Route as IndexImport } from './routes/index'
 import { Route as PostsIndexImport } from './routes/posts.index'
 import { Route as PostsPostIdImport } from './routes/posts.$postId'
+import { Route as LayoutLayout2Import } from './routes/_layout/_layout-2'
+import { Route as LayoutLayout2LayoutBImport } from './routes/_layout/_layout-2/layout-b'
+import { Route as LayoutLayout2LayoutAImport } from './routes/_layout/_layout-2/layout-a'
 
 // Create/Update Routes
 
@@ -23,6 +27,11 @@ const PostsRoute = PostsImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const LayoutRoute = LayoutImport.update({
+  id: '/_layout',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const IndexRoute = IndexImport.update({
   path: '/',
   getParentRoute: () => rootRoute,
@@ -38,6 +47,21 @@ const PostsPostIdRoute = PostsPostIdImport.update({
   getParentRoute: () => PostsRoute,
 } as any)
 
+const LayoutLayout2Route = LayoutLayout2Import.update({
+  id: '/_layout-2',
+  getParentRoute: () => LayoutRoute,
+} as any)
+
+const LayoutLayout2LayoutBRoute = LayoutLayout2LayoutBImport.update({
+  path: '/layout-b',
+  getParentRoute: () => LayoutLayout2Route,
+} as any)
+
+const LayoutLayout2LayoutARoute = LayoutLayout2LayoutAImport.update({
+  path: '/layout-a',
+  getParentRoute: () => LayoutLayout2Route,
+} as any)
+
 // Populate the FileRoutesByPath interface
 
 declare module '@tanstack/react-router' {
@@ -49,13 +73,27 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
+    '/_layout': {
+      id: '/_layout'
+      path: ''
+      fullPath: ''
+      preLoaderRoute: typeof LayoutImport
+      parentRoute: typeof rootRoute
+    }
     '/posts': {
       id: '/posts'
       path: '/posts'
       fullPath: '/posts'
       preLoaderRoute: typeof PostsImport
       parentRoute: typeof rootRoute
     }
+    '/_layout/_layout-2': {
+      id: '/_layout/_layout-2'
+      path: ''
+      fullPath: ''
+      preLoaderRoute: typeof LayoutLayout2Import
+      parentRoute: typeof LayoutImport
+    }
     '/posts/$postId': {
       id: '/posts/$postId'
       path: '/$postId'
@@ -70,13 +108,33 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof PostsIndexImport
       parentRoute: typeof PostsImport
     }
+    '/_layout/_layout-2/layout-a': {
+      id: '/_layout/_layout-2/layout-a'
+      path: '/layout-a'
+      fullPath: '/layout-a'
+      preLoaderRoute: typeof LayoutLayout2LayoutAImport
+      parentRoute: typeof LayoutLayout2Import
+    }
+    '/_layout/_layout-2/layout-b': {
+      id: '/_layout/_layout-2/layout-b'
+      path: '/layout-b'
+      fullPath: '/layout-b'
+      preLoaderRoute: typeof LayoutLayout2LayoutBImport
+      parentRoute: typeof LayoutLayout2Import
+    }
   }
 }
 
 // Create and export the route tree
 
 export const routeTree = rootRoute.addChildren({
   IndexRoute,
+  LayoutRoute: LayoutRoute.addChildren({
+    LayoutLayout2Route: LayoutLayout2Route.addChildren({
+      LayoutLayout2LayoutARoute,
+      LayoutLayout2LayoutBRoute,
+    }),
+  }),
   PostsRoute: PostsRoute.addChildren({ PostsPostIdRoute, PostsIndexRoute }),
 })
 
@@ -89,26 +147,49 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "__root.tsx",
       "children": [
         "/",
+        "/_layout",
         "/posts"
       ]
     },
     "/": {
       "filePath": "index.tsx"
     },
+    "/_layout": {
+      "filePath": "_layout.tsx",
+      "children": [
+        "/_layout/_layout-2"
+      ]
+    },
     "/posts": {
       "filePath": "posts.tsx",
       "children": [
         "/posts/$postId",
         "/posts/"
       ]
     },
+    "/_layout/_layout-2": {
+      "filePath": "_layout/_layout-2.tsx",
+      "parent": "/_layout",
+      "children": [
+        "/_layout/_layout-2/layout-a",
+        "/_layout/_layout-2/layout-b"
+      ]
+    },
     "/posts/$postId": {
       "filePath": "posts.$postId.tsx",
       "parent": "/posts"
     },
     "/posts/": {
       "filePath": "posts.index.tsx",
       "parent": "/posts"
+    },
+    "/_layout/_layout-2/layout-a": {
+      "filePath": "_layout/_layout-2/layout-a.tsx",
+      "parent": "/_layout/_layout-2"
+    },
+    "/_layout/_layout-2/layout-b": {
+      "filePath": "_layout/_layout-2/layout-b.tsx",
+      "parent": "/_layout/_layout-2"
     }
   }
 }

diff --git a/examples/react/basic-file-based/src/routes/__root.tsx b/examples/react/basic-file-based/src/routes/__root.tsx
@@ -35,6 +35,14 @@ function RootComponent() {
         >
           Posts
         </Link>{' '}
+        <Link
+          to="/layout-a"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          Layout
+        </Link>{' '}
         <Link
           // @ts-expect-error
           to="/this-route-does-not-exist"

diff --git a/examples/react/basic-file-based/src/routes/_layout.tsx b/examples/react/basic-file-based/src/routes/_layout.tsx
@@ -0,0 +1,16 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_layout')({
+  component: LayoutComponent,
+})
+
+function LayoutComponent() {
+  return (
+    <div className="p-2">
+      <div className="border-b">I'm a layout</div>
+      <div>
+        <Outlet />
+      </div>
+    </div>
+  )
+}
diff --git a/examples/react/basic-file-based/src/routes/_layout/_layout-2.tsx b/examples/react/basic-file-based/src/routes/_layout/_layout-2.tsx
@@ -0,0 +1,34 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_layout/_layout-2')({
+  component: LayoutComponent,
+})
+
+function LayoutComponent() {
+  return (
+    <div>
+      <div>I'm a nested layout</div>
+      <div className="flex gap-2 border-b">
+        <Link
+          to="/layout-a"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          Layout A
+        </Link>
+        <Link
+          to="/layout-b"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          Layout B
+        </Link>
+      </div>
+      <div>
+        <Outlet />
+      </div>
+    </div>
+  )
+}
diff --git a/examples/react/basic-file-based/src/routes/_layout/_layout-2/layout-a.tsx b/examples/react/basic-file-based/src/routes/_layout/_layout-2/layout-a.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_layout/_layout-2/layout-a')({
+  component: LayoutAComponent,
+})
+
+function LayoutAComponent() {
+  return <div>I'm layout A!</div>
+}
diff --git a/examples/react/basic-file-based/src/routes/_layout/_layout-2/layout-b.tsx b/examples/react/basic-file-based/src/routes/_layout/_layout-2/layout-b.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_layout/_layout-2/layout-b')({
+  component: LayoutBComponent,
+})
+
+function LayoutBComponent() {
+  return <div>I'm layout B!</div>
+}
diff --git a/examples/react/basic-file-based/tests/app.spec.ts b/examples/react/basic-file-based/tests/app.spec.ts
@@ -10,6 +10,20 @@ test('Navigating to a post page', async ({ page }) => {
   await expect(page.getByRole('heading')).toContainText('sunt aut facere')
 })
 
+test('Navigating nested layouts', async ({ page }) => {
+  await page.goto('/')
+  await page.getByRole('link', { name: 'Layout', exact: true }).click()
+
+  await expect(page.locator('#app')).toContainText("I'm a layout")
+  await expect(page.locator('#app')).toContainText("I'm a nested layout")
+
+  await page.getByRole('link', { name: 'Layout A' }).click()
+  await expect(page.locator('#app')).toContainText("I'm layout A!")
+
+  await page.getByRole('link', { name: 'Layout B' }).click()
+  await expect(page.locator('#app')).toContainText("I'm layout B!")
+})
+
 test('Navigating to a not-found route', async ({ page }) => {
   await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()
   await expect(page.getByRole('paragraph')).toContainText(