@knowark/componarkjs 1.13.4 → 1.14.0

package/lib/components/list/components/list.test.js

@@ -1,264 +1,395 @@
+import { it } from 'node:test';
+import assert from 'node:assert/strict';
 import './list.js'
 
-describe('List', () => {
-  let container = null
+let container = null
 
-  beforeEach(() => {
-    container = document.createElement('div')
-    document.body.appendChild(container)
-  })
+const setup = () => {
+  document.body.innerHTML = '';
+  container = document.createElement('div')
+  document.body.appendChild(container)
+};
 
-  afterEach(() => {
-    container.remove()
-    container = null
-  })
+it('can be instantiated', () => {
+  setup();
+  container.innerHTML = `
+  <ark-list></ark-list>
+  `
 
-  it('can be instantiated', () => {
-    container.innerHTML = `
-    <ark-list></ark-list>
-    `
+  const list = container.querySelector('ark-list')
+  assert.deepStrictEqual(list, list.init())
+})
 
-    const list = container.querySelector('ark-list')
-    expect(list).toEqual(list.init())
-  })
+it('can be instantiated with items', async () => {
+  setup();
+  container.innerHTML = `
+  <ark-list></ark-list>
+  `
 
-  it('can be instantiated with items', async () => {
-    container.innerHTML = `
-    <ark-list></ark-list>
-    `
+  const list = container.querySelector('ark-list')
+  list.source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+  list.render()
 
-    const list = container.querySelector('ark-list')
-    list.source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
-    list.render()
+  const items = list.selectAll('ark-list-item')
 
-    const items = list.selectAll('ark-list-item')
+  assert.deepStrictEqual(items.length, 4)
+  assert.deepStrictEqual(items[0].textContent.trim(), 'Colombia')
+  assert.deepStrictEqual(items[1].textContent.trim(), 'Uruguay')
+  assert.deepStrictEqual(items[2].textContent.trim(), 'Brasil')
+  assert.deepStrictEqual(items[3].textContent.trim(), 'Perú')
+})
 
-    expect(items.length).toEqual(4)
-    expect(items[0].textContent.trim()).toEqual('Colombia')
-    expect(items[1].textContent.trim()).toEqual('Uruguay')
-    expect(items[2].textContent.trim()).toEqual('Brasil')
-    expect(items[3].textContent.trim()).toEqual('Perú')
+it('can be instantiated with items click-disabled', () => {
+  setup();
+  container.innerHTML = `
+  <ark-list click-disabled></ark-list
+  `
+
+  const list = container.querySelector('ark-list')
+  list.source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+  list.render()
+  const items = list.selectAll('ark-list-item')
+
+  assert.deepStrictEqual(items.length, 4)
+  assert.deepStrictEqual(items[0].textContent.trim(), 'Colombia')
+  assert.deepStrictEqual(items[1].textContent.trim(), 'Uruguay')
+  assert.deepStrictEqual(items[2].textContent.trim(), 'Brasil')
+  assert.deepStrictEqual(items[3].textContent.trim(), 'Perú')
+
+  list.addEventListener('list-selected', event => {
+    assert.strictEqual(true, false) // never reached
   })
+  items[0].click()
+})
 
-  it('can be instantiated with items click-disabled', () => {
-    expect.assertions(5)
-    container.innerHTML = `
-    <ark-list click-disabled></ark-list
-    `
-
-    const list = container.querySelector('ark-list')
-    list.source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
-    list.render()
-    const items = list.selectAll('ark-list-item')
-
-    expect(items.length).toEqual(4)
-    expect(items[0].textContent.trim()).toEqual('Colombia')
-    expect(items[1].textContent.trim()).toEqual('Uruguay')
-    expect(items[2].textContent.trim()).toEqual('Brasil')
-    expect(items[3].textContent.trim()).toEqual('Perú')
-
-    list.addEventListener('list-selected', event => {
-      expect(true).toBe(false) // never reached
-    })
-    items[0].click()
-  })
+it('can delete', async () => {
+  setup();
+  container.innerHTML = `
+  <ark-list click-disabled></ark-list
+  `
+
+  const list = container.querySelector('ark-list')
+  list.source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+  list.render()
+
+  list.delete(1)
+  let items = list.selectAll('ark-list-item')
+  assert.deepStrictEqual(items.length, 3)
+  assert.deepStrictEqual(items[1].textContent.trim(), 'Brasil')
+
+  list.delete(0, 2)
+  items = list.selectAll('ark-list-item')
+  assert.deepStrictEqual(items.length, 1)
+  assert.deepStrictEqual(items[0].textContent.trim(), 'Perú')
+})
 
-  it('can delete', async () => {
-    container.innerHTML = `
-    <ark-list click-disabled></ark-list
-    `
+it('can select an item when it is clicked', async () => {
+  setup()
+  container.innerHTML = `
+  <ark-list></ark-list
+  `
 
-    const list = container.querySelector('ark-list')
-    list.source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
-    list.render()
+  const list = container.querySelector('ark-list')
+  list.source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+  list.render()
 
-    list.delete(1)
-    let items = list.selectAll('ark-list-item')
-    expect(items.length).toEqual(3)
-    expect(items[1].textContent.trim()).toEqual('Brasil')
+  const items = list.selectAll('ark-list-item')
+  assert.deepStrictEqual(items.length, 4)
 
-    list.delete(0, 2)
-    items = list.selectAll('ark-list-item')
-    expect(items.length).toEqual(1)
-    expect(items[0].textContent.trim()).toEqual('Perú')
+  const selected = new Promise((resolve) => {
+    list.addEventListener('list-selected', resolve, { once: true })
   })
 
-  it('can select an item when it is clicked', (done) => {
-    expect.assertions(2)
-    container.innerHTML = `
-    <ark-list></ark-list
-    `
+  items[2].click()
+  const event = await selected
+  assert.deepStrictEqual(event.detail.data, 'Brasil')
+})
 
-    const list = container.querySelector('ark-list')
-    list.source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
-    list.render()
+it('can be declaratively instantiated with JSON source', async () => {
+  setup();
+  const source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
 
-    const items = list.selectAll('ark-list-item')
-    expect(items.length).toEqual(4)
+  container.innerHTML = `
+  <ark-list>
+    <data>${JSON.stringify(source)}</data>
+  </ark-list>
+  `
 
-    list.addEventListener('list-selected', event => {
-      expect(event.detail.data).toEqual('Brasil')
-      done()
-    })
+  const list = container.querySelector('ark-list')
 
-    items[2].click()
-  })
+  const items = list.selectAll('ark-list-item')
 
-  it('can be declaratively instantiated with JSON source', async () => {
-    const source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+  assert.deepStrictEqual(items.length, 4)
+  assert.deepStrictEqual(items[0].textContent.trim(), 'Colombia')
+  assert.deepStrictEqual(items[1].textContent.trim(), 'Uruguay')
+  assert.deepStrictEqual(items[2].textContent.trim(), 'Brasil')
+  assert.deepStrictEqual(items[3].textContent.trim(), 'Perú')
+})
 
-    container.innerHTML = `
-    <ark-list>
-      <data>${JSON.stringify(source)}</data>
-    </ark-list>
-    `
+it('can be provided with a list item template', async () => {
+  setup();
+  const source = [
+    { name: 'Colombia', code: 'CO' },
+    { name: 'Uruguay', code: 'UY' },
+    { name: 'Brasil', code: 'BR' },
+    { name: 'Perú', code: 'PE' }
+  ]
+
+  container.innerHTML = `
+  <ark-list>
+    <data hidden>${JSON.stringify(source)}</data>
+    <template>
+      <dl>
+        <div>
+          <dt>Name</dt>
+          <dd>\${this.name}</dd>
+        </div>
+        <div>
+          <dt>Code</dt>
+          <dd>\${this.code}</dd>
+        </div>
+      </dl>
+    </template>
+  </ark-list>
+  `
+
+  const list = container.querySelector('ark-list')
+
+  const items = list.selectAll('ark-list-item')
+
+  assert.deepStrictEqual(items.length, 4)
+  assert.deepStrictEqual(
+    items[0].innerHTML.replace(/\s/g, ''),
+    '<dl><div><dt>Name</dt><dd>Colombia</dd></div>' +
+    '<div><dt>Code</dt><dd>CO</dd></div></dl>'
+  )
+  assert.deepStrictEqual(
+    items[1].innerHTML.replace(/\s/g, ''),
+    '<dl><div><dt>Name</dt><dd>Uruguay</dd></div>' +
+    '<div><dt>Code</dt><dd>UY</dd></div></dl>'
+  )
+  assert.deepStrictEqual(
+    items[2].innerHTML.replace(/\s/g, ''),
+    '<dl><div><dt>Name</dt><dd>Brasil</dd></div>' +
+    '<div><dt>Code</dt><dd>BR</dd></div></dl>'
+  )
+  assert.deepStrictEqual(
+    items[3].innerHTML.replace(/\s/g, ''),
+    '<dl><div><dt>Name</dt><dd>Perú</dd></div>' +
+    '<div><dt>Code</dt><dd>PE</dd></div></dl>'
+  )
+})
 
-    const list = container.querySelector('ark-list')
+it('can be render simple lists with an item template', async () => {
+  setup();
+  const source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+
+  container.innerHTML = `
+  <ark-list>
+    <data hidden>${JSON.stringify(source)}</data>
+    <template>
+      <span><strong>\${this}</strong></span>
+    </template>
+  </ark-list>
+  `
+
+  const list = container.querySelector('ark-list')
+
+  const items = list.selectAll('ark-list-item')
+
+  assert.deepStrictEqual(items.length, 4)
+  assert.deepStrictEqual(
+    items[0].innerHTML.replace(/\s/g, ''),
+    '<span><strong>Colombia</strong></span>'
+  )
+  assert.deepStrictEqual(
+    items[1].innerHTML.replace(/\s/g, ''),
+    '<span><strong>Uruguay</strong></span>'
+  )
+  assert.deepStrictEqual(
+    items[2].innerHTML.replace(/\s/g, ''),
+    '<span><strong>Brasil</strong></span>'
+  )
+  assert.deepStrictEqual(
+    items[3].innerHTML.replace(/\s/g, ''),
+    '<span><strong>Perú</strong></span>'
+  )
+})
 
-    const items = list.selectAll('ark-list-item')
+it('can be rendered again given a new array through init', async () => {
+  setup();
+  let source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+  container.innerHTML = `
+  <ark-list>
+    <data hidden>${JSON.stringify(source)}</data>
+    <template>
+      <span><strong>\${this}</strong></span>
+    </template>
+  </ark-list>
+  `
+  const list = container.querySelector('ark-list')
+  let items = list.selectAll('ark-list-item')
+  assert.deepStrictEqual(items.length, 4)
+  assert.deepStrictEqual(
+    items[0].innerHTML.replace(/\s/g, ''),
+    '<span><strong>Colombia</strong></span>'
+  )
+  assert.deepStrictEqual(
+    items[1].innerHTML.replace(/\s/g, ''),
+    '<span><strong>Uruguay</strong></span>'
+  )
+  assert.deepStrictEqual(
+    items[2].innerHTML.replace(/\s/g, ''),
+    '<span><strong>Brasil</strong></span>'
+  )
+  assert.deepStrictEqual(
+    items[3].innerHTML.replace(/\s/g, ''),
+    '<span><strong>Perú</strong></span>'
+  )
+
+  source = ['Ecuador', 'Panama', 'Venezuela', 'USA']
+  list.init({ source }).render()
+  items = list.selectAll('ark-list-item')
+
+  assert.deepStrictEqual(items.length, 4)
+  assert.deepStrictEqual(
+    items[0].innerHTML.replace(/\s/g, ''),
+    '<span><strong>Ecuador</strong></span>'
+  )
+  assert.deepStrictEqual(
+    items[1].innerHTML.replace(/\s/g, ''),
+    '<span><strong>Panama</strong></span>'
+  )
+  assert.deepStrictEqual(
+    items[2].innerHTML.replace(/\s/g, ''),
+    '<span><strong>Venezuela</strong></span>'
+  )
+  assert.deepStrictEqual(items[3].innerHTML.replace(/\s/g, ''), '<span><strong>USA</strong></span>')
+})
 
-    expect(items.length).toEqual(4)
-    expect(items[0].textContent.trim()).toEqual('Colombia')
-    expect(items[1].textContent.trim()).toEqual('Uruguay')
-    expect(items[2].textContent.trim()).toEqual('Brasil')
-    expect(items[3].textContent.trim()).toEqual('Perú')
+it('listens to delete events to remove its items', () => {
+  setup();
+  const source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+  container.innerHTML = `
+  <ark-list>
+    <data hidden>${JSON.stringify(source)}</data>
+    <template>
+      <span>
+        <strong>\${this}</strong></span>
+        <button data-\${this}>
+          DELETE
+        </button>
+    </template>
+  </ark-list>
+  `
+  const list = container.querySelector('ark-list')
+  let button = list.querySelector('[data-colombia]')
+
+  let items = list.selectAll('ark-list-item')
+  assert.deepStrictEqual(items.length, 4)
+
+  button.dispatchEvent(new CustomEvent('delete', { bubbles: true }))
+
+  button = list.querySelector('[data-colombia]')
+  items = list.selectAll('ark-list-item')
+
+  assert.deepStrictEqual(items.length, 3)
+  assert.strictEqual(button, null)
+})
+
+it('emits error when declarative source JSON is invalid', () => {
+  setup()
+  const list = document.createElement('ark-list')
+  list.innerHTML = `
+    <data>{ invalid json }</data>
+  `
+  let errorEvent = null
+  list.addEventListener('error', (event) => {
+    errorEvent = event
   })
 
-  it('can be provided with a list item template', async () => {
-    const source = [
-      { name: 'Colombia', code: 'CO' },
-      { name: 'Uruguay', code: 'UY' },
-      { name: 'Brasil', code: 'BR' },
-      { name: 'Perú', code: 'PE' }
-    ]
-
-    container.innerHTML = `
-    <ark-list>
-      <data hidden>${JSON.stringify(source)}</data>
-      <template>
-        <dl>
-          <div>
-            <dt>Name</dt>
-            <dd>\${this.name}</dd>
-          </div>
-          <div>
-            <dt>Code</dt>
-            <dd>\${this.code}</dd>
-          </div>
-        </dl>
-      </template>
-    </ark-list>
-    `
-
-    const list = container.querySelector('ark-list')
-
-    const items = list.selectAll('ark-list-item')
-
-    expect(items.length).toEqual(4)
-    expect(items[0].innerHTML.replace(/\s/g, '')).toEqual(
-      '<dl><div><dt>Name</dt><dd>Colombia</dd></div>' +
-      '<div><dt>Code</dt><dd>CO</dd></div></dl>')
-    expect(items[1].innerHTML.replace(/\s/g, '')).toEqual(
-      '<dl><div><dt>Name</dt><dd>Uruguay</dd></div>' +
-      '<div><dt>Code</dt><dd>UY</dd></div></dl>')
-    expect(items[2].innerHTML.replace(/\s/g, '')).toEqual(
-      '<dl><div><dt>Name</dt><dd>Brasil</dd></div>' +
-      '<div><dt>Code</dt><dd>BR</dd></div></dl>')
-    expect(items[3].innerHTML.replace(/\s/g, '')).toEqual(
-      '<dl><div><dt>Name</dt><dd>Perú</dd></div>' +
-      '<div><dt>Code</dt><dd>PE</dd></div></dl>')
+  list.render()
+
+  assert.ok(errorEvent)
+  assert.deepStrictEqual(list.selectAll('ark-list-item').length, 0)
+})
+
+it('emits error when template compilation fails', () => {
+  setup()
+  const list = document.createElement('ark-list')
+  list.innerHTML = `
+    <data>${JSON.stringify(['Colombia'])}</data>
+    <template>\${this</template>
+  `
+  let errorEvent = null
+  list.addEventListener('error', (event) => {
+    errorEvent = event
+  })
+
+  list.render()
+
+  assert.ok(errorEvent)
+  assert.deepStrictEqual(list.select('ark-list-item').innerHTML, '')
+})
+
+it('emits error when template evaluation fails', () => {
+  setup()
+  const list = document.createElement('ark-list')
+  list.innerHTML = `
+    <data>${JSON.stringify([{ name: 'Colombia' }])}</data>
+    <template>\${this.missing.name}</template>
+  `
+  let errorEvent = null
+  list.addEventListener('error', (event) => {
+    errorEvent = event
   })
 
-  it('can be render simple lists with an item template', async () => {
-    const source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
-
-    container.innerHTML = `
-    <ark-list>
-      <data hidden>${JSON.stringify(source)}</data>
-      <template>
-        <span><strong>\${this}</strong></span>
-      </template>
-    </ark-list>
-    `
-
-    const list = container.querySelector('ark-list')
-
-    const items = list.selectAll('ark-list-item')
-
-    expect(items.length).toEqual(4)
-    expect(items[0].innerHTML.replace(/\s/g, '')).toEqual(
-      '<span><strong>Colombia</strong></span>')
-    expect(items[1].innerHTML.replace(/\s/g, '')).toEqual(
-      '<span><strong>Uruguay</strong></span>')
-    expect(items[2].innerHTML.replace(/\s/g, '')).toEqual(
-      '<span><strong>Brasil</strong></span>')
-    expect(items[3].innerHTML.replace(/\s/g, '')).toEqual(
-      '<span><strong>Perú</strong></span>')
+  list.render()
+
+  assert.ok(errorEvent)
+  assert.deepStrictEqual(list.select('ark-list-item').innerHTML, '')
+})
+
+it('ignores selection events outside list items', () => {
+  setup()
+  container.innerHTML = `
+  <ark-list></ark-list>
+  `
+  const list = container.querySelector('ark-list')
+  list.source = ['Colombia']
+  list.render()
+
+  assert.doesNotThrow(() => {
+    list.dispatchEvent(new Event('click', { bubbles: true }))
   })
+})
 
-  it('can be rendered again given a new array through init', async () => {
-    let source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
-    container.innerHTML = `
-    <ark-list>
-      <data hidden>${JSON.stringify(source)}</data>
-      <template>
-        <span><strong>\${this}</strong></span>
-      </template>
-    </ark-list>
-    `
-    const list = container.querySelector('ark-list')
-    let items = list.selectAll('ark-list-item')
-    expect(items.length).toEqual(4)
-    expect(items[0].innerHTML.replace(/\s/g, '')).toEqual(
-      '<span><strong>Colombia</strong></span>')
-    expect(items[1].innerHTML.replace(/\s/g, '')).toEqual(
-      '<span><strong>Uruguay</strong></span>')
-    expect(items[2].innerHTML.replace(/\s/g, '')).toEqual(
-      '<span><strong>Brasil</strong></span>')
-    expect(items[3].innerHTML.replace(/\s/g, '')).toEqual(
-      '<span><strong>Perú</strong></span>')
-
-    source = ['Ecuador', 'Panama', 'Venezuela', 'USA']
-    list.init({ source }).render()
-    items = list.selectAll('ark-list-item')
-
-    expect(items.length).toEqual(4)
-    expect(items[0].innerHTML.replace(/\s/g, '')).toEqual(
-      '<span><strong>Ecuador</strong></span>')
-    expect(items[1].innerHTML.replace(/\s/g, '')).toEqual(
-      '<span><strong>Panama</strong></span>')
-    expect(items[2].innerHTML.replace(/\s/g, '')).toEqual(
-      '<span><strong>Venezuela</strong></span>')
-    expect(items[3].innerHTML.replace(/\s/g, '')).toEqual(
-      '<span><strong>USA</strong></span>')
+it('ignores delete events outside list items', () => {
+  setup()
+  container.innerHTML = `
+  <ark-list></ark-list>
+  `
+  const list = container.querySelector('ark-list')
+  list.source = ['Colombia']
+  list.render()
+
+  assert.doesNotThrow(() => {
+    list.dispatchEvent(new CustomEvent('delete', { bubbles: true }))
   })
+  assert.deepStrictEqual(list.selectAll('ark-list-item').length, 1)
+})
 
-  it('listens to delete events to remove its items', () => {
-    const source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
-    container.innerHTML = `
-    <ark-list>
-      <data hidden>${JSON.stringify(source)}</data>
-      <template>
-        <span>
-          <strong>\${this}</strong></span>
-          <button data-\${this}>
-            DELETE
-          </button>
-      </template>
-    </ark-list>
-    `
-    const list = container.querySelector('ark-list')
-    let button = list.querySelector('[data-colombia]')
-
-    let items = list.selectAll('ark-list-item')
-    expect(items.length).toEqual(4)
-
-    button.dispatchEvent(new CustomEvent('delete', { bubbles: true }))
-
-    button = list.querySelector('[data-colombia]')
-    items = list.selectAll('ark-list-item')
-
-    expect(items.length).toEqual(3)
-    expect(button).toBeNull()
+it('ignores deletions that are out of range', () => {
+  setup()
+  container.innerHTML = `
+  <ark-list></ark-list>
+  `
+  const list = container.querySelector('ark-list')
+  list.source = ['Colombia']
+  list.render()
+
+  assert.doesNotThrow(() => {
+    list.delete(10)
   })
+  assert.deepStrictEqual(list.selectAll('ark-list-item').length, 1)
 })