[pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

Author: pre-commit-ci[bot]

s3file/static/s3file/js/s3file.js

@@ -4,9 +4,9 @@
  * @param {string} responseText - XML response form AWS S3.
  * @return {string} - Key from response.
  */
-export function getKeyFromResponse (responseText) {
-  const xml = new globalThis.DOMParser().parseFromString(responseText, 'text/xml')
-  return decodeURI(xml.querySelector('Key').innerHTML)
+export function getKeyFromResponse(responseText) {
+  const xml = new globalThis.DOMParser().parseFromString(responseText, "text/xml")
+  return decodeURI(xml.querySelector("Key").innerHTML)
 }
 
 /**
@@ -15,29 +15,29 @@ export function getKeyFromResponse (responseText) {
  * @extends HTMLInputElement
  */
 export class S3FileInput extends globalThis.HTMLInputElement {
-  constructor () {
+  constructor() {
     super()
-    this.type = 'file'
+    this.type = "file"
     this.keys = []
     this.upload = null
   }
 
-  connectedCallback () {
-    this.form.addEventListener('formdata', this.fromDataHandler.bind(this))
-    this.form.addEventListener('submit', this.submitHandler.bind(this), { once: true })
-    this.form.addEventListener('upload', this.uploadHandler.bind(this))
-    this.addEventListener('change', this.changeHandler.bind(this))
+  connectedCallback() {
+    this.form.addEventListener("formdata", this.fromDataHandler.bind(this))
+    this.form.addEventListener("submit", this.submitHandler.bind(this), { once: true })
+    this.form.addEventListener("upload", this.uploadHandler.bind(this))
+    this.addEventListener("change", this.changeHandler.bind(this))
   }
 
-  changeHandler () {
+  changeHandler() {
     this.keys = []
     this.upload = null
     try {
-      this.form.removeEventListener('submit', this.submitHandler.bind(this))
+      this.form.removeEventListener("submit", this.submitHandler.bind(this))
     } catch (error) {
       console.debug(error)
     }
-    this.form.addEventListener('submit', this.submitHandler.bind(this), { once: true })
+    this.form.addEventListener("submit", this.submitHandler.bind(this), { once: true })
   }
 
   /**
@@ -46,14 +46,14 @@ export class S3FileInput extends globalThis.HTMLInputElement {
    * @param {SubmitEvent} event - The submit event.
    * @return {Promise<void>}
    */
-  async submitHandler (event) {
+  async submitHandler(event) {
     event.preventDefault()
-    this.form.dispatchEvent(new window.CustomEvent('upload'))
+    this.form.dispatchEvent(new window.CustomEvent("upload"))
     await Promise.all(this.form.pendingRquests)
     this.form.requestSubmit(event.submitter)
   }
 
-  uploadHandler () {
+  uploadHandler() {
     if (this.files.length && !this.upload) {
       this.upload = this.uploadFiles()
       this.form.pendingRquests = this.form.pendingRquests || []
@@ -66,13 +66,13 @@ export class S3FileInput extends globalThis.HTMLInputElement {
    *
    * @param {FormDataEvent} event - The formdata event.
    */
-  fromDataHandler (event) {
+  fromDataHandler(event) {
     if (this.keys.length) {
       event.formData.delete(this.name)
       for (const key of this.keys) {
         event.formData.append(this.name, key)
       }
-      event.formData.append('s3file', this.name)
+      event.formData.append("s3file", this.name)
       event.formData.set(`${this.name}-s3f-signature`, this.dataset.s3fSignature)
     }
   }
@@ -82,24 +82,24 @@ export class S3FileInput extends globalThis.HTMLInputElement {
    *
    * @return {Promise<void>}
    */
-  async uploadFiles () {
+  async uploadFiles() {
     this.keys = []
     for (const file of this.files) {
       const s3Form = new globalThis.FormData()
       for (const attr of this.attributes) {
         let name = attr.name
 
-        if (name.startsWith('data-fields')) {
-          name = name.replace('data-fields-', '')
+        if (name.startsWith("data-fields")) {
+          name = name.replace("data-fields-", "")
           s3Form.append(name, attr.value)
         }
       }
-      s3Form.append('success_action_status', '201')
-      s3Form.append('Content-Type', file.type)
-      s3Form.append('file', file)
-      console.debug('uploading', this.dataset.url, file)
+      s3Form.append("success_action_status", "201")
+      s3Form.append("Content-Type", file.type)
+      s3Form.append("file", file)
+      console.debug("uploading", this.dataset.url, file)
       try {
-        const response = await fetch(this.dataset.url, { method: 'POST', body: s3Form })
+        const response = await fetch(this.dataset.url, { method: "POST", body: s3Form })
         if (response.status === 201) {
           this.keys.push(getKeyFromResponse(await response.text()))
         } else {
@@ -115,4 +115,4 @@ export class S3FileInput extends globalThis.HTMLInputElement {
   }
 }
 
-globalThis.customElements.define('s3-file', S3FileInput, { extends: 'input' })
+globalThis.customElements.define("s3-file", S3FileInput, { extends: "input" })

tests/__tests__/s3file.test.js

@@ -1,36 +1,38 @@
-import 'global-jsdom/register'
-import assert from 'node:assert'
-import { afterEach, describe, mock, test } from 'node:test'
-import * as s3file from '../../s3file/static/s3file/js/s3file.js'
+import "global-jsdom/register"
+import assert from "node:assert"
+import { afterEach, describe, mock, test } from "node:test"
+import * as s3file from "../../s3file/static/s3file/js/s3file.js"
 
 afterEach(() => {
   mock.restoreAll()
 })
 
-describe('getKeyFromResponse', () => {
-  test('returns key', () => {
-    const responseText =
-      `<?xml version="1.0" encoding="UTF-8"?>
+describe("getKeyFromResponse", () => {
+  test("returns key", () => {
+    const responseText = `<?xml version="1.0" encoding="UTF-8"?>
       <PostResponse>
       <Location>https://example-bucket.s3.amazonaws.com/tmp%2Fs2file%2Fsome-file.jpeg</Location>
       <Bucket>example-bucket</Bucket>
       <Key>tmp/s2file/some%20file.jpeg</Key>
       <ETag>"a38155039ec348f97dfd63da4cb2619d"</ETag>
       </PostResponse>`
-    assert.strictEqual(s3file.getKeyFromResponse(responseText), 'tmp/s2file/some file.jpeg')
+    assert.strictEqual(
+      s3file.getKeyFromResponse(responseText),
+      "tmp/s2file/some file.jpeg",
+    )
   })
 })
 
-describe('S3FileInput', () => {
-  test('constructor', () => {
+describe("S3FileInput", () => {
+  test("constructor", () => {
     const input = new s3file.S3FileInput()
-    assert.strictEqual(input.type, 'file')
+    assert.strictEqual(input.type, "file")
     assert.deepStrictEqual(input.keys, [])
     assert.strictEqual(input.upload, null)
   })
 
-  test('connectedCallback', () => {
-    const form = document.createElement('form')
+  test("connectedCallback", () => {
+    const form = document.createElement("form")
     document.body.appendChild(form)
     const input = new s3file.S3FileInput()
     input.addEventListener = mock.fn(input.addEventListener)
@@ -40,41 +42,41 @@ describe('S3FileInput', () => {
     assert(input.addEventListener.mock.calls.length === 1)
   })
 
-  test('changeHandler', () => {
-    const form = document.createElement('form')
+  test("changeHandler", () => {
+    const form = document.createElement("form")
     const input = new s3file.S3FileInput()
-    input.keys = ['key']
-    input.upload = 'upload'
+    input.keys = ["key"]
+    input.upload = "upload"
     form.appendChild(input)
     input.changeHandler()
     assert(!input.keys.length)
     assert(!input.upload)
   })
 
-  test('submitHandler', async () => {
-    const form = document.createElement('form')
+  test("submitHandler", async () => {
+    const form = document.createElement("form")
     document.body.appendChild(form)
     form.pendingRquests = []
     form.requestSubmit = mock.fn(form.requestSubmit)
     form.dispatchEvent = mock.fn(form.dispatchEvent)
-    const submitButton = document.createElement('button')
+    const submitButton = document.createElement("button")
     form.appendChild(submitButton)
-    submitButton.setAttribute('type', 'submit')
-    const event = new window.SubmitEvent('submit', { submitter: submitButton })
+    submitButton.setAttribute("type", "submit")
+    const event = new window.SubmitEvent("submit", { submitter: submitButton })
     const input = new s3file.S3FileInput()
     form.appendChild(input)
     await input.submitHandler(event)
     assert(form.dispatchEvent.mock.calls.length === 2)
     assert(form.requestSubmit.mock.calls.length === 2)
   })
 
-  test('uploadHandler', () => {
-    const form = document.createElement('form')
+  test("uploadHandler", () => {
+    const form = document.createElement("form")
     document.body.appendChild(form)
     const input = new s3file.S3FileInput()
     form.appendChild(input)
-    Object.defineProperty(input, 'files', {
-      get: () => [new globalThis.File([''], 'file.txt')]
+    Object.defineProperty(input, "files", {
+      get: () => [new globalThis.File([""], "file.txt")],
     })
     assert(!input.upload)
     assert.strictEqual(input.files.length, 1)
@@ -84,31 +86,30 @@ describe('S3FileInput', () => {
     assert(form.pendingRquests)
   })
 
-  test('fromDataHandler', () => {
-    const event = new globalThis.CustomEvent('formdata', { formData: new FormData() })
-    const form = document.createElement('form')
+  test("fromDataHandler", () => {
+    const event = new globalThis.CustomEvent("formdata", { formData: new FormData() })
+    const form = document.createElement("form")
     document.body.appendChild(form)
     const input = new s3file.S3FileInput()
     form.appendChild(input)
-    input.name = 'file'
-    input.keys = ['key1', 'key2']
+    input.name = "file"
+    input.keys = ["key1", "key2"]
     event.formData = new FormData()
     input.fromDataHandler(event)
-    assert.deepStrictEqual(event.formData.getAll('file'), ['key1', 'key2'])
-    assert.strictEqual(event.formData.get('s3file'), 'file')
+    assert.deepStrictEqual(event.formData.getAll("file"), ["key1", "key2"])
+    assert.strictEqual(event.formData.get("s3file"), "file")
   })
 
-  test('uploadFiles', async () => {
-    const form = document.createElement('form')
+  test("uploadFiles", async () => {
+    const form = document.createElement("form")
     document.body.appendChild(form)
     const input = new s3file.S3FileInput()
-    input.setAttribute('data-fields-policy', 'policy')
+    input.setAttribute("data-fields-policy", "policy")
     form.appendChild(input)
-    Object.defineProperty(input, 'files', {
-      get: () => [new globalThis.File([''], 'file.txt')]
+    Object.defineProperty(input, "files", {
+      get: () => [new globalThis.File([""], "file.txt")],
     })
-    const responseText =
-      `<?xml version="1.0" encoding="UTF-8"?>
+    const responseText = `<?xml version="1.0" encoding="UTF-8"?>
       <PostResponse>
       <Location>https://example-bucket.s3.amazonaws.com/tmp%2Fs2file%2Fsome-file.jpeg</Location>
       <Bucket>example-bucket</Bucket>
@@ -120,39 +121,41 @@ describe('S3FileInput', () => {
     assert(input.files.length === 1)
     await input.uploadFiles()
     assert(globalThis.fetch.mock.calls.length === 1)
-    assert.deepStrictEqual(input.keys, ['tmp/s2file/some file.jpeg'])
+    assert.deepStrictEqual(input.keys, ["tmp/s2file/some file.jpeg"])
   })
 
-  test('uploadFiles with HTTP error', async () => {
-    const form = document.createElement('form')
+  test("uploadFiles with HTTP error", async () => {
+    const form = document.createElement("form")
     document.body.appendChild(form)
     const input = new s3file.S3FileInput()
     form.appendChild(input)
-    Object.defineProperty(input, 'files', {
-      get: () => [new globalThis.File([''], 'file.txt')]
+    Object.defineProperty(input, "files", {
+      get: () => [new globalThis.File([""], "file.txt")],
     })
-    const response = { status: 400, statusText: 'Bad Request' }
+    const response = { status: 400, statusText: "Bad Request" }
     globalThis.fetch = mock.fn(async () => response)
     assert(input.files.length === 1)
     await input.uploadFiles()
     assert(globalThis.fetch.mock.calls.length === 1)
     assert.deepStrictEqual(input.keys, [])
-    assert.strictEqual(input.validationMessage, 'Bad Request')
+    assert.strictEqual(input.validationMessage, "Bad Request")
   })
 
-  test('uploadFiles with network error', async () => {
-    const form = document.createElement('form')
+  test("uploadFiles with network error", async () => {
+    const form = document.createElement("form")
     document.body.appendChild(form)
     const input = new s3file.S3FileInput()
     form.appendChild(input)
-    Object.defineProperty(input, 'files', {
-      get: () => [new globalThis.File([''], 'file.txt')]
+    Object.defineProperty(input, "files", {
+      get: () => [new globalThis.File([""], "file.txt")],
+    })
+    globalThis.fetch = mock.fn(async () => {
+      throw new Error("Network Error")
     })
-    globalThis.fetch = mock.fn(async () => { throw new Error('Network Error') })
     assert(input.files.length === 1)
     await input.uploadFiles()
     assert(globalThis.fetch.mock.calls.length === 1)
     assert.deepStrictEqual(input.keys, [])
-    assert.strictEqual(input.validationMessage, 'Error: Network Error')
+    assert.strictEqual(input.validationMessage, "Error: Network Error")
   })
 })