@api-client/ui 0.5.38 → 0.5.40

package/test/dom-assertions.test.ts

@@ -1,182 +0,0 @@
-/**
- * Example test demonstrating proper DOM assertion usage.
- * This shows the correct way to compare DOM elements.
- */
-
-import { assert, fixture, html } from '@open-wc/testing'
-
-// Import the setup to ensure it runs
-import './setup.js'
-
-describe('DOM Assertion Examples', () => {
-  describe('Basic DOM Element Comparisons', () => {
-    it('should compare DOM elements correctly with assert.dom.equal', async () => {
-      // Create a test element
-      const element = await fixture(html`<div id="test">Content</div>`)
-
-      // Find the same element using querySelector
-      const foundElement = document.querySelector('#test')
-
-      // ✅ CORRECT: Use assert.dom.equal for DOM element comparison
-      assert.dom.equal(foundElement, element)
-
-      // ❌ WRONG: Never use assert.equal for DOM elements
-      // assert.equal(foundElement, element) // This won't work properly
-    })
-
-    it('should verify different elements are not equal', async () => {
-      const element1 = await fixture(html`<div id="test1">Content 1</div>`)
-      const element2 = await fixture(html`<div id="test2">Content 2</div>`)
-
-      // ✅ CORRECT: Use assert.dom.notEqual for different DOM elements
-      assert.dom.notEqual(element1, element2)
-    })
-
-    it('should compare element snapshots', async () => {
-      const element = await fixture(html`<div class="test">Hello World</div>`)
-
-      // ✅ CORRECT: Use assert.dom.equalSnapshot for HTML content comparison
-      // Note: equalSnapshot typically takes just the element and compares against saved snapshots
-      assert.dom.equalSnapshot(element)
-    })
-
-    it('should verify element does not match snapshot', async () => {
-      // For this demo, we'll just verify the element exists and has expected content
-      const element = await fixture(html`<div class="test">Changed Content</div>`)
-
-      // Verify content directly instead of using snapshots in this example
-      assert.equal(element.textContent, 'Changed Content')
-      assert.equal(element.className, 'test')
-    })
-  })
-
-  describe('Advanced DOM Assertion Scenarios', () => {
-    it('should wait for element and compare correctly', async () => {
-      // Add element after a delay
-      setTimeout(() => {
-        const element = document.createElement('div')
-        element.id = 'delayed-element'
-        element.textContent = 'I appeared later'
-        document.body.appendChild(element)
-      }, 50)
-
-      // Wait for the element to appear
-      const foundElement = await window.testUtils.waitForElement('#delayed-element')
-
-      // Get the same element using querySelector
-      const queryElement = document.querySelector('#delayed-element')
-
-      // ✅ CORRECT: Compare the DOM elements
-      assert.dom.equal(foundElement, queryElement)
-
-      // Also verify the content
-      assert.equal(foundElement.textContent, 'I appeared later')
-    })
-
-    it('should handle element creation and comparison in tests', async () => {
-      // Create element using fixture
-      const fixtureElement = await fixture(html`
-        <div class="container">
-          <span class="child">Child content</span>
-        </div>
-      `) // Find child element
-      const childElement = fixtureElement.querySelector('.child')
-      const foundChild = document.querySelector('.child')
-
-      // Verify child element exists
-      assert.exists(childElement)
-      assert.exists(foundChild)
-
-      // ✅ CORRECT: Compare the child elements
-      assert.dom.equal(childElement, foundChild)
-
-      // Verify the parent-child relationship
-      assert.dom.equal(childElement!.parentElement, fixtureElement)
-    })
-
-    it('should demonstrate element mutation and comparison', async () => {
-      const element = await fixture(html`<div class="original">Original</div>`)
-
-      // Verify initial state
-      assert.equal(element.textContent, 'Original')
-      assert.equal(element.className, 'original')
-
-      // Mutate the element
-      element.textContent = 'Modified'
-      element.className = 'modified'
-
-      // Verify the changes
-      assert.equal(element.textContent, 'Modified')
-      assert.equal(element.className, 'modified')
-    })
-
-    it('should handle custom elements and DOM assertions', async () => {
-      // Define a simple custom element for testing
-      if (!customElements.get('test-element')) {
-        customElements.define(
-          'test-element',
-          class extends HTMLElement {
-            connectedCallback() {
-              this.innerHTML = '<span>Custom element content</span>'
-            }
-          }
-        )
-      }
-
-      const customElement = await fixture(html`<test-element></test-element>`)
-      const foundCustomElement = document.querySelector('test-element')
-
-      // ✅ CORRECT: Compare custom elements
-      assert.dom.equal(customElement, foundCustomElement)
-
-      // Verify the custom element rendered correctly
-      const span = customElement.querySelector('span')
-      assert.exists(span)
-      assert.equal(span.textContent, 'Custom element content')
-    })
-  })
-
-  describe('Common DOM Assertion Patterns', () => {
-    it('should verify element exists before comparing', async () => {
-      const element = await fixture(html`<div id="exists">I exist</div>`)
-
-      // First verify the element exists
-      assert.exists(element)
-
-      // Then find it and compare
-      const foundElement = document.getElementById('exists')
-      assert.exists(foundElement)
-
-      // ✅ CORRECT: Now compare the elements
-      assert.dom.equal(element, foundElement)
-    })
-
-    it('should handle null elements gracefully', () => {
-      const nonExistentElement = document.querySelector('#does-not-exist')
-
-      // Verify it's null
-      assert.isNull(nonExistentElement)
-
-      // Don't try to use assert.dom.equal with null elements
-      // This would throw an error:
-      // assert.dom.equal(nonExistentElement, someOtherElement)
-    })
-
-    it('should compare elements after DOM manipulation', async () => {
-      const container = await fixture(html`<div class="container"></div>`)
-
-      // Add a child element
-      const child = document.createElement('span')
-      child.textContent = 'Added child'
-      container.appendChild(child)
-
-      // Find the child through different methods
-      const foundChild1 = container.querySelector('span')
-      const foundChild2 = container.firstElementChild
-
-      // ✅ CORRECT: Both should reference the same element
-      assert.dom.equal(foundChild1, foundChild2)
-      assert.dom.equal(foundChild1, child)
-    })
-  })
-})

