tests: inital framework (#27)

* tests: inital framework * Update index.spec.js * Update package.json * Update test.yml * Update index.spec.js * chore: add basic cases * test: update for CI * chore: pkg update * chore: increase timeout * chore: change to the actual directory * chore: force add 30s * ci: fix timeout * ci: test one * ci: debug * switch to node:test * test: add another example with tailwind and tests * chore: switch to `@matteo.collina/snap` for now * fix: null check viteEnv for builds
barelyhuman · Feb 27, 2025 · 481706d · 481706d
1 parent cada9db
commit 481706d
Show file tree

Hide file tree

Showing 33 changed files with 553 additions and 38 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -14,14 +14,15 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
+          node-version: '20'
           corepack-enable: true
           registry-url: 'https://registry.npmjs.org'
 
       - name: Deps
         run: |
+          npm i -g corepack@latest
           corepack enable 
           pnpm i --frozen-lockfile
 
       - name: Test
-        run: pnpm -r test
+        run: pnpm test:ci
diff --git a/adex/.snapshots/0f704ada2712880ee7394b0fc9b10abf/0.json b/adex/.snapshots/0f704ada2712880ee7394b0fc9b10abf/0.json
@@ -0,0 +1 @@
+"\n    <!doctype html>\n    <html lang=\"\">\n      <head>\n        <script type=\"module\" src=\"/@vite/client\"></script>\n\n        <meta charset=\"UTF-8\" />\n        \n    <title></title>\n\n    \n    \n  \n      </head>\n      <body>\n        <div id=\"app\"><h1 class=\"text-red-500\">Hello World</h1></div>\n      <script type='module' src=\"/virtual:adex:client\"></script></body>\n    </html>\n  "
diff --git a/adex/.snapshots/0f704ada2712880ee7394b0fc9b10abf/1.json b/adex/.snapshots/0f704ada2712880ee7394b0fc9b10abf/1.json
@@ -0,0 +1 @@
+"\n    <!doctype html>\n    <html lang=\"\">\n      <head>\n        <script type=\"module\" src=\"/@vite/client\"></script>\n\n        <meta charset=\"UTF-8\" />\n        \n    <title></title>\n\n    \n    \n  \n      </head>\n      <body>\n        <div id=\"app\"><h2>About</h2></div>\n      <script type='module' src=\"/virtual:adex:client\"></script></body>\n    </html>\n  "
diff --git a/adex/.snapshots/dd4c9d1ee8f7b693c42e503acab1a0c0/0.json b/adex/.snapshots/dd4c9d1ee8f7b693c42e503acab1a0c0/0.json
@@ -0,0 +1 @@
+"\n    <!doctype html>\n    <html lang=\"\">\n      <head>\n        <script type=\"module\" src=\"/@vite/client\"></script>\n\n        <meta charset=\"UTF-8\" />\n        \n    <title></title>\n\n    \n    \n  \n      </head>\n      <body>\n        <div id=\"app\"><h1>Hello World</h1></div>\n      <script type='module' src=\"/virtual:adex:client\"></script></body>\n    </html>\n  "
diff --git a/adex/.snapshots/dd4c9d1ee8f7b693c42e503acab1a0c0/1.json b/adex/.snapshots/dd4c9d1ee8f7b693c42e503acab1a0c0/1.json
@@ -0,0 +1 @@
+"\n    <!doctype html>\n    <html lang=\"\">\n      <head>\n        <script type=\"module\" src=\"/@vite/client\"></script>\n\n        <meta charset=\"UTF-8\" />\n        \n    <title></title>\n\n    \n    \n  \n      </head>\n      <body>\n        <div id=\"app\"><h2>About</h2></div>\n      <script type='module' src=\"/virtual:adex:client\"></script></body>\n    </html>\n  "
diff --git a/adex/.snapshots/dd4c9d1ee8f7b693c42e503acab1a0c0/2.json b/adex/.snapshots/dd4c9d1ee8f7b693c42e503acab1a0c0/2.json
@@ -0,0 +1 @@
+"import { createHotContext as __vite__createHotContext } from \"/@vite/client\";import.meta.hot = __vite__createHotContext(\"/@id/__x00__virtual:adex:global.css\");import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from \"/@vite/client\"\nconst __vite__id = \"\\u0000virtual:adex:global.css\"\nconst __vite__css = \"\"\n__vite__updateStyle(__vite__id, __vite__css)\nimport.meta.hot.accept()\nimport.meta.hot.prune(() => __vite__removeStyle(__vite__id))"
diff --git a/adex/package.json b/adex/package.json
@@ -59,7 +59,8 @@
     "runtime"
   ],
   "scripts": {
-    "next": "bumpp"
+    "next": "bumpp",
+    "test": "glob -c 'node --test' tests/**/*.spec.js"
   },
   "dependencies": {
     "@barelyhuman/tiny-use": "^0.0.2",
@@ -77,10 +78,13 @@
     "unifont": "^0.0.2"
   },
   "devDependencies": {
+    "@matteo.collina/snap": "^0.3.0",
     "@preact/preset-vite": "^2.8.2",
     "@types/node": "^20.14.10",
     "adex-adapter-node": "^0.0.17",
     "autoprefixer": "^10.4.19",
+    "glob": "^11.0.1",
+    "kolorist": "^1.8.0",
     "tailwindcss": "^3.4.4",
     "vite": "^5.3.1"
   },

