@api-client/ui 0.5.0 → 0.5.1

package/test/md/dialog/UiDialog.test.ts

@@ -230,5 +230,174 @@ describe('md', () => {
         assert.isTrue(container.classList.contains('with-buttons'), 'has the with-buttons class')
       })
     })
+
+    describe('form handling', () => {
+      async function formWrappedDialogFixture(): Promise<{ form: HTMLFormElement; dialog: UiDialog }> {
+        const container = await fixture(html`
+          <form>
+            <ui-dialog submitClose>
+              <span slot="title">Form Dialog</span>
+              <input type="text" name="username" required />
+              <ui-button color="text" slot="button" value="dismiss">Cancel</ui-button>
+              <ui-button color="text" slot="button" value="confirm" type="submit">Submit</ui-button>
+            </ui-dialog>
+          </form>
+        `)
+        const form = container as HTMLFormElement
+        const dialog = form.querySelector('ui-dialog') as UiDialog
+        return { form, dialog }
+      }
+
+      async function formWithoutSubmitCloseFixture(): Promise<{ form: HTMLFormElement; dialog: UiDialog }> {
+        const container = await fixture(html`
+          <form>
+            <ui-dialog>
+              <span slot="title">Form Dialog</span>
+              <input type="text" name="username" required />
+              <ui-button color="text" slot="button" value="dismiss">Cancel</ui-button>
+              <ui-button color="text" slot="button" value="confirm" type="submit">Submit</ui-button>
+            </ui-dialog>
+          </form>
+        `)
+        const form = container as HTMLFormElement
+        const dialog = form.querySelector('ui-dialog') as UiDialog
+        return { form, dialog }
+      }
+
+      describe('dialog wrapped in form', () => {
+        it('should detect parent form when connected', async () => {
+          const { dialog } = await formWrappedDialogFixture()
+          await dialog.updateComplete
+
+          // The form should be detected during connectedCallback
+          // We can't directly access private fields, so we test the behavior instead
+          assert.ok(dialog.submitClose, 'dialog should be configured for form handling')
+        })
+
+        it('should close dialog when form is submitted and submitClose is true', async () => {
+          const { form, dialog } = await formWrappedDialogFixture()
+          dialog.open = true
+          await dialog.updateComplete
+
+          const spy = sinon.spy()
+          dialog.addEventListener('close', spy)
+
+          // Simulate form submission
+          const submitEvent = new SubmitEvent('submit', { bubbles: true, cancelable: true })
+          form.dispatchEvent(submitEvent)
+
+          assert.isFalse(dialog.open, 'dialog should be closed')
+          assert.isTrue(spy.calledOnce, 'close event should be dispatched')
+          const event = spy.args[0][0] as CustomEvent
+          assert.isFalse(event.detail.cancelled, 'dialog should be confirmed, not cancelled')
+        })
+
+        it('should not close dialog when form is submitted and submitClose is false', async () => {
+          const { form, dialog } = await formWithoutSubmitCloseFixture()
+          dialog.open = true
+          await dialog.updateComplete
+
+          const spy = sinon.spy()
+          dialog.addEventListener('close', spy)
+
+          // Simulate form submission
+          const submitEvent = new SubmitEvent('submit', { bubbles: true, cancelable: true })
+          form.dispatchEvent(submitEvent)
+
+          assert.isTrue(dialog.open, 'dialog should remain open')
+          assert.isFalse(spy.called, 'close event should not be dispatched')
+        })
+
+        it('should not handle form submit when submit button is clicked directly', async () => {
+          const { dialog } = await formWrappedDialogFixture()
+          dialog.open = true
+          await dialog.updateComplete
+
+          const submitButton = dialog.querySelector('ui-button[type="submit"]') as UiButton
+          const spy = sinon.spy()
+          dialog.addEventListener('close', spy)
+
+          // Click the submit button - this should not close the dialog immediately
+          // because we yield control to the form
+          submitButton.click()
+
+          // The dialog should still be open because the form hasn't been submitted yet
+          assert.isTrue(dialog.open, 'dialog should remain open when submit button is clicked')
+        })
+
+        it('should remove form event listener when disconnected', async () => {
+          const { form, dialog } = await formWrappedDialogFixture()
+          const removeEventListenerSpy = sinon.spy(form, 'removeEventListener')
+
+          dialog.remove()
+
+          // We can't test the private method directly, but we can verify the spy was called
+          // The actual method name is not accessible, so we test the behavior instead
+          assert.isTrue(removeEventListenerSpy.called, 'removeEventListener should be called on form')
+        })
+      })
+
+      describe('edge cases', () => {
+        it('should handle form submission when dialog is not open', async () => {
+          const { form, dialog } = await formWrappedDialogFixture()
+          // Dialog is closed by default
+          assert.isFalse(dialog.open, 'dialog should be closed initially')
+
+          const spy = sinon.spy()
+          dialog.addEventListener('close', spy)
+
+          // Submit form when dialog is closed
+          const submitEvent = new SubmitEvent('submit', { bubbles: true, cancelable: true })
+          form.dispatchEvent(submitEvent)
+
+          // Should still close the dialog (set open to false even though it's already false)
+          assert.isFalse(dialog.open, 'dialog should remain closed')
+          assert.isTrue(spy.calledOnce, 'close event should still be dispatched')
+        })
+
+        it('should handle multiple form submissions', async () => {
+          const { form, dialog } = await formWrappedDialogFixture()
+          dialog.open = true
+          await dialog.updateComplete
+
+          const spy = sinon.spy()
+          dialog.addEventListener('close', spy)
+
+          // Submit form multiple times
+          const submitEvent1 = new SubmitEvent('submit', { bubbles: true, cancelable: true })
+          const submitEvent2 = new SubmitEvent('submit', { bubbles: true, cancelable: true })
+
+          form.dispatchEvent(submitEvent1)
+          form.dispatchEvent(submitEvent2)
+
+          assert.equal(spy.callCount, 2, 'close event should be dispatched for each submission')
+        })
+
+        it('should maintain form reference across re-connections', async () => {
+          const { form, dialog } = await formWrappedDialogFixture()
+
+          // Remove and re-add dialog
+          const parent = form
+          dialog.remove()
+          await dialog.updateComplete
+
+          parent.appendChild(dialog)
+          await dialog.updateComplete
+
+          // Test the behavior instead of accessing private fields
+          // If form handling is working, submitClose should still work
+          dialog.open = true
+          await dialog.updateComplete
+
+          const spy = sinon.spy()
+          dialog.addEventListener('close', spy)
+
+          const submitEvent = new SubmitEvent('submit', { bubbles: true, cancelable: true })
+          form.dispatchEvent(submitEvent)
+
+          assert.isTrue(spy.called, 'form handling should work after reconnection')
+        })
+      })
+    })
   })
 })

