Use AbortController for input event cleanup, lets try figureout alpine issue

package-lock.json

@@ -21,7 +21,6 @@
         "@vitest/coverage-v8": "^2.0.2",
         "@vue/test-utils": "^2.4.6",
         "alpinejs": "^3.14.0",
-        "happy-dom": "^14.12.0",
         "jsdom": "^25.0.1",
         "svelte": "^4.2.17",
         "ts-standard": "^12.0.2",
@@ -4483,6 +4482,8 @@
       "integrity": "sha512-vsYlEs3E9gLwA1Hp+w3qzu+RUDFf4VTT8cyKqVICoZ2k7WM++Qyd2LwzyTi5bqMJFiIC/vNpTDYuxdreENRK/g==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "entities": "^4.5.0",
         "webidl-conversions": "^7.0.0",
@@ -8087,6 +8088,8 @@
       "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=12"
       }

package.json

@@ -84,7 +84,6 @@
     "@vitest/coverage-v8": "^2.0.2",
     "@vue/test-utils": "^2.4.6",
     "alpinejs": "^3.14.0",
-    "happy-dom": "^14.12.0",
     "jsdom": "^25.0.1",
     "svelte": "^4.2.17",
     "ts-standard": "^12.0.2",

test/input-jsdom.test.ts

@@ -1,136 +0,0 @@
-// @vitest-environment jsdom
-
-import {
-  afterEach,
-  beforeAll,
-  beforeEach,
-  describe,
-  expect,
-  MockInstance,
-  test,
-  vi
-} from 'vitest'
-import userEvent from '@testing-library/user-event'
-
-import { MaskInput, MaskInputOptions } from '../src/input'
-
-let input: HTMLInputElement
-const user = userEvent.setup()
-
-function prepareInput(opts: MaskInputOptions, value = '') {
-  document.body.innerHTML = `<input id="input" value="${value}">`
-  new MaskInput('#input', opts)
-
-  return <HTMLInputElement>document.getElementById('input')!
-}
-
-describe('test init', () => {
-  test('init and destroy', async () => {
-    document.body.innerHTML = `<input id="input" data-maska="#">`
-    const input = <HTMLInputElement>document.getElementById('input')
-    const mask = new MaskInput(input)
-
-    expect(mask.items.has(input)).toBe(true)
-
-    await user.type(input, 'a12b')
-    expect(input).toHaveValue('1')
-
-    await user.clear(input)
-
-    mask.destroy()
-
-    expect(mask.items.has(input)).toBe(false)
-
-    await user.type(input, 'a12b')
-    expect(input).toHaveValue('a12b')
-  })
-
-  test('init multiple', async () => {
-    document.body.innerHTML = `
-      <input data-maska="#-#" data-maska-eager>
-      <input data-maska="#-#">
-    `
-    const mask = new MaskInput('[data-maska]')
-
-    expect([...mask.items][0][1].isEager()).toBe(true)
-    expect([...mask.items][1][1].isEager()).toBe(false)
-  })
-
-  test('test callback', async () => {
-    document.body.innerHTML = `<input id="input" data-maska="#-#">`
-    const input = <HTMLInputElement>document.getElementById('input')
-    const onMaska = vi.fn()
-
-    new MaskInput(input, { onMaska })
-
-    await user.type(input, '12')
-    expect(onMaska).toHaveBeenCalledTimes(2)
-    expect(onMaska).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        masked: '1-2',
-        unmasked: '12',
-        completed: true
-      })
-    )
-  })
-
-  test('test callbacks', async () => {
-    document.body.innerHTML = `<input id="input" data-maska="#-#">`
-    const input = <HTMLInputElement>document.getElementById('input')
-    const onMaska1 = vi.fn()
-    const onMaska2 = vi.fn()
-
-    new MaskInput(input, { onMaska: [onMaska1, onMaska2] })
-
-    await user.type(input, '12')
-    expect(onMaska1).toHaveBeenCalledTimes(2)
-    expect(onMaska2).toHaveBeenCalledTimes(2)
-    expect(onMaska1).toHaveBeenLastCalledWith(
-      expect.objectContaining({
-        masked: '1-2',
-        unmasked: '12',
-        completed: true
-      })
-    )
-  })
-
-  test('init with element list', async () => {
-    document.body.innerHTML = `<input class="input"><input class="input">`
-    const inputs = <NodeListOf<HTMLInputElement>>(
-      document.querySelectorAll('.input')
-    )
-    const mask = new MaskInput(inputs)
-
-    expect([...mask.items].length).toBe(2)
-    expect(mask.items.has(inputs[0])).toBe(true)
-  })
-
-  test('no mask param', async () => {
-    document.body.innerHTML = `<input id="input">`
-    const input = <HTMLInputElement>document.getElementById('input')
-    new MaskInput('#input')
-
-    await user.type(input, '1a')
-    expect(input).toHaveValue('1a')
-  })
-
-  test('no mask param', async () => {
-    document.body.innerHTML = `<input id="input">`
-    const input = <HTMLInputElement>document.getElementById('input')
-    new MaskInput(input)
-
-    await user.type(input, '1a')
-    expect(input).toHaveValue('1a')
-  })
-
-  test('wrong input type', async () => {
-    document.body.innerHTML = `<input id="input" type="email" data-maska-eager>`
-    const input = <HTMLInputElement>document.getElementById('input')
-    const logSpy = vi.spyOn(console, 'warn')
-
-    new MaskInput(input)
-
-    expect(logSpy).toHaveBeenCalledOnce();
-    expect(logSpy).toHaveBeenCalledWith('Maska: input of `%s` type is not supported', 'email');
-  })
-})

