@api-client/ui 0.5.39 → 0.5.41

package/test/md/chip/UiChip.test.ts

@@ -1,219 +0,0 @@
-import { assert, fixture, html, nextFrame } from '@open-wc/testing'
-import sinon from 'sinon'
-import UiChip from '../../../src/md/chip/internals/Chip.js'
-import { UiMock } from '../../helpers/UiMock.js'
-import { ColorConverter } from '@api-client/core/browser.js'
-import '../../../src/md/chip/ui-chip.js'
-import '../../../src/md/icons/ui-icon.js'
-
-describe('md', () => {
-  describe('UiButton', () => {
-    describe('Assist chip', () => {
-      async function basicFixture(): Promise<UiChip> {
-        return fixture(html`<ui-chip type="assist">Enabled</ui-chip>`)
-      }
-
-      async function disabledFixture(): Promise<UiChip> {
-        return fixture(html`<ui-chip type="assist" disabled>Disabled</ui-chip>`)
-      }
-
-      async function iconFixture(): Promise<UiChip> {
-        return fixture(
-          html`<ui-chip type="assist">
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            With icon
-          </ui-chip>`
-        )
-      }
-
-      async function elevatedFixture(): Promise<UiChip> {
-        return fixture(html`<ui-chip type="assist" elevated>Elevated</ui-chip>`)
-      }
-
-      async function disabledElevatedFixture(): Promise<UiChip> {
-        return fixture(html`<ui-chip type="assist" elevated disabled>Elevated</ui-chip>`)
-      }
-
-      it('renders border around a regular assist chip', async () => {
-        const element = await basicFixture()
-        const styles = getComputedStyle(element)
-        const m3Color = styles.getPropertyValue('--md-sys-color-outline-variant')
-        const borderColor = ColorConverter.normalizeColor(styles.borderColor)
-        const compareColor = ColorConverter.normalizeColor(m3Color)
-        assert.equal(borderColor, compareColor, 'has the m3 color')
-        assert.equal(styles.borderWidth, '1px', 'has the width')
-      })
-
-      it('dispatches the click event on space press', async () => {
-        const element = await basicFixture()
-        const spy = sinon.spy()
-        element.addEventListener('click', spy)
-        await UiMock.keyPress(element, 'Space')
-        assert.isTrue(spy.calledOnce)
-      })
-
-      it('dispatches the click event on space enter', async () => {
-        const element = await basicFixture()
-        const spy = sinon.spy()
-        element.addEventListener('click', spy)
-        await UiMock.keyPress(element, 'Enter')
-        assert.isTrue(spy.calledOnce)
-      })
-
-      it('does not dispatch the click event on disabled chip', async () => {
-        const element = await disabledFixture()
-        const spy = sinon.spy()
-        element.addEventListener('click', spy)
-        await UiMock.keyPress(element, 'Space')
-        await UiMock.keyPress(element, 'Enter')
-        assert.isFalse(spy.called)
-      })
-
-      it('does not dispatch the select event', async () => {
-        const element = await disabledFixture()
-        const spy = sinon.spy()
-        element.addEventListener('event', spy)
-        await UiMock.keyPress(element, 'Space')
-        assert.isFalse(spy.called)
-      })
-
-      it('renders suffix icon', async () => {
-        const element = await iconFixture()
-        const surface = element.shadowRoot!.querySelector<HTMLDivElement>('.surface')!
-        assert.isTrue(surface.classList.contains('has-icon'), 'the surface has the has-icon class')
-        const contentStyles = getComputedStyle(surface)
-        assert.equal(contentStyles.paddingLeft.trim(), '8px', 'the container has the padding')
-        const icon = element.querySelector('ui-icon')!
-        const iconStyles = getComputedStyle(icon)
-        assert.equal(iconStyles.marginRight.trim(), '8px', 'the icon has the margin')
-      })
-
-      it('has elevated styles', async () => {
-        const element = await elevatedFixture()
-        const surface = element.shadowRoot!.querySelector<HTMLDivElement>('.surface')!
-        const containerStyles = getComputedStyle(surface)
-        assert.equal(containerStyles.borderWidth, '0px', 'has no border')
-        assert.isNotEmpty(containerStyles.boxShadow, 'has a box shadow')
-      })
-
-      it('has no elevated styles when disabled', async () => {
-        const element = await disabledElevatedFixture()
-        const surface = element.shadowRoot!.querySelector<HTMLDivElement>('.surface')!
-        const containerStyles = getComputedStyle(surface)
-        assert.equal(containerStyles.boxShadow, 'none', 'has no box shadow')
-      })
-    })
-
-    describe('Filter chip', () => {
-      async function basicFixture(): Promise<UiChip> {
-        return fixture(html`<ui-chip type="filter">Enabled</ui-chip>`)
-      }
-
-      async function disabledFixture(): Promise<UiChip> {
-        return fixture(html`<ui-chip type="filter" disabled>Disabled</ui-chip>`)
-      }
-
-      async function removableFixture(): Promise<UiChip> {
-        return fixture(html`<ui-chip type="filter" removable>removable</ui-chip>`)
-      }
-
-      async function listFixture(): Promise<UiChip> {
-        return fixture(html`<ui-chip type="filter" list>List</ui-chip>`)
-      }
-
-      it('renders border around the chip', async () => {
-        const element = await basicFixture()
-        const styles = getComputedStyle(element)
-        const m3Color = styles.getPropertyValue('--md-sys-color-outline-variant')
-        const borderColor = ColorConverter.normalizeColor(styles.borderColor)
-        const compareColor = ColorConverter.normalizeColor(m3Color)
-        assert.equal(borderColor, compareColor, 'has the m3 color')
-        assert.equal(styles.borderWidth, '1px', 'has the width')
-      })
-
-      it('dispatches the click event on space press', async () => {
-        const element = await basicFixture()
-        const spy = sinon.spy()
-        element.addEventListener('click', spy)
-        await UiMock.keyPress(element, 'Space')
-        assert.isTrue(spy.calledOnce)
-      })
-
-      it('dispatches the click event on enter', async () => {
-        const element = await basicFixture()
-        const spy = sinon.spy()
-        element.addEventListener('click', spy)
-        await UiMock.keyPress(element, 'Enter')
-        assert.isTrue(spy.calledOnce)
-      })
-
-      it('toggles the chip', async () => {
-        const element = await basicFixture()
-        element.click()
-        await nextFrame()
-        assert.isTrue(element.checked, 'the element is checked')
-        const icon = element.shadowRoot!.querySelector('.leading-icon.check-mark')
-        assert.ok(icon, 'renders the check mark icon')
-      })
-
-      it('does not dispatch the click event on disabled chip', async () => {
-        const element = await disabledFixture()
-        const spy = sinon.spy()
-        element.addEventListener('click', spy)
-        await UiMock.keyPress(element, 'Space')
-        await UiMock.keyPress(element, 'Enter')
-        assert.isFalse(spy.called)
-      })
-
-      it('dispatches the select event', async () => {
-        const element = await basicFixture()
-        const spy = sinon.spy()
-        element.addEventListener('select', spy)
-        await UiMock.keyPress(element, 'Space')
-        assert.isTrue(spy.calledOnce)
-      })
-
-      it('does not dispatch the select event when disabled', async () => {
-        const element = await disabledFixture()
-        const spy = sinon.spy()
-        element.addEventListener('select', spy)
-        await UiMock.keyPress(element, 'Space')
-        assert.isFalse(spy.called)
-      })
-
-      it('does not render the close icon', async () => {
-        const element = await removableFixture()
-        const node = element.shadowRoot!.querySelector('.trailing-icon')
-        assert.notOk(node)
-      })
-
-      it('renders the list icon', async () => {
-        const element = await listFixture()
-        const node = element.shadowRoot!.querySelector('.trailing-icon')
-        assert.ok(node, 'has the icon')
-      })
-
-      it('is accessible in a regular state', async () => {
-        const element = await basicFixture()
-        await assert.isAccessible(element)
-      })
-
-      it('is accessible when removable', async () => {
-        const element = await removableFixture()
-        await assert.isAccessible(element)
-      })
-
-      it('is accessible when has a list', async () => {
-        const element = await listFixture()
-        await assert.isAccessible(element)
-      })
-
-      it('is accessible when active', async () => {
-        const element = await listFixture()
-        element.click()
-        await nextFrame()
-        await assert.isAccessible(element)
-      })
-    })
-  })
-})

