@api-client/ui 0.2.3 → 0.2.4

package/test/elements/autocomplete/autocomplete-input.spec.ts

@@ -0,0 +1,448 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { fixture, expect, html, oneEvent, nextFrame, aTimeout } from '@open-wc/testing'
+import sinon from 'sinon'
+
+import { AutocompleteInput } from '../../../src/elements/autocomplete/autocomplete-input.js'
+import '../../../src/elements/autocomplete/autocomplete-input.js' // Registers the element
+
+import '../../../src/md/list/ui-list-item.js'
+import '../../../src/md/listbox/ui-listbox.js'
+
+import type MdListItem from '../../../src/md/list/internals/ListItem.js'
+import type MdListbox from '../../../src/md/listbox/internals/Listbox.js'
+
+describe('AutocompleteInput', () => {
+  async function basicFixture(): Promise<AutocompleteInput> {
+    return fixture(html`
+      <autocomplete-input>
+        <input id="test-input" slot="input" type="text" placeholder="Search..." />
+        <ui-listbox slot="suggestions">
+          <ui-list-item data-value="apple">Apple</ui-list-item>
+          <ui-list-item data-value="banana">Banana</ui-list-item>
+          <ui-list-item data-value="cherry" data-index="value customField" data-custom-field="Sweet Cherry"
+            >Cherry</ui-list-item
+          >
+        </ui-listbox>
+      </autocomplete-input>
+    `)
+  }
+
+  async function noSuggestionsFixture(): Promise<AutocompleteInput> {
+    return fixture(html`
+      <autocomplete-input>
+        <input slot="input" type="text" placeholder="Search..." />
+        <ui-listbox slot="suggestions"></ui-listbox>
+      </autocomplete-input>
+    `)
+  }
+
+  async function noListboxFixture(): Promise<AutocompleteInput> {
+    return fixture(html`
+      <autocomplete-input>
+        <input slot="input" type="text" placeholder="Search..." />
+      </autocomplete-input>
+    `)
+  }
+
+  function getSlottedInput(el: AutocompleteInput): HTMLInputElement | null {
+    const slot = el.shadowRoot!.querySelector('slot[name="input"]') as HTMLSlotElement
+    return (slot.assignedElements({ flatten: true })[0] as HTMLInputElement) || null
+  }
+
+  function getSlottedSuggestions(el: AutocompleteInput): MdListbox | null {
+    const slot = el.shadowRoot!.querySelector('slot[name="suggestions"]') as HTMLSlotElement
+    return (slot.assignedElements({ flatten: true })[0] as MdListbox) || null
+  }
+
+  function getSuggestionItems(suggestionsEl: MdListbox): MdListItem[] {
+    // Assuming MdListbox.items returns the slotted items that are MdListItem
+    return (suggestionsEl.items as MdListItem[]).filter(
+      (item) => item instanceof HTMLElement && item.matches('ui-list-item')
+    )
+  }
+
+  describe('Initialization', () => {
+    it('correctly identifies slotted input and suggestions', async () => {
+      const el = await basicFixture()
+      await el.updateComplete // Ensure firstUpdated has run
+
+      const input = getSlottedInput(el)
+      const suggestions = getSlottedSuggestions(el)
+
+      expect(input).to.exist
+      expect(input?.id).to.equal('test-input')
+      expect(suggestions).to.exist
+      expect(suggestions?.popover).to.equal('manual')
+    })
+
+    it('generates an ID for the input if not provided and sets up anchor names', async () => {
+      const el = (await fixture(html`
+        <autocomplete-input>
+          <input slot="input" type="text" />
+          <ui-listbox slot="suggestions"></ui-listbox>
+        </autocomplete-input>
+      `)) as AutocompleteInput
+      await el.updateComplete
+      await nextFrame() // Allow for internal state updates
+
+      const input = getSlottedInput(el)
+      const suggestions = getSlottedSuggestions(el)
+
+      expect(input?.id).to.match(/^autocomplete-input-/)
+      // @ts-expect-error _inputId is a protected member
+      const internalInputId = el.inputId
+      expect(input?.style.getPropertyValue('anchor-name')).to.equal(`--${internalInputId}`)
+      expect(suggestions?.style.getPropertyValue('position-anchor')).to.equal(`--${internalInputId}`)
+    })
+
+    it('popover is initially closed', async () => {
+      const el = await basicFixture()
+      await el.updateComplete
+      const suggestions = getSlottedSuggestions(el)
+      expect(suggestions?.matches(':popover-open')).to.be.false
+      expect(el.opened).to.be.false
+    })
+  })
+
+  describe('Popover behavior', () => {
+    it('opens on input focus with suggestions', async () => {
+      const el = await basicFixture()
+      await el.updateComplete
+      const input = getSlottedInput(el)!
+      const suggestions = getSlottedSuggestions(el)!
+
+      input.focus()
+      await nextFrame() // Allow focus event to propagate and popover to open
+
+      expect(suggestions.matches(':popover-open')).to.be.true
+      expect(el.opened).to.be.true
+    })
+
+    it('does not open on input focus without suggestions', async () => {
+      const el = await noSuggestionsFixture()
+      await el.updateComplete
+      const input = getSlottedInput(el)!
+      const suggestions = getSlottedSuggestions(el)!
+
+      input.focus()
+      await nextFrame()
+
+      expect(suggestions.matches(':popover-open')).to.be.false
+    })
+
+    it('does not open on input focus if suggestions element is missing', async () => {
+      const el = await noListboxFixture()
+      await el.updateComplete
+      const input = getSlottedInput(el)!
+
+      input.focus()
+      await nextFrame()
+      // No suggestions ref, so opened should be false
+      expect(el.opened).to.be.false
+    })
+
+    it('closes on input blur', async () => {
+      const el = await basicFixture()
+      await el.updateComplete
+      const input = getSlottedInput(el)!
+      const suggestions = getSlottedSuggestions(el)!
+
+      input.focus()
+      await nextFrame()
+      expect(suggestions.matches(':popover-open')).to.be.true
+
+      input.blur()
+      // Blur handler uses requestAnimationFrame
+      await aTimeout(0) // Wait for rAF
+      await nextFrame() // Wait for potential re-render
+
+      expect(suggestions.matches(':popover-open')).to.be.false
+      expect(el.opened).to.be.false
+    })
+
+    it('closes on Escape key', async () => {
+      const el = await basicFixture()
+      await el.updateComplete
+      const input = getSlottedInput(el)!
+      const suggestions = getSlottedSuggestions(el)!
+
+      input.focus()
+      await nextFrame()
+      expect(suggestions.matches(':popover-open')).to.be.true
+
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true }))
+      await nextFrame()
+
+      expect(suggestions.matches(':popover-open')).to.be.false
+    })
+  })
+
+  describe('Filtering', () => {
+    let el: AutocompleteInput
+    let input: HTMLInputElement
+    let suggestionsBox: MdListbox
+    let items: MdListItem[]
+
+    beforeEach(async () => {
+      el = await basicFixture()
+      await el.updateComplete
+      input = getSlottedInput(el)!
+      suggestionsBox = getSlottedSuggestions(el)!
+      items = getSuggestionItems(suggestionsBox)
+      input.focus() // Open popover for filtering tests
+      await nextFrame()
+    })
+
+    it('shows all items for empty query', () => {
+      input.value = ''
+      input.dispatchEvent(new Event('input', { bubbles: true, composed: true }))
+      items.forEach((item) => expect(item.hidden).to.be.false)
+    })
+
+    it('filters items based on data-value', async () => {
+      input.value = 'app'
+      input.dispatchEvent(new Event('input', { bubbles: true, composed: true }))
+      await nextFrame()
+
+      expect(items[0].hidden).to.be.false // Apple
+      expect(items[1].hidden).to.be.true // Banana
+      expect(items[2].hidden).to.be.true // Cherry
+    })
+
+    it('filters items based on textContent if data-value is not present or does not match', async () => {
+      // Modify first item to not have data-value for this test
+      items[0].removeAttribute('data-value')
+      items[0].textContent = 'Pineapple'
+      await nextFrame()
+
+      input.value = 'pine'
+      input.dispatchEvent(new Event('input', { bubbles: true, composed: true }))
+      await nextFrame()
+
+      expect(items[0].hidden).to.be.false // Pineapple (via textContent)
+      expect(items[1].hidden).to.be.true // Banana
+      expect(items[2].hidden).to.be.true // Cherry
+    })
+
+    it('filters items based on data-index fields', async () => {
+      input.value = 'Sweet' // Matches data-custom-field="Sweet Cherry" via data-index on items[2]
+      input.dispatchEvent(new Event('input', { bubbles: true, composed: true }))
+      await nextFrame()
+
+      expect(items[0].hidden).to.be.true // Apple
+      expect(items[1].hidden).to.be.true // Banana
+      expect(items[2].hidden).to.be.false // Cherry
+    })
+
+    it('is case-insensitive', async () => {
+      input.value = 'BaNaNa'
+      input.dispatchEvent(new Event('input', { bubbles: true, composed: true }))
+      await nextFrame()
+
+      expect(items[0].hidden).to.be.true // Apple
+      expect(items[1].hidden).to.be.false // Banana
+      expect(items[2].hidden).to.be.true // Cherry
+    })
+
+    it('closes popover if no items match', async () => {
+      input.value = 'nonexistent'
+      input.dispatchEvent(new Event('input', { bubbles: true, composed: true }))
+      await nextFrame()
+      await aTimeout(0) // filterSuggestions might call closeSuggestions, which might be async
+
+      items.forEach((item) => expect(item.hidden).to.be.true)
+      expect(suggestionsBox.matches(':popover-open')).to.be.false
+    })
+  })
+
+  describe('Keyboard navigation', () => {
+    let el: AutocompleteInput
+    let input: HTMLInputElement
+    let suggestionsBox: MdListbox
+
+    beforeEach(async () => {
+      el = await basicFixture()
+      await el.updateComplete
+      input = getSlottedInput(el)!
+      suggestionsBox = getSlottedSuggestions(el)!
+      // For keyboard nav, listbox needs to handle highlight internally.
+      // We spy on its methods.
+      sinon.spy(suggestionsBox, 'highlightNext')
+      sinon.spy(suggestionsBox, 'highlightPrevious')
+      sinon.spy(suggestionsBox, 'notifySelect')
+    })
+
+    afterEach(() => {
+      sinon.restore()
+    })
+
+    it('ArrowDown highlights next item and opens popover if closed', async () => {
+      expect(suggestionsBox.matches(':popover-open')).to.be.false
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true, composed: true }))
+      // handleKeydown uses rAF if popover was closed
+      await aTimeout(0) // for rAF
+      await nextFrame() // for popover to open and highlight
+
+      expect(suggestionsBox.matches(':popover-open')).to.be.true
+      expect(suggestionsBox.highlightNext).to.have.been.calledOnce
+    })
+
+    it('ArrowUp highlights previous item', async () => {
+      input.focus() // Open popover
+      await nextFrame()
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true, composed: true }))
+      await nextFrame()
+      expect(suggestionsBox.highlightPrevious).to.have.been.calledOnce
+    })
+
+    it('Enter selects highlighted item and dispatches event', async () => {
+      input.focus() // Open popover
+      await nextFrame()
+
+      // Simulate item being highlighted by listbox (e.g., first item)
+      const items = getSuggestionItems(suggestionsBox)
+      suggestionsBox.highlightListItem = items[0]
+      await nextFrame()
+
+      const eventPromise = oneEvent(el, 'autocomplete')
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true }))
+
+      const event = await eventPromise
+      expect(suggestionsBox.notifySelect).to.have.been.calledWith(items[0])
+      expect(event.detail.item).to.equal(items[0])
+      expect(suggestionsBox.matches(':popover-open')).to.be.false // Popover should close
+    })
+
+    it('Enter does nothing if popover closed or no item highlighted', async () => {
+      expect(suggestionsBox.matches(':popover-open')).to.be.false
+      suggestionsBox.highlightListItem = null // Ensure no item is highlighted
+
+      const spy = sinon.spy()
+      el.addEventListener('autocomplete', spy)
+
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, composed: true }))
+      await nextFrame()
+
+      expect(spy).not.to.have.been.called
+      expect(suggestionsBox.notifySelect).not.to.have.been.called
+    })
+  })
+
+  describe('Suggestion selection (click)', () => {
+    it('selects item on click and dispatches event', async () => {
+      const el = await basicFixture()
+      await el.updateComplete
+      const input = getSlottedInput(el)!
+      const suggestionsBox = getSlottedSuggestions(el)!
+      const items = getSuggestionItems(suggestionsBox)
+
+      input.focus() // Open popover
+      await nextFrame()
+
+      const eventPromise = oneEvent(el, 'autocomplete')
+      // Simulate click on the first item.
+      // The `ui-listbox` should dispatch 'select' upon item click.
+      // We simulate the 'select' event from the listbox.
+      suggestionsBox.dispatchEvent(
+        new CustomEvent('select', {
+          detail: { item: items[1] }, // Select 'Banana'
+          bubbles: true, // Ensure it bubbles to autocomplete-input if needed by its listener
+          composed: true,
+        })
+      )
+
+      const event = await eventPromise
+      expect(event.detail.item).to.equal(items[1])
+      expect(suggestionsBox.matches(':popover-open')).to.be.false // Popover should close
+    })
+  })
+
+  describe('Dynamic content', () => {
+    it('handles dynamically added input', async () => {
+      const el = await fixture<AutocompleteInput>(html`<autocomplete-input></autocomplete-input>`)
+      await el.updateComplete
+
+      const inputEl = document.createElement('input')
+      inputEl.slot = 'input'
+      inputEl.type = 'text'
+      el.appendChild(inputEl)
+      await nextFrame() // MutationObserver is async
+      await el.updateComplete // Ensure component processes the new input
+
+      const slottedInput = getSlottedInput(el)
+      expect(slottedInput).to.equal(inputEl)
+      expect(inputEl.id).to.match(/^autocomplete-input-/)
+    })
+
+    it('handles dynamically added suggestions', async () => {
+      const el = await fixture<AutocompleteInput>(
+        html`<autocomplete-input><input slot="input" id="dyn-input" /></autocomplete-input>`
+      )
+      await el.updateComplete
+      const input = getSlottedInput(el)!
+
+      const suggestionsEl = document.createElement('ui-listbox') as MdListbox
+      suggestionsEl.slot = 'suggestions'
+      el.appendChild(suggestionsEl)
+      await nextFrame() // MutationObserver
+      await el.updateComplete
+
+      const slottedSuggestions = getSlottedSuggestions(el)
+      expect(slottedSuggestions).to.equal(suggestionsEl)
+      expect(suggestionsEl.popover).to.equal('manual')
+      expect(suggestionsEl.style.getPropertyValue('position-anchor')).to.equal(`--${input.id}`)
+    })
+
+    it('re-filters when suggestion items change (via itemschange event)', async () => {
+      const el = await basicFixture()
+      await el.updateComplete
+      const input = getSlottedInput(el)!
+      const suggestionsBox = getSlottedSuggestions(el)!
+      let items = getSuggestionItems(suggestionsBox)
+
+      input.focus()
+      input.value = 'ban' // Should show "Banana"
+      input.dispatchEvent(new Event('input', { bubbles: true, composed: true }))
+      await nextFrame()
+      expect(items[0].hidden).to.be.true // Apple
+      expect(items[1].hidden).to.be.false // Banana
+
+      // Add a new item that matches "ban"
+      const newItem = document.createElement('ui-list-item') as MdListItem
+      newItem.dataset.value = 'bandana'
+      newItem.textContent = 'Bandana'
+      suggestionsBox.appendChild(newItem)
+
+      // Simulate 'itemschange' event from listbox
+      suggestionsBox.dispatchEvent(new CustomEvent('itemschange'))
+      await nextFrame() // Allow handler to run
+
+      items = getSuggestionItems(suggestionsBox) // Re-fetch items
+      expect(items.find((i) => i.dataset.value === 'bandana')?.hidden).to.be.false
+      expect(items.find((i) => i.dataset.value === 'banana')?.hidden).to.be.false
+      expect(items.find((i) => i.dataset.value === 'apple')?.hidden).to.be.true
+    })
+  })
+
+  describe('`opened` property', () => {
+    it('reflects popover state', async () => {
+      const el = await basicFixture()
+      await el.updateComplete
+      const input = getSlottedInput(el)!
+      const suggestions = getSlottedSuggestions(el)!
+
+      expect(el.opened).to.be.false
+
+      input.focus()
+      await nextFrame()
+      expect(el.opened).to.be.true
+      expect(suggestions.matches(':popover-open')).to.be.true
+
+      // @ts-expect-error protected method
+      el.closeSuggestions()
+      await nextFrame()
+      expect(el.opened).to.be.false
+      expect(suggestions.matches(':popover-open')).to.be.false
+    })
+  })
+})