package/test/elements/MonacoSetup.ts

@@ -1,65 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-window.MonacoEnvironment = {
-  getWorker: (_moduleId: any, label: string): Worker => {
-    let url: string
-    const prefix = 'node_modules/monaco-editor/esm/vs/'
-    const langPrefix = `${prefix}language/`
-    switch (label) {
-      case 'json':
-        url = `${langPrefix}json/json.worker.js?worker`
-        break
-      case 'css':
-        url = `${langPrefix}css/css.worker.js?worker`
-        break
-      case 'html':
-        url = `${langPrefix}html/html.worker.js?worker`
-        break
-      case 'javascript':
-      case 'typescript':
-        url = `${langPrefix}typescript/ts.worker.js?worker`
-        break
-      default:
-        url = `${prefix}editor/editor.worker.js?worker`
-        break
-    }
-    return new Worker(url, {
-      type: 'module',
-      name: label,
-    })
-  },
-}
-
-export async function loadMonaco(): Promise<void> {
-  let interval: any
-  return new Promise((resolve) => {
-    interval = setInterval(() => {
-      // @ts-expect-error for testing
-      if (window.monaco) {
-        clearInterval(interval)
-        resolve()
-      }
-    }, 20)
-  })
-}
-
-;((): void => {
-  // @ts-expect-error for testing
-  if (window.monaco) {
-    return
-  }
-  // @ts-expect-error for testing
-  window.require = { paths: { vs: 'node_modules/monaco-editor/min/vs' } }
-
-  function loadScript(src: string): void {
-    const script = document.createElement('script')
-    script.src = src
-    script.defer = false
-    script.async = false
-    script.type = 'text/javascript'
-    document.getElementsByTagName('head')[0].appendChild(script)
-  }
-
-  loadScript('node_modules/monaco-editor/min/vs/loader.js')
-  // loadScript('node_modules/monaco-editor/min/vs/editor/editor.main.nls.js')
-  loadScript('node_modules/monaco-editor/min/vs/editor/editor.main.js')
-})()

package/test/elements/authorization/basic-method.test.ts