package/test/md/collapse/UiCollapse.test.ts

@@ -1,250 +0,0 @@
-import { fixture, assert, nextFrame, html, oneEvent } from '@open-wc/testing'
-import sinon from 'sinon'
-import type UiCollapse from '../../../src/md/collapse/internals/Collapse.js'
-import '../../../src/md/collapse/ui-collapse.js'
-
-describe('UiCollapse', () => {
-  async function basicFixture(): Promise<UiCollapse> {
-    return fixture(
-      html`<ui-collapse open>
-        <div style="height:100px;">Lorem ipsum</div>
-      </ui-collapse>`
-    )
-  }
-
-  async function emptyFixture(): Promise<UiCollapse> {
-    return fixture(html`<ui-collapse open></ui-collapse>`)
-  }
-
-  async function horizontalFixture(): Promise<UiCollapse> {
-    return fixture(
-      html`<ui-collapse open horizontal>
-        <div style="width:100px;">Lorem ipsum</div>
-      </ui-collapse>`
-    )
-  }
-
-  describe('constructor', () => {
-    let collapse: UiCollapse
-
-    beforeEach(async () => {
-      collapse = await basicFixture()
-    })
-
-    it('open attribute', () => {
-      assert.equal(collapse.open, true)
-    })
-
-    it('animated by default', () => {
-      assert.notOk(collapse.noAnimation, '`noAnimation` is false')
-    })
-
-    it('not transitioning on attached', () => {
-      assert.isFalse(collapse.transitioning, '`transitioning` is false')
-    })
-
-    it('horizontal attribute', () => {
-      assert.equal(collapse.horizontal, false)
-    })
-
-    it('default opened height', () => {
-      assert.equal(collapse.style.maxHeight, '')
-    })
-  })
-
-  describe('#open', () => {
-    let collapse: UiCollapse
-    let collapseHeight: string
-
-    beforeEach(async () => {
-      collapse = await basicFixture()
-      collapseHeight = getComputedStyle(collapse).height
-    })
-
-    it('set open to false triggers animation', async () => {
-      collapse.open = false
-      await collapse.updateComplete
-      // Animation got enabled.
-      assert.notEqual(collapse.style.transitionDuration, '0s')
-      assert.equal(collapse.transitioning, true, 'transitioning became true')
-      await oneEvent(collapse, 'transitionend')
-      assert.equal(collapse.style.transitionDuration, '0s')
-      assert.equal(collapse.transitioning, false, 'transitioning became false')
-    })
-
-    it('set open to false, then to true', async () => {
-      // Trigger 1st toggle.
-      collapse.open = false
-      await oneEvent(collapse, 'transitionend')
-      // Check if size is 0px.
-      assert.equal(collapse.style.maxHeight, '0px')
-      collapse.open = true
-      await collapse.updateComplete
-      assert.equal(collapse.style.maxHeight, collapseHeight)
-      await oneEvent(collapse, 'transitionend')
-      // Check finalSize after animation is done.
-      assert.equal(collapse.style.height, '')
-    })
-
-    it('open change trigger resize', async () => {
-      // No animations for faster test.
-      collapse.noAnimation = true
-      collapse.open = false
-      await oneEvent(collapse, 'resize')
-    })
-
-    it('overflow is hidden while animating', async () => {
-      assert.equal(getComputedStyle(collapse).overflow, 'visible')
-      collapse.open = false
-      await collapse.updateComplete
-      assert.equal(getComputedStyle(collapse).overflow, 'hidden')
-      await oneEvent(collapse, 'transitionend')
-      // Should still be hidden.
-      assert.equal(getComputedStyle(collapse).overflow, 'hidden')
-    })
-  })
-
-  describe('#transitioning', () => {
-    let collapse: UiCollapse
-
-    beforeEach(async () => {
-      collapse = await basicFixture()
-    })
-
-    it('updates only during transitions between open/close states', async () => {
-      const spy = sinon.spy()
-
-      collapse.addEventListener('transitioning', spy)
-      collapse.noAnimation = true
-      assert.equal(spy.callCount, 0, 'transitioning not affected by noAnimation')
-      collapse.horizontal = true
-      await collapse.updateComplete
-      assert.equal(spy.callCount, 1, 'transitioning affected by horizontal')
-      collapse.open = false
-      await collapse.updateComplete
-      assert.equal(spy.callCount, 3, 'transitioning changed 3 times')
-      assert.equal(collapse.transitioning, false, 'transitioning is false')
-    })
-  })
-
-  describe('#noAnimation', () => {
-    let collapse: UiCollapse
-
-    beforeEach(async () => {
-      collapse = await basicFixture()
-    })
-
-    it('disables animations', async () => {
-      collapse.noAnimation = true
-      // trying to animate the size update
-      collapse.open = false
-      await collapse.updateComplete
-      // Animation immediately disabled.
-      assert.equal(collapse.style.maxHeight, '0px')
-    })
-  })
-
-  describe('#horizontal', () => {
-    let collapse: UiCollapse
-    let collapseWidth: string
-
-    beforeEach(async () => {
-      collapse = await horizontalFixture()
-      collapseWidth = getComputedStyle(collapse).width
-    })
-
-    it('opened attribute', () => {
-      assert.equal(collapse.open, true)
-    })
-
-    it('horizontal attribute', () => {
-      assert.equal(collapse.horizontal, true)
-    })
-
-    it('default opened width', () => {
-      assert.equal(collapse.style.width, '')
-    })
-
-    it('set opened to false, then to true', async () => {
-      // Trigger 1st toggle.
-      collapse.open = false
-      await collapse.updateComplete
-      // Size should be immediately set.
-      assert.equal(collapse.style.maxWidth, '0px', 'maxWidth is set')
-      await oneEvent(collapse, 'transitionend')
-
-      // Check if size is still 0px.
-      assert.equal(collapse.style.maxWidth, '0px', 'maxWidth is still set')
-      // Trigger 2nd toggle.
-      collapse.open = true
-      await collapse.updateComplete
-      assert.equal(collapse.style.maxWidth, collapseWidth, 'maxWidth is set to the collapse width')
-
-      await oneEvent(collapse, 'transitionend')
-      assert.equal(collapse.style.width, '')
-    })
-  })
-
-  describe('No content', () => {
-    let collapse: UiCollapse
-
-    beforeEach(async () => {
-      collapse = await emptyFixture()
-    })
-
-    it('empty&opened shows dynamically loaded content', async () => {
-      await nextFrame()
-      collapse.toggle()
-      collapse.toggle()
-      assert.equal(collapse.style.maxHeight, '')
-    })
-  })
-
-  describe('a11y', () => {
-    async function a11yFixture(): Promise<UiCollapse> {
-      return fixture(
-        html`<ui-collapse id="collapse" tabindex="0">
-          <div>
-            Forma temperiemque cornua sidera dissociata cornua recessit innabilis ligavit: solidumque coeptis nullus
-            caelum sponte phoebe di regat mentisque tanta austro capacius amphitrite sui quin postquam semina fossae
-            liquidum umor galeae coeptis caligine liberioris quin liquidum matutinis invasit posset: flexi glomeravit
-            radiis certis invasit oppida postquam onerosior inclusum dominari opifex terris pace finxit quam aquae nunc
-            sine altae auroram quam habentem homo totidemque scythiam in pondus ensis tegit caecoque poena lapidosos
-            humanas coeperunt poena aetas totidem nec natura aethera locavit caelumque distinxit animalibus phoebe
-            cingebant moderantum porrexerat terrae possedit sua sole diu summaque obliquis melioris orbem
-          </div>
-        </ui-collapse>`
-      )
-    }
-
-    let collapse: UiCollapse
-
-    beforeEach(async () => {
-      // Force focus on body at every test.
-      document.body.focus()
-      collapse = await a11yFixture()
-    })
-
-    it('aria attributes', () => {
-      assert.equal(collapse.getAttribute('role'), 'group')
-      assert.equal(collapse.getAttribute('aria-hidden'), 'true')
-    })
-
-    it('set opened to true', async () => {
-      collapse.open = true
-      await collapse.updateComplete
-      assert.equal(collapse.getAttribute('aria-hidden'), 'false')
-    })
-
-    it('focus the collapse when opened', async () => {
-      assert.notEqual(document.activeElement, collapse)
-      collapse.open = true
-      await collapse.updateComplete
-      assert.equal(document.activeElement, collapse)
-    })
-
-    it('passes automated tests when closed', async () => {
-      await assert.isAccessible(collapse)
-    })
-  })
-})

