@knowark/componarkjs 1.13.4 → 1.14.1

package/lib/components/droparea/components/droparea-preview.test.js

@@ -1,107 +1,371 @@
-import { jest } from '@jest/globals'
+import { it, mock } from 'node:test'
+import assert from 'node:assert/strict'
 import './droparea-preview.js'
 
-describe('Droparea', () => {
-  const createBubbledEvent = (type, props = {}) => {
-    const event = new Event(type, {
-      bubbles: true
-    })
-    Object.assign(event, props)
-    return event
-  }
+const createBubbledEvent = (type, props = {}) => {
+  const event = new Event(type, {
+    bubbles: true
+  })
+  Object.assign(event, props)
+  return event
+}
 
-  global.URL.createObjectURL = (
-    /** @type {(obj: Blob | MediaSource) => string} */ (jest.fn()))
-  global.document.elementFromPoint = (
-    /** @type {(x: number, y: number) => Element} */ (jest.fn()))
+let objectURLCount = 0
+global.URL.createObjectURL = (
+  /** @type {(obj: Blob | MediaSource) => string} */ (
+    mock.fn(() => `mock://data/url/${objectURLCount++}`)))
+global.URL.revokeObjectURL = (
+  /** @type {(url: string) => void} */ (mock.fn()))
+global.document.elementFromPoint = (
+  /** @type {(x: number, y: number) => Element} */ (mock.fn()))
 
-  let container = null
+let container = null
 
-  beforeEach(() => {
-    container = document.createElement('div')
-    document.body.appendChild(container)
-  })
+const setup = () => {
+  document.body.innerHTML = ''
+  objectURLCount = 0
+  global.URL.createObjectURL.mock.resetCalls()
+  global.URL.revokeObjectURL.mock.resetCalls()
+  container = document.createElement('div')
+  document.body.appendChild(container)
+}
+
+it('can be instantiated', () => {
+  setup()
+  container.innerHTML = /* html */ `
+          <ark-droparea></ark-droparea>
+      `
+  const droparea = container.querySelector('ark-droparea')
+  const preview = droparea.querySelector('ark-droparea-preview')
+  assert.strictEqual(preview, preview.init())
+})
 
-  afterEach(() => {
-    container.remove()
-    container = null
+it('Item can be removed', () => {
+  setup()
+  container.innerHTML = /* html */ `
+          <ark-droparea></ark-droparea>
+      `
+
+  const droparea = container.querySelector('ark-droparea')
+  const preview = droparea.querySelector('[data-preview-list]')
+  const dropZone = droparea.querySelector('.ark-droparea__form')
+  const myFile = new File(['image'], 'Doggy.png', {
+    type: 'image/png'
+  })
+  const myFile2 = new File(['image'], 'Scooby.png', {
+    type: 'image/png'
+  })
+  const dropEvent = createBubbledEvent('drop', {
+    clientX: 0,
+    clientY: 1,
+    dataTransfer: {
+      files: [myFile, myFile2]
+    }
   })
 
-  it('can be instantiated', () => {
-    container.innerHTML = /* html */ `
-            <ark-droparea></ark-droparea>
-        `
-    const droparea = container.querySelector('ark-droparea')
-    const preview = droparea.querySelector('ark-droparea-preview')
-    expect(preview).toBe(preview.init())
+  dropZone.dispatchEvent(dropEvent)
+  preview.querySelector('button').click()
+  preview.querySelector('button').click()
+})
+
+it('Can drag previews and sort a new list', () => {
+  setup()
+  container.innerHTML = /* html */ `
+          <ark-droparea></ark-droparea>
+      `
+
+  const droparea = container.querySelector('ark-droparea')
+  const preview = droparea.querySelector('[data-preview-list]')
+  const dropZone = droparea.querySelector('.ark-droparea__form')
+  const myFile = new File(['image'], 'Doggy.png', {
+    type: 'image/png'
+  })
+  const myFile2 = new File(['image'], 'Scooby.png', {
+    type: 'image/png'
+  })
+  const dropEvent = createBubbledEvent('drop', {
+    clientX: 0,
+    clientY: 1,
+    dataTransfer: {
+      files: [myFile, myFile2]
+    }
   })
 
-  it('Item can be removed', () => {
-    container.innerHTML = /* html */ `
-            <ark-droparea></ark-droparea>
-        `
+  dropZone.dispatchEvent(dropEvent)
+
+  preview.handleDrag = mock.fn()
+
+  const getThumbnails = () =>
+    Array.from(preview.querySelectorAll('.ark-droparea-preview__frame'))
+
+  const thumbnails = getThumbnails()
+
+  const startingNode = thumbnails[0]
+  const endingNode = thumbnails[1]
+
+  startingNode.dispatchEvent(
+    createBubbledEvent('dragstart', { clientX: 0, clientY: 0 })
+  )
+  endingNode.dispatchEvent(
+    createBubbledEvent('dragend', { clientX: 0, clientY: 1 })
+  )
+})
 
+it('handleDrag keeps the selected item when elementFromPoint returns null', () => {
+  setup()
+  const preview = document.createElement('ark-droparea-preview')
+  const list = document.createElement('ul')
+  const firstItem = document.createElement('li')
+  const secondItem = document.createElement('li')
+  list.append(firstItem, secondItem)
+  preview.appendChild(list)
+  document.body.appendChild(preview)
+
+  const originalElementFromPoint = document.elementFromPoint
+  document.elementFromPoint = () => null
+
+  preview.handleDrag(firstItem, { clientX: 0, clientY: 0 })
+
+  assert.ok(firstItem.classList.contains('drag-sort-active'))
+  assert.strictEqual(list.firstElementChild, firstItem)
+
+  document.elementFromPoint = originalElementFromPoint
+})
+
+it('handleDrag moves the selected item after its next sibling', () => {
+  setup()
+  const preview = document.createElement('ark-droparea-preview')
+  const list = document.createElement('ul')
+  const firstItem = document.createElement('li')
+  const secondItem = document.createElement('li')
+  const thirdItem = document.createElement('li')
+  list.append(firstItem, secondItem, thirdItem)
+  preview.appendChild(list)
+  document.body.appendChild(preview)
+
+  const originalElementFromPoint = document.elementFromPoint
+  document.elementFromPoint = () => secondItem
+
+  preview.handleDrag(firstItem, { clientX: 1, clientY: 1 })
+
+  assert.strictEqual(list.children[0], secondItem)
+  assert.strictEqual(list.children[1], firstItem)
+  assert.strictEqual(list.children[2], thirdItem)
+
+  document.elementFromPoint = originalElementFromPoint
+})
+
+it('does not add duplicate drag listeners to existing previews', () => {
+  setup()
+  const counts = new WeakMap()
+  const originalAddEventListener = Element.prototype.addEventListener
+  Element.prototype.addEventListener = function (type, listener, options) {
+    const isDragEvent = type === 'drag' || type === 'dragend'
+    if (this.tagName === 'LI' && isDragEvent) {
+      const itemCounts = counts.get(this) || { drag: 0, dragend: 0 }
+      itemCounts[type] += 1
+      counts.set(this, itemCounts)
+    }
+
+    return originalAddEventListener.call(this, type, listener, options)
+  }
+
+  try {
+    container.innerHTML = /* html */ `
+      <ark-droparea></ark-droparea>
+    `
     const droparea = container.querySelector('ark-droparea')
-    const preview = droparea.querySelector('[data-preview-list]')
     const dropZone = droparea.querySelector('.ark-droparea__form')
-    const myFile = new File(['image'], 'Doggy.png', {
-      type: 'image/png'
-    })
-    const myFile2 = new File(['image'], 'Scooby.png', {
-      type: 'image/png'
+
+    const firstBatch = createBubbledEvent('drop', {
+      dataTransfer: { files: [new File(['image'], 'Doggy.png', { type: 'image/png' })] }
     })
-    const dropEvent = createBubbledEvent('drop', {
-      clientX: 0,
-      clientY: 1,
-      dataTransfer: {
-        files: [myFile, myFile2]
-      }
+    const secondBatch = createBubbledEvent('drop', {
+      dataTransfer: { files: [new File(['image'], 'Scooby.png', { type: 'image/png' })] }
     })
 
-    dropZone.dispatchEvent(dropEvent)
-    preview.querySelector('button').click()
-    preview.querySelector('button').click()
+    dropZone.dispatchEvent(firstBatch)
+    dropZone.dispatchEvent(secondBatch)
+
+    const firstItem = droparea.querySelector('.ark-droparea-preview__frame')
+    const itemCounts = counts.get(firstItem)
+
+    assert.deepStrictEqual(itemCounts.drag, 1)
+    assert.deepStrictEqual(itemCounts.dragend, 1)
+  } finally {
+    Element.prototype.addEventListener = originalAddEventListener
+  }
+})
+
+it('reuses object URLs for the media list and revokes on file removal', () => {
+  setup()
+  container.innerHTML = /* html */ `
+    <ark-droparea></ark-droparea>
+  `
+  const droparea = container.querySelector('ark-droparea')
+  const dropZone = droparea.querySelector('.ark-droparea__form')
+  const myFile = new File(['image'], 'Doggy.png', {
+    type: 'image/png'
   })
 
-  it('Can drag previews and sort a new list', () => {
-    container.innerHTML = /* html */ `
-            <ark-droparea></ark-droparea>
-        `
+  dropZone.dispatchEvent(createBubbledEvent('drop', {
+    dataTransfer: { files: [myFile] }
+  }))
 
-    const droparea = container.querySelector('ark-droparea')
-    const preview = droparea.querySelector('[data-preview-list]')
-    const dropZone = droparea.querySelector('.ark-droparea__form')
-    const myFile = new File(['image'], 'Doggy.png', {
-      type: 'image/png'
-    })
-    const myFile2 = new File(['image'], 'Scooby.png', {
-      type: 'image/png'
-    })
-    const dropEvent = createBubbledEvent('drop', {
-      clientX: 0,
-      clientY: 1,
-      dataTransfer: {
-        files: [myFile, myFile2]
-      }
-    })
+  const callsBeforeMediaRead = global.URL.createObjectURL.mock.calls.length
+  const mediaUrl = droparea.mediaList[0].url
+  const mediaUrlSecondRead = droparea.mediaList[0].url
+
+  assert.deepStrictEqual(mediaUrl, mediaUrlSecondRead)
+  assert.deepStrictEqual(
+    global.URL.createObjectURL.mock.calls.length,
+    callsBeforeMediaRead
+  )
 
-    dropZone.dispatchEvent(dropEvent)
+  droparea.querySelector('.ark-droparea__remove').click()
+  assert.deepStrictEqual(
+    global.URL.revokeObjectURL.mock.calls[0].arguments[0],
+    mediaUrl
+  )
+})
 
-    preview.handleDrag = jest.fn()
+it('returns early when handleDrop runs outside a droparea component', () => {
+  setup()
+  const preview = document.createElement('ark-droparea-preview')
+  const target = document.createElement('li')
+  preview.appendChild(target)
+  document.body.appendChild(preview)
 
-    const getThumbnails = () =>
-      Array.from(preview.querySelectorAll('.ark-droparea-preview__frame'))
+  assert.doesNotThrow(() => {
+    preview.handleDrop({ target })
+  })
+})
 
-    const thumbnails = getThumbnails()
+it('returns early when removing a file that does not exist', () => {
+  setup()
+  container.innerHTML = /* html */ `
+    <ark-droparea></ark-droparea>
+  `
+  const droparea = container.querySelector('ark-droparea')
+  const preview = droparea.preview
+  const button = document.createElement('button')
+  const frame = document.createElement('li')
+  frame.appendChild(button)
+  preview.select('[data-preview-list]').appendChild(frame)
 
-    const startingNode = thumbnails[0]
-    const endingNode = thumbnails[1]
+  const unknownFile = new File(['image'], 'unknown.png', { type: 'image/png' })
 
-    startingNode.dispatchEvent(
-      createBubbledEvent('dragstart', { clientX: 0, clientY: 0 })
-    )
-    endingNode.dispatchEvent(
-      createBubbledEvent('dragend', { clientX: 0, clientY: 1 })
-    )
+  assert.doesNotThrow(() => {
+    preview.removeFile(unknownFile, { target: button })
   })
+  assert.ok(preview.select('[data-preview-list]').contains(frame))
+})
+
+it('skips drag listeners for already-enabled items', () => {
+  setup()
+  const preview = document.createElement('ark-droparea-preview')
+  const item = document.createElement('li')
+  item.setAttribute('data-drag-enabled', '')
+  let calls = 0
+  const originalAddEventListener = item.addEventListener
+  item.addEventListener = function (...args) {
+    calls += 1
+    return originalAddEventListener.apply(this, args)
+  }
+
+  preview.enableDragItem(item)
+
+  assert.deepStrictEqual(calls, 0)
+})
+
+it('does nothing when revoking a file without an object URL', () => {
+  setup()
+  const preview = document.createElement('ark-droparea-preview')
+  const file = new File(['image'], 'Snoopy.png', { type: 'image/png' })
+
+  assert.doesNotThrow(() => {
+    preview.revokeFile(file)
+  })
+})
+
+it('renders a text preview in single mode and clears previous preview items', () => {
+  setup()
+  container.innerHTML = /* html */ `
+    <ark-droparea single></ark-droparea>
+  `
+  const droparea = container.querySelector('ark-droparea')
+  const dropZone = droparea.querySelector('.ark-droparea__form')
+  const firstFile = new File(['first'], 'first.txt', { type: 'text/plain' })
+  const secondFile = new File(['second'], 'second.txt', { type: 'text/plain' })
+
+  dropZone.dispatchEvent(createBubbledEvent('drop', {
+    dataTransfer: { files: [firstFile] }
+  }))
+
+  const firstPreviewItem = droparea.preview.querySelector('li')
+  assert.deepStrictEqual(firstPreviewItem.querySelector('p').textContent, 'first.txt')
+  assert.ok(firstPreviewItem.getAttribute('data').includes('mock://data/url/'))
+  assert.strictEqual(firstPreviewItem.getAttribute('index'), null)
+
+  dropZone.dispatchEvent(createBubbledEvent('drop', {
+    dataTransfer: { files: [secondFile] }
+  }))
+
+  const frames = droparea.preview.querySelectorAll('li')
+  assert.deepStrictEqual(frames.length, 1)
+  assert.deepStrictEqual(frames[0].querySelector('p').textContent, 'second.txt')
+})
+
+it('clearPreview tolerates missing preview list nodes', () => {
+  setup()
+  const preview = document.createElement('ark-droparea-preview')
+  const originalSelect = preview.select
+  preview.select = () => null
+  preview.toggleVisibility = () => {}
+
+  assert.doesNotThrow(() => {
+    preview.clearPreview()
+  })
+
+  preview.select = originalSelect
+})
+
+it('returns early when handleDrop receives a null target', () => {
+  setup()
+  const preview = document.createElement('ark-droparea-preview')
+
+  assert.doesNotThrow(() => {
+    preview.handleDrop({ target: null })
+  })
+})
+
+it('returns early when removeFile receives a null target', () => {
+  setup()
+  const preview = document.createElement('ark-droparea-preview')
+  const file = new File(['image'], 'Nully.png', { type: 'image/png' })
+
+  assert.doesNotThrow(() => {
+    preview.removeFile(file, { target: null })
+  })
+})
+
+it('revokeFile and revokeAllFiles tolerate missing revokeObjectURL', () => {
+  setup()
+  const preview = document.createElement('ark-droparea-preview')
+  const file = new File(['one'], 'one.txt', { type: 'text/plain' })
+  const secondFile = new File(['two'], 'two.txt', { type: 'text/plain' })
+  preview._objectUrls.set(file, 'mock://data/url/a')
+  preview._objectUrls.set(secondFile, 'mock://data/url/b')
+
+  const originalRevoke = global.URL.revokeObjectURL
+  global.URL.revokeObjectURL = undefined
+
+  try {
+    assert.doesNotThrow(() => {
+      preview.revokeFile(file)
+      preview.revokeAllFiles()
+    })
+  } finally {
+    global.URL.revokeObjectURL = originalRevoke
+  }
 })

package/lib/components/droparea/components/droparea.js

@@ -5,8 +5,21 @@ import './droparea-preview.js'
 /** @import {DropareaPreview} from './droparea-preview.js' */
 
 const tag = 'ark-droparea'
+/**
+ * Drag-and-drop and file input area.
+ * Emits:
+ * - `alter` with current media list details.
+ */
 
 export class Droparea extends Component {
+  constructor () {
+    super()
+    this._onChange = this.onChange.bind(this)
+    this._onOpenInput = this.openInput.bind(this)
+  }
+
+  /** @param {object} context
+   *  @returns {this} */
   init (context = {}) {
     this.fileList = []
     this.contextFiles = context.contextFiles || this.contextFiles || []
@@ -16,6 +29,7 @@ export class Droparea extends Component {
     return super.init()
   }
 
+  /** @returns {this} */
   render () {
     this._grabSlots()
     this.content = /* html */ `
@@ -37,11 +51,15 @@ export class Droparea extends Component {
     return super.render()
   }
 
+  /** @returns {string[]} */
   reflectedProperties () {
     return ['size', 'accept', 'maxSize', 'title']
   }
 
+  /** @returns {Promise<void>} */
   async load () {
+    this._detachListeners()
+
     this.dragDropEvents.forEach((eventName) => {
       this.addEventListener(eventName, this.preventDefaults, false)
     })
@@ -55,8 +73,8 @@ export class Droparea extends Component {
     })
 
     this.addEventListener('drop', this.handleDrop, false)
-    this._input.addEventListener('change', this.onChange.bind(this))
-    this.openButton.addEventListener('click', this.openInput.bind(this))
+    this._input?.addEventListener('change', this._onChange)
+    this.openButton?.addEventListener('click', this._onOpenInput)
 
     /* istanbul ignore else */
     if (this.contextFiles) {
@@ -64,25 +82,66 @@ export class Droparea extends Component {
     }
   }
 
+  /** @returns {void} */
+  disconnectedCallback () {
+    this._detachListeners()
+    super.disconnectedCallback()
+  }
+
+  /** @returns {void} */
+  _detachListeners () {
+    if (this.dragDropEvents) {
+      this.dragDropEvents.forEach((eventName) => {
+        this.removeEventListener(eventName, this.preventDefaults, false)
+      })
+    }
+
+    if (this.dragEvents) {
+      this.dragEvents.forEach((eventName) => {
+        this.removeEventListener(eventName, this.highlight, false)
+      })
+    }
+
+    if (this.dropEvents) {
+      this.dropEvents.forEach((eventName) => {
+        this.removeEventListener(eventName, this.unhighlight, false)
+      })
+    }
+
+    this.removeEventListener('drop', this.handleDrop, false)
+    this._input?.removeEventListener('change', this._onChange)
+    this.openButton?.removeEventListener('click', this._onOpenInput)
+  }
+
+  /** @param {Event} event
+   *  @returns {void} */
   openInput (event) {
     event.stopPropagation()
     const input = this.select('[data-input]')
     input.click()
   }
 
+  /** @param {Event} event
+   *  @returns {void} */
   preventDefaults (event) {
     event.preventDefault()
     event.stopPropagation()
   }
 
+  /** @param {Event} event
+   *  @returns {void} */
   highlight (event) {
     this.dropZone.classList.add('highlight')
   }
 
+  /** @param {Event} event
+   *  @returns {void} */
   unhighlight (event) {
     this.dropZone.classList.remove('highlight')
   }
 
+  /** @param {DragEvent} event
+   *  @returns {void} */
   handleDrop (event) {
     event.stopPropagation()
     const data = event.dataTransfer
@@ -90,13 +149,17 @@ export class Droparea extends Component {
     this.handleFiles(files)
   }
 
+  /** @param {Event} event
+   *  @returns {void} */
   onChange (event) {
     event.stopPropagation()
-    const input = event.target
+    const input = /** @type {HTMLInputElement} */ (event.target)
     const files = input.files
     this.handleFiles(files)
   }
 
+  /** @param {FileList|File[]} files
+   *  @returns {void} */
   handleFiles (files) {
     if (this.single) {
       files = [files[0]]
@@ -106,8 +169,9 @@ export class Droparea extends Component {
         !this.preview.fileExists(files[0]) &&
         this.maxSizeValidate(files[0])
       ) {
+        this.fileList[0] && this.preview.revokeFile(this.fileList[0])
         this.fileList[0] = files[0]
-        this.preview.querySelector('[data-preview-list]').innerHTML = ''
+        this.preview.clearPreview()
         this.preview.previewFile(files[0])
       }
     } else {
@@ -125,6 +189,10 @@ export class Droparea extends Component {
     this.preview.dispatchAlterEvent()
   }
 
+  /**
+   * @param {File[]|FileList} fileList
+   * @returns {boolean}
+   */
   validate (fileList) {
     if (!this.accept || this.accept.length === 0) return true
     const acceptList = this.accept.split(',').map(
@@ -148,16 +216,20 @@ export class Droparea extends Component {
     return true
   }
 
+  /** @param {File} file
+   * @returns {boolean} */
   maxSizeValidate (file) {
     return true
   }
 
+  /** @returns {void} */
   _grabSlots() {
     const [fileInput] = [this.slots.general].flat()
     this.fileInput = this.fileInput ?? fileInput
-
   }
 
+  /** @param {HTMLInputElement|undefined} element
+   * @returns {HTMLInputElement} */
   _buildFileInput (element) {
     const input = element ?? document.createElement('input')
     const attributes = [['class', `${tag}__input`],
@@ -166,14 +238,18 @@ export class Droparea extends Component {
     return input
   }
   
+  /** @returns {HTMLFormElement} */
   get dropZone () {
-    return this.select('.ark-droparea__form')
+    return /** @type {HTMLFormElement} */ (
+      this.querySelector('.ark-droparea__form'))
   }
 
+  /** @returns {DropareaPreview} */
   get preview () {
     return /** @type {DropareaPreview} */ (this.select('ark-droparea-preview'))
   }
 
+  /** @returns {Array<{name:string,type:string,size:number,url:string}>} */
   get mediaList () {
     return this.preview.mediaList
   }