package/test/elements/http/BodyMultipartEditorElement.test.ts

@@ -1,4 +1,4 @@
-import { assert, fixture, nextFrame, html, aTimeout } from '@open-wc/testing'
+import { assert, fixture, nextFrame, html, oneEvent } from '@open-wc/testing'
 import sinon from 'sinon'
 import { loadMonaco } from '../MonacoSetup.js'
 import BodyMultipartEditorElement, { hasFormDataSupport } from '../../../src/elements/http/BodyMultipartEditor.js'
@@ -23,7 +23,7 @@ describe('elements', () => {
         const file = new File(['blob-value'], 'file.txt', { type: 'text/plain' })
         form.append('file', file, 'file.txt')
         element.value = form
-        await aTimeout(20)
+        await oneEvent(element, 'modelupdate')
         return element
       }
 
@@ -172,19 +172,19 @@ describe('elements', () => {
           element.model = [{ name: 'a', value: 'b', enabled: true }]
           // @ts-expect-error for testing
           element.value = undefined
-          await aTimeout(20)
+          await oneEvent(element, 'modelupdate')
           assert.deepEqual(element.model, [])
         })
 
         it('generates the view model', async () => {
           element.value = form
-          await aTimeout(20)
+          await oneEvent(element, 'modelupdate')
           assert.lengthOf(element.model, 3)
         })
 
         it('generated model has restored text part property', async () => {
           element.value = form
-          await aTimeout(20)
+          await oneEvent(element, 'modelupdate')
           const [item] = element.model
 
           assert.deepEqual(item, {
@@ -199,7 +199,7 @@ describe('elements', () => {
 
         it('generated model has restored text blob part property', async () => {
           element.value = form
-          await aTimeout(20)
+          await oneEvent(element, 'modelupdate')
           const item = element.model[1]
           assert.deepEqual(item, {
             enabled: true,
@@ -214,7 +214,7 @@ describe('elements', () => {
 
         it('generated model has restored file part property', async () => {
           element.value = form
-          await aTimeout(20)
+          await oneEvent(element, 'modelupdate')
           const item = element.model[2]
           assert.deepEqual(item, {
             enabled: true,
@@ -230,7 +230,7 @@ describe('elements', () => {
         it('updates an existing model', async () => {
           element.model = [{ name: 'test', value: 'true', enabled: true }]
           element.value = form
-          await aTimeout(20)
+          await oneEvent(element, 'modelupdate')
           assert.equal(element.model[0].name, 'text')
         })
 
@@ -239,7 +239,7 @@ describe('elements', () => {
           const spy = sinon.spy()
           element.addEventListener('change', spy)
           element.value = form
-          await aTimeout(20)
+          await oneEvent(element, 'modelupdate')
           assert.isFalse(spy.called)
         })
       })
@@ -277,7 +277,7 @@ describe('elements', () => {
           const form = new FormData()
           form.append('a', 'b')
           element.value = form
-          await aTimeout(20)
+          await oneEvent(element, 'modelupdate')
           element.model = undefined
           const it = element.value.entries().next()
           assert.isTrue(it.done)
@@ -581,7 +581,7 @@ describe('elements', () => {
           const input = element.shadowRoot!.querySelector('.value-input input[data-index="1"]') as HTMLInputElement
           input.value = '* *'
           input.dispatchEvent(new Event('change'))
-          await aTimeout(20)
+          await oneEvent(element, 'change')
 
           const item = element.model[1]
 
@@ -599,7 +599,7 @@ describe('elements', () => {
           const input = element.shadowRoot!.querySelector('.value-input input[data-index="1"]') as HTMLInputElement
           input.value = '* *'
           input.dispatchEvent(new Event('change'))
-          await aTimeout(10)
+          await oneEvent(element, 'change')
           assert.isTrue(spy.calledOnce)
         })
       })
@@ -615,7 +615,7 @@ describe('elements', () => {
           input.value = 'text/other'
           input.dispatchEvent(new Event('change'))
 
-          await aTimeout(20)
+          await oneEvent(element, 'change')
           const item = element.model[1]
 
           assert.deepEqual(item, {
@@ -631,7 +631,7 @@ describe('elements', () => {
           input.value = 'text/x'
           input.dispatchEvent(new Event('change'))
 
-          await aTimeout(20)
+          await oneEvent(element, 'change')
           const item = element.model[0]
 
           assert.deepEqual(item, {
@@ -649,8 +649,7 @@ describe('elements', () => {
           const input = element.shadowRoot!.querySelector('.mime-input input[data-index="0"]') as HTMLInputElement
           input.value = 'text/x'
           input.dispatchEvent(new Event('change'))
-
-          await aTimeout(20)
+          await oneEvent(element, 'change')
           assert.isTrue(spy.called)
         })
       })

package/test/elements/http/CertificateAdd.test.ts

@@ -31,7 +31,7 @@ describe.skip('elements', () => {
         })
 
         it('renders the certificate name input', async () => {
-          const input = element.shadowRoot!.querySelector('ui-text-field[name="name"]')! as Input
+          const input = element.shadowRoot!.querySelector('ui-filled-text-field[name="name"]')! as Input
           assert.ok(input, 'has the input')
         })
 
@@ -46,12 +46,12 @@ describe.skip('elements', () => {
         })
 
         it('renders the key password filed', async () => {
-          const input = element.shadowRoot!.querySelector('ui-text-field[name="keyPassword"]') as Input
+          const input = element.shadowRoot!.querySelector('ui-filled-text-field[name="keyPassword"]') as Input
           assert.ok(input, 'has the input')
         })
 
         it('does not render the certificate password filed', async () => {
-          const input = element.shadowRoot!.querySelector('ui-text-field[name="certificatePassword"]')
+          const input = element.shadowRoot!.querySelector('ui-filled-text-field[name="certificatePassword"]')
           assert.notOk(input, 'has no input')
         })
       })
@@ -64,7 +64,7 @@ describe.skip('elements', () => {
         })
 
         it('renders the certificate name input', async () => {
-          const input = element.shadowRoot!.querySelector('ui-text-field[name="name"]')! as Input
+          const input = element.shadowRoot!.querySelector('ui-filled-text-field[name="name"]')! as Input
           assert.ok(input, 'has the input')
         })
 
@@ -79,12 +79,12 @@ describe.skip('elements', () => {
         })
 
         it('does not render the key password filed', async () => {
-          const input = element.shadowRoot!.querySelector('ui-text-field[name="keyPassword"]')
+          const input = element.shadowRoot!.querySelector('ui-filled-text-field[name="keyPassword"]')
           assert.notOk(input, 'has no input')
         })
 
         it('renders the certificate password input', async () => {
-          const input = element.shadowRoot!.querySelector('ui-text-field[name="certificatePassword"]')! as Input
+          const input = element.shadowRoot!.querySelector('ui-filled-text-field[name="certificatePassword"]')! as Input
           assert.ok(input, 'has the input')
         })
       })
@@ -387,14 +387,14 @@ describe.skip('elements', () => {
           element.addEventListener(EventTypes.Store.File.create, spy)
           await element.submit()
           assert.isFalse(spy.called, 'does not dispatch store event')
-          const input = element.shadowRoot!.querySelector('ui-text-field[name="name"]')! as Input
+          const input = element.shadowRoot!.querySelector('ui-filled-text-field[name="name"]')! as Input
           assert.isTrue(input.invalid, 'the input is invalid')
         })
 
         it('informs when the certificate is missing', async () => {
           const key = new File(['test'], 'key.key', { type: 'text/plain' })
           await element.processDroppedFile(key, 'key')
-          const input = element.shadowRoot!.querySelector('ui-text-field[name="name"]')! as Input
+          const input = element.shadowRoot!.querySelector('ui-filled-text-field[name="name"]')! as Input
           input.value = 'test'
           input.notifyChange()
           await input.updateComplete
@@ -408,7 +408,7 @@ describe.skip('elements', () => {
         it('informs when the key is missing', async () => {
           const cert = new File(['test'], 'key.key', { type: 'text/plain' })
           await element.processDroppedFile(cert, 'certificate')
-          const input = element.shadowRoot!.querySelector('ui-text-field[name="name"]')! as Input
+          const input = element.shadowRoot!.querySelector('ui-filled-text-field[name="name"]')! as Input
           input.value = 'test'
           input.notifyChange()
           await input.updateComplete
@@ -424,7 +424,7 @@ describe.skip('elements', () => {
           const key = new File(['test'], 'key.key', { type: 'text/plain' })
           await element.processDroppedFile(cert, 'certificate')
           await element.processDroppedFile(key, 'key')
-          const input = element.shadowRoot!.querySelector('ui-text-field[name="name"]')! as Input
+          const input = element.shadowRoot!.querySelector('ui-filled-text-field[name="name"]')! as Input
           input.value = 'test'
           input.notifyChange()
           await input.updateComplete
@@ -445,7 +445,7 @@ describe.skip('elements', () => {
           const key = new File(['test'], 'key.key', { type: 'text/plain' })
           await element.processDroppedFile(cert, 'certificate')
           await element.processDroppedFile(key, 'key')
-          const input = element.shadowRoot!.querySelector('ui-text-field[name="name"]')! as Input
+          const input = element.shadowRoot!.querySelector('ui-filled-text-field[name="name"]')! as Input
           input.value = 'test'
           input.notifyChange()
           await input.updateComplete