Merge pull request #507 from nobkd/domino-for-tests

test(nuejs-core): `for`-tests

Author: nobkd

packages/nuejs/test/client/test.css

@@ -112,7 +112,7 @@ button:active {
 
 /* grid */
 .grid {
-  grid-template-columns: repeat( auto-fit, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
   display: grid;
   gap: 2.2em;
 }
@@ -122,7 +122,6 @@ button:active {
   box-shadow: 1px 1px .3em #ddd;
   border-radius: 4px;
   padding: 2em;
-  max-width: 350px;
 }
 
 

packages/nuejs/test/compile.js

@@ -1,10 +1,27 @@
 import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'node:fs'
-import { join } from 'node:path'
+import { join, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 import { parse } from '../src/compile.js'
-import { getDirname } from './test-utils.js'
 
-const srcdir = getDirname(import.meta.url)
+const genIndex = (name) => `
+<meta charset="utf-8"> 
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="../../client/test.css">
+
+<h1>${name}</h1>
+
+<div id="container"></div>
+
+<script type="module">
+import createApp from '../../../src/browser/nue.js';
+import { lib } from './index.js';
+const [App, ...deps] = lib
+createApp(App, {}, deps).mount(container)
+</script>
+`
+
+const srcdir = dirname(fileURLToPath(import.meta.url))
 
 // Ensure the dist directory exists
 const distDir = join(srcdir, 'dist')
@@ -35,5 +52,7 @@ for (const { testPath, name } of testComponentDirs) {
   const output = `export const lib = [${components.join(',')}]`
   writeFileSync(outputPath, output)
 
+  writeFileSync(join(outputDir, 'index.html'), genIndex(name))
+
   console.log(`Compiled ${name}: ${outputPath}`)
 }

packages/nuejs/test/test-clicks/index.html

@@ -0,0 +1,85 @@
+<main class="grid">
+  <test-for-array class="card" />
+  <test-for-array-unpack class="card" />
+  <test-for-array-numbered class="card" />
+  <test-for-object-array class="card" />
+  <test-for-array-replace class="card" />
+  <test-for-array-funcs class="card" />
+</main>
+
+<div @name="test-for-array">
+  <ul>
+    <li :for="e in items">{e}</li>
+  </ul>
+
+  <script>
+    items = ['hello', 'world', 42]
+  </script>
+</div>
+
+<div @name="test-for-array-unpack">
+  <ul>
+    <li :for="[e] in items">{e}</li>
+  </ul>
+
+  <script>
+    items = [['hello', 'world'], [42]]
+  </script>
+</div>
+
+<div @name="test-for-array-numbered">
+  <ul>
+    <li :for="e, i in items">{i}: {e}</li>
+  </ul>
+
+  <script>
+    items = ['hello', 'world', 42]
+  </script>
+</div>
+
+
+<div @name="test-for-object-array">
+  <ul>
+    <li :for="e in items">{e.k}</li>
+  </ul>
+
+  <script>
+    items = [
+      {k: 'hello'},
+      {k: 'world'},
+      {k: 42},
+    ]
+  </script>
+</div>
+
+<div @name="test-for-array-replace">
+  <button @click="items[0] == 'hello' ? items = ['world'] : items = ['hello']">Change</button>
+  <ul>
+    <li :for="e in items">{e}</li>
+  </ul>
+
+  <script>
+    items = ['hello']
+  </script>
+</div>
+
+<div @name="test-for-array-funcs">
+  <div>
+    <button ref="push" @click="items.push(42)">Push 42</button>
+    <button ref="pop" @click="items.pop()">Pop</button>
+    <button ref="unshift" @click="items.unshift('answer')">Unshift 'answer'</button>
+    <button ref="shift" @click="items.shift()">Shift</button>
+    <button ref="reverse" @click="items.reverse()">Reverse</button>
+    <button ref="remove" @click="items.remove('hello')">Remove 'hello'</button>
+    <button ref="splice" @click="items.splice(1, 1)">Splice second</button>
+    <button ref="sort" @click="items.sort()">Sort</button>
+  </div>
+
+  <ul>
+    <li :for="e in items">{e}</li>
+  </ul>
+
+  <script>
+    items = ['hello', 'world']
+  </script>
+</div>

packages/nuejs/test/test-fors/component.dhtml

@@ -0,0 +1,84 @@
+import { mkConfigBase, mountTestComponent } from '../test-utils.js'
+
+const mkConfig = mkConfigBase(import.meta.url)
+function arr(parent) { return Array.from(parent.querySelectorAll('li')).map(e => e.textContent) }
+
+
+describe('Nue.js Fors Tests', () => {
+  test('Array', async () => {
+    const { app, cleanup } = await mountTestComponent(mkConfig('test-for-array'))
+
+    expect(arr(app.$el)).toEqual(['hello', 'world', '42'])
+
+    cleanup()
+  })
+
+  test('Unpacking Array', async () => {
+    const { app, cleanup } = await mountTestComponent(mkConfig('test-for-array-unpack'))
+
+    expect(arr(app.$el)).toEqual(['hello', '42'])
+
+    cleanup()
+  })
+
+  test('Numbered Array', async () => {
+    const { app, cleanup } = await mountTestComponent(mkConfig('test-for-array-numbered'))
+
+    expect(arr(app.$el)).toEqual(['0: hello', '1: world', '2: 42'])
+
+    cleanup()
+  })
+
+  test('Object Array', async () => {
+    const { app, cleanup } = await mountTestComponent(mkConfig('test-for-object-array'))
+
+    expect(arr(app.$el)).toEqual(['hello', 'world', '42'])
+
+    cleanup()
+  })
+
+  test('Array replaced', async () => {
+    const { app, cleanup } = await mountTestComponent(mkConfig('test-for-array-replace'))
+
+    expect(arr(app.$el)).toEqual(['hello'])
+    app.$el.querySelector('button').click()
+    expect(arr(app.$el)).toEqual(['world'])
+
+    cleanup()
+  })
+
+  test('Array funcs', async () => {
+    const { app, cleanup } = await mountTestComponent(mkConfig('test-for-array-funcs'))
+
+    expect(arr(app.$el)).toEqual(['hello', 'world'])
+
+    app.$refs.push.click()
+    app.$refs.push.click()
+    expect(arr(app.$el)).toEqual(['hello', 'world', '42', '42'])
+
+    app.$refs.pop.click()
+    expect(arr(app.$el)).toEqual(['hello', 'world', '42'])
+
+    app.$refs.unshift.click()
+    app.$refs.unshift.click()
+    expect(arr(app.$el)).toEqual(['answer', 'answer', 'hello', 'world', '42'])
+
+    app.$refs.shift.click()
+    expect(arr(app.$el)).toEqual(['answer', 'hello', 'world', '42'])
+
+    app.$refs.reverse.click()
+    expect(arr(app.$el)).toEqual(['42', 'world', 'hello', 'answer'])
+
+    app.$refs.remove.click()
+    expect(arr(app.$el)).toEqual(['42', 'world', 'answer'])
+
+    app.$refs.splice.click()
+    expect(arr(app.$el)).toEqual(['42', 'answer'])
+
+    app.$refs.push.click() // additional 42 at end for sort
+    app.$refs.sort.click()
+    expect(arr(app.$el)).toEqual(['42', '42', 'answer'])
+
+    cleanup()
+  })
+})

packages/nuejs/test/test-fors/fors.test.js

@@ -7,15 +7,6 @@ import { createWindow } from 'domino'
 import { parse } from '../src/compile.js'
 
 
-/**
- * Get directory from url
- * @param {Url} url - Pass `import.meta.url`
- * @returns {string} Directory path containing the current file
- */
-export function getDirname(url) {
-  return dirname(fileURLToPath(url))
-}
-
 /**
  * Get directory path from url and return function for usage with {@linkcode mountTestComponent}
  * @param {Url} url - `import.meta.url` to get the test directory
@@ -25,7 +16,7 @@ export function mkConfigBase(url) {
    * @param {string} componentName
    * @param {Object?} data
    */
-  return (componentName, data) => ({ testPath: getDirname(url), componentName, data })
+  return (componentName, data) => ({ testPath: dirname(fileURLToPath(url)), componentName, data })
 }