improve /test/misc/

examples/react-minimal/.testRun.ts

@@ -5,7 +5,6 @@ import {
   test,
   expect,
   run,
-  partRegex,
   autoRetry,
   fetchHtml,
   getServerUrl,
@@ -29,7 +28,6 @@ function testRun(
   test('page content is rendered to HTML', async () => {
     const html = await fetchHtml('/')
     expect(html).toContain('<h1>Welcome</h1>')
-    expectHtmlCommon(html)
     if (isCJS) {
       expectLog('package.json#type to "module", see https://vike.dev/CJS', (log) => log.logSource === 'stderr')
     }
@@ -86,13 +84,5 @@ function testRun(
     expect(await page.textContent('p')).toBe('Example of using Vike.')
     const html = await fetchHtml('/about')
     expect(html).toContain('<h1>About</h1>')
-    expectHtmlCommon(html)
   })
 }
-
-function expectHtmlCommon(html: string) {
-  // Vue injects: `!--[-->Home<!--]-->`
-  expect(html).toMatch(partRegex`<a ${/[^\>]+/}>${/.*/}Home${/[.\s]*/}</a>`)
-  expect(html).toMatch(partRegex`<a ${/[^\>]+/}>${/.*/}About${/[.\s]*/}</a>`)
-  expect(html).toContain('<link rel="stylesheet" type="text/css"')
-}

test/misc/package.json

@@ -12,6 +12,7 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2",
     "vike": "0.4.196",
+    "vike-react": "^0.5.7",
     "vite": "^5.4.0"
   },
   "type": "module"

test/misc/renderer/Layout.jsx → test/misc/pages/+Layout.jsx

@@ -8,25 +8,27 @@ function Layout({ children }) {
     <React.StrictMode>
       <Frame>
         <Sidebar>
-          <a className="navitem" href="/">
-            Home
-          </a>
-          <a className="navitem" href="/about">
-            About
-          </a>
-          <a className="navitem" href="/markdown">
-            Markdown
-          </a>
-          <a className="navitem" href="/pushState">
-            pushState
-          </a>
+          <Link href="/" />
+          <Link href="/about" />
+          <Link href="/markdown" />
+          <Link href="/pushState" />
+          <Link href="/dynamic-import-file-env" />
+          <Link href="/navigate-early" />
         </Sidebar>
         <Content>{children}</Content>
       </Frame>
     </React.StrictMode>
   )
 }
 
