@furystack/shades-common-components 11.0.0 → 12.0.1

package/src/components/form.spec.tsx

@@ -1,6 +1,6 @@
 import { Injector } from '@furystack/inject'
 import { createComponent, initializeShadeRoot } from '@furystack/shades'
-import { sleepAsync, using } from '@furystack/utils'
+import { sleepAsync, using, usingAsync } from '@furystack/utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { Form, FormService } from './form.js'
 
@@ -104,378 +104,388 @@ describe('Form component', () => {
   })
 
   it('should render children', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    type FormData = { name: string }
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <Form<FormData>
-          onSubmit={() => {}}
-          validate={(data): data is FormData => {
-            const d = data as Record<string, unknown>
-            return typeof d.name === 'string'
-          }}
-        >
-          <input name="name" type="text" />
-          <button type="submit">Submit</button>
-        </Form>
-      ),
-    })
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      type FormData = { name: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={() => {}}
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.name === 'string'
+            }}
+          >
+            <input name="name" type="text" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const form = document.querySelector('form[is="shade-form"]')
-    expect(form).not.toBeNull()
-    expect(form?.querySelector('input[name="name"]')).not.toBeNull()
-    expect(form?.querySelector('button[type="submit"]')).not.toBeNull()
+      const form = document.querySelector('form[is="shade-form"]')
+      expect(form).not.toBeNull()
+      expect(form?.querySelector('input[name="name"]')).not.toBeNull()
+      expect(form?.querySelector('button[type="submit"]')).not.toBeNull()
+    })
   })
 
   it('should call onSubmit with validated data when form is valid', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const onSubmit = vi.fn()
-
-    type FormData = { name: string }
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <Form<FormData>
-          onSubmit={onSubmit}
-          validate={(data): data is FormData => {
-            const d = data as Record<string, unknown>
-            return typeof d.name === 'string'
-          }}
-        >
-          <input name="name" type="text" value="Test Name" />
-          <button type="submit">Submit</button>
-        </Form>
-      ),
-    })
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const onSubmit = vi.fn()
+
+      type FormData = { name: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={onSubmit}
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.name === 'string'
+            }}
+          >
+            <input name="name" type="text" value="Test Name" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
-    const input = form.querySelector('input[name="name"]') as HTMLInputElement
-    input.value = 'Test Name'
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="name"]') as HTMLInputElement
+      input.value = 'Test Name'
 
-    const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
-    form.dispatchEvent(submitEvent)
+      const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
+      form.dispatchEvent(submitEvent)
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    expect(onSubmit).toHaveBeenCalledWith({ name: 'Test Name' })
+      expect(onSubmit).toHaveBeenCalledWith({ name: 'Test Name' })
+    })
   })
 
   it('should not call onSubmit when validation fails', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const onSubmit = vi.fn()
-
-    type FormData = { name: string; email: string }
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <Form<FormData>
-          onSubmit={onSubmit}
-          validate={(data): data is FormData => {
-            const d = data as Record<string, unknown>
-            return typeof d.name === 'string' && typeof d.email === 'string' && d.email.includes('@')
-          }}
-        >
-          <input name="name" type="text" />
-          <input name="email" type="text" />
-          <button type="submit">Submit</button>
-        </Form>
-      ),
-    })
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const onSubmit = vi.fn()
+
+      type FormData = { name: string; email: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={onSubmit}
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.name === 'string' && typeof d.email === 'string' && d.email.includes('@')
+            }}
+          >
+            <input name="name" type="text" />
+            <input name="email" type="text" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
-    const nameInput = form.querySelector('input[name="name"]') as HTMLInputElement
-    const emailInput = form.querySelector('input[name="email"]') as HTMLInputElement
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const nameInput = form.querySelector('input[name="name"]') as HTMLInputElement
+      const emailInput = form.querySelector('input[name="email"]') as HTMLInputElement
 
-    nameInput.value = 'Test'
-    emailInput.value = 'invalid-email'
+      nameInput.value = 'Test'
+      emailInput.value = 'invalid-email'
 
-    const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
-    form.dispatchEvent(submitEvent)
+      const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
+      form.dispatchEvent(submitEvent)
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    expect(onSubmit).not.toHaveBeenCalled()
+      expect(onSubmit).not.toHaveBeenCalled()
+    })
   })
 
   it('should set validation result to validation-failed when validate returns false', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    type FormData = { email: string }
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <Form<FormData>
-          onSubmit={() => {}}
-          validate={(data): data is FormData => {
-            const d = data as Record<string, unknown>
-            return typeof d.email === 'string' && d.email.includes('@')
-          }}
-        >
-          <input name="email" type="text" />
-          <button type="submit">Submit</button>
-        </Form>
-      ),
-    })
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      type FormData = { email: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={() => {}}
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.email === 'string' && d.email.includes('@')
+            }}
+          >
+            <input name="email" type="text" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
-    const input = form.querySelector('input[name="email"]') as HTMLInputElement
-    input.value = 'no-at-sign'
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="email"]') as HTMLInputElement
+      input.value = 'no-at-sign'
 
