@api-client/ui 0.5.38 → 0.5.40

package/test/helpers/TestUtils.ts

@@ -1,243 +0,0 @@
-/**
- * Extended test utilities for the UI component library.
- * Provides Jest-like matchers and additional testing helpers.
- */
-
-import { expect } from '@open-wc/testing'
-
-/**
- * Custom matchers for better test assertions
- */
-export const customMatchers = {
-  /**
-   * Check if an element has specific CSS classes
-   */
-  toHaveClasses(received: Element, ...classes: string[]) {
-    const classList = Array.from(received.classList)
-    const missing = classes.filter((cls) => !classList.includes(cls))
-
-    if (missing.length === 0) {
-      return {
-        message: () => `Expected element not to have classes: ${classes.join(', ')}`,
-        pass: true,
-      }
-    } else {
-      return {
-        message: () => `Expected element to have classes: ${missing.join(', ')}`,
-        pass: false,
-      }
-    }
-  },
-
-  /**
-   * Check if an element is visible (not hidden by CSS)
-   */
-  toBeVisible(received: Element) {
-    const style = window.getComputedStyle(received)
-    const isVisible = style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0'
-
-    if (isVisible) {
-      return {
-        message: () => 'Expected element to be hidden',
-        pass: true,
-      }
-    } else {
-      return {
-        message: () => 'Expected element to be visible',
-        pass: false,
-      }
-    }
-  },
-
-  /**
-   * Check if an element has a specific attribute value
-   */
-  toHaveAttribute(received: Element, attribute: string, value?: string) {
-    const hasAttribute = received.hasAttribute(attribute)
-
-    if (!hasAttribute) {
-      return {
-        message: () => `Expected element to have attribute "${attribute}"`,
-        pass: false,
-      }
-    }
-
-    if (value !== undefined) {
-      const actualValue = received.getAttribute(attribute)
-      if (actualValue !== value) {
-        return {
-          message: () => `Expected attribute "${attribute}" to be "${value}", but got "${actualValue}"`,
-          pass: false,
-        }
-      }
-    }
-
-    return {
-      message: () => `Expected element not to have attribute "${attribute}"${value ? ` with value "${value}"` : ''}`,
-      pass: true,
-    }
-  },
-
-  /**
-   * Helper to demonstrate proper DOM element comparison
-   * Note: Always use assert.dom.equal() for DOM element comparison, not assert.equal()
-   */
-  domElementsEqual(actual: Element, expected: Element): boolean {
-    // This is just a helper - in actual tests, use assert.dom.equal(actual, expected)
-    return actual === expected && actual.isEqualNode(expected)
-  },
-}
-
-/**
- * Test factory functions for common test scenarios
- */
-export const testFactory = {
-  /**
-   * Create a test suite for a custom element
-   */
-  createElementTestSuite(elementName: string, importPath: string) {
-    return {
-      async setup() {
-        await import(importPath)
-      },
-
-      async createElement(attributes: Record<string, string> = {}, content = '') {
-        const attrs = Object.entries(attributes)
-          .map(([key, value]) => `${key}="${value}"`)
-          .join(' ')
-
-        const element = document.createElement('div')
-        element.innerHTML = `<${elementName} ${attrs}>${content}</${elementName}>`
-        document.body.appendChild(element)
-
-        return element.firstElementChild as HTMLElement
-      },
-
-      cleanup() {
-        document.body.innerHTML = ''
-      },
-    }
-  },
-
-  /**
-   * Create a test data factory
-   */
-  createDataFactory<T>(defaults: T) {
-    return (overrides: Partial<T> = {}): T => ({
-      ...defaults,
-      ...overrides,
-    })
-  },
-}
-
-/**
- * Async test helpers
- */
-export const asyncHelpers = {
-  /**
-   * Wait for multiple conditions to be true
-   */
-  async waitForAll(conditions: (() => boolean)[], timeout = 5000): Promise<void> {
-    const promises = conditions.map((condition) => window.testUtils.waitForCondition(condition, timeout))
-    await Promise.all(promises)
-  },
-
-  /**
-   * Wait for any of multiple conditions to be true
-   */
-  async waitForAny(conditions: (() => boolean)[], timeout = 5000): Promise<number> {
-    return new Promise((resolve, reject) => {
-      const startTime = Date.now()
-      let resolved = false
-
-      function checkConditions() {
-        if (resolved) return
-
-        for (let i = 0; i < conditions.length; i++) {
-          try {
-            if (conditions[i]()) {
-              resolved = true
-              resolve(i)
-              return
-            }
-          } catch {
-            // Continue checking other conditions
-          }
-        }
-
-        if (Date.now() - startTime > timeout) {
-          resolved = true
-          reject(new Error(`None of the conditions met within ${timeout}ms`))
-          return
-        }
-
-        setTimeout(checkConditions, 50)
-      }
-
-      checkConditions()
-    })
-  },
-
-  /**
-   * Retry an async operation with exponential backoff
-   */
-  async retry<T>(operation: () => Promise<T>, maxAttempts = 3, baseDelay = 100): Promise<T> {
-    let lastError: Error
-
-    for (let attempt = 1; attempt <= maxAttempts; attempt++) {
-      try {
-        return await operation()
-      } catch (error) {
-        lastError = error as Error
-
-        if (attempt === maxAttempts) {
-          throw lastError
-        }
-
-        const delay = baseDelay * Math.pow(2, attempt - 1)
-        await new Promise((resolve) => setTimeout(resolve, delay))
-      }
-    }
-
-    throw lastError!
-  },
-}
-
-/**
- * Performance testing utilities
- */
-export const performanceHelpers = {
-  /**
-   * Measure the execution time of a function
-   */
-  async measureTime<T>(fn: () => Promise<T> | T): Promise<{ result: T; duration: number }> {
-    const start = performance.now()
-    const result = await fn()
-    const duration = performance.now() - start
-
-    return { result, duration }
-  },
-
-  /**
-   * Assert that an operation completes within a time limit
-   */
-  async expectWithinTime<T>(operation: () => Promise<T> | T, maxDuration: number, message?: string): Promise<T> {
-    const { result, duration } = await this.measureTime(operation)
-
-    if (duration > maxDuration) {
-      const errorMessage = message || `Operation took ${duration.toFixed(2)}ms, expected < ${maxDuration}ms`
-      throw new Error(errorMessage)
-    }
-
-    return result
-  },
-}
-
-// Export all utilities
-export { expect }
-export default {
-  customMatchers,
-  testFactory,
-  asyncHelpers,
-  performanceHelpers,
-}