+function Link({ href }) {
+  return (
+    <a className="navitem" href={href} style={{ paddingRight: 20 }}>
+      <code>{href}</code>
+    </a>
+  )
+}
+
 function Frame({ children }) {
   return (
     <div
@@ -45,12 +47,10 @@ function Sidebar({ children }) {
   return (
     <div
       style={{
-        padding: 20,
         paddingTop: 42,
         flexShrink: 0,
         display: 'flex',
         flexDirection: 'column',
-        alignItems: 'center',
         lineHeight: '1.8em'
       }}
     >

test/misc/pages/+config.ts

@@ -1,47 +1,12 @@
 import type { Config } from 'vike/types'
+import vikeReact from 'vike-react/config'
 
 export default {
+  title: 'Big Playground',
+  extends: [vikeReact],
   meta: {
-    Head: {
-      env: { server: true },
-      cumulative: true
-    },
-    /*
-    For supporting nested configs, is the following the only thing missing?
-    ```diff
-    // /pages/some-page/+config.js
-
-      export {
-    -   ['document.title']: 'Some Title'
-    +   document: {
-    +     title: 'Some Title'
-    +   }
-      }
-    ```
-
-    Work-in-progress: https://github.com/vikejs/vike/tree/brillout/feat/nested-configs
-    */
-    ['document.title']: {
-      env: { server: true, client: true }
+    frontmatter: {
+      env: { server: true }
     }
   }
 } satisfies Config
-
-declare global {
-  namespace Vike {
-    interface Config {
-      ['document.title']?: string
-      frontmatter?: {
-        title: string
-      }
-      Head?: () => JSX.Element
-    }
-    interface ConfigResolved {
-      Head: (() => JSX.Element)[]
-    }
-    interface PageContext {
-      Page?: any
-      pageProps?: Record<string, unknown>
-    }
-  }
-}

test/misc/renderer/Layout.css → test/misc/pages/Layout.css

@@ -14,3 +14,10 @@ a {
 .navitem {
   padding: 3px;
 }
+
+code {
+  font-family: monospace;
+  background-color: #eaeaea;
+  padding: 3px 5px;
+  border-radius: 4px;
+}

test/misc/pages/index/+config.ts

@@ -1,6 +1,7 @@
 import type { Config } from 'vike/types'
 
 export default {
-  Page: 'import:./Page.jsx',
-  ['document.title']: 'Some title set by nested config'
+  // Test: use import string instead of +Page file.
+  // @ts-ignore I ain't sure whether import strings should be part of the official type. Probably so.
+  Page: 'import:./Page.jsx'
 } satisfies Config

test/misc/pages/markdown-page/+Page.md

@@ -7,8 +7,8 @@ import { createElement as h, Fragment } from 'react'
 import { Counter } from './Counter'
 
 function Page() {
-  const h1 = h('h1', null, 'Test side export of .md file')
-  const p = h('p', null, 'Some text')
+  const h1 = h('h1', null, 'Side export .md file')
+  const p = h('p', null, 'Test: being able to define a config as a "side export" in a `.md` file, such as frontmatter data. (See `export { frontmatter }` in `/pages/markdown-page/+Page.md`.)')
   const counter = h(Counter)
   return h(Fragment, null, h1, p, counter)
 }

test/misc/pages/markdown-page/+config.ts

@@ -1,6 +1,6 @@
 import type { Config } from 'vike/types'
 
 export default {
-  // Instead of +route.js the route can be defined over +config.ts > export default { route }
+  // Test: Route String defined over `+config.js > export default { route }` instead of `+route.js`
   route: '/markdown'
 } satisfies Config

test/misc/pages/markdown-page/+title.ts

@@ -0,0 +1,6 @@
+import type { PageContext } from 'vike/types'
+
+export default function (pageContext: PageContext): string {
+  const title = pageContext.config.frontmatter!.title
+  return title
+}

test/misc/pages/markdown-page/vike.d.ts

@@ -0,0 +1,11 @@
+declare global {
+  namespace Vike {
+    interface Config {
+      frontmatter?: {
+        title: string
+      }
+    }
+  }
+}
+
+export {}

test/misc/pages/pushState/+Page.jsx

@@ -1,8 +1,11 @@
 export default Page
 
 import React from 'react'
+import { useData } from 'vike-react/useData'
 
-function Page({ timestamp }) {
+function Page() {
+  const data = useData()
+  const { timestamp } = data
   return (
     <>
       <h1>pushState</h1>

test/misc/pages/pushState/+data.ts

@@ -0,0 +1,4 @@
+export default () => {
+  const timestamp = new Date().getTime()
+  return { timestamp }
+}

test/misc/readme.md

@@ -1,5 +1,3 @@
-Miscellaneous tests:
-- Import path strings such as `import:./onRenderClient.jsx`. (See `/renderer/+config.ts`.)
-- Side exports: being able to define a config as a "side export" in a `.md` file, such as frontmatter data. (See `export { frontmatter }` in `/pages/markdown-page/+Page.md`.)
-- Route String defined over `+config.js > export default { route }` instead of `+route.js`. (See `/pages/markdown-page/+config.ts`.)
-- ...
+Big playground for E2E testing a *lot* of things.
+
+Most tests should (eventually) live here.

test/misc/testRun.ts

@@ -19,15 +19,16 @@ function testRun(cmd: 'npm run dev' | 'npm run preview' | 'npm run prod') {
   testRedirectMailto()
   testNavigateEarly()
   testDynamicImportFileEnv()
-  testNestedConfigWorkaround()
+
+  // Keep it the last test, as it's a bit slow.
   testHistoryPushState()
 }
 
 function testRouteStringDefinedInConfigFile() {
   test('Route String defined in +config.js', async () => {
     // Route String '/markdown' defined in `+config.js > export default { route }` instead of +route.js
     const html = await fetchHtml('/markdown')
-    expect(html).toContain('<p>Some text</p>')
+    expect(html).toContain('<h1>Side export .md file</h1>')
   })
 }
 
@@ -113,14 +114,6 @@ function testDynamicImportFileEnv() {
   })
 }
 
-function testNestedConfigWorkaround() {
-  // See comment in /test/misc/pages/+config.ts
-  test('Nested config workaround', async () => {
-    const html = await fetchHtml('/')
-    expect(html).toContain('<title>Some title set by nested config</title>')
-  })
-}
-
 function testHistoryPushState() {
   test('history.pushState()', async () => {
     // Timestamp component works as expected