@@ -1,177 +0,0 @@
-import { html, fixture, assert, oneEvent } from '@open-wc/testing'
-import { IBasicAuthorization, IRequestAuthorization, RequestAuthorization } from '@api-client/core/browser.js'
-import { Authorization } from '../../../src/elements/authorization/ui/Authorization.js'
-import Input from '../../../src/md/input/Input.js'
-import '../../../src/define/authorization/basic-authorization.js'
-
-describe('Basic method', () => {
-  const usernameSelector = 'ui-filled-text-field[name="username"]'
-  const passwordSelector = 'ui-filled-text-field[name="password"]'
-
-  const username = 'test-username'
-  const password = 'test-password'
-
-  async function basicFixture(auth?: IRequestAuthorization): Promise<Authorization> {
-    return fixture(html`<basic-authorization .authorization="${auth}"></basic-authorization>`)
-  }
-
-  describe('DOM rendering', () => {
-    let element: Authorization
-    let form: HTMLFormElement
-
-    beforeEach(async () => {
-      const auth = RequestAuthorization.fromTypedConfig('basic', {}).toJSON()
-      element = await basicFixture(auth)
-      form = element.shadowRoot!.querySelector('form')!
-    })
-
-    it('has the form in the DOM', async () => {
-      assert.ok(form)
-    })
-
-    it('has form has autocomplete', async () => {
-      assert.equal(form.getAttribute('autocomplete'), 'on')
-    })
-
-    it('form has username input', async () => {
-      const input = form.querySelector(usernameSelector) as Input
-      assert.ok(input)
-    })
-
-    it('username is required', async () => {
-      const input = form.querySelector(usernameSelector) as Input
-      assert.isTrue(input.required)
-    })
-
-    it('username has invalid label', async () => {
-      const input = form.querySelector(usernameSelector) as Input
-      assert.equal(input.invalidText, 'Username is required')
-    })
-
-    it('form has password input', async () => {
-      const input = form.querySelector(passwordSelector) as Input
-      assert.ok(input)
-    })
-
-    it('has no other inputs', () => {
-      const controls = form.querySelectorAll('ui-filled-text-field')
-      assert.lengthOf(controls, 2)
-    })
-  })
-
-  describe('change notification', () => {
-    let element: Authorization
-    beforeEach(async () => {
-      const auth = RequestAuthorization.fromTypedConfig('basic', {}).toJSON()
-      element = await basicFixture(auth)
-    })
-
-    it('notifies when username changes', async () => {
-      const input = element.shadowRoot!.querySelector(usernameSelector) as Input
-      setTimeout(() => {
-        input.value = 'test'
-        input.dispatchEvent(new Event('change'))
-      })
-      const e = await oneEvent(element, 'change')
-      assert.ok(e)
-    })
-
-    it('notifies when password changes', async () => {
-      const input = element.shadowRoot!.querySelector(passwordSelector) as Input
-      setTimeout(() => {
-        input.value = 'test-password'
-        input.dispatchEvent(new Event('change'))
-      })
-      const e = await oneEvent(element, 'change')
-      assert.ok(e)
-    })
-  })
-
-  describe('updating the model', () => {
-    let element: Authorization
-    beforeEach(async () => {
-      const auth = RequestAuthorization.fromTypedConfig('basic', {
-        username,
-        password,
-      }).toJSON()
-      element = await basicFixture(auth)
-    })
-
-    it('updates the username from user input', () => {
-      const input = element.shadowRoot!.querySelector(usernameSelector) as Input
-      input.value = 'test'
-      input.dispatchEvent(new Event('change'))
-      const config = element.authorization!.config as IBasicAuthorization
-      assert.equal(config.username, 'test')
-    })
-
-    it('notifies when password changes', () => {
-      const input = element.shadowRoot!.querySelector(passwordSelector) as Input
-      input.value = 'password'
-      input.dispatchEvent(new Event('change'))
-      const config = element.authorization!.config as IBasicAuthorization
-      assert.equal(config.password, 'password')
-    })
-  })
-
-  describe('data restoration', () => {
-    let element: Authorization
-    beforeEach(async () => {
-      const auth = RequestAuthorization.fromTypedConfig('basic', {
-        username,
-        password,
-      }).toJSON()
-      element = await basicFixture(auth)
-    })
-
-    it('has the value on the username filed', () => {
-      const input = element.shadowRoot!.querySelector(usernameSelector) as Input
-      assert.equal(input.value, username)
-    })
-
-    it('has the value on the password filed', () => {
-      const input = element.shadowRoot!.querySelector(passwordSelector) as Input
-      assert.equal(input.value, password)
-    })
-  })
-
-  describe('validation', () => {
-    let element: Authorization
-    beforeEach(async () => {
-      const auth = RequestAuthorization.fromTypedConfig('basic', {}).toJSON()
-      element = await basicFixture(auth)
-    })
-
-    it('is not valid without the username', () => {
-      const result = element.checkValidity()
-      assert.isFalse(result)
-    })
-
-    it('is valid with the username', async () => {
-      ;(element.authorization!.config as IBasicAuthorization).username = 'test-username'
-      element.requestUpdate()
-      await element.updateComplete
-      const result = element.checkValidity()
-      assert.isTrue(result)
-    })
-  })
-
-  describe('a11y', () => {
-    it('is accessible without the model', async () => {
-      const element = await basicFixture()
-      await assert.isAccessible(element)
-    })
-
-    it('is accessible when empty', async () => {
-      const auth = RequestAuthorization.fromTypedConfig('basic', {}).toJSON()
-      const element = await basicFixture(auth)
-      await assert.isAccessible(element)
-    })
-
-    it('is accessible with values', async () => {
-      const auth = RequestAuthorization.fromTypedConfig('basic', { username, password }).toJSON()
-      const element = await basicFixture(auth)
-      await assert.isAccessible(element)
-    })
-  })
-})

package/test/elements/authorization/bearer-method.test.ts