diff --git a/adex/runtime/client.js b/adex/runtime/client.js
@@ -13,13 +13,6 @@ import 'virtual:adex:global.css'
 // @ts-expect-error injected by vite
 import { routes } from '~routes'
 
-const withComponents = routes.map(d => {
-  return {
-    ...d,
-    component: lazy(d.module),
-  }
-})
-
 function ComponentWrapper({ url = '' }) {
   return h(
     LocationProvider,
@@ -31,8 +24,8 @@ function ComponentWrapper({ url = '' }) {
       h(
         Router,
         {},
-        withComponents.map(d =>
-          h(Route, { path: d.routePath, component: d.component })
+        routes.map(d =>
+          h(Route, { path: d.routePath, component: lazy(d.module) })
         )
       )
     )
@@ -46,6 +39,7 @@ export const App = ({ url = '' }) => {
 async function hydrate() {
   preactHydrate(h(ComponentWrapper, {}), document.getElementById('app'))
 }
+
 if (typeof window !== 'undefined') {
   hydrate()
 }
diff --git a/adex/runtime/handler.js b/adex/runtime/handler.js
@@ -1,7 +1,7 @@
 import { CONSTANTS, emitToHooked } from 'adex/hook'
 import { prepareRequest, prepareResponse } from 'adex/http'
 import { toStatic } from 'adex/ssr'
-import { renderToString } from 'adex/utils/isomorphic'
+import { renderToStringAsync } from 'adex/utils/isomorphic'
 import { h } from 'preact'
 
 // @ts-expect-error injected by vite
@@ -60,9 +60,7 @@ export async function handler(req, res) {
     // @ts-expect-error
     global.location = new URL(req.url, 'http://localhost')
 
-    const rendered = await renderToString(
-      h(App, { url: [baseURL, search].filter(Boolean).join('?') })
-    )
+    const rendered = await renderToStringAsync(h(App, { url: req.url }), {})
 
     const htmlString = HTMLTemplate({
       metas,
@@ -73,7 +71,7 @@ export async function handler(req, res) {
       routeParams: Buffer.from(JSON.stringify(routeParams), 'utf8').toString(
         'base64'
       ),
-      body: rendered.html,
+      body: rendered,
     })
     const modifiableContext = {
       req: req,

diff --git a/adex/src/head.d.ts b/adex/src/head.d.ts
@@ -1,4 +1,4 @@
-export type {
+export {
   useHead,
   useLang,
   useLink,

diff --git a/adex/src/utils/isomorphic.js b/adex/src/utils/isomorphic.js
@@ -1,2 +1,2 @@
 export { parse as pathToRegex } from 'regexparam'
-export { prerender as renderToString } from 'preact-iso'
+export { renderToStringAsync } from 'preact-render-to-string'
diff --git a/adex/src/vite.js b/adex/src/vite.js
@@ -61,6 +61,71 @@ export function adex({
       'virtual:adex:handler',
       readFileSync(join(__dirname, '../runtime/handler.js'), 'utf8')
     ),
+    createVirtualModule(
+      'virtual:adex:server',
+      `import { createServer } from '${adapterMap[adapter]}'
+      import { dirname, join } from 'node:path'
+      import { fileURLToPath } from 'node:url'
+      import { existsSync, readFileSync } from 'node:fs'
+      import { env } from 'adex/env'
+
+      import 'virtual:adex:font.css'
+      import 'virtual:adex:global.css'
+
+      const __dirname = dirname(fileURLToPath(import.meta.url))
+
+      const PORT = parseInt(env.get('PORT', '3000'), 10)
+      const HOST = env.get('HOST', 'localhost')
+
+      const paths = {
+        assets: join(__dirname, './assets'),
+        islands: join(__dirname, './islands'),
+        client: join(__dirname, '../client'),
+      }
+
+      function getServerManifest() {
+        const manifestPath = join(__dirname, 'manifest.json')
+        if (existsSync(manifestPath)) {
+          const manifestFile = readFileSync(manifestPath, 'utf8')
+          return parseManifest(manifestFile)
+        }
+        return {}
+      }
+
+      function getClientManifest() {
+        const manifestPath = join(__dirname, '../client/manifest.json')
+        if (existsSync(manifestPath)) {
+          const manifestFile = readFileSync(manifestPath, 'utf8')
+          return parseManifest(manifestFile)
+        }
+        return {}
+      }
+
+      function parseManifest(manifestString) {
+        try {
+          const manifestJSON = JSON.parse(manifestString)
+          return manifestJSON
+        } catch (err) {
+          return {}
+        }
+      }
+
+      const server = createServer({
+        port: PORT,
+        host: HOST,
+        adex:{
+          manifests:{server:getServerManifest(),client:getClientManifest()},
+          paths,
+        }
+      })
+
+      if ('run' in server) {
+        server.run()
+      }
+
+      export default server.fetch
+      `
+    ),
     addFontsPlugin(fonts),
     adexDevServer({ islands }),
     adexBuildPrep({ islands }),
@@ -176,7 +241,7 @@ function adexIslandsBuilder() {
         // if being imported by the client, don't send
         // back the transformed server code, send the
         // original component
-        if (!viteEnv.ssr) return
+        if (!viteEnv?.ssr) return
 
         const islands = findIslands(readSourceFile(id), {
           isFunctionIsland: node =>
@@ -655,7 +720,7 @@ function adexGuards() {
 
         // ignore usage of `process.env` in `adex/env`
         const envLoadId = await this.resolve('adex/env')
-        if (id === envLoadId.id) return
+        if (id === envLoadId?.id) return
 
         if (code.includes('process.env')) {
           this.error(

diff --git a/adex/tests/fixtures/minimal-tailwind/jsconfig.json b/adex/tests/fixtures/minimal-tailwind/jsconfig.json
@@ -0,0 +1,6 @@
+{
+    "compilerOptions":{
+        "jsx":"react-jsx",
+        "jsxImportSource": "preact"
+    }
+}
diff --git a/adex/tests/fixtures/minimal-tailwind/package.json b/adex/tests/fixtures/minimal-tailwind/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "minimal-tailwind",
+  "type": "module",
+  "dependencies": {
+    "@preact/preset-vite": "catalog:",
+    "adex": "workspace:*",
+    "preact": "catalog:"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.20",
+    "tailwindcss": "^3",
+    "vite": "^5.4.8"
+  }
+}
diff --git a/adex/tests/fixtures/minimal-tailwind/postcss.config.js b/adex/tests/fixtures/minimal-tailwind/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/adex/tests/fixtures/minimal-tailwind/src/global.css b/adex/tests/fixtures/minimal-tailwind/src/global.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/adex/tests/fixtures/minimal-tailwind/src/pages/about.jsx b/adex/tests/fixtures/minimal-tailwind/src/pages/about.jsx
@@ -0,0 +1,3 @@
+export default function AboutPage() {
+  return <h2>About</h2>
+}
diff --git a/adex/tests/fixtures/minimal-tailwind/src/pages/index.jsx b/adex/tests/fixtures/minimal-tailwind/src/pages/index.jsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1 class="text-red-500">Hello World</h1>
+}
diff --git a/adex/tests/fixtures/minimal-tailwind/tailwind.config.js b/adex/tests/fixtures/minimal-tailwind/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/pages/**/*.{tsx,jsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/adex/tests/fixtures/minimal-tailwind/vite.config.js b/adex/tests/fixtures/minimal-tailwind/vite.config.js
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import { adex } from "adex"
+import preact from "@preact/preset-vite"
+
+export default defineConfig({
+  plugins: [
+    adex({
+      islands: false,
+      ssr: true,
+    }),
+    preact(),
+  ],
+})
diff --git a/adex/tests/fixtures/minimal/jsconfig.json b/adex/tests/fixtures/minimal/jsconfig.json
@@ -0,0 +1,6 @@
+{
+    "compilerOptions":{
+        "jsx":"react-jsx",
+        "jsxImportSource": "preact"
+    }
+}
diff --git a/adex/tests/fixtures/minimal/package.json b/adex/tests/fixtures/minimal/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "minimal",
+  "type": "module",
+  "dependencies": {
+    "adex": "workspace:*",
+    "preact": "catalog:",
+    "@preact/preset-vite": "catalog:"
+  },
+
+    "devDependencies": {
+      "vite": "^5.4.8"
+    }
+
+}
diff --git a/adex/tests/fixtures/minimal/src/pages/about.jsx b/adex/tests/fixtures/minimal/src/pages/about.jsx
@@ -0,0 +1,3 @@
+export default function AboutPage() {
+  return <h2>About</h2>
+}
diff --git a/adex/tests/fixtures/minimal/src/pages/index.jsx b/adex/tests/fixtures/minimal/src/pages/index.jsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>Hello World</h1>
+}
diff --git a/adex/tests/fixtures/minimal/vite.config.js b/adex/tests/fixtures/minimal/vite.config.js
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import { adex } from "adex"
+import preact from "@preact/preset-vite"
+
+export default defineConfig({
+  plugins: [
+    adex({
+      islands: false,
+      ssr: true,
+    }),
+    preact(),
+  ],
+})
diff --git a/adex/tests/minimal-tailwind.spec.js b/adex/tests/minimal-tailwind.spec.js
@@ -0,0 +1,37 @@
+import Snap from '@matteo.collina/snap'
+import { after, before, describe, it } from 'node:test'
+import assert, { deepEqual } from 'node:assert'
+
+import { devServerURL, launchDemoDevServer } from './utils.js'
+const snap = Snap(import.meta.url)
+
+describe('devMode ssr minimal with styles', async () => {
+  let devServerProc
+  before(async () => {
+    devServerProc = await launchDemoDevServer('tests/fixtures/minimal-tailwind')
+  })
+  after(async () => {
+    devServerProc.kill()
+  })
+
+  await it('gives a non-static ssr response', async ctx => {
+    const response = await fetch(devServerURL).then(d => d.text())
+    const snapshot = await snap(response)
+    deepEqual(response, snapshot)
+  })
+
+  await it('gives a static SSR response', async ctx => {
+    const response2 = await fetch(new URL('/about', devServerURL)).then(d =>
+      d.text()
+    )
+    const snapshot = await snap(response2)
+    deepEqual(response2, snapshot)
+  })
+
+  await it('has styles', async ctx => {
+    const response = await fetch(
+      new URL('/virtual:adex:global.css', devServerURL)
+    ).then(d => d.text())
+    assert.ok(response.includes('.text-red-500'))
+  })
+})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		"\n <!doctype html>\n <html lang=\"\">\n <head>\n <script type=\"module\" src=\"/@vite/client\"></script>\n\n <meta charset=\"UTF-8\" />\n \n <title></title>\n\n \n \n \n </head>\n <body>\n <div id=\"app\"><h1 class=\"text-red-500\">Hello World</h1></div>\n <script type='module' src=\"/virtual:adex:client\"></script></body>\n </html>\n "
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		"import { createHotContext as __vite__createHotContext } from \"/@vite/client\";import.meta.hot = __vite__createHotContext(\"/@id/__x00__virtual:adex:global.css\");import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from \"/@vite/client\"\nconst __vite__id = \"\\u0000virtual:adex:global.css\"\nconst __vite__css = \"\"\n__vite__updateStyle(__vite__id, __vite__css)\nimport.meta.hot.accept()\nimport.meta.hot.prune(() => __vite__removeStyle(__vite__id))"