-    const changeEvent = new Event('change', { bubbles: true })
-    form.dispatchEvent(changeEvent)
+      const changeEvent = new Event('change', { bubbles: true })
+      form.dispatchEvent(changeEvent)
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const formInjector = (form as unknown as { injector: Injector }).injector
-    const formService = formInjector.getInstance(FormService)
+      const formInjector = (form as unknown as { injector: Injector }).injector
+      const formService = formInjector.getInstance(FormService)
 
-    expect(formService.validationResult.getValue()).toEqual({
-      isValid: false,
-      reason: 'validation-failed',
+      expect(formService.validationResult.getValue()).toEqual({
+        isValid: false,
+        reason: 'validation-failed',
+      })
     })
   })
 
   it('should reset form state on reset event', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-    const onReset = vi.fn()
-
-    type FormData = { name: string }
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <Form<FormData>
-          onSubmit={() => {}}
-          onReset={onReset}
-          validate={(data): data is FormData => {
-            const d = data as Record<string, unknown>
-            return typeof d.name === 'string'
-          }}
-        >
-          <input name="name" type="text" />
-          <button type="submit">Submit</button>
-          <button type="reset">Reset</button>
-        </Form>
-      ),
-    })
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      const onReset = vi.fn()
+
+      type FormData = { name: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={() => {}}
+            onReset={onReset}
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.name === 'string'
+            }}
+          >
+            <input name="name" type="text" />
+            <button type="submit">Submit</button>
+            <button type="reset">Reset</button>
+          </Form>
+        ),
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
-    const input = form.querySelector('input[name="name"]') as HTMLInputElement
-    input.value = 'Test'
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="name"]') as HTMLInputElement
+      input.value = 'Test'
 
-    const changeEvent = new Event('change', { bubbles: true })
-    form.dispatchEvent(changeEvent)
+      const changeEvent = new Event('change', { bubbles: true })
+      form.dispatchEvent(changeEvent)
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const formInjector = (form as unknown as { injector: Injector }).injector
-    const formService = formInjector.getInstance(FormService)
+      const formInjector = (form as unknown as { injector: Injector }).injector
+      const formService = formInjector.getInstance(FormService)
 
-    expect(formService.rawFormData.getValue()).toEqual({ name: 'Test' })
+      expect(formService.rawFormData.getValue()).toEqual({ name: 'Test' })
 
-    const resetEvent = new Event('reset', { bubbles: true })
-    form.dispatchEvent(resetEvent)
+      const resetEvent = new Event('reset', { bubbles: true })
+      form.dispatchEvent(resetEvent)
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    expect(formService.rawFormData.getValue()).toBeNull()
-    expect(formService.validationResult.getValue()).toEqual({ isValid: null })
-    expect(formService.validatedFormData.getValue()).toBeNull()
+      expect(formService.rawFormData.getValue()).toBeNull()
+      expect(formService.validationResult.getValue()).toEqual({ isValid: null })
+      expect(formService.validatedFormData.getValue()).toBeNull()
+    })
   })
 
   it('should update rawFormData on change event', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    type FormData = { username: string }
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <Form<FormData>
-          onSubmit={() => {}}
-          validate={(data): data is FormData => {
-            const d = data as Record<string, unknown>
-            return typeof d.username === 'string'
-          }}
-        >
-          <input name="username" type="text" />
-        </Form>
-      ),
-    })
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      type FormData = { username: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={() => {}}
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.username === 'string'
+            }}
+          >
+            <input name="username" type="text" />
+          </Form>
+        ),
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
-    const input = form.querySelector('input[name="username"]') as HTMLInputElement
-    input.value = 'testuser'
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="username"]') as HTMLInputElement
+      input.value = 'testuser'
 
-    const changeEvent = new Event('change', { bubbles: true })
-    form.dispatchEvent(changeEvent)
+      const changeEvent = new Event('change', { bubbles: true })
+      form.dispatchEvent(changeEvent)
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const formInjector = (form as unknown as { injector: Injector }).injector
-    const formService = formInjector.getInstance(FormService)
+      const formInjector = (form as unknown as { injector: Injector }).injector
+      const formService = formInjector.getInstance(FormService)
 
-    expect(formService.rawFormData.getValue()).toEqual({ username: 'testuser' })
+      expect(formService.rawFormData.getValue()).toEqual({ username: 'testuser' })
+    })
   })
 
   it('should set validatedFormData when validation passes', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    type FormData = { title: string }
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <Form<FormData>
-          onSubmit={() => {}}
-          validate={(data): data is FormData => {
-            const d = data as Record<string, unknown>
-            return typeof d.title === 'string'
-          }}
-        >
-          <input name="title" type="text" />
-        </Form>
-      ),
-    })
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      type FormData = { title: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={() => {}}
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.title === 'string'
+            }}
+          >
+            <input name="title" type="text" />
+          </Form>
+        ),
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
-    const input = form.querySelector('input[name="title"]') as HTMLInputElement
-    input.value = 'My Title'
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="title"]') as HTMLInputElement
+      input.value = 'My Title'
 