package/test/setup.test.ts

@@ -0,0 +1,217 @@
+/**
+ * Example test file demonstrating the test setup and utilities.
+ * This shows how to use the test infrastructure for UI components.
+ */
+
+import { assert } from '@open-wc/testing'
+import { testFactory, asyncHelpers, customMatchers } from './helpers/TestUtils.js'
+import { UiMock } from './helpers/UiMock.js'
+
+// Import the setup to ensure it runs
+import './setup.js'
+
+describe('Test Setup Example', () => {
+  describe('Basic Test Infrastructure', () => {
+    it('should have test utilities available globally', () => {
+      assert.exists(window.testUtils)
+      assert.isFunction(window.testUtils.waitForElement)
+      assert.isFunction(window.testUtils.waitForCondition)
+    })
+
+    it('should have custom matchers available', () => {
+      assert.exists(customMatchers.toHaveClasses)
+      assert.exists(customMatchers.toBeVisible)
+      assert.exists(customMatchers.toHaveAttribute)
+    })
+
+    it('should have async helpers available', () => {
+      assert.exists(asyncHelpers.waitForAll)
+      assert.exists(asyncHelpers.waitForAny)
+      assert.exists(asyncHelpers.retry)
+    })
+
+    it('should have UiMock utilities available', () => {
+      assert.exists(UiMock.keyDown)
+      assert.exists(UiMock.keyUp)
+      assert.exists(UiMock.keyPress)
+      assert.exists(UiMock.getMiddleOfElement)
+      assert.exists(UiMock.moveMouse)
+      assert.exists(UiMock.dragAndDrop)
+      assert.exists(UiMock.getFileDragEvent)
+    })
+  })
+
+  describe('Element Testing Example', () => {
+    let element: HTMLElement
+
+    beforeEach(() => {
+      // Clean setup is handled by global setup
+      element = document.createElement('div')
+      element.id = 'test-element'
+      element.className = 'test-class'
+      element.setAttribute('data-test', 'value')
+      document.body.appendChild(element)
+    })
+
+    afterEach(() => {
+      // Cleanup is handled by global setup
+    })
+
+    it('should test element classes using custom matcher', () => {
+      const result = customMatchers.toHaveClasses(element, 'test-class')
+      assert.isTrue(result.pass)
+    })
+
+    it('should test element visibility using custom matcher', () => {
+      const result = customMatchers.toBeVisible(element)
+      assert.isTrue(result.pass)
+    })
+
+    it('should test element attributes using custom matcher', () => {
+      const result = customMatchers.toHaveAttribute(element, 'data-test', 'value')
+      assert.isTrue(result.pass)
+    })
+
+    it('should wait for element to appear', async () => {
+      // Remove element temporarily
+      element.remove()
+
+      // Add it back after a delay
+      setTimeout(() => {
+        document.body.appendChild(element)
+      }, 10)
+
+      // Wait for it to appear
+      const foundElement = await window.testUtils.waitForElement('#test-element')
+      assert.dom.equal(foundElement, element)
+    })
+
+    it('should wait for condition to be true', async () => {
+      let conditionMet = false
+
+      // Set condition to true after delay
+      setTimeout(() => {
+        conditionMet = true
+      }, 100)
+
+      // Wait for condition
+      await window.testUtils.waitForCondition(() => conditionMet)
+      assert.isTrue(conditionMet)
+    })
+  })
+
+  describe('Async Helpers Example', () => {
+    it('should wait for all conditions', async () => {
+      let condition1 = false
+      let condition2 = false
+
+      setTimeout(() => {
+        condition1 = true
+      }, 50)
+      setTimeout(() => {
+        condition2 = true
+      }, 100)
+
+      await asyncHelpers.waitForAll([() => condition1, () => condition2])
+
+      assert.isTrue(condition1)
+      assert.isTrue(condition2)
+    })
+
+    it('should wait for any condition', async () => {
+      let condition1 = false
+      let condition2 = false
+
+      setTimeout(() => {
+        condition1 = true
+      }, 50)
+      setTimeout(() => {
+        condition2 = true
+      }, 100)
+
+      const index = await asyncHelpers.waitForAny([() => condition1, () => condition2])
+
+      assert.equal(index, 0) // First condition should be met first
+      assert.isTrue(condition1)
+    })
+
+    it('should retry failed operations', async () => {
+      let attempts = 0
+
+      const operation = async () => {
+        attempts++
+        if (attempts < 3) {
+          throw new Error('Not ready yet')
+        }
+        return 'success'
+      }
+
+      const result = await asyncHelpers.retry(operation, 5, 10)
+      assert.equal(result, 'success')
+      assert.equal(attempts, 3)
+    })
+  })
+
+  describe('Test Factory Example', () => {
+    it('should create data factory', () => {
+      const userFactory = testFactory.createDataFactory({
+        id: 1,
+        name: 'Test User',
+        email: 'test@example.com',
+      })
+
+      const user1 = userFactory()
+      assert.equal(user1.name, 'Test User')
+
+      const user2 = userFactory({ name: 'Custom User' })
+      assert.equal(user2.name, 'Custom User')
+      assert.equal(user2.email, 'test@example.com') // Keeps default
+    })
+  })
+
+  describe('UI Interaction Example', () => {
+    let button: HTMLButtonElement
+
+    beforeEach(() => {
+      button = document.createElement('button')
+      button.textContent = 'Click me'
+      button.style.width = '100px'
+      button.style.height = '40px'
+      button.style.position = 'absolute'
+      button.style.top = '100px'
+      button.style.left = '100px'
+      document.body.appendChild(button)
+    })
+
+    it('should simulate keyboard interaction', async () => {
+      let keyPressed = false
+
+      button.addEventListener('keydown', (e) => {
+        if (e.code === 'Enter') {
+          keyPressed = true
+        }
+      })
+
+      await UiMock.keyPress(button, 'Enter')
+      assert.isTrue(keyPressed)
+    })
+
+    it('should get element center position', () => {
+      const center = UiMock.getMiddleOfElement(button)
+      assert.isNumber(center.x)
+      assert.isNumber(center.y)
+      assert.isAbove(center.x, 0)
+      assert.isAbove(center.y, 0)
+    })
+
+    it('should create file drag event', () => {
+      const file = new File(['test content'], 'test.txt', { type: 'text/plain' })
+      const dragEvent = UiMock.getFileDragEvent('drop', { file })
+
+      assert.equal(dragEvent.type, 'drop')
+      assert.exists(dragEvent.dataTransfer)
+      assert.equal(dragEvent.dataTransfer!.files.length, 1)
+      assert.equal(dragEvent.dataTransfer!.files[0].name, 'test.txt')
+    })
+  })
+})

