@knowark/componarkjs 1.13.4 → 1.14.1

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

@@ -1,354 +1,364 @@
-import { jest } from '@jest/globals'
+import { it, mock } from 'node:test'
+import assert from 'node:assert/strict'
 import './droparea.js'
 
-describe('Droparea', () => {
-  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()))
-
-  let container = null
-
-  beforeEach(() => {
-    container = document.createElement('div')
-    document.body.appendChild(container)
+const createBubbledEvent = (type, props = {}) => {
+  const event = new Event(type, {
+    bubbles: true
   })
+  Object.assign(event, props)
+  return event
+}
 
-  afterEach(() => {
-    container.remove()
-    container = null
-  })
+global.URL.createObjectURL = (
+  /** @type {(obj: Blob | MediaSource) => string} */ (mock.fn()))
 
-  it('can be instantiated', () => {
-    container.innerHTML = /* html */ `
-            <ark-droparea></ark-droparea>
-        `
+let container = null
 
-    const droparea = container.querySelector('ark-droparea')
-    expect(droparea).toBe(droparea.init())
-  })
+const setup = () => {
+  document.body.innerHTML = ''
+  container = document.createElement('div')
+  document.body.appendChild(container)
+}
 
-  it('drag files to zone highlights the drop area', () => {
-    container.innerHTML = /* html */ `
-            <ark-droparea></ark-droparea>
-        `
+it('can be instantiated', () => {
+  setup()
+  container.innerHTML = /* html */ `
+          <ark-droparea></ark-droparea>
+      `
 
-    const droparea = container.querySelector('ark-droparea')
-    const dropZone = droparea.dropZone
-    const dragNode = dropZone
+  const droparea = container.querySelector('ark-droparea')
+  assert.strictEqual(droparea, droparea.init())
+})
 
-    dragNode.dispatchEvent(
-      createBubbledEvent('dragover', {
-        clientX: 0,
-        clientY: 1
-      })
-    )
-    expect(dropZone.classList['1']).toBe('highlight')
-  })
+it('drag files to zone highlights the drop area', () => {
+  setup()
+  container.innerHTML = /* html */ `
+          <ark-droparea></ark-droparea>
+      `
 
-  it('drag files outside the zone unhighlight the drop area', () => {
-    container.innerHTML = /* html */ `
-            <ark-droparea></ark-droparea>
-        `
+  const droparea = container.querySelector('ark-droparea')
+  const dropZone = droparea.dropZone
+  const dragNode = dropZone
 
-    const droparea = container.querySelector('ark-droparea')
-    const dropZone = droparea.dropZone
+  dragNode.dispatchEvent(
+    createBubbledEvent('dragover', {
+      clientX: 0,
+      clientY: 1
+    })
+  )
+  assert.strictEqual(dropZone.classList['1'], 'highlight')
+})
 
-    dropZone.dispatchEvent(
-      createBubbledEvent('dragleave', {
-        clientX: 0,
-        clientY: 1
-      })
-    )
-    expect(dropZone.classList.length).toBe(1)
-  })
+it('drag files outside the zone unhighlight the drop area', () => {
+  setup()
+  container.innerHTML = /* html */ `
+          <ark-droparea></ark-droparea>
+      `
 
-  it('Allows dropping multiple files to the component', () => {
-    container.innerHTML = /* html */ `
-            <ark-droparea></ark-droparea>
-        `
+  const droparea = container.querySelector('ark-droparea')
+  const dropZone = droparea.dropZone
 
-    const droparea = container.querySelector('ark-droparea')
-    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', {
+  dropZone.dispatchEvent(
+    createBubbledEvent('dragleave', {
       clientX: 0,
-      clientY: 1,
-      dataTransfer: {
-        files: [myFile, myFile2]
-      }
+      clientY: 1
     })
+  )
+  assert.strictEqual(dropZone.classList.length, 1)
+})
 
-    dropZone.dispatchEvent(dropEvent)
-    expect(droparea.fileList[0].name).toEqual(myFile.name)
-    expect(droparea.fileList[1].name).toEqual(myFile2.name)
-  })
+it('Allows dropping multiple files to the component', () => {
+  setup()
+  container.innerHTML = /* html */ `
+          <ark-droparea></ark-droparea>
+      `
 
-  it('Can recieve a single file', () => {
-    container.innerHTML = /* html */ `
-            <ark-droparea single></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'
+  })
+  const myFile2 = new File(['image'], 'Scooby.png', {
+    type: 'image/png'
+  })
+  const dropEvent = createBubbledEvent('drop', {
+    clientX: 0,
+    clientY: 1,
+    dataTransfer: {
+      files: [myFile, myFile2]
+    }
+  })
 
-    const droparea = container.querySelector('ark-droparea')
-    const dropZone = droparea.querySelector('.ark-droparea__form')
-    const myFile = new File(['image'], 'Snoopy.png', {
-      type: 'image/png'
-    })
-    const myFile2 = new File(['image'], 'Scooby.png', {
-      type: 'image/png'
-    })
+  dropZone.dispatchEvent(dropEvent)
+  assert.deepStrictEqual(droparea.fileList[0].name, myFile.name)
+  assert.deepStrictEqual(droparea.fileList[1].name, myFile2.name)
+})
 
-    const dropEvent = createBubbledEvent('drop', {
-      clientX: 0,
-      clientY: 1,
-      dataTransfer: {
-        files: [myFile, myFile2]
-      }
-    })
+it('Can recieve a single file', () => {
+  setup()
+  container.innerHTML = /* html */ `
+          <ark-droparea single></ark-droparea>
+      `
 
-    dropZone.dispatchEvent(dropEvent)
-    expect(droparea.fileList.length).toBe(1)
-    expect(droparea.fileList[1]).toBeFalsy()
+  const droparea = container.querySelector('ark-droparea')
+  const dropZone = droparea.querySelector('.ark-droparea__form')
+  const myFile = new File(['image'], 'Snoopy.png', {
+    type: 'image/png'
+  })
+  const myFile2 = new File(['image'], 'Scooby.png', {
+    type: 'image/png'
   })
 
-  it('Returns the file list as object URL', () => {
-    container.innerHTML = /* html */ `
-            <ark-droparea></ark-droparea>
-        `
+  const dropEvent = createBubbledEvent('drop', {
+    clientX: 0,
+    clientY: 1,
+    dataTransfer: {
+      files: [myFile, myFile2]
+    }
+  })
 
-    const droparea = container.querySelector('ark-droparea')
-    const dropZone = droparea.querySelector('.ark-droparea__form')
-    const myFile = new File(['image'], 'Snoopy.png', {
-      type: 'image/png'
-    })
-    const myFile2 = new File(['image'], 'Scooby.png', {
-      type: 'image/png'
-    })
+  dropZone.dispatchEvent(dropEvent)
+  assert.strictEqual(droparea.fileList.length, 1)
+  assert.ok(!droparea.fileList[1])
+})
 
-    const dropEvent = createBubbledEvent('drop', {
-      clientX: 0,
-      clientY: 1,
-      dataTransfer: {
-        files: [myFile, myFile2]
-      }
-    })
+it('Returns the file list as object URL', () => {
+  setup()
+  container.innerHTML = /* html */ `
+          <ark-droparea></ark-droparea>
+      `
 
-    dropZone.dispatchEvent(dropEvent)
-    expect(droparea.fileList.length).toEqual(2)
+  const droparea = container.querySelector('ark-droparea')
+  const dropZone = droparea.querySelector('.ark-droparea__form')
+  const myFile = new File(['image'], 'Snoopy.png', {
+    type: 'image/png'
+  })
+  const myFile2 = new File(['image'], 'Scooby.png', {
+    type: 'image/png'
   })
 
-  it('Returns a media list of file metadata objects', () => {
-    container.innerHTML = /* html */ `
-            <ark-droparea></ark-droparea>
-        `
+  const dropEvent = createBubbledEvent('drop', {
+    clientX: 0,
+    clientY: 1,
+    dataTransfer: {
+      files: [myFile, myFile2]
+    }
+  })
 
-    const droparea = container.querySelector('ark-droparea')
-    const dropZone = droparea.querySelector('.ark-droparea__form')
-    const myFile = new File(['image'], 'Snoopy.png', {
-      type: 'image/png'
-    })
-    const myFile2 = new File(['image'], 'Scooby.png', {
-      type: 'image/png'
-    })
+  dropZone.dispatchEvent(dropEvent)
+  assert.deepStrictEqual(droparea.fileList.length, 2)
+})
 
-    const dropEvent = createBubbledEvent('drop', {
-      clientX: 0,
-      clientY: 1,
-      dataTransfer: {
-        files: [myFile, myFile2]
-      }
-    })
+it('Returns a media list of file metadata objects', () => {
+  setup()
+  container.innerHTML = /* html */ `
+          <ark-droparea></ark-droparea>
+      `
 
-    dropZone.dispatchEvent(dropEvent)
-    expect(droparea.mediaList.length).toEqual(2)
-    expect(droparea.mediaList).toEqual([
-      {
-        name: 'Snoopy.png',
-        size: 5,
-        type: 'image/png',
-        url: undefined
-      },
-      {
-        name: 'Scooby.png',
-        size: 5,
-        type: 'image/png',
-        url: undefined
-      }
-    ])
-  })
-
-  it('Can select files from input', () => {
-    container.innerHTML = /* html */ `
-            <ark-droparea></ark-droparea>
-        `
-
-    const droparea = container.querySelector('ark-droparea')
-    const dropOpen = droparea.querySelector('.ark-droparea__open')
-    const input = droparea.querySelector('.ark-droparea__input')
-    const myFile = new File(['image'], 'Snoopy.png', {
-      type: 'image/png'
-    })
-    const changeEvent = createBubbledEvent('change', {})
-    Object.defineProperty(changeEvent, 'target', {
-      value: {
-        files: [myFile]
-      }
-    })
-    dropOpen.click()
-    input.dispatchEvent(changeEvent)
-    expect(droparea.fileList.length).toBeTruthy()
+  const droparea = container.querySelector('ark-droparea')
+  const dropZone = droparea.querySelector('.ark-droparea__form')
+  const myFile = new File(['image'], 'Snoopy.png', {
+    type: 'image/png'
+  })
+  const myFile2 = new File(['image'], 'Scooby.png', {
+    type: 'image/png'
   })
 
-  it('Can limit the file formats that component recieves', () => {
-    container.innerHTML = /* html */ `
-            <ark-droparea accept="jpg, png"></ark-droparea>
-        `
+  const dropEvent = createBubbledEvent('drop', {
+    clientX: 0,
+    clientY: 1,
+    dataTransfer: {
+      files: [myFile, myFile2]
+    }
+  })
 
-    const droparea = container.querySelector('ark-droparea')
-    const input = droparea.querySelector('.ark-droparea__input')
-    const myFile = new File(['image'], 'Snoopy.jpg', {
-      type: 'image/png'
-    })
-    const myFile2 = new File(['image'], 'Scrappy.png', {
-      type: 'image/png'
-    })
-    const changeEvent = createBubbledEvent('change', {})
-    Object.defineProperty(changeEvent, 'target', {
-      value: {
-        files: [myFile, myFile2]
-      }
-    })
+  dropZone.dispatchEvent(dropEvent)
+  assert.deepStrictEqual(droparea.mediaList.length, 2)
+  assert.deepStrictEqual(droparea.mediaList, [
+    {
+      name: 'Snoopy.png',
+      size: 5,
+      type: 'image/png',
+      url: undefined
+    },
+    {
+      name: 'Scooby.png',
+      size: 5,
+      type: 'image/png',
+      url: undefined
+    }
+  ])
+})
 
-    input.dispatchEvent(changeEvent)
-    expect(droparea.fileList.length).toBeTruthy()
+it('Can select files from input', () => {
+  setup()
+  container.innerHTML = /* html */ `
+          <ark-droparea></ark-droparea>
+      `
+
+  const droparea = container.querySelector('ark-droparea')
+  const dropOpen = droparea.querySelector('.ark-droparea__open')
+  const input = droparea.querySelector('.ark-droparea__input')
+  const myFile = new File(['image'], 'Snoopy.png', {
+    type: 'image/png'
+  })
+  const changeEvent = createBubbledEvent('change', {})
+  Object.defineProperty(changeEvent, 'target', {
+    value: {
+      files: [myFile]
+    }
   })
+  dropOpen.click()
+  input.dispatchEvent(changeEvent)
+  assert.ok(droparea.fileList.length)
+})
 
-  it("Does not allow dropping a file that doesn't not exist in accept'", () => {
-    container.innerHTML = /* html */ `
-            <ark-droparea accept="jpg, png"></ark-droparea>
-        `
+it('Can limit the file formats that component recieves', () => {
+  setup()
+  container.innerHTML = /* html */ `
+          <ark-droparea accept="jpg, png"></ark-droparea>
+      `
 
-    const droparea = container.querySelector('ark-droparea')
-    const input = droparea.querySelector('.ark-droparea__input')
-    const myFile = new File(['text'], 'Snoopy.txt', {
-      type: 'text/txt'
-    })
-    const changeEvent = createBubbledEvent('change', {})
-    Object.defineProperty(changeEvent, 'target', {
-      value: {
-        files: [myFile]
-      }
-    })
-    input.dispatchEvent(changeEvent)
-    expect(droparea.fileList.length).toBeFalsy()
+  const droparea = container.querySelector('ark-droparea')
+  const input = droparea.querySelector('.ark-droparea__input')
+  const myFile = new File(['image'], 'Snoopy.jpg', {
+    type: 'image/png'
+  })
+  const myFile2 = new File(['image'], 'Scrappy.png', {
+    type: 'image/png'
+  })
+  const changeEvent = createBubbledEvent('change', {})
+  Object.defineProperty(changeEvent, 'target', {
+    value: {
+      files: [myFile, myFile2]
+    }
   })
 
-  it("General file type values can be specified'", () => {
-    container.innerHTML = /* html */ `
-            <ark-droparea accept="audio, image, video, text">
-            </ark-droparea>
-        `
+  input.dispatchEvent(changeEvent)
+  assert.ok(droparea.fileList.length)
+})
 
-    const droparea = container.querySelector('ark-droparea')
-    const dropZone = droparea.querySelector('.ark-droparea__form')
-    const myFile = new File(['audio'], 'autechre.mp3', {
-      type: 'audio/mp3'
-    })
-    const myFile2 = new File(['video'], 'cats.mov', {
-      type: 'video/mov'
-    })
-    const myFile3 = new File(['image'], 'snoopy.jpg', {
-      type: 'image/jpg'
-    })
-    const myFile4 = new File(['text'], 'styles.css', {
-      type: 'text/css'
-    })
+it("Does not allow dropping a file that doesn't not exist in accept'", () => {
+  setup()
+  container.innerHTML = /* html */ `
+          <ark-droparea accept="jpg, png"></ark-droparea>
+      `
 
-    const files = [myFile, myFile2, myFile3, myFile4]
-    const dropEvent = createBubbledEvent('drop', {
-      clientX: 0,
-      clientY: 1,
-      dataTransfer: {
-        files
-      }
-    })
-    dropZone.dispatchEvent(dropEvent)
+  const droparea = container.querySelector('ark-droparea')
+  const input = droparea.querySelector('.ark-droparea__input')
+  const myFile = new File(['text'], 'Snoopy.txt', {
+    type: 'text/txt'
+  })
+  const changeEvent = createBubbledEvent('change', {})
+  Object.defineProperty(changeEvent, 'target', {
+    value: {
+      files: [myFile]
+    }
+  })
+  input.dispatchEvent(changeEvent)
+  assert.ok(!droparea.fileList.length)
+})
 
-    droparea.fileList.forEach((file, i) => {
-      expect(file.type).toBe(files[i].type)
-    })
+it("General file type values can be specified'", () => {
+  setup()
+  container.innerHTML = /* html */ `
+          <ark-droparea accept="audio, image, video, text">
+          </ark-droparea>
+      `
+
+  const droparea = container.querySelector('ark-droparea')
+  const dropZone = droparea.querySelector('.ark-droparea__form')
+  const myFile = new File(['audio'], 'autechre.mp3', {
+    type: 'audio/mp3'
+  })
+  const myFile2 = new File(['video'], 'cats.mov', {
+    type: 'video/mov'
+  })
+  const myFile3 = new File(['image'], 'snoopy.jpg', {
+    type: 'image/jpg'
+  })
+  const myFile4 = new File(['text'], 'styles.css', {
+    type: 'text/css'
   })
 
-  it('Size of files can be limited', () => {
-    container.innerHTML = /* html */ `
-            <ark-droparea max-size= "2"></ark-droparea>
-        `
+  const files = [myFile, myFile2, myFile3, myFile4]
+  const dropEvent = createBubbledEvent('drop', {
+    clientX: 0,
+    clientY: 1,
+    dataTransfer: {
+      files
+    }
+  })
+  dropZone.dispatchEvent(dropEvent)
 
-    const droparea = container.querySelector('ark-droparea')
-    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'
-    })
-    Object.defineProperty(myFile2, 'size', { value: 1024 * 1024 + 1 })
+  droparea.fileList.forEach((file, i) => {
+    assert.strictEqual(file.type, files[i].type)
+  })
+})
 
-    const dropEvent = createBubbledEvent('drop', {
-      clientX: 0,
-      clientY: 1,
-      dataTransfer: {
-        files: [myFile, myFile2]
-      }
-    })
+it('Size of files can be limited', () => {
+  setup()
+  container.innerHTML = /* html */ `
+          <ark-droparea max-size= "2"></ark-droparea>
+      `
 
-    droparea.maxSizeValidate([])
-    droparea.maxSizeValidate(myFile2)
-    dropZone.dispatchEvent(dropEvent)
-    expect(droparea.maxSizeValidate).toBeCalled
+  const droparea = container.querySelector('ark-droparea')
+  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'
+  })
+  Object.defineProperty(myFile2, 'size', { value: 1024 * 1024 + 1 })
+
+  const dropEvent = createBubbledEvent('drop', {
+    clientX: 0,
+    clientY: 1,
+    dataTransfer: {
+      files: [myFile, myFile2]
+    }
   })
 
+  const maxSizeValidateSpy = mock.method(droparea, 'maxSizeValidate')
+  droparea.maxSizeValidate([])
+  droparea.maxSizeValidate(myFile2)
+  dropZone.dispatchEvent(dropEvent)
+  assert.ok(maxSizeValidateSpy.mock.calls.length > 0)
+  maxSizeValidateSpy.mock.restore()
+})
 
-  it('allows to be passed a custom input element', () => {
-    container.innerHTML = /* html */ `
-      <ark-droparea single>
-        <input data-custom-input style="font-weight:bold" type="file">
-      </ark-droparea>
-    `
-
-    const droparea = container.querySelector('ark-droparea')
-    const input = droparea.querySelector('[data-custom-input]')
-    expect(input).toBeTruthy()
-    expect(input.style.fontWeight).toEqual('bold')
-    const dropZone = droparea.querySelector('.ark-droparea__form')
-    const myFile = new File(['image'], 'Snoopy.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('allows to be passed a custom input element', () => {
+  setup()
+  container.innerHTML = /* html */ `
+    <ark-droparea single>
+      <input data-custom-input style="font-weight:bold" type="file">
+    </ark-droparea>
+  `
+
+  const droparea = container.querySelector('ark-droparea')
+  const input = droparea.querySelector('[data-custom-input]')
+  assert.ok(input)
+  assert.deepStrictEqual(input.style.fontWeight, 'bold')
+  const dropZone = droparea.querySelector('.ark-droparea__form')
+  const myFile = new File(['image'], 'Snoopy.png', {
+    type: 'image/png'
+  })
+  const myFile2 = new File(['image'], 'Scooby.png', {
+    type: 'image/png'
+  })
 
-    dropZone.dispatchEvent(dropEvent)
-    expect(droparea.fileList.length).toBe(1)
-    expect(droparea.fileList[1]).toBeFalsy()
+  const dropEvent = createBubbledEvent('drop', {
+    clientX: 0,
+    clientY: 1,
+    dataTransfer: {
+      files: [myFile, myFile2]
+    }
   })
+
+  dropZone.dispatchEvent(dropEvent)
+  assert.strictEqual(droparea.fileList.length, 1)
+  assert.ok(!droparea.fileList[1])
 })

package/lib/components/droparea/index.js

@@ -1 +1,2 @@
+/** Drag-and-drop file input area components. */
 export { Droparea } from './components/droparea.js'