-    const changeEvent = new Event('change', { bubbles: true })
-    form.dispatchEvent(changeEvent)
+      const changeEvent = new Event('change', { bubbles: true })
+      form.dispatchEvent(changeEvent)
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const formInjector = (form as unknown as { injector: Injector }).injector
-    const formService = formInjector.getInstance(FormService)
+      const formInjector = (form as unknown as { injector: Injector }).injector
+      const formService = formInjector.getInstance(FormService)
 
-    expect(formService.validatedFormData.getValue()).toEqual({ title: 'My Title' })
-    expect(formService.validationResult.getValue()).toEqual({ isValid: true })
+      expect(formService.validatedFormData.getValue()).toEqual({ title: 'My Title' })
+      expect(formService.validationResult.getValue()).toEqual({ isValid: true })
+    })
   })
 
   it('should prevent default on submit event', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    type FormData = { field: string }
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <Form<FormData> onSubmit={() => {}} validate={(_data): _data is FormData => true}>
-          <input name="field" type="text" />
-          <button type="submit">Submit</button>
-        </Form>
-      ),
-    })
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      type FormData = { field: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData> onSubmit={() => {}} validate={(_data): _data is FormData => true}>
+            <input name="field" type="text" />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
 
-    const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
-    const preventDefaultSpy = vi.spyOn(submitEvent, 'preventDefault')
+      const submitEvent = new Event('submit', { bubbles: true, cancelable: true })
+      const preventDefaultSpy = vi.spyOn(submitEvent, 'preventDefault')
 
-    form.dispatchEvent(submitEvent)
+      form.dispatchEvent(submitEvent)
 
-    expect(preventDefaultSpy).toHaveBeenCalled()
+      expect(preventDefaultSpy).toHaveBeenCalled()
+    })
   })
 
   it('should create child injector with FormService', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    type FormData = { data: string }
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <Form<FormData> onSubmit={() => {}} validate={(_data): _data is FormData => true}>
-          <input name="data" type="text" />
-        </Form>
-      ),
-    })
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      type FormData = { data: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData> onSubmit={() => {}} validate={(_data): _data is FormData => true}>
+            <input name="data" type="text" />
+          </Form>
+        ),
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
-    const formInjector = (form as unknown as { injector: Injector }).injector
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const formInjector = (form as unknown as { injector: Injector }).injector
 
-    expect(formInjector).toBeInstanceOf(Injector)
-    expect(formInjector).not.toBe(injector)
+      expect(formInjector).toBeInstanceOf(Injector)
+      expect(formInjector).not.toBe(injector)
 
-    const formService = formInjector.getInstance(FormService)
-    expect(formService).toBeInstanceOf(FormService)
+      const formService = formInjector.getInstance(FormService)
+      expect(formService).toBeInstanceOf(FormService)
+    })
   })
 
   it('should handle oninvalid event and trigger validation', async () => {
-    const injector = new Injector()
-    const rootElement = document.getElementById('root') as HTMLDivElement
-
-    type FormData = { required: string }
-
-    initializeShadeRoot({
-      injector,
-      rootElement,
-      jsxElement: (
-        <Form<FormData>
-          onSubmit={() => {}}
-          validate={(data): data is FormData => {
-            const d = data as Record<string, unknown>
-            return typeof d.required === 'string' && d.required.length > 0
-          }}
-        >
-          <input name="required" type="text" required />
-          <button type="submit">Submit</button>
-        </Form>
-      ),
-    })
+    await usingAsync(new Injector(), async (injector) => {
+      const rootElement = document.getElementById('root') as HTMLDivElement
+
+      type FormData = { required: string }
+
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <Form<FormData>
+            onSubmit={() => {}}
+            validate={(data): data is FormData => {
+              const d = data as Record<string, unknown>
+              return typeof d.required === 'string' && d.required.length > 0
+            }}
+          >
+            <input name="required" type="text" required />
+            <button type="submit">Submit</button>
+          </Form>
+        ),
+      })
 
-    await sleepAsync(50)
+      await sleepAsync(50)
 
-    const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
-    const input = form.querySelector('input[name="required"]') as HTMLInputElement
+      const form = document.querySelector('form[is="shade-form"]') as HTMLFormElement
+      const input = form.querySelector('input[name="required"]') as HTMLInputElement
 
-    const invalidEvent = new Event('invalid', { bubbles: true })
-    input.dispatchEvent(invalidEvent)
+      const invalidEvent = new Event('invalid', { bubbles: true })
+      input.dispatchEvent(invalidEvent)
 
-    await sleepAsync(50)
+      await sleepAsync(50)
+    })
   })
 })