test/input.test.ts

@@ -22,6 +22,117 @@ function prepareInput(opts: MaskInputOptions, value = '') {
   return <HTMLInputElement>document.getElementById('input')!
 }
 
+describe('test init', () => {
+  test('init and destroy', async () => {
+    document.body.innerHTML = `<input id="input" data-maska="#">`
+    const input = <HTMLInputElement>document.getElementById('input')
+    const mask = new MaskInput(input)
+
+    expect(mask.items.has(input)).toBe(true)
+
+    await user.type(input, 'a12b')
+    expect(input).toHaveValue('1')
+
+    await user.clear(input)
+
+    mask.destroy()
+
+    expect(mask.items.has(input)).toBe(false)
+
+    await user.type(input, 'a12b')
+    expect(input).toHaveValue('a12b')
+  })
+
+  test('init multiple', async () => {
+    document.body.innerHTML = `
+      <input data-maska="#-#" data-maska-eager>
+      <input data-maska="#-#">
+    `
+    const mask = new MaskInput('[data-maska]')
+
+    expect([...mask.items][0][1].isEager()).toBe(true)
+    expect([...mask.items][1][1].isEager()).toBe(false)
+  })
+
+  test('test callback', async () => {
+    document.body.innerHTML = `<input id="input" data-maska="#-#">`
+    const input = <HTMLInputElement>document.getElementById('input')
+    const onMaska = vi.fn()
+
+    new MaskInput(input, { onMaska })
+
+    await user.type(input, '12')
+    expect(onMaska).toHaveBeenCalledTimes(2)
+    expect(onMaska).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        masked: '1-2',
+        unmasked: '12',
+        completed: true
+      })
+    )
+  })
+
+  test('test callbacks', async () => {
+    document.body.innerHTML = `<input id="input" data-maska="#-#">`
+    const input = <HTMLInputElement>document.getElementById('input')
+    const onMaska1 = vi.fn()
+    const onMaska2 = vi.fn()
+
+    new MaskInput(input, { onMaska: [onMaska1, onMaska2] })
+
+    await user.type(input, '12')
+    expect(onMaska1).toHaveBeenCalledTimes(2)
+    expect(onMaska2).toHaveBeenCalledTimes(2)
+    expect(onMaska1).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        masked: '1-2',
+        unmasked: '12',
+        completed: true
+      })
+    )
+  })
+
+  test('init with element list', async () => {
+    document.body.innerHTML = `<input class="input"><input class="input">`
+    const inputs = <NodeListOf<HTMLInputElement>>(
+      document.querySelectorAll('.input')
+    )
+    const mask = new MaskInput(inputs)
+
+    expect([...mask.items].length).toBe(2)
+    expect(mask.items.has(inputs[0])).toBe(true)
+  })
+
+  test('no mask param', async () => {
+    document.body.innerHTML = `<input id="input">`
+    const input = <HTMLInputElement>document.getElementById('input')
+    new MaskInput('#input')
+
+    await user.type(input, '1a')
+    expect(input).toHaveValue('1a')
+  })
+
+  test('no mask param', async () => {
+    document.body.innerHTML = `<input id="input">`
+    const input = <HTMLInputElement>document.getElementById('input')
+    new MaskInput(input)
+
+    await user.type(input, '1a')
+    expect(input).toHaveValue('1a')
+  })
+
+  test('wrong input type', async () => {
+    document.body.innerHTML = `<input id="input" type="email" data-maska-eager>`
+    const input = <HTMLInputElement>document.getElementById('input')
+    const logSpy = vi.spyOn(console, 'warn')
+
+    new MaskInput(input)
+
+    expect(logSpy).toHaveBeenCalledOnce();
+    expect(logSpy).toHaveBeenCalledWith('Maska: input of `%s` type is not supported', 'email');
+  })
+})
+
 interface HooksTestContext {
   onMaska: MockInstance
   preProcess: MockInstance

vite.config.mts

@@ -53,7 +53,7 @@ export default defineConfig(({ mode }) => ({
   ],
   test: {
     setupFiles: 'test/setup.ts',
-    environment: 'happy-dom',
+    environment: 'jsdom',
     coverage: {
       provider: 'v8',
       reporter: ['text', 'json-summary']