package/test/md/collapse/flex-layout.test.ts

@@ -1,105 +0,0 @@
-import { fixture, assert, html } from '@open-wc/testing'
-import sinon from 'sinon'
-import type UiCollapse from '../../../src/md/collapse/internals/Collapse.js'
-import '../../../src/md/collapse/ui-collapse.js'
-
-describe('UiCollapse: Flex layout', () => {
-  async function basicFixture(): Promise<UiCollapse> {
-    return fixture(
-      html` <div id="container" style="height: 200px; display: flex;">
-        <ui-collapse id="collapse" open style="flex: 1 0 auto">
-          <div style="height:100px;">Lorem ipsum</div>
-        </ui-collapse>
-      </div>`
-    )
-  }
-
-  let container: HTMLElement
-  let collapse: UiCollapse
-  let collapseHeight: string
-
-  beforeEach(async () => {
-    container = await basicFixture()
-    collapse = container.querySelector('ui-collapse')!
-    collapseHeight = getComputedStyle(collapse).height
-  })
-
-  it('default opened height', () => {
-    assert.equal(collapse.style.height, '')
-  })
-
-  it.skip('set opened to false triggers animation', (done) => {
-    collapse.open = false
-    // Animation got enabled.
-    collapse.addEventListener('transitionend', () => {
-      // Animation disabled.
-      assert.equal(collapse.style.transitionDuration, '0s')
-      done()
-    })
-  })
-
-  it('noAnimation disables animations', async () => {
-    collapse.noAnimation = true
-    // trying to animate the size update
-    collapse.open = false
-    await collapse.updateComplete
-    // Animation immediately disabled.
-    assert.equal(collapse.style.maxHeight, '0px')
-  })
-
-  it.skip('set opened to false, then to true', (done) => {
-    // this listener will be triggered twice (every time `opened` changes)
-    collapse.addEventListener('transitionend', () => {
-      if (collapse.open) {
-        // Check finalSize after animation is done.
-        assert.equal(collapse.style.maxHeight, '')
-        done()
-      } else {
-        // Check if size is still 0px.
-        assert.equal(collapse.style.maxHeight, '0px')
-        // Trigger 2nd toggle.
-        collapse.toggle()
-        // Size should be immediately set.
-        assert.equal(collapse.style.maxHeight, collapseHeight)
-      }
-    })
-    // Trigger 1st toggle.
-    collapse.open = false
-    // Size should be immediately set.
-    assert.equal(collapse.style.maxHeight, '0px')
-  })
-
-  it('opened changes trigger resize', async () => {
-    const spy = sinon.stub()
-    collapse.addEventListener('resize', spy)
-    // No animations for faster test.
-    collapse.noAnimation = true
-    collapse.open = false
-    await collapse.updateComplete
-    assert.isTrue(spy.calledOnce, 'resize was fired')
-  })
-
-  it.skip('overflow is hidden while animating', (done) => {
-    collapse.addEventListener('transitionend', () => {
-      // Should still be hidden.
-      assert.equal(getComputedStyle(collapse).overflow, 'hidden')
-      done()
-    })
-    assert.equal(getComputedStyle(collapse).overflow, 'visible')
-    collapse.open = false
-    // Immediately updated style.
-    assert.equal(getComputedStyle(collapse).overflow, 'hidden')
-  })
-
-  it.skip('toggle horizontal updates size', () => {
-    collapse.horizontal = false
-    assert.equal(collapse.style.width, '')
-    assert.equal(collapse.style.maxHeight, '')
-    assert.equal(collapse.style.transitionProperty, 'max-height')
-
-    collapse.horizontal = true
-    assert.equal(collapse.style.maxWidth, '')
-    assert.equal(collapse.style.height, '')
-    assert.equal(collapse.style.transitionProperty, 'max-width')
-  })
-})