package/test/helpers/UiMock.ts

@@ -1,185 +0,0 @@
-import { nextFrame } from '@open-wc/testing'
-import { sendMouse } from '@web/test-runner-commands'
-
-/**
- * Represents a 2D point with x and y coordinates.
- */
-export interface Point {
-  /** The x-coordinate of the point. */
-  x: number
-  /** The y-coordinate of the point. */
-  y: number
-}
-
-/**
- * A utility class for mocking user interface interactions in tests.
- * It provides static methods to simulate keyboard and mouse events.
- * This class is designed as a collection of static helpers, hence it has no constructor or instances.
- */
-// eslint-disable-next-line @typescript-eslint/no-extraneous-class
-export class UiMock {
-  /**
-   * Dispatches a 'keydown' event on a given element.
-   *
-   * @param element The target element for the event.
-   * @param code The `code` value for the KeyboardEvent (e.g., 'Enter', 'KeyA').
-   * @param opts Additional options to pass to the KeyboardEvent constructor.
-   *
-   * @example
-   * UiMock.keyDown(document.body, 'Enter');
-   * UiMock.keyDown(myInputElement, 'KeyA', { ctrlKey: true });
-   */
-  static keyDown(element: EventTarget, code: string, opts: KeyboardEventInit = {}): void {
-    const defaults: KeyboardEventInit = {
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-    }
-    const options = { ...defaults, ...opts, ...{ code } }
-    const down = new KeyboardEvent('keydown', options)
-    element.dispatchEvent(down)
-  }
-
-  /**
-   * Dispatches a 'keyup' event on a given element.
-   *
-   * @param element The target element for the event.
-   * @param code The `code` value for the KeyboardEvent (e.g., 'Escape', 'KeyB').
-   * @param opts Additional options to pass to the KeyboardEvent constructor.
-   *
-   * @example
-   * UiMock.keyUp(document.body, 'Escape');
-   */
-  static keyUp(element: EventTarget, code: string, opts: KeyboardEventInit = {}): void {
-    const defaults: KeyboardEventInit = {
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-    }
-    const options = { ...defaults, ...opts, ...{ code } }
-    const down = new KeyboardEvent('keyup', options)
-    element.dispatchEvent(down)
-  }
-
-  /**
-   * Simulates a full key press by dispatching 'keydown' and 'keyup' events sequentially.
-   * It waits for the next animation frame between the two events.
-   *
-   * @param element The target element for the event.
-   * @param code The `code` value for the KeyboardEvent.
-   * @param opts Additional options to pass to the KeyboardEvent constructor.
-   *
-   * @example
-   * await UiMock.keyPress(myButton, 'Space');
-   */
-  static async keyPress(element: EventTarget, code: string, opts?: KeyboardEventInit): Promise<void> {
-    this.keyDown(element, code, opts)
-    await nextFrame()
-    this.keyUp(element, code, opts)
-  }
-
-  /**
-   * Calculates the coordinates of the center of a given element.
-   *
-   * Note: This method mixes coordinate systems. `getBoundingClientRect` is viewport-relative,
-   * while `window.scrollY` is for document scrolling and `window.screenX` is for the
-   * screen position of the browser window. For use with `@web/test-runner-commands`'s `sendMouse`,
-   * which expects viewport-relative coordinates, the calculation should likely be:
-   * `x: Math.floor(x + width / 2)` and `y: Math.floor(y + height / 2)`.
-   *
-   * @param element The element to find the center of.
-   * @returns A `Point` object with the x and y coordinates of the element's center.
-   */
-  static getMiddleOfElement(element: Element): Point {
-    const { x, y, width, height } = element.getBoundingClientRect()
-
-    return {
-      x: Math.floor(x + window.screenX + width / 2),
-      y: Math.floor(y + window.scrollY + height / 2),
-    }
-  }
-
-  /**
-   * Moves the mouse from a starting point to an ending point in a series of steps.
-   * This uses the `@web/test-runner-commands` `sendMouse` API, which means
-   * the mouse will actually move in the browser running the tests.
-   *
-   * @param from The starting {x, y} coordinates.
-   * @param to The ending {x, y} coordinates.
-   * @param steps The number of intermediate steps to take during the move. Defaults to 10.
-   */
-  static async moveMouse(from: Point, to: Point, steps = 10): Promise<void> {
-    const dx = to.x - from.x
-    const dy = to.y - from.y
-    const ix = Math.round(dx / steps)
-    const iy = Math.round(dy / steps)
-    let currentX = from.x
-    let currentY = from.y
-
-    await sendMouse({ type: 'move', position: [from.x, from.y] })
-    // await executeServerCommand('take-screenshot', { name: 'move-start' });
-    for (let i = 0; i < steps; i++) {
-      currentX += ix
-      currentY += iy
-      await nextFrame()
-      await sendMouse({ type: 'move', position: [currentX, currentY] })
-      // await executeServerCommand('take-screenshot', { name: `pos${i}` });
-    }
-
-    // just making sure that we are not off
-    await sendMouse({ type: 'move', position: [to.x, to.y] })
-    // await executeServerCommand('take-screenshot', { name: `move-end` });
-  }
-
-  /**
-   * Performs a drag-and-drop operation from a source element to a target element.
-   * It simulates moving to the source, pressing the mouse down, moving to the target,
-   * and releasing the mouse.
-   *
-   * @param source The HTMLElement to drag.
-   * @param target The HTMLElement to drop onto.
-   * @param steps The number of mouse moves to simulate during the drag. Defaults to 10.
-   */
-  static async dragAndDrop(source: HTMLElement, target: HTMLElement, steps = 10): Promise<void> {
-    const from = UiMock.getMiddleOfElement(source)
-    const to = UiMock.getMiddleOfElement(target)
-
-    await sendMouse({ type: 'move', position: [from.x, from.y] })
-    await sendMouse({ type: 'down' })
-    // await executeServerCommand('take-screenshot', { name: `after-down` });
-    await nextFrame()
-    await UiMock.moveMouse(from, to, steps)
-    await sendMouse({ type: 'up' })
-    // await executeServerCommand('take-screenshot', { name: `after-up` });
-  }
-
-  /**
-   * Creates a `DragEvent` for simulating file drags (e.g., for a file drop zone).
-   *
-   * @param type The type of the drag event (e.g., 'dragenter', 'dragover', 'drop').
-   * @param opts Options, including an optional `File` object to include in the event.
-   * If no file is provided, a default 'test.txt' file is created.
-   * @returns A new `DragEvent` instance.
-   *
-   * @example
-   * const myFile = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' });
-   * const dropEvent = UiMock.getFileDragEvent('drop', { file: myFile });
-   * dropZone.dispatchEvent(dropEvent);
-   */
-  static getFileDragEvent(type: string, opts: { file?: File } = {}): DragEvent {
-    let file: File
-    if (opts.file) {
-      file = opts.file
-    } else {
-      file = new File(['test'], 'test.txt', { type: 'text/plain' })
-    }
-    const dt = new DataTransfer()
-    dt.items.add(file)
-    return new DragEvent(type, {
-      dataTransfer: dt,
-      cancelable: true,
-      composed: true,
-      bubbles: true,
-    })
-  }
-}

