@knowark/componarkjs 1.13.3 → 1.14.0

package/lib/base/utils/slots.test.js

@@ -1,52 +1,52 @@
+import { it } from 'node:test';
+import assert from 'node:assert/strict';
 import { getSlots } from './slots.js'
 
-describe('Slots', () => {
-  it('can be rendered without content', () => {
-    const item = document.createElement('div')
-    const slots = getSlots(item)
-    expect(!slots.general.length).toBeTruthy()
-  })
+it('can be rendered without content', () => {
+  const item = document.createElement('div')
+  const slots = getSlots(item)
+  assert.ok(!slots.general.length)
+})
 
-  it('can be rendered with content', () => {
-    const item = document.createElement('div')
+it('can be rendered with content', () => {
+  const item = document.createElement('div')
 
-    const obj = document.createElement('div')
+  const obj = document.createElement('div')
 
-    item.appendChild(obj)
-    const slots = getSlots(item)
-    expect(slots.general.length).toBeTruthy()
-  })
+  item.appendChild(obj)
+  const slots = getSlots(item)
+  assert.ok(slots.general.length)
+})
 
-  it('can be rendered with value slot', () => {
-    const item = document.createElement('div')
+it('can be rendered with value slot', () => {
+  const item = document.createElement('div')
 
-    const obj = document.createElement('div')
-    const att = document.createAttribute('slot')
-    att.value = 'mySlot'
-    obj.setAttributeNode(att)
+  const obj = document.createElement('div')
+  const att = document.createAttribute('slot')
+  att.value = 'mySlot'
+  obj.setAttributeNode(att)
 
-    item.appendChild(obj)
-    const slots = getSlots(item)
-    expect(slots.mySlot.length).toBeTruthy()
-  })
+  item.appendChild(obj)
+  const slots = getSlots(item)
+  assert.ok(slots.mySlot.length)
+})
 
-  it('can be rendered with multiple values slot', () => {
-    const item = document.createElement('div')
+it('can be rendered with multiple values slot', () => {
+  const item = document.createElement('div')
 
-    const obj = document.createElement('div')
-    const att = document.createAttribute('slot')
-    att.value = 'mySlot'
-    obj.setAttributeNode(att)
+  const obj = document.createElement('div')
+  const att = document.createAttribute('slot')
+  att.value = 'mySlot'
+  obj.setAttributeNode(att)
 
-    item.appendChild(obj)
+  item.appendChild(obj)
 
-    const obj2 = document.createElement('div')
-    const att2 = document.createAttribute('slot')
-    att2.value = 'mySlot'
-    obj2.setAttributeNode(att2)
+  const obj2 = document.createElement('div')
+  const att2 = document.createAttribute('slot')
+  att2.value = 'mySlot'
+  obj2.setAttributeNode(att2)
 
-    item.appendChild(obj2)
-    const slots = getSlots(item)
-    expect(slots.mySlot.length).toBeTruthy()
-  })
+  item.appendChild(obj2)
+  const slots = getSlots(item)
+  assert.ok(slots.mySlot.length)
 })

package/lib/base/utils/uuid.test.js

@@ -1,19 +1,19 @@
+import { it } from 'node:test';
+import assert from 'node:assert/strict';
 import { uuid } from './uuid.js'
 
-describe('Slots', () => {
-  it('groups separated by dashes', () => {
-    const id = uuid()
-    expect(id.split('-').length === 5).toBeTruthy()
-  })
-
-  it('total digits == 32', () => {
-    const id = uuid()
+it('groups separated by dashes', () => {
+  const id = uuid()
+  assert.ok(id.split('-').length === 5)
+})
 
-    let digits = ''
-    id.split('-').forEach(element => {
-      digits += element
-    })
+it('total digits == 32', () => {
+  const id = uuid()
 
-    expect(digits.length === 32).toBeTruthy()
+  let digits = ''
+  id.split('-').forEach(element => {
+    digits += element
   })
+
+  assert.ok(digits.length === 32)
 })

package/lib/components/audio/components/audio.js

@@ -1,4 +1,4 @@
-import { Component } from '../../../base/component/index.js'
+import { Component } from '#base/index.js'
 import styles from '../styles/index.js'
 
 const tag = 'ark-audio'
@@ -8,6 +8,7 @@ export class Audio extends Component {
     this.dataURL = null
     this.timerId = null
     this.recorder = null
+    this.objectURL = null
     this.global = context.global || window
 
     return super.init()
@@ -70,6 +71,8 @@ export class Audio extends Component {
   }
 
   reset () {
+    clearInterval(this.timerId)
+    this._revokeObjectURL()
     this.status = 'idle'
     this.render()
     this.dataURL = null
@@ -77,6 +80,13 @@ export class Audio extends Component {
     this.recorder = null
   }
 
+  disconnectedCallback () {
+    clearInterval(this.timerId)
+    this.recorder?.stream?.getTracks?.().forEach(track => track.stop())
+    this._revokeObjectURL()
+    super.disconnectedCallback()
+  }
+
   _time () {
     let count = 0
     return setInterval(() => {
@@ -93,11 +103,20 @@ export class Audio extends Component {
 
   /** @param {any} event */
   _onData (event) {
-    const audio = this.select('.ark-audio__audio')
-    audio.src = this.global.URL.createObjectURL(event.data)
+    const audio = /** @type {HTMLAudioElement} */ (
+      this.querySelector('.ark-audio__audio'))
+    this._revokeObjectURL()
+    this.objectURL = this.global.URL.createObjectURL(event.data)
+    audio.src = this.objectURL
     const reader = new this.global.FileReader()
     reader.readAsDataURL(event.data)
     reader.onloadend = () => { this.dataURL = reader.result }
   }
+
+  _revokeObjectURL () {
+    if (!this.objectURL) return
+    this.global.URL.revokeObjectURL?.(this.objectURL)
+    this.objectURL = null
+  }
 }
 Component.define(tag, Audio, styles)

package/lib/components/audio/components/audio.test.js

@@ -1,8 +1,7 @@
-import { jest } from '@jest/globals'
+import { it, mock } from 'node:test'
+import assert from 'node:assert/strict'
 import './audio.js'
 
-jest.useFakeTimers()
-
 const mockGlobal = {
   navigator: {
     mediaDevices: {
@@ -25,104 +24,135 @@ const mockGlobal = {
   URL: { createObjectURL: (data) => 'mock://data/url' }
 }
 
-describe('Audio', () => {
-  let container = null
-  beforeEach(() => {
-    container = document.createElement('div')
-    document.body.appendChild(container)
-  })
+const mockGlobalWithRevoke = {
+  ...mockGlobal,
+  URL: {
+    createObjectURL: (data) => 'mock://data/url',
+    revokeObjectURL: mock.fn()
+  }
+}
 
-  afterEach(() => {
-    container.remove()
-    container = null
-  })
+let container = null
 
-  it('can be instantiated', () => {
-    container.innerHTML = `
-      <ark-audio></ark-audio>
-    `
-    const audio = container.querySelector('ark-audio')
-    audio.init()
-    expect(audio).toBeTruthy()
+const setup = () => {
+  document.body.innerHTML = ''
+  mock.timers.reset()
+  mock.timers.enable({
+    apis: ['setInterval', 'setTimeout']
   })
+  container = document.createElement('div')
+  document.body.appendChild(container)
+}
 
-  it('can start recording', async () => {
-    container.innerHTML = `
-      <ark-audio></ark-audio>
-    `
-    const audio = container.querySelector('ark-audio')
-    audio.init({ global: mockGlobal })
-
-    expect(audio.status).toEqual('idle')
-    await audio.start(new Event('click'))
-    expect(audio.status).toEqual('recording')
-    expect(audio.recorder).toBeTruthy()
-  })
+it('can be instantiated', () => {
+  setup()
+  container.innerHTML = `
+    <ark-audio></ark-audio>
+  `
+  const audio = container.querySelector('ark-audio')
+  audio.init()
+  assert.ok(audio)
+})
 
-  it('can stop recording', async () => {
-    container.innerHTML = `
-      <ark-audio></ark-audio>
-    `
-    const audio = container.querySelector('ark-audio')
-    audio.init({ global: mockGlobal })
-
-    expect(audio.status).toEqual('idle')
-    await audio.start(new Event('click'))
-    expect(audio.status).toEqual('recording')
-    audio.stop(new Event('click'))
-    expect(audio.status).toEqual('done')
-  })
+it('can start recording', async () => {
+  setup()
+  container.innerHTML = `
+    <ark-audio></ark-audio>
+  `
+  const audio = container.querySelector('ark-audio')
+  audio.init({ global: mockGlobal })
+
+  assert.deepStrictEqual(audio.status, 'idle')
+  await audio.start(new Event('click'))
+  assert.deepStrictEqual(audio.status, 'recording')
+  assert.ok(audio.recorder)
+})
 
-  it('can reset recording', async () => {
-    container.innerHTML = `
-      <ark-audio></ark-audio>
-    `
-    const audio = container.querySelector('ark-audio')
-    audio.init({ global: mockGlobal })
-
-    expect(audio.status).toEqual('idle')
-    await audio.start(new Event('click'))
-    expect(audio.status).toEqual('recording')
-    audio.stop(new Event('click'))
-    expect(audio.status).toEqual('done')
-    audio.reset(new Event('click'))
-    expect(audio.status).toEqual('idle')
-    expect(audio.recorder).toBeNull()
-  })
+it('can stop recording', async () => {
+  setup()
+  container.innerHTML = `
+    <ark-audio></ark-audio>
+  `
+  const audio = container.querySelector('ark-audio')
+  audio.init({ global: mockGlobal })
+
+  assert.deepStrictEqual(audio.status, 'idle')
+  await audio.start(new Event('click'))
+  assert.deepStrictEqual(audio.status, 'recording')
+  audio.stop(new Event('click'))
+  assert.deepStrictEqual(audio.status, 'done')
+})
 
-  it('counts the ellapsed time of the recording', async () => {
-    container.innerHTML = `
-      <ark-audio></ark-audio>
-    `
-    const audio = container.querySelector('ark-audio')
-    audio.init({ global: mockGlobal })
+it('can reset recording', async () => {
+  setup()
+  container.innerHTML = `
+    <ark-audio></ark-audio>
+  `
+  const audio = container.querySelector('ark-audio')
+  audio.init({ global: mockGlobal })
+
+  assert.deepStrictEqual(audio.status, 'idle')
+  await audio.start(new Event('click'))
+  assert.deepStrictEqual(audio.status, 'recording')
+  audio.stop(new Event('click'))
+  assert.deepStrictEqual(audio.status, 'done')
+  audio.reset(new Event('click'))
+  assert.deepStrictEqual(audio.status, 'idle')
+  assert.strictEqual(audio.recorder, null)
+})
 
-    await audio.start(new Event('click'))
-    jest.runOnlyPendingTimers()
+it('counts the ellapsed time of the recording', async () => {
+  setup()
+  container.innerHTML = `
+    <ark-audio></ark-audio>
+  `
+  const audio = container.querySelector('ark-audio')
+  audio.init({ global: mockGlobal })
+
+  await audio.start(new Event('click'))
+  mock.timers.tick(1000)
+
+  const timer = audio.select('.ark-audio__timer')
+  assert.deepStrictEqual(timer.textContent, '00:01')
+  mock.timers.tick(623000)
+  assert.deepStrictEqual(timer.textContent, '10:24')
+})
 
-    const timer = audio.select('.ark-audio__timer')
-    expect(timer.textContent).toEqual('00:01')
-    jest.advanceTimersByTime(623000)
-    expect(timer.textContent).toEqual('10:24')
-  })
+it('sets the dataURL (base64) property when stopped', async () => {
+  setup()
+  container.innerHTML = `
+    <ark-audio></ark-audio>
+  `
+  const audio = container.querySelector('ark-audio')
+  audio.init({ global: mockGlobal })
 
-  it('sets the dataURL (base64) property when stopped', async () => {
-    container.innerHTML = `
-      <ark-audio></ark-audio>
-    `
-    const audio = container.querySelector('ark-audio')
-    audio.init({ global: mockGlobal })
+  await audio.start(new Event('click'))
+  audio.stop(new Event('click'))
 
-    await audio.start(new Event('click'))
-    audio.stop(new Event('click'))
+  audio._onData({
+    data: new globalThis.Blob(['Hello'], { type: 'text/plain' })
+  })
+  mock.timers.tick(1000)
 
-    audio._onData({
-      data: new globalThis.Blob(['Hello'], { type: 'text/plain' })
-    })
-    jest.runOnlyPendingTimers()
+  assert.deepStrictEqual(audio.dataURL, 'base64::data::result')
+  assert.deepStrictEqual(audio.querySelector('.ark-audio__audio').src, 'mock://data/url')
+})
 
-    expect(audio.dataURL).toEqual('base64::data::result')
-    expect(audio.querySelector('.ark-audio__audio').src).toEqual(
-      'mock://data/url')
-  })
+it('revokes the previously created object URL', () => {
+  setup()
+  container.innerHTML = `
+    <ark-audio></ark-audio>
+  `
+  const audio = container.querySelector('ark-audio')
+  mockGlobalWithRevoke.URL.revokeObjectURL.mock.resetCalls()
+  audio.init({ global: mockGlobalWithRevoke })
+  audio.objectURL = 'mock://data/url'
+
+  audio._revokeObjectURL()
+
+  assert.deepStrictEqual(
+    mockGlobalWithRevoke.URL.revokeObjectURL.mock.calls[0].arguments[0],
+    'mock://data/url'
+  )
+  assert.strictEqual(audio.objectURL, null)
 })

package/lib/components/camera/components/camera.js

@@ -1,4 +1,4 @@
-import { Component } from '../../../base/component/index.js'
+import { Component } from '#base/index.js'
 import styles from '../styles/index.js'
 
 const tag = 'ark-camera'
@@ -34,8 +34,8 @@ export class Camera extends Component {
 
   /** @returns {string} */
   dataURL (width = null, height = null) {
-    /** @type {HTMLCanvasElement} */
-    const canvas = (this.canvas.cloneNode(true))
+    const canvas = /** @type {HTMLCanvasElement} */ (
+      this.canvas.cloneNode(true))
 
     canvas.width = width || this.width
     canvas.height = height || this.height
@@ -72,6 +72,11 @@ export class Camera extends Component {
     await this.start()
   }
 
+  disconnectedCallback () {
+    this.stop()
+    super.disconnectedCallback()
+  }
+
   /** @returns {HTMLVideoElement} */
   get video () {
     return this.querySelector('.ark-camera__video')

package/lib/components/camera/components/camera.test.js

@@ -1,3 +1,5 @@
+import { it } from 'node:test'
+import assert from 'node:assert/strict'
 import './camera.js'
 
 const mockGlobal = () => ({
@@ -5,100 +7,103 @@ const mockGlobal = () => ({
     mediaDevices: {
       __stops: 0,
       async getUserMedia (_options) {
-        return { getTracks: () => [{ stop: () => { this.__stops += 1 } }] }
+        const stream = {}
+        stream.getTracks = () => [{ stop: () => { this.__stops += 1 } }]
+        return stream
       }
     }
   }
 })
 
-describe('Camera', () => {
-  let container = null
-  beforeEach(() => {
-    container = document.createElement('div')
-    document.body.appendChild(container)
-  })
-
-  afterEach(() => {
-    container.remove()
-    container = null
-  })
-
-  it('can be instantiated', () => {
-    container.innerHTML = `
-      <ark-camera></ark-camera>
-    `
-    const camera = container.querySelector('ark-camera')
-    expect(camera).toBeTruthy()
-
-    expect(camera).toBe(camera.init())
-  })
-
-  it('sets its dimensions on canplay event', async () => {
-    container.innerHTML = `
-      <ark-camera width="50" height="80"></ark-camera>
-    `
-    const camera = container.querySelector('ark-camera')
-    const video = camera.select('video')
-    const canvas = camera.select('canvas')
-
-    video.dispatchEvent(new Event('canplay'))
-
-    expect(video.width).toEqual(50)
-    expect(video.height).toEqual(80)
-
-    expect(canvas.width).toEqual(50)
-    expect(canvas.height).toEqual(80)
-  })
-
-  it('can start video recording', async () => {
-    container.innerHTML = `
-      <ark-camera></ark-camera>
-    `
-    const camera = container.querySelector('ark-camera')
-    camera.init({ global: mockGlobal() })
-
-    await camera.start()
-
-    expect(camera.video.srcObject.getTracks()).toBeTruthy()
-  })
-
-  it('can stop video recording', async () => {
-    container.innerHTML = `
-      <ark-camera></ark-camera>
-    `
-    const camera = container.querySelector('ark-camera')
-    const global = mockGlobal()
-    camera.init({ global })
-
-    await camera.start()
-
-    camera.stop()
-
-    expect(global.navigator.mediaDevices.__stops).toEqual(1)
-  })
-
-  it('can set the camera orientation', async () => {
-    container.innerHTML = `
-      <ark-camera></ark-camera>
-    `
-    const camera = container.querySelector('ark-camera')
-    const global = mockGlobal()
-    camera.init({ global })
-
-    await camera.setCameraOrientation('environment')
-
-    expect(camera.facingMode).toEqual('environment')
-  })
-
-  it('gets the dataURL (base64) of its containing canvas', async () => {
-    container.innerHTML = `
-      <ark-camera></ark-camera>
-    `
-    const camera = container.querySelector('ark-camera')
-    camera.init({ global: mockGlobal() })
-
-    const data = camera.dataURL()
-
-    expect(data).toBeTruthy()
-  })
+let container = null
+
+const setup = () => {
+  document.body.innerHTML = ''
+  container = document.createElement('div')
+  document.body.appendChild(container)
+}
+
+it('can be instantiated', () => {
+  setup()
+  container.innerHTML = `
+    <ark-camera></ark-camera>
+  `
+  const camera = container.querySelector('ark-camera')
+  assert.ok(camera)
+
+  assert.strictEqual(camera, camera.init())
+})
+
+it('sets its dimensions on canplay event', async () => {
+  setup()
+  container.innerHTML = `
+    <ark-camera width="50" height="80"></ark-camera>
+  `
+  const camera = container.querySelector('ark-camera')
+  const video = camera.select('video')
+  const canvas = camera.select('canvas')
+
+  video.dispatchEvent(new Event('canplay'))
+
+  assert.deepStrictEqual(video.getAttribute('width'), '50px')
+  assert.deepStrictEqual(video.getAttribute('height'), '80px')
+
+  assert.deepStrictEqual(canvas.getAttribute('width'), '50px')
+  assert.deepStrictEqual(canvas.getAttribute('height'), '80px')
+})
+
+it('can start video recording', async () => {
+  setup()
+  container.innerHTML = `
+    <ark-camera></ark-camera>
+  `
+  const camera = container.querySelector('ark-camera')
+  camera.init({ global: mockGlobal() })
+
+  await camera.start()
+
+  assert.ok(camera.video.srcObject.getTracks())
+})
+
+it('can stop video recording', async () => {
+  setup()
+  container.innerHTML = `
+    <ark-camera></ark-camera>
+  `
+  const camera = container.querySelector('ark-camera')
+  const global = mockGlobal()
+  camera.init({ global })
+
+  await camera.start()
+
+  camera.stop()
+
+  assert.deepStrictEqual(global.navigator.mediaDevices.__stops, 1)
+})
+
+it('can set the camera orientation', async () => {
+  setup()
+  container.innerHTML = `
+    <ark-camera></ark-camera>
+  `
+  const camera = container.querySelector('ark-camera')
+  const global = mockGlobal()
+  camera.init({ global })
+
+  await camera.setCameraOrientation('environment')
+
+  assert.deepStrictEqual(camera.facingMode, 'environment')
+})
+
+it('gets the dataURL (base64) of its containing canvas', async () => {
+  setup()
+  container.innerHTML = `
+    <ark-camera></ark-camera>
+  `
+  const camera = container.querySelector('ark-camera')
+  camera.init({ global: mockGlobal() })
+
+  const data = camera.dataURL()
+
+  assert.ok(data)
 })