@knowark/componarkjs 1.13.4 → 1.14.1

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/audio/index.js

@@ -1 +1,2 @@
+/** Audio recording component. */
 export { Audio } from './components/audio.js'

package/lib/components/audio/styles/index.js

@@ -1,2 +1,6 @@
 import styles from './ark.css.js'
-export default styles
+
+/** @type {string} */
+const stylesText = styles
+
+export default stylesText

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

@@ -2,7 +2,12 @@ import { Component } from '#base/index.js'
 import styles from '../styles/index.js'
 
 const tag = 'ark-camera'
+/**
+ * Camera capture component.
+ */
 export class Camera extends Component {
+  /** @param {object} context
+   *  @returns {this} */
   init (context = {}) {
     this.width = this.width || context.width || 320
     this.height = this.height || context.height || 320
@@ -47,6 +52,7 @@ export class Camera extends Component {
     return canvas.toDataURL('image/jpg')
   }
 
+  /** @returns {Promise<void>} */
   async start () {
     const stream = await this.global.navigator.mediaDevices.getUserMedia({
       video: {
@@ -60,18 +66,27 @@ export class Camera extends Component {
     this.video.srcObject = stream
   }
 
+  /** @returns {void} */
   stop () {
     // @ts-ignore
     const tracks = this.video.srcObject ? this.video.srcObject.getTracks() : []
     tracks.forEach(track => track.stop())
   }
 
+  /** @param {string} facingMode
+   *  @returns {Promise<void>} */
   async setCameraOrientation (facingMode) {
     this.stop()
     this.facingMode = facingMode
     await this.start()
   }
 
+  /** @returns {void} */
+  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)
 })

package/lib/components/camera/index.js

@@ -1 +1,2 @@
+/** Camera capture component. */
 export { Camera } from './components/camera.js'

package/lib/components/camera/styles/index.js

@@ -1,2 +1,6 @@
 import styles from './ark.css.js'
-export default styles
+
+/** @type {string} */
+const stylesText = styles
+
+export default stylesText

package/lib/components/capture/components/capture.js

@@ -1,6 +1,7 @@
 import { Component } from "#base/index.js"
 
 const tag = 'ark-capture'
+/** Template-driven renderer component. */
 export class Capture extends Component {
   constructor () {
     super()
@@ -12,9 +13,10 @@ export class Capture extends Component {
     return ['receive']
   }
 
-  /** @param {Object} context */
+  /** @param {object} context
+   *  @returns {this} */
   init (context = {}) {
-    const data = JSON.parse(this._pop(':scope > data')?.textContent || null)
+    const data = this._parseJSON(this._pop(':scope > data')?.textContent)
     this.source = /** @type {object} */ (
       context.source) || data || this.source || {}
     this.template = context.template || this.template || (
@@ -23,6 +25,7 @@ export class Capture extends Component {
     return super.init()
   }
 
+  /** @returns {this} */
   render () {
     const outputTemplate = this._pop(':scope > template')?.innerHTML
     this.template = (
@@ -36,19 +39,60 @@ export class Capture extends Component {
     return super.render()
   }
 
+  /** @param {{detail:any}} event */
   handle (event) {
     const source = event.detail
     this.init({ source }).render()
   }
 
+  /**
+   * @param {string} template
+   * @returns {(data: any) => string}
+   */
   _format (template) {
-    return (data) => Function(`return \`${template}\``).call(data)
+    let render = null
+
+    try {
+      render = Function(`return \`${template}\``)
+    } catch (error) {
+      this.emit('error', error)
+    }
+
+    return (data) => {
+      if (!render) return ''
+
+      try {
+        return render.call(data)
+      } catch (error) {
+        this.emit('error', error)
+        return ''
+      }
+    }
   }
 
+  /**
+   * @param {string} selector
+   * @returns {HTMLElement|null}
+   */
   _pop (selector) {
     const element = this.querySelector(selector)
     element?.remove()
-    return element
+    return /** @type {HTMLElement|null} */ (element)
+  }
+
+  /**
+   * @param {string|null} source
+   * @returns {object|null}
+   */
+  _parseJSON (source) {
+    if (!source) return null
+
+    try {
+      return JSON.parse(source)
+    } catch (error) {
+      this.emit('error', error)
+      return null
+    }
   }
 }
 Component.define(tag, Capture)