@api-client/ui 0.5.38 → 0.5.40

package/src/demo/DemoStyles.ts

@@ -1,60 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  :root {
-    --dot-size: 1px;
-    --dot-space: 7px;
-  }
-
-  html,
-  body {
-    margin: 0;
-    font-family: 'Roboto', 'Noto', sans-serif;
-    background-color: var(--md-sys-color-surface);
-    color: var(--md-sys-color-on-surface);
-    background-image: radial-gradient(var(--md-sys-color-inverse-on-surface) 1px, transparent 0);
-    background-size: var(--dot-space) var(--dot-space);
-  }
-
-  .demo {
-    margin: 0;
-    padding: 0;
-    min-height: 100vh;
-  }
-
-  header {
-    background-color: var(--md-sys-color-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-    display: flex;
-    align-items: center;
-
-    max-width: 1440px;
-    margin: 20px 40px;
-    padding: 0 24px;
-    border-radius: 40px;
-
-    font-family: var(--md-sys-typescale-title-large-font);
-    font-weight: var(--md-sys-typescale-title-large-weight);
-    font-size: var(--md-sys-typescale-title-large-size);
-    letter-spacing: var(--md-sys-typescale-title-large-tracking);
-    line-height: var(--md-sys-typescale-title-large-height);
-  }
-
-  #app {
-    height: 100%;
-  }
-
-  main {
-    /* max-width: 900px;
-  margin: 40px auto; */
-    border-radius: 40px;
-    padding: 24px;
-
-    /* background-color: var(--md-sys-color-primary-container);
-  color: var(--md-sys-color-on-primary-container); */
-  }
-
-  .demo-section {
-    margin: 60px 0;
-  }
-`

package/test/README.md

@@ -1,375 +0,0 @@
-# Test Setup Guide
-
-This document explains how to use the test infrastructure for the UI component library.
-
-## Overview
-
-The test setup provides:
-
-- **Global test utilities** for common testing patterns
-- **Custom matchers** for better assertions
-- **UI interaction helpers** for simulating user actions
-- **Async helpers** for handling asynchronous operations
-- **Performance testing utilities**
-
-## Test Configuration
-
-### Web Test Runner
-
-Tests run using [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/) with:
-
-- **Playwright** for browser automation
-- **OAuth2 mock server** for authentication testing
-- **Coverage reporting** with lcov format
-- **Custom test HTML** with Material Design 3 styles
-
-### File Structure
-
-```plain
-test/
-├── setup.ts                 # Global test setup
-├── setup.test.ts            # Example test demonstrating setup
-├── env.ts                   # Environment configuration
-├── helpers/
-│   ├── UiMock.ts            # UI interaction utilities
-│   └── TestUtils.ts         # Extended test utilities
-└── [component-tests]/       # Component-specific tests
-```
-
-## Running Tests
-
-```bash
-# Run all tests
-npm run test
-
-# Run tests in watch mode
-npm run test:watch
-
-# Run tests with coverage
-npm run test:coverage
-
-# Run tests for a single file
-npm test -- --files=".tmp/test/**/CurrencyPicker.integration.test.js"
-```
-
-## Global Test Utilities
-
-The setup provides global utilities accessible via `window.testUtils`:
-
-### waitForElement(selector, timeout?)
-
-Wait for an element to appear in the DOM:
-
-```typescript
-const element = await window.testUtils.waitForElement('#my-element', 5000)
-```
-
-### waitForCondition(condition, timeout?)
-
-Wait for a condition to become true:
-
-```typescript
-await window.testUtils.waitForCondition(() => someVariable === true, 5000)
-```
-
-## Custom Matchers
-
-Enhanced assertion helpers in `customMatchers`:
-
-### toHaveClasses(element, ...classes)
-
-Check if element has specific CSS classes:
-
-```typescript
-const result = customMatchers.toHaveClasses(element, 'active', 'highlighted')
-assert.isTrue(result.pass)
-```
-
-### toBeVisible(element)
-
-Check if element is visible (not hidden by CSS):
-
-```typescript
-const result = customMatchers.toBeVisible(element)
-assert.isTrue(result.pass)
-```
-
-### toHaveAttribute(element, attribute, value?)
-
-Check if element has specific attribute:
-
-```typescript
-const result = customMatchers.toHaveAttribute(element, 'data-test', 'value')
-assert.isTrue(result.pass)
-```
-
-## UI Interaction (UiMock)
-
-Simulate user interactions:
-
-### Keyboard Events
-
-```typescript
-// Single key events
-UiMock.keyDown(element, 'Enter')
-UiMock.keyUp(element, 'Escape')
-
-// Full key press (down + up)
-await UiMock.keyPress(element, 'Space', { ctrlKey: true })
-```
-
-### Mouse Events
-
-```typescript
-// Get element center
-const center = UiMock.getMiddleOfElement(element)
-
-// Move mouse between points
-await UiMock.moveMouse(fromPoint, toPoint, steps)
-
-// Drag and drop
-await UiMock.dragAndDrop(sourceElement, targetElement)
-```
-
-### File Drag Events
-
-```typescript
-const file = new File(['content'], 'test.txt', { type: 'text/plain' })
-const dragEvent = UiMock.getFileDragEvent('drop', { file })
-element.dispatchEvent(dragEvent)
-```
-
-## Async Helpers
-
-Handle asynchronous operations:
-
-### waitForAll(conditions, timeout?)
-
-Wait for multiple conditions:
-
-```typescript
-await asyncHelpers.waitForAll([
-  () => condition1,
-  () => condition2,
-], 5000)
-```
-
-### waitForAny(conditions, timeout?)
-
-Wait for any condition to be true:
-
-```typescript
-const index = await asyncHelpers.waitForAny([
-  () => condition1,
-  () => condition2,
-])
-```
-
-### retry(operation, maxAttempts?, baseDelay?)
-
-Retry failed operations with exponential backoff:
-
-```typescript
-const result = await asyncHelpers.retry(async () => {
-  const response = await fetch('/api/data')
-  if (!response.ok) throw new Error('Failed')
-  return response.json()
-}, 3, 100)
-```
-
-## Test Factories
-
-Create reusable test data and element factories:
-
-### Data Factory
-
-```typescript
-const userFactory = testFactory.createDataFactory({
-  id: 1,
-  name: 'Test User',
-  email: 'test@example.com',
-})
-
-const user1 = userFactory() // Uses defaults
-const user2 = userFactory({ name: 'Custom User' }) // Override specific fields
-```
-
-### Element Test Suite
-
-```typescript
-const suite = testFactory.createElementTestSuite('my-element', '../src/my-element.js')
-
-// In tests:
-await suite.setup()
-const element = await suite.createElement({ attribute: 'value' }, 'content')
-// ... test element ...
-suite.cleanup()
-```
-
-## Performance Testing
-
-Measure and assert performance:
-
-### measureTime(fn)
-
-```typescript
-const { result, duration } = await performanceHelpers.measureTime(async () => {
-  return await someExpensiveOperation()
-})
-
-console.log(`Operation took ${duration}ms`)
-```
-
-### expectWithinTime(operation, maxDuration, message?)
-
-```typescript
-const result = await performanceHelpers.expectWithinTime(
-  () => renderLargeList(),
-  1000, // max 1 second
-  'List rendering should be fast'
-)
-```
-
-## Writing Component Tests
-
-### Basic Structure
-
-```typescript
-import { assert, fixture, html } from '@open-wc/testing'
-import { customMatchers } from '../helpers/TestUtils.js'
-import { UiMock } from '../helpers/UiMock.js'
-
-// Import test setup
-import '../setup.js'
-
-// Import component
-import '../src/my-component.js'
-
-describe('MyComponent', () => {
-  async function basicFixture() {
-    return fixture(html`<my-component></my-component>`)
-  }
-
-  it('should render correctly', async () => {
-    const element = await basicFixture()
-    
-    // Use custom matchers
-    const result = customMatchers.toBeVisible(element)
-    assert.isTrue(result.pass)
-    
-    // Test functionality
-    await UiMock.keyPress(element, 'Enter')
-    
-    // Wait for changes
-    await window.testUtils.waitForCondition(() => 
-      element.hasAttribute('data-processed')
-    )
-    
-    assert.isTrue(element.hasAttribute('data-processed'))
-  })
-})
-```
-
-### Testing Custom Elements
-
-```typescript
-describe('CustomElement', () => {
-  let element: HTMLElement
-
-  beforeEach(async () => {
-    element = await fixture(html`<custom-element 
-      .property="${'value'}"
-      @event="${(e) => console.log(e)}"
-    ></custom-element>`)
-  })
-
-  it('should handle properties', () => {
-    // Test property binding
-    assert.equal(element.property, 'value')
-  })
-
-  it('should handle events', async () => {
-    let eventFired = false
-    element.addEventListener('custom-event', () => {
-      eventFired = true
-    })
-
-    // Trigger event
-    element.dispatchEvent(new CustomEvent('trigger'))
-    
-    await window.testUtils.waitForCondition(() => eventFired)
-    assert.isTrue(eventFired)
-  })
-})
-```
-
-## Environment Variables
-
-Test environment configuration is available through the mock server:
-
-- OAuth2 server details available in test environment
-- Custom environment setup via `env.ts`
-
-## Coverage Reports
-
-Coverage reports are generated in `coverage/` directory:
-
-- `lcov.info` - Machine-readable coverage data
-- `lcov-report/` - Human-readable HTML reports
-
-Open `coverage/lcov-report/index.html` to view detailed coverage information.
-
-## Best Practices
-
-1. **Use the global setup**: Import `../setup.js` in test files
-2. **Leverage custom matchers**: Use `customMatchers` for better assertions
-3. **Simulate real interactions**: Use `UiMock` for realistic user interactions
-4. **Handle async operations**: Use `asyncHelpers` for waiting and retrying
-5. **Create reusable factories**: Use `testFactory` for common test data
-6. **Test performance**: Use `performanceHelpers` for timing-critical code
-7. **Clean up properly**: The global setup handles cleanup automatically
-8. **Use meaningful assertions**: Prefer descriptive custom matchers over generic ones
-
-## DOM Element Assertions
-
-When comparing DOM elements, always use the special DOM assertion methods from `@open-wc/testing`:
-
-### assert.dom.equal(actual, expected)
-
-Compare DOM elements for equality:
-
-```typescript
-const element1 = document.querySelector('#test')
-const element2 = await window.testUtils.waitForElement('#test')
-assert.dom.equal(element1, element2)
-```
-
-### assert.dom.notEqual(actual, expected)
-
-Assert that DOM elements are not the same:
-
-```typescript
-const element1 = document.querySelector('#test1')
-const element2 = document.querySelector('#test2')
-assert.dom.notEqual(element1, element2)
-```
-
-### assert.dom.equalSnapshot(element, snapshot)
-
-Compare element with a snapshot:
-
-```typescript
-const element = await fixture(html`<div>Content</div>`)
-assert.dom.equalSnapshot(element, '<div>Content</div>')
-```
-
-### assert.dom.notEqualSnapshot(element, snapshot)
-
-Assert element doesn't match snapshot:
-
-```typescript
-const element = await fixture(html`<div>Changed</div>`)
-assert.dom.notEqualSnapshot(element, '<div>Original</div>')
-```
-
-> ⚠️ **Important**: Never use regular `assert.equal()` for DOM elements as it won't work correctly. Always use `assert.dom.*` methods for DOM comparisons.