@api-client/ui 0.3.2 → 0.3.4

package/test/elements/har/HarViewerElement.test.ts

@@ -1,7 +1,7 @@
 import { assert, fixture, nextFrame, html } from '@open-wc/testing'
 import sinon from 'sinon'
 import type { Har } from 'har-format'
-import HarViewerElement, { HarTab } from '../../../src/elements/har/HarViewer.js'
+import HarViewerElement from '../../../src/elements/har/HarViewer.js'
 import * as HarUtils from '../../../src/elements/har/HarUtils.js'
 import '../../../src/define/har/har-viewer.js'
 
@@ -655,60 +655,6 @@ describe('HarViewer', () => {
     })
   })
 
-  describe('Entry details rendering', () => {
-    let model: Har
-    let details: HTMLElement
-
-    before(async () => {
-      model = await readHarFile(demo1file)
-    })
-
-    let element: HarViewerElement
-    beforeEach(async () => {
-      element = await basicFixture(model)
-      const item = element.shadowRoot!.querySelector('.entry-item') as HTMLElement
-      item.click()
-      await nextFrame()
-      details = element.shadowRoot!.querySelector('.entry-details')!
-    })
-
-    it('renders the request info tab by default', () => {
-      const tabs = details.querySelector('ui-tabs')!
-      assert.equal(tabs.selected, HarTab.request, 'has the selected tab')
-      const title = details.querySelector('.entry-details-title')!.textContent!.trim()
-      // assert.equal(title, 'Request on 15 Mar 2021, 13:04:59');
-      assert.isNotEmpty(title)
-    })
-
-    it('renders the response info tab', async () => {
-      const tab = details.querySelectorAll('ui-tabs ui-tab')[1] as HTMLElement
-      tab.click()
-      await nextFrame()
-      const tabs = details.querySelector('ui-tabs')!
-      assert.equal(tabs.selected, HarTab.response, 'has the selected tab')
-    })
-
-    it('renders the response content tab', async () => {
-      const tab = details.querySelectorAll('ui-tabs ui-tab')[3] as HTMLElement
-      tab.click()
-      await nextFrame()
-      const tabs = details.querySelector('ui-tabs')!
-      assert.equal(tabs.selected, HarTab.responseContent, 'has the selected tab')!
-      const content = details.querySelector('.details-content pre') as HTMLElement
-      assert.ok(content, 'has the content element')
-    })
-
-    it('renders the cookies tab', async () => {
-      const tab = details.querySelectorAll('ui-tabs ui-tab')[4] as HTMLElement
-      tab.click()
-      await nextFrame()
-      const tabs = details.querySelector('ui-tabs')!
-      assert.equal(tabs.selected, HarTab.cookies, 'has the selected tab')!
-      const content = details.querySelector('.details-content .details-list') as HTMLElement
-      assert.ok(content, 'has the content element')
-    })
-  })
-
   describe('a11y', () => {
     let model: Har
 

package/test/ui/chip/UiChip.test.ts

@@ -26,15 +26,6 @@ describe('md', () => {
         )
       }
 
-      async function disableIconFixture(): Promise<UiChip> {
-        return fixture(
-          html`<ui-chip type="assist" disabled>
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            Disabled with icon
-          </ui-chip>`
-        )
-      }
-
       async function elevatedFixture(): Promise<UiChip> {
         return fixture(html`<ui-chip type="assist" elevated>Elevated</ui-chip>`)
       }
@@ -45,9 +36,8 @@ describe('md', () => {
 
       it('renders border around a regular assist chip', async () => {
         const element = await basicFixture()
-        const container = element.shadowRoot?.querySelector('.container') as HTMLDivElement
-        const styles = getComputedStyle(container)
-        const m3Color = styles.getPropertyValue('--md-sys-color-outline')
+        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')
@@ -89,43 +79,28 @@ describe('md', () => {
 
       it('renders suffix icon', async () => {
         const element = await iconFixture()
-        const surface = element.shadowRoot!.querySelector('.surface') as HTMLDivElement
-        assert.isTrue(surface.classList.contains('withIcon'), 'the surface has the withIcon class')
-        const content = element.shadowRoot!.querySelector('.content') as HTMLDivElement
-        const contentStyles = getComputedStyle(content)
+        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 disabled styles when disabled', async () => {
-        const element = await disableIconFixture()
-        const container = element.shadowRoot!.querySelector('.container') as HTMLDivElement
-        const containerStyles = getComputedStyle(container)
-        assert.equal(containerStyles.opacity, '0.12', 'container has the opacity')
-        const content = element.shadowRoot!.querySelector('.content') as HTMLDivElement
-        const contentStyles = getComputedStyle(content)
-        assert.equal(contentStyles.opacity, '0.68', 'content has the opacity')
-      })
-
       it('has elevated styles', async () => {
         const element = await elevatedFixture()
-        const container = element.shadowRoot!.querySelector('.container') as HTMLDivElement
-        const containerStyles = getComputedStyle(container)
+        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 container = element.shadowRoot!.querySelector('.container') as HTMLDivElement
-        const containerStyles = getComputedStyle(container)
+        const surface = element.shadowRoot!.querySelector<HTMLDivElement>('.surface')!
+        const containerStyles = getComputedStyle(surface)
         assert.equal(containerStyles.boxShadow, 'none', 'has no box shadow')
-        assert.equal(containerStyles.opacity, '0.12', 'container has the opacity')
-        const content = element.shadowRoot!.querySelector('.content') as HTMLDivElement
-        const contentStyles = getComputedStyle(content)
-        assert.equal(contentStyles.opacity, '0.68', 'content has the opacity')
       })
     })
 
@@ -138,19 +113,18 @@ describe('md', () => {
         return fixture(html`<ui-chip type="filter" disabled>Disabled</ui-chip>`)
       }
 
-      async function closableFixture(): Promise<UiChip> {
-        return fixture(html`<ui-chip type="filter" closable>Closable</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="abc">List</ui-chip>`)
+        return fixture(html`<ui-chip type="filter" list>List</ui-chip>`)
       }
 
-      it('renders a border around the chip', async () => {
+      it('renders border around the chip', async () => {
         const element = await basicFixture()
-        const container = element.shadowRoot?.querySelector('.container') as HTMLDivElement
-        const styles = getComputedStyle(container)
-        const m3Color = styles.getPropertyValue('--md-sys-color-outline')
+        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')
@@ -208,7 +182,7 @@ describe('md', () => {
       })
 
       it('does not render the close icon', async () => {
-        const element = await closableFixture()
+        const element = await removableFixture()
         const node = element.shadowRoot!.querySelector('.trailing-icon')
         assert.notOk(node)
       })
@@ -219,36 +193,13 @@ describe('md', () => {
         assert.ok(node, 'has the icon')
       })
 
-      it('dispatches the list event', async () => {
-        const element = await listFixture()
-        const spy = sinon.spy()
-        element.addEventListener('list', spy)
-        const node = element.shadowRoot!.querySelector('.trailing-icon') as HTMLElement
-        node.click()
-        assert.isTrue(spy.calledOnce)
-      })
-
-      it('prevents the "click" event when dispatching the "list" event', async () => {
-        const element = await listFixture()
-        const spy = sinon.spy()
-        element.addEventListener('click', spy)
-        const node = element.shadowRoot!.querySelector('.trailing-icon') as HTMLElement
-        node.click()
-        assert.isFalse(spy.called)
-      })
-
       it('is accessible in a regular state', async () => {
         const element = await basicFixture()
         await assert.isAccessible(element)
       })
 
-      it('is accessible in a disabled state', async () => {
-        const element = await disabledFixture()
-        await assert.isAccessible(element)
-      })
-
-      it('is accessible when closable', async () => {
-        const element = await closableFixture()
+      it('is accessible when removable', async () => {
+        const element = await removableFixture()
         await assert.isAccessible(element)
       })