@@ -1,143 +0,0 @@
-import { html, fixture, assert, oneEvent } from '@open-wc/testing'
-import { IBearerAuthorization, IRequestAuthorization, RequestAuthorization } from '@api-client/core/browser.js'
-import { Authorization } from '../../../src/elements/authorization/ui/Authorization.js'
-import Input from '../../../src/md/input/Input.js'
-import '../../../src/define/authorization/bearer-authorization.js'
-
-describe('Bearer method', () => {
-  const tokenSelector = 'ui-filled-text-field[name="token"]'
-  const token = 'test-token'
-
-  async function basicFixture(auth?: IRequestAuthorization): Promise<Authorization> {
-    return fixture(html`<bearer-authorization .authorization="${auth}"></bearer-authorization>`)
-  }
-
-  describe('DOM rendering', () => {
-    let element: Authorization
-    let form: HTMLFormElement
-    beforeEach(async () => {
-      const auth = RequestAuthorization.fromTypedConfig('bearer', {}).toJSON()
-      element = await basicFixture(auth)
-      form = element.shadowRoot!.querySelector('form')!
-    })
-
-    it('has form in the DOM', async () => {
-      assert.ok(form)
-    })
-
-    it('has form has autocomplete', async () => {
-      assert.equal(form.getAttribute('autocomplete'), 'on')
-    })
-
-    it('form has token input', async () => {
-      const input = form.querySelector(tokenSelector)
-      assert.ok(input)
-    })
-
-    it('token is required', async () => {
-      const input = form.querySelector(tokenSelector) as Input
-      assert.isTrue(input.required)
-    })
-
-    it('token has invalid label', async () => {
-      const input = form.querySelector(tokenSelector) as Input
-      assert.equal(input.invalidText, 'Token is required', 'Token has the invalidText')
-    })
-
-    it('has no other inputs', () => {
-      const controls = form.querySelectorAll('ui-filled-text-field')
-      assert.lengthOf(controls, 1)
-    })
-  })
-
-  describe('change notification', () => {
-    let element: Authorization
-    beforeEach(async () => {
-      const auth = RequestAuthorization.fromTypedConfig('bearer', {}).toJSON()
-      element = await basicFixture(auth)
-    })
-
-    it('notifies when token changes', async () => {
-      const input = element.shadowRoot!.querySelector(tokenSelector) as Input
-      setTimeout(() => {
-        input.value = 'test'
-        input.dispatchEvent(new CustomEvent('change'))
-      })
-      const e = await oneEvent(element, 'change')
-      assert.ok(e)
-    })
-  })
-
-  describe('updating the model', () => {
-    let element: Authorization
-    beforeEach(async () => {
-      const auth = RequestAuthorization.fromTypedConfig('bearer', {
-        token,
-      }).toJSON()
-      element = await basicFixture(auth)
-    })
-
-    it('updates the token from user input', () => {
-      const input = element.shadowRoot!.querySelector(tokenSelector) as Input
-      input.value = 'test'
-      input.dispatchEvent(new Event('change'))
-      const config = element.authorization!.config as IBearerAuthorization
-      assert.equal(config.token, 'test')
-    })
-  })
-
-  describe('data restoration', () => {
-    let element: Authorization
-    beforeEach(async () => {
-      const auth = RequestAuthorization.fromTypedConfig('bearer', {
-        token,
-      }).toJSON()
-      element = await basicFixture(auth)
-    })
-
-    it('has the value on the token filed', () => {
-      const input = element.shadowRoot!.querySelector(tokenSelector) as Input
-      assert.equal(input.value, token)
-    })
-  })
-
-  describe('validation', () => {
-    let element: Authorization
-    beforeEach(async () => {
-      const auth = RequestAuthorization.fromTypedConfig('bearer', {}).toJSON()
-      element = await basicFixture(auth)
-    })
-
-    it('is not valid without the token', () => {
-      const result = element.checkValidity()
-      assert.isFalse(result)
-    })
-
-    it('is valid with the token', async () => {
-      ;(element.authorization!.config as IBearerAuthorization).token = token
-      element.requestUpdate()
-      await element.updateComplete
-      const result = element.checkValidity()
-      assert.isTrue(result)
-    })
-  })
-
-  describe('a11y', () => {
-    it('is accessible without the model', async () => {
-      const element = await basicFixture()
-      await assert.isAccessible(element)
-    })
-
-    it('is accessible when empty', async () => {
-      const auth = RequestAuthorization.fromTypedConfig('bearer', {}).toJSON()
-      const element = await basicFixture(auth)
-      await assert.isAccessible(element)
-    })
-
-    it('is accessible with values', async () => {
-      const auth = RequestAuthorization.fromTypedConfig('bearer', { token }).toJSON()
-      const element = await basicFixture(auth)
-      await assert.isAccessible(element)
-    })
-  })
-})