@knowark/componarkjs 1.13.3 → 1.14.0

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

@@ -1,105 +1,289 @@
-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 = jest.fn()
-  global.document.elementFromPoint = 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)
+}
 
-  afterEach(() => {
-    container.remove()
-    container = null
+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())
+})
+
+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
+  )
+
+  droparea.querySelector('.ark-droparea__remove').click()
+  assert.deepStrictEqual(
+    global.URL.revokeObjectURL.mock.calls[0].arguments[0],
+    mediaUrl
+  )
+})
+
+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)
+
+  assert.doesNotThrow(() => {
+    preview.handleDrop({ target })
+  })
+})
+
+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 unknownFile = new File(['image'], 'unknown.png', { type: 'image/png' })
 
-    dropZone.dispatchEvent(dropEvent)
+  assert.doesNotThrow(() => {
+    preview.removeFile(unknownFile, { target: button })
+  })
+  assert.ok(preview.select('[data-preview-list]').contains(frame))
+})
 
-    preview.handleDrag = jest.fn()
+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)
+  }
 
-    const getThumbnails = () =>
-      Array.from(preview.querySelectorAll('.ark-droparea-preview__frame'))
+  preview.enableDragItem(item)
 
-    const thumbnails = getThumbnails()
+  assert.deepStrictEqual(calls, 0)
+})
 
-    const startingNode = thumbnails[0]
-    const endingNode = thumbnails[1]
+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' })
 
-    startingNode.dispatchEvent(
-      createBubbledEvent('dragstart', { clientX: 0, clientY: 0 })
-    )
-    endingNode.dispatchEvent(
-      createBubbledEvent('dragend', { clientX: 0, clientY: 1 })
-    )
+  assert.doesNotThrow(() => {
+    preview.revokeFile(file)
   })
 })

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

@@ -1,10 +1,18 @@
-import { Component } from '../../../base/component/index.js'
-import './droparea-preview.js'
+import { Component } from '#base/index.js'
 import styles from '../styles/index.js'
-// @ts-ignore
+import './droparea-preview.js'
+
+/** @import {DropareaPreview} from './droparea-preview.js' */
+
 const tag = 'ark-droparea'
 
 export class Droparea extends Component {
+  constructor () {
+    super()
+    this._onChange = this.onChange.bind(this)
+    this._onOpenInput = this.openInput.bind(this)
+  }
+
   init (context = {}) {
     this.fileList = []
     this.contextFiles = context.contextFiles || this.contextFiles || []
@@ -40,6 +48,8 @@ export class Droparea extends Component {
   }
 
   async load () {
+    this._detachListeners()
+
     this.dragDropEvents.forEach((eventName) => {
       this.addEventListener(eventName, this.preventDefaults, false)
     })
@@ -53,8 +63,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) {
@@ -62,6 +72,35 @@ export class Droparea extends Component {
     }
   }
 
+  disconnectedCallback () {
+    this._detachListeners()
+    super.disconnectedCallback()
+  }
+
+  _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)
+  }
+
   openInput (event) {
     event.stopPropagation()
     const input = this.select('[data-input]')
@@ -104,8 +143,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 {
@@ -153,7 +193,6 @@ export class Droparea extends Component {
   _grabSlots() {
     const [fileInput] = [this.slots.general].flat()
     this.fileInput = this.fileInput ?? fileInput
-
   }
 
   _buildFileInput (element) {
@@ -169,7 +208,7 @@ export class Droparea extends Component {
   }
 
   get preview () {
-    return this.select('ark-droparea-preview')
+    return /** @type {DropareaPreview} */ (this.select('ark-droparea-preview'))
   }
 
   get mediaList () {