package/test/lib/Dom.test.ts

@@ -1,231 +0,0 @@
-import { assert } from '@open-wc/testing'
-import { findElementInShadowRoots } from '../../src/lib/Dom.js'
-
-describe('lib', () => {
-  describe('Dom', () => {
-    describe('findElementInShadowRoots', () => {
-      let container: HTMLDivElement
-
-      beforeEach(() => {
-        container = document.createElement('div')
-        container.id = 'test-container'
-        document.body.appendChild(container)
-      })
-
-      afterEach(() => {
-        document.body.removeChild(container)
-      })
-
-      it('finds element in document root', () => {
-        const element = document.createElement('div')
-        element.id = 'test-element'
-        container.appendChild(element)
-
-        const fromElement = document.createElement('div')
-        container.appendChild(fromElement)
-
-        const result = findElementInShadowRoots('test-element', fromElement)
-        assert.equal(result, element)
-      })
-
-      it('returns null when element is not found', () => {
-        const fromElement = document.createElement('div')
-        container.appendChild(fromElement)
-
-        const result = findElementInShadowRoots('non-existent', fromElement)
-        assert.isNull(result)
-      })
-
-      it('finds element in parent shadow root', () => {
-        // Create a custom element with shadow root
-        const shadowHost = document.createElement('div')
-        const shadowRoot = shadowHost.attachShadow({ mode: 'open' })
-        // Add target element to shadow root
-        const targetElement = document.createElement('div')
-        targetElement.id = 'shadow-element'
-        shadowRoot.appendChild(targetElement)
-
-        // Add shadow host to container
-        container.appendChild(shadowHost)
-
-        // Create a child element inside the shadow root to search from
-        const fromElement = document.createElement('div')
-        shadowRoot.appendChild(fromElement)
-        const result = findElementInShadowRoots('shadow-element', fromElement)
-        assert.ok(result)
-        assert.equal(result.id, 'shadow-element')
-      })
-
-      it('finds element in nested shadow roots', () => {
-        // Create outer shadow host
-        const outerShadowHost = document.createElement('div')
-        outerShadowHost.id = 'outer-shadow-host'
-        const outerShadowRoot = outerShadowHost.attachShadow({ mode: 'open' })
-
-        // Create inner shadow host inside outer shadow root
-        const innerShadowHost = document.createElement('div')
-        innerShadowHost.id = 'inner-shadow-host'
-        const innerShadowRoot = innerShadowHost.attachShadow({ mode: 'open' })
-        outerShadowRoot.appendChild(innerShadowHost)
-
-        // Add target element to outer shadow root
-        const targetElement = document.createElement('div')
-        targetElement.id = 'nested-element'
-        outerShadowRoot.appendChild(targetElement)
-
-        // Add container to document
-        container.appendChild(outerShadowHost)
-
-        // Search from element in inner shadow root
-        const fromElement = document.createElement('div')
-        fromElement.id = 'search-from'
-        innerShadowRoot.appendChild(fromElement)
-
-        const result = findElementInShadowRoots('nested-element', fromElement)
-        assert.equal(result, targetElement)
-      })
-
-      it('searches through multiple shadow root levels', () => {
-        // Create a deeply nested shadow structure
-        const level1Host = document.createElement('div')
-        const level1Shadow = level1Host.attachShadow({ mode: 'open' })
-
-        const level2Host = document.createElement('div')
-        const level2Shadow = level2Host.attachShadow({ mode: 'open' })
-        level1Shadow.appendChild(level2Host)
-
-        const level3Host = document.createElement('div')
-        const level3Shadow = level3Host.attachShadow({ mode: 'open' })
-        level2Shadow.appendChild(level3Host)
-
-        // Add target element at level 1
-        const targetElement = document.createElement('div')
-        targetElement.id = 'deep-element'
-        level1Shadow.appendChild(targetElement)
-
-        container.appendChild(level1Host)
-
-        // Search from deepest level
-        const fromElement = document.createElement('div')
-        level3Shadow.appendChild(fromElement)
-
-        const result = findElementInShadowRoots('deep-element', fromElement)
-        assert.equal(result, targetElement)
-      })
-
-      it('prefers document element over shadow root element', () => {
-        // Create element in document
-        const documentElement = document.createElement('div')
-        documentElement.id = 'duplicate-id'
-        documentElement.textContent = 'document'
-        container.appendChild(documentElement)
-
-        // Create shadow host with element with same ID
-        const shadowHost = document.createElement('div')
-        const shadowRoot = shadowHost.attachShadow({ mode: 'open' })
-
-        const shadowElement = document.createElement('div')
-        shadowElement.id = 'duplicate-id'
-        shadowElement.textContent = 'shadow'
-        shadowRoot.appendChild(shadowElement)
-
-        container.appendChild(shadowHost)
-
-        const fromElement = document.createElement('div')
-        shadowRoot.appendChild(fromElement)
-
-        const result = findElementInShadowRoots('duplicate-id', fromElement)
-        assert.equal(result, documentElement)
-        assert.isNotNull(result)
-        assert.equal(result.textContent, 'document')
-      })
-
-      it('handles elements without parent', () => {
-        const isolatedElement = document.createElement('div')
-
-        const result = findElementInShadowRoots('test-id', isolatedElement)
-        assert.isNull(result)
-      })
-
-      it('handles shadow root host traversal', () => {
-        // Create a shadow host
-        const shadowHost = document.createElement('div')
-        const shadowRoot = shadowHost.attachShadow({ mode: 'open' })
-        container.appendChild(shadowHost)
-
-        // Add target element to container (outside shadow)
-        const targetElement = document.createElement('div')
-        targetElement.id = 'outside-shadow'
-        container.appendChild(targetElement)
-
-        // Search from inside shadow root
-        const fromElement = document.createElement('div')
-        shadowRoot.appendChild(fromElement)
-
-        const result = findElementInShadowRoots('outside-shadow', fromElement)
-        assert.equal(result, targetElement)
-      })
-
-      it('handles elements in current shadow root', () => {
-        const shadowHost = document.createElement('div')
-        const shadowRoot = shadowHost.attachShadow({ mode: 'open' })
-        container.appendChild(shadowHost)
-
-        // Add target element to same shadow root
-        const targetElement = document.createElement('div')
-        targetElement.id = 'same-shadow'
-        shadowRoot.appendChild(targetElement)
-
-        // Add search element to same shadow root
-        const fromElement = document.createElement('div')
-        shadowRoot.appendChild(fromElement)
-
-        const result = findElementInShadowRoots('same-shadow', fromElement)
-        assert.equal(result, targetElement)
-      })
-
-      it('handles complex shadow DOM structure with mixed content', () => {
-        // Create complex structure: document -> shadow1 -> regular div -> shadow2
-        const shadow1Host = document.createElement('div')
-        const shadow1Root = shadow1Host.attachShadow({ mode: 'open' })
-        container.appendChild(shadow1Host)
-
-        const regularDiv = document.createElement('div')
-        shadow1Root.appendChild(regularDiv)
-
-        const shadow2Host = document.createElement('div')
-        const shadow2Root = shadow2Host.attachShadow({ mode: 'open' })
-        regularDiv.appendChild(shadow2Host)
-
-        // Add target to shadow1
-        const targetElement = document.createElement('div')
-        targetElement.id = 'complex-target'
-        shadow1Root.appendChild(targetElement)
-
-        // Search from shadow2
-        const fromElement = document.createElement('div')
-        shadow2Root.appendChild(fromElement)
-
-        const result = findElementInShadowRoots('complex-target', fromElement)
-        assert.equal(result, targetElement)
-      })
-
-      it('returns null for invalid ID characters', () => {
-        const element = document.createElement('div')
-        element.id = 'valid-id'
-        container.appendChild(element)
-
-        const fromElement = document.createElement('div')
-        container.appendChild(fromElement)
-
-        // Test with empty string
-        const result1 = findElementInShadowRoots('', fromElement)
-        assert.isNull(result1)
-
-        // Test with whitespace
-        const result2 = findElementInShadowRoots('   ', fromElement)
-        assert.isNull(result2)
-      })
-    })
-  })
-})