package/test/setup.ts

@@ -0,0 +1,117 @@
+/**
+ * Test setup configuration for the UI component library.
+ * This file is imported by all test files to ensure consistent test environment.
+ */
+
+// // Global test setup
+// before(() => {
+//   // Set up global test configuration
+//   // eslint-disable-next-line no-console
+//   console.log('Setting up test environment...')
+// })
+
+// beforeEach(() => {
+//   // Clean up DOM before each test
+//   document.body.innerHTML = ''
+
+//   // Reset any global state
+//   if (window.localStorage) {
+//     window.localStorage.clear()
+//   }
+//   if (window.sessionStorage) {
+//     window.sessionStorage.clear()
+//   }
+// })
+
+afterEach(() => {
+  // Clean up after each test
+  // document.body.innerHTML = ''
+
+  // Clear any pending timers
+  const highestTimeoutId = window.setTimeout(() => {}, 0)
+  for (let i = 0; i < highestTimeoutId; i++) {
+    window.clearTimeout(i)
+  }
+
+  // Clear any pending intervals
+  const highestIntervalId = window.setInterval(() => {}, 9999)
+  for (let i = 0; i < highestIntervalId; i++) {
+    window.clearInterval(i)
+  }
+})
+
+// after(() => {
+//   // eslint-disable-next-line no-console
+//   console.log('Test environment cleanup complete.')
+// })
+
+// Global test utilities
+declare global {
+  interface Window {
+    testUtils: {
+      waitForElement: (selector: string, timeout?: number) => Promise<Element>
+      waitForCondition: (condition: () => boolean, timeout?: number) => Promise<void>
+    }
+  }
+}
+
+// Add test utilities to global scope
+window.testUtils = {
+  /**
+   * Wait for an element to appear in the DOM
+   */
+  async waitForElement(selector: string, timeout = 5000): Promise<Element> {
+    return new Promise((resolve, reject) => {
+      const startTime = Date.now()
+
+      function checkElement() {
+        const element = document.querySelector(selector)
+        if (element) {
+          resolve(element)
+          return
+        }
+
+        if (Date.now() - startTime > timeout) {
+          reject(new Error(`Element with selector "${selector}" not found within ${timeout}ms`))
+          return
+        }
+
+        setTimeout(checkElement, 50)
+      }
+
+      checkElement()
+    })
+  },
+
+  /**
+   * Wait for a condition to be true
+   */
+  async waitForCondition(condition: () => boolean, timeout = 5000): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const startTime = Date.now()
+
+      function checkCondition() {
+        try {
+          if (condition()) {
+            resolve()
+            return
+          }
+        } catch {
+          // Condition threw an error, continue waiting
+        }
+
+        if (Date.now() - startTime > timeout) {
+          reject(new Error(`Condition not met within ${timeout}ms`))
+          return
+        }
+
+        setTimeout(checkCondition, 50)
+      }
+
+      checkCondition()
+    })
+  },
+}
+
+// Export setup for explicit imports
+export {}