test: fix dom tests, run mount once

bunfig.toml

@@ -1,2 +1,2 @@
 [test]
-preload = "./happydom.js"
+preload = "./setup-happydom.js"

package.json

@@ -2,6 +2,7 @@
   "name": "nue",
   "version": "0.0.0",
   "license": "MIT",
+  "type": "module",
   "private": true,
   "workspaces": [
     "packages/*"
@@ -12,7 +13,9 @@
   },
   "jest": {
     "setupFilesAfterEnv": [
-      "jest-extended/all"
+      "jest-extended/all",
+      "<rootDir>/setup-jest.js",
+      "<rootDir>/setup-happydom.js"
     ]
   }
 }

packages/glow/package.json

@@ -17,5 +17,11 @@
   },
   "devDependencies": {
     "lightningcss": "^1.26.0"
+  },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "jest-extended/all",
+      "<rootDir>/../../setup-jest.js"
+    ]
   }
 }

packages/nuejs/package.json

@@ -21,5 +21,11 @@
   },
   "dependencies": {
     "htmlparser2": "^9.1.0"
+  },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "jest-extended/all",
+      "<rootDir>/../../setup-jest.js"
+    ]
   }
 }

packages/nuejs/src/browser/nue.js

@@ -270,7 +270,7 @@ export default function createApp(component, data={}, deps=[], $parent={}) {
     },
 
     append(to) {
-      const wrap = document.createElement('b')
+      const wrap = document.createElement('_')
       to.append(wrap)
       return self.mount(wrap)
     },

packages/nuekit/bunfig.toml

@@ -0,0 +1,2 @@
+[test]
+preload = "<rootDir>/../../setup-happydom.js"

packages/nuekit/package.json

@@ -32,5 +32,12 @@
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^14.12.3"
+  },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "jest-extended/all",
+      "<rootDir>/../../setup-jest.js",
+      "<rootDir>/../../happydom.js"
+    ]
   }
 }

packages/nuekit/src/browser/mount.js

@@ -60,5 +60,4 @@ export async function unmountAll() {
 addEventListener('route', mountAll)
 
 // initial page load
-addEventListener('DOMContentLoaded', mountAll)
-
+addEventListener('DOMContentLoaded', () => dispatchEvent(new Event('route')))

packages/nuekit/src/browser/view-transitions.js

@@ -203,11 +203,6 @@ if (is_browser) {
   })
 }
 
-addEventListener("DOMContentLoaded", () => {
-  dispatchEvent(new Event('route'))
-})
-
-
 
 /* -------- utilities ---------- */
 

packages/nuekit/test/page-router-test/index.html

@@ -1,10 +1,12 @@
 <main>
-  <nav>
-    <a href="/">Home</a>
-    <a href="/page">Page</a>
-  </nav>
+  <article>
+    <nav>
+      <a href="/">Home</a>
+      <a href="/page">Page</a>
+    </nav>
 
-  <h1>Home</h1>
+    <h1>Home</h1>
 
-  <app />
+    <app />
+  </article>
 </main>

packages/nuekit/test/page-router-test/page/index.html

@@ -1,9 +1,11 @@
 <main>
-  <nav>
-    <a href="/">Home</a>
-  </nav>
+  <article>
+    <nav>
+      <a href="/">Home</a>
+    </nav>
 
-  <h1>Page</h1>
+    <h1>Page</h1>
 
-  <component />
+    <component />
+  </article>
 </main>

packages/nuekit/test/page-router-test.js → packages/nuekit/test/page-router.test.js

@@ -1,17 +1,22 @@
-import * as path from 'node:path'
-import * as fs from 'node:fs/promises'
+import { join, relative, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { promises as fs } from 'node:fs'
 
 import { createKit } from '../src/nuekit.js'
 
+const dir = fileURLToPath(dirname(import.meta.url))
+const reldir = relative(process.cwd(), dir)
+
 // temporary directory
-const dist = path.join(__dirname, './page-router-test/.dist')
-const distDev = `${dist}/dev`
+const root = join(reldir, 'page-router-test')
+const dist = join(dir, 'page-router-test/.dist')
+const out = join(dist, 'dev')
 
 // setup and teardown
 beforeAll(async () => {
   await fs.rm(dist, { recursive: true, force: true })
 
-  const nue = await createKit({ root: './packages/nuekit/test/page-router-test' })
+  const nue = await createKit({ root })
   await nue.build()
 })
 
@@ -23,8 +28,8 @@ afterAll(async () => {
   await fs.rm(dist, { recursive: true, force: true })
 })
 
-function readFile(filePath) {
-  return fs.readFile(`${distDev}/${filePath}`)
+async function read(filePath) {
+  return await fs.readFile(join(out, filePath), 'utf-8')
 }
 
 function preparePage(html) {
@@ -35,7 +40,7 @@ function preparePage(html) {
   // We need to adjust paths for component files to import correctly later.
   components.content = components.content
     .split(' ')
-    .map(compPath => `${distDev}${compPath}`)
+    .map(compPath => `${out}${compPath}`)
     .join(' ')
 
   /**
@@ -52,7 +57,7 @@ function preparePage(html) {
 async function loadPage() {
   window.happyDOM.setURL('http://localhost:8080')
 
-  const html = (await readFile('./index.html')).toString()
+  const html = await read('index.html')
   const fragment = preparePage(html)
 
   document.replaceChildren(fragment.content.cloneNode(true))
@@ -93,7 +98,7 @@ test('renders "/" route and mount component', async () => {
   await loadPage()
 
   // importing scripts manually for side effects
-  await Promise.all([import(`${distDev}/@nue/mount.js`), import(`${distDev}/@nue/view-transitions.js`)])
+  await Promise.all([import(join(out, '@nue/mount.js')), import(join(out, '@nue/view-transitions.js'))])
 
   // imitating loaded page
   window.dispatchEvent(new Event('DOMContentLoaded'))
@@ -114,15 +119,15 @@ test('renders "/page" route and mount component when click in a link', async ()
   await loadPage()
 
   // importing scripts manually for side effects
-  await Promise.all([import(`${distDev}/@nue/mount.js`), import(`${distDev}/@nue/view-transitions.js`)])
+  await Promise.all([import(join(out, '@nue/mount.js')), import(join(out, '@nue/view-transitions.js'))])
 
   // imitating loaded page
   window.dispatchEvent(new Event('DOMContentLoaded'))
 
   const logSpy = jest.spyOn(console, 'log')
   // mocking window.fetch API
   jest.spyOn(window, 'fetch').mockImplementation(async () => {
-    const pageHtml = (await readFile('./page/index.html')).toString()
+    const pageHtml = await read('page/index.html')
     const pageFragment = preparePage(pageHtml)
 
     return Promise.resolve({

packages/nuemark/package.json

@@ -15,5 +15,11 @@
     "js-yaml": "^4.1.0",
     "marked": "^13.0.3",
     "nue-glow": "*"
+  },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "jest-extended/all",
+      "<rootDir>/../../setup-jest.js"
+    ]
   }
 }

setup-jest.js

@@ -0,0 +1,2 @@
+import { jest } from "@jest/globals"
+global.jest = jest