From a3f658938d4a2824524e88ccc159a4c10abb1970 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 17 Nov 2022 09:35:44 -0500 Subject: [PATCH] bulletproof part selectors --- src/components/alert/alert.test.ts | 12 +++++----- src/components/alert/alert.ts | 2 +- src/components/avatar/avatar.test.ts | 10 ++++---- src/components/badge/badge.test.ts | 10 ++++---- .../breadcrumb-item/breadcrumb-item.test.ts | 12 +++++----- src/components/button/button.test.ts | 4 ++-- src/components/checkbox/checkbox.test.ts | 4 ++-- .../color-picker/color-picker.test.ts | 8 +++---- src/components/color-picker/color-picker.ts | 4 ++-- src/components/dialog/dialog.test.ts | 14 +++++------ src/components/drawer/drawer.test.ts | 14 +++++------ src/components/dropdown/dropdown.test.ts | 12 +++++----- .../image-comparer/image-comparer.test.ts | 24 +++++++++---------- src/components/input/input.test.ts | 4 ++-- .../progress-bar/progress-bar.test.ts | 6 ++--- .../progress-ring/progress-ring.test.ts | 2 +- src/components/range/range.test.ts | 2 +- src/components/rating/rating.test.ts | 12 +++++----- src/components/select/select.test.ts | 4 ++-- src/components/skeleton/skeleton.test.ts | 8 +++---- src/components/spinner/spinner.test.ts | 2 +- src/components/tab/tab.test.ts | 14 +++++------ src/components/tag/tag.test.ts | 14 +++++------ src/components/textarea/textarea.test.ts | 4 ++-- src/components/tooltip/tooltip.test.ts | 16 ++++++------- 25 files changed, 109 insertions(+), 109 deletions(-) diff --git a/src/components/alert/alert.test.ts b/src/components/alert/alert.test.ts index 8870d3d3..bb6d4bda 100644 --- a/src/components/alert/alert.test.ts +++ b/src/components/alert/alert.test.ts @@ -5,21 +5,21 @@ import type SlAlert from './alert'; describe('', () => { it('should be visible with the open attribute', async () => { const el = await fixture(html` I am an alert `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.hidden).to.be.false; }); it('should not be visible without the open attribute', async () => { const el = await fixture(html` I am an alert `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.hidden).to.be.true; }); it('should emit sl-show and sl-after-show when calling show()', async () => { const el = await fixture(html` I am an alert `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; const showHandler = sinon.spy(); const afterShowHandler = sinon.spy(); @@ -37,7 +37,7 @@ describe('', () => { it('should emit sl-hide and sl-after-hide when calling hide()', async () => { const el = await fixture(html` I am an alert `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; const hideHandler = sinon.spy(); const afterHideHandler = sinon.spy(); @@ -55,7 +55,7 @@ describe('', () => { it('should emit sl-show and sl-after-show when setting open = true', async () => { const el = await fixture(html` I am an alert `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; const showHandler = sinon.spy(); const afterShowHandler = sinon.spy(); @@ -73,7 +73,7 @@ describe('', () => { it('should emit sl-hide and sl-after-hide when setting open = false', async () => { const el = await fixture(html` I am an alert `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; const hideHandler = sinon.spy(); const afterHideHandler = sinon.spy(); diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts index 16f69355..841fcf6a 100644 --- a/src/components/alert/alert.ts +++ b/src/components/alert/alert.ts @@ -50,7 +50,7 @@ export default class SlAlert extends ShoelaceElement { private readonly hasSlotController = new HasSlotController(this, 'icon', 'suffix'); private readonly localize = new LocalizeController(this); - @query('[part="base"]') base: HTMLElement; + @query('[part~="base"]') base: HTMLElement; /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */ @property({ type: Boolean, reflect: true }) open = false; diff --git a/src/components/avatar/avatar.test.ts b/src/components/avatar/avatar.test.ts index dd88c01a..1bd924e6 100644 --- a/src/components/avatar/avatar.test.ts +++ b/src/components/avatar/avatar.test.ts @@ -15,7 +15,7 @@ describe('', () => { }); it('should default to circle styling', () => { - const part = el.shadowRoot!.querySelector('[part="base"]')!; + const part = el.shadowRoot!.querySelector('[part~="base"]')!; expect(el.getAttribute('shape')).to.eq('circle'); expect(part.classList.value.trim()).to.eq('avatar avatar--circle'); }); @@ -40,13 +40,13 @@ describe('', () => { }); it('renders "image" part, with src and a role of presentation', () => { - const part = el.shadowRoot!.querySelector('[part="image"]')!; + const part = el.shadowRoot!.querySelector('[part~="image"]')!; expect(part.getAttribute('src')).to.eq(image); }); it('renders the label attribute in the "base" part', () => { - const part = el.shadowRoot!.querySelector('[part="base"]')!; + const part = el.shadowRoot!.querySelector('[part~="base"]')!; expect(part.getAttribute('aria-label')).to.eq(label); }); @@ -63,7 +63,7 @@ describe('', () => { }); it('renders "initials" part, with initials as the text node', () => { - const part = el.shadowRoot!.querySelector('[part="initials"]')!; + const part = el.shadowRoot!.querySelector('[part~="initials"]')!; expect(part.innerText).to.eq(initials); }); @@ -80,7 +80,7 @@ describe('', () => { }); it('appends the appropriate class on the "base" part', () => { - const part = el.shadowRoot!.querySelector('[part="base"]')!; + const part = el.shadowRoot!.querySelector('[part~="base"]')!; expect(el.getAttribute('shape')).to.eq(shape); expect(part.classList.value.trim()).to.eq(`avatar avatar--${shape}`); diff --git a/src/components/badge/badge.test.ts b/src/components/badge/badge.test.ts index b50a1737..3e6309d8 100644 --- a/src/components/badge/badge.test.ts +++ b/src/components/badge/badge.test.ts @@ -12,7 +12,7 @@ describe('', () => { it('should pass accessibility tests with a role of status on the base part.', async () => { await expect(el).to.be.accessible(); - const part = el.shadowRoot!.querySelector('[part="base"]')!; + const part = el.shadowRoot!.querySelector('[part~="base"]')!; expect(part.getAttribute('role')).to.eq('status'); }); @@ -21,7 +21,7 @@ describe('', () => { }); it('should default to square styling, with the primary color', () => { - const part = el.shadowRoot!.querySelector('[part="base"]')!; + const part = el.shadowRoot!.querySelector('[part~="base"]')!; expect(part.classList.value.trim()).to.eq('badge badge--primary'); }); }); @@ -36,7 +36,7 @@ describe('', () => { }); it('should append the pill class to the classlist to render a pill', () => { - const part = el.shadowRoot!.querySelector('[part="base"]')!; + const part = el.shadowRoot!.querySelector('[part~="base"]')!; expect(part.classList.value.trim()).to.eq('badge badge--primary badge--pill'); }); }); @@ -51,7 +51,7 @@ describe('', () => { }); it('should append the pulse class to the classlist to render a pulse', () => { - const part = el.shadowRoot!.querySelector('[part="base"]')!; + const part = el.shadowRoot!.querySelector('[part~="base"]')!; expect(part.classList.value.trim()).to.eq('badge badge--primary badge--pulse'); }); }); @@ -67,7 +67,7 @@ describe('', () => { }); it('should default to square styling, with the primary color', () => { - const part = el.shadowRoot!.querySelector('[part="base"]')!; + const part = el.shadowRoot!.querySelector('[part~="base"]')!; expect(part.classList.value.trim()).to.eq(`badge badge--${variant}`); }); }); diff --git a/src/components/breadcrumb-item/breadcrumb-item.test.ts b/src/components/breadcrumb-item/breadcrumb-item.test.ts index 1d9e7d36..4f92b12f 100644 --- a/src/components/breadcrumb-item/breadcrumb-item.test.ts +++ b/src/components/breadcrumb-item/breadcrumb-item.test.ts @@ -14,12 +14,12 @@ describe('', () => { }); it('should hide the separator from screen readers', () => { - const separator = el.shadowRoot!.querySelector('[part="separator"]'); + const separator = el.shadowRoot!.querySelector('[part~="separator"]'); expect(separator).attribute('aria-hidden', 'true'); }); it('should render a HTMLButtonElement as the part "label", with a set type "button"', () => { - const button = el.shadowRoot!.querySelector('[part="label"]'); + const button = el.shadowRoot!.querySelector('[part~="label"]'); expect(button).to.exist; expect(button).attribute('type', 'button'); }); @@ -38,7 +38,7 @@ describe('', () => { }); it('should render a HTMLAnchorElement as the part "label", with the supplied href value', () => { - const hyperlink = el.shadowRoot!.querySelector('[part="label"]'); + const hyperlink = el.shadowRoot!.querySelector('[part~="label"]'); expect(hyperlink).attribute('href', 'https://jsonplaceholder.typicode.com/'); }); }); @@ -58,7 +58,7 @@ describe('', () => { let hyperlink: HTMLAnchorElement | null; before(() => { - hyperlink = el.shadowRoot!.querySelector('[part="label"]'); + hyperlink = el.shadowRoot!.querySelector('[part~="label"]'); }); it('should use the supplied href value, as the href attribute value', () => { @@ -124,7 +124,7 @@ describe('', () => { }); it('should append class "breadcrumb-item--has-prefix" to "base" part', () => { - const part = el.shadowRoot!.querySelector('[part="base"]')!; + const part = el.shadowRoot!.querySelector('[part~="base"]')!; expect(part.classList.value.trim()).to.equal('breadcrumb-item breadcrumb-item--has-prefix'); }); }); @@ -151,7 +151,7 @@ describe('', () => { }); it('should append class "breadcrumb-item--has-suffix" to "base" part', () => { - const part = el.shadowRoot!.querySelector('[part="base"]')!; + const part = el.shadowRoot!.querySelector('[part~="base"]')!; expect(part.classList.value.trim()).to.equal('breadcrumb-item breadcrumb-item--has-suffix'); }); }); diff --git a/src/components/button/button.test.ts b/src/components/button/button.test.ts index f03717ed..31daf8fc 100644 --- a/src/components/button/button.test.ts +++ b/src/components/button/button.test.ts @@ -46,7 +46,7 @@ describe('', () => { it('should not have a caret present', async () => { const el = await fixture(html` Button Label `); - expect(el.shadowRoot?.querySelector('[part="caret"]')).not.to.exist; + expect(el.shadowRoot?.querySelector('[part~="caret"]')).not.to.exist; }); }); @@ -98,7 +98,7 @@ describe('', () => { describe('when caret', () => { it('should have a caret present', async () => { const el = await fixture(html` Button Label `); - expect(el.shadowRoot!.querySelector('[part="caret"]')).to.exist; + expect(el.shadowRoot!.querySelector('[part~="caret"]')).to.exist; }); }); diff --git a/src/components/checkbox/checkbox.test.ts b/src/components/checkbox/checkbox.test.ts index 460339b6..f143bff5 100644 --- a/src/components/checkbox/checkbox.test.ts +++ b/src/components/checkbox/checkbox.test.ts @@ -205,14 +205,14 @@ describe('', () => { describe('indeterminate', () => { it('should render indeterminate icon until checked', async () => { const el = await fixture(html``); - let indeterminateIcon = el.shadowRoot!.querySelector('[part="indeterminate-icon"]')!; + let indeterminateIcon = el.shadowRoot!.querySelector('[part~="indeterminate-icon"]')!; expect(indeterminateIcon).not.to.be.null; el.click(); await el.updateComplete; - indeterminateIcon = el.shadowRoot!.querySelector('[part="indeterminate-icon"]')!; + indeterminateIcon = el.shadowRoot!.querySelector('[part~="indeterminate-icon"]')!; expect(indeterminateIcon).to.be.null; }); diff --git a/src/components/color-picker/color-picker.test.ts b/src/components/color-picker/color-picker.test.ts index 1273a58e..e850f7e5 100644 --- a/src/components/color-picker/color-picker.test.ts +++ b/src/components/color-picker/color-picker.test.ts @@ -5,7 +5,7 @@ import type SlColorPicker from './color-picker'; describe('', () => { it('should emit change and show correct color when the value changes', async () => { const el = await fixture(html` `); - const trigger = el.shadowRoot!.querySelector('[part="trigger"]')!; + const trigger = el.shadowRoot!.querySelector('[part~="trigger"]')!; const changeHandler = sinon.spy(); const color = 'rgb(255, 204, 0)'; @@ -41,15 +41,15 @@ describe('', () => { it('should display a color when an initial value is provided', async () => { const el = await fixture(html` `); - const trigger = el.shadowRoot!.querySelector('[part="trigger"]'); + const trigger = el.shadowRoot!.querySelector('[part~="trigger"]'); expect(trigger?.style.color).to.equal('rgb(0, 0, 0)'); }); it('should display a color with opacity when an initial value with opacity is provided', async () => { const el = await fixture(html` `); - const trigger = el.shadowRoot!.querySelector('[part="trigger"]'); - const previewButton = el.shadowRoot!.querySelector('[part="preview"]'); + const trigger = el.shadowRoot!.querySelector('[part~="trigger"]'); + const previewButton = el.shadowRoot!.querySelector('[part~="preview"]'); const previewColor = getComputedStyle(previewButton!).getPropertyValue('--preview-color'); expect(trigger!.style.color).to.equal('rgba(255, 0, 0, 0.314)'); diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index 0da96e6a..73cdf173 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -87,8 +87,8 @@ declare const EyeDropper: EyeDropperConstructor; export default class SlColorPicker extends ShoelaceElement { static styles: CSSResultGroup = styles; - @query('[part="input"]') input: SlInput; - @query('[part="preview"]') previewButton: HTMLButtonElement; + @query('[part~="input"]') input: SlInput; + @query('[part~="preview"]') previewButton: HTMLButtonElement; @query('.color-dropdown') dropdown: SlDropdown; // @ts-expect-error -- Controller is currently unused diff --git a/src/components/dialog/dialog.test.ts b/src/components/dialog/dialog.test.ts index 58d5f82a..11121981 100644 --- a/src/components/dialog/dialog.test.ts +++ b/src/components/dialog/dialog.test.ts @@ -9,7 +9,7 @@ describe('', () => { const el = await fixture(html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.hidden).to.be.false; }); @@ -18,7 +18,7 @@ describe('', () => { const el = await fixture( html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` ); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.hidden).to.be.true; }); @@ -27,7 +27,7 @@ describe('', () => { const el = await fixture(html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; const showHandler = sinon.spy(); const afterShowHandler = sinon.spy(); @@ -47,7 +47,7 @@ describe('', () => { const el = await fixture(html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; const hideHandler = sinon.spy(); const afterHideHandler = sinon.spy(); @@ -67,7 +67,7 @@ describe('', () => { const el = await fixture(html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; const showHandler = sinon.spy(); const afterShowHandler = sinon.spy(); @@ -87,7 +87,7 @@ describe('', () => { const el = await fixture(html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; const hideHandler = sinon.spy(); const afterHideHandler = sinon.spy(); @@ -107,7 +107,7 @@ describe('', () => { const el = await fixture(html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. `); - const overlay = el.shadowRoot!.querySelector('[part="overlay"]')!; + const overlay = el.shadowRoot!.querySelector('[part~="overlay"]')!; el.addEventListener('sl-request-close', event => { event.preventDefault(); diff --git a/src/components/drawer/drawer.test.ts b/src/components/drawer/drawer.test.ts index d285cbc9..065089e0 100644 --- a/src/components/drawer/drawer.test.ts +++ b/src/components/drawer/drawer.test.ts @@ -9,7 +9,7 @@ describe('', () => { const el = await fixture(html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.hidden).to.be.false; }); @@ -18,7 +18,7 @@ describe('', () => { const el = await fixture( html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. ` ); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.hidden).to.be.true; }); @@ -27,7 +27,7 @@ describe('', () => { const el = await fixture(html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; const showHandler = sinon.spy(); const afterShowHandler = sinon.spy(); @@ -47,7 +47,7 @@ describe('', () => { const el = await fixture(html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; const hideHandler = sinon.spy(); const afterHideHandler = sinon.spy(); @@ -67,7 +67,7 @@ describe('', () => { const el = await fixture(html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; const showHandler = sinon.spy(); const afterShowHandler = sinon.spy(); @@ -87,7 +87,7 @@ describe('', () => { const el = await fixture(html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; const hideHandler = sinon.spy(); const afterHideHandler = sinon.spy(); @@ -107,7 +107,7 @@ describe('', () => { const el = await fixture(html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. `); - const overlay = el.shadowRoot!.querySelector('[part="overlay"]')!; + const overlay = el.shadowRoot!.querySelector('[part~="overlay"]')!; el.addEventListener('sl-request-close', event => { event.preventDefault(); diff --git a/src/components/dropdown/dropdown.test.ts b/src/components/dropdown/dropdown.test.ts index ea40ff95..205986b9 100644 --- a/src/components/dropdown/dropdown.test.ts +++ b/src/components/dropdown/dropdown.test.ts @@ -15,7 +15,7 @@ describe('', () => { `); - const panel = el.shadowRoot!.querySelector('[part="panel"]')!; + const panel = el.shadowRoot!.querySelector('[part~="panel"]')!; expect(panel.hidden).to.be.false; }); @@ -31,7 +31,7 @@ describe('', () => { `); - const panel = el.shadowRoot!.querySelector('[part="panel"]')!; + const panel = el.shadowRoot!.querySelector('[part~="panel"]')!; expect(panel.hidden).to.be.true; }); @@ -47,7 +47,7 @@ describe('', () => { `); - const panel = el.shadowRoot!.querySelector('[part="panel"]')!; + const panel = el.shadowRoot!.querySelector('[part~="panel"]')!; const showHandler = sinon.spy(); const afterShowHandler = sinon.spy(); @@ -74,7 +74,7 @@ describe('', () => { `); - const panel = el.shadowRoot!.querySelector('[part="panel"]')!; + const panel = el.shadowRoot!.querySelector('[part~="panel"]')!; const hideHandler = sinon.spy(); const afterHideHandler = sinon.spy(); @@ -101,7 +101,7 @@ describe('', () => { `); - const panel = el.shadowRoot!.querySelector('[part="panel"]')!; + const panel = el.shadowRoot!.querySelector('[part~="panel"]')!; const showHandler = sinon.spy(); const afterShowHandler = sinon.spy(); @@ -128,7 +128,7 @@ describe('', () => { `); - const panel = el.shadowRoot!.querySelector('[part="panel"]')!; + const panel = el.shadowRoot!.querySelector('[part~="panel"]')!; const hideHandler = sinon.spy(); const afterHideHandler = sinon.spy(); diff --git a/src/components/image-comparer/image-comparer.test.ts b/src/components/image-comparer/image-comparer.test.ts index bfa296e9..e161f89a 100644 --- a/src/components/image-comparer/image-comparer.test.ts +++ b/src/components/image-comparer/image-comparer.test.ts @@ -11,9 +11,9 @@ describe('', () => { `); - const afterPart = el.shadowRoot!.querySelector('[part="after"]')!; + const afterPart = el.shadowRoot!.querySelector('[part~="after"]')!; const iconContainer = el.shadowRoot!.querySelector('slot[name="handle-icon"]')!; - const handle = el.shadowRoot!.querySelector('[part="handle"]')!; + const handle = el.shadowRoot!.querySelector('[part~="handle"]')!; expect(el.position).to.equal(50); expect(afterPart.getAttribute('style')).to.equal('clip-path:inset(0 50% 0 0);'); @@ -49,7 +49,7 @@ describe('', () => { `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; base.dispatchEvent( new KeyboardEvent('keydown', { @@ -69,7 +69,7 @@ describe('', () => { `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; base.dispatchEvent( new KeyboardEvent('keydown', { @@ -89,7 +89,7 @@ describe('', () => { `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; base.dispatchEvent( new KeyboardEvent('keydown', { @@ -109,7 +109,7 @@ describe('', () => { `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; base.dispatchEvent( new KeyboardEvent('keydown', { @@ -132,7 +132,7 @@ describe('', () => { el.position = 0; await el.updateComplete; - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; base.dispatchEvent( new KeyboardEvent('keydown', { @@ -155,7 +155,7 @@ describe('', () => { el.position = 100; await el.updateComplete; - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; base.dispatchEvent( new KeyboardEvent('keydown', { @@ -175,7 +175,7 @@ describe('', () => { `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; base.dispatchEvent( new KeyboardEvent('keydown', { @@ -196,7 +196,7 @@ describe('', () => { `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; base.dispatchEvent( new KeyboardEvent('keydown', { @@ -227,8 +227,8 @@ describe('', () => {
`); - const handle = el.shadowRoot!.querySelector('[part="handle"]')!; - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const handle = el.shadowRoot!.querySelector('[part~="handle"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; const rect = base.getBoundingClientRect(); const offsetX = rect.left + window.pageXOffset; const offsetY = rect.top + window.pageYOffset; diff --git a/src/components/input/input.test.ts b/src/components/input/input.test.ts index 79db3efc..ce59b74c 100644 --- a/src/components/input/input.test.ts +++ b/src/components/input/input.test.ts @@ -12,7 +12,7 @@ describe('', () => { it('should be disabled with the disabled attribute', async () => { const el = await fixture(html` `); - const input = el.shadowRoot!.querySelector('[part="input"]')!; + const input = el.shadowRoot!.querySelector('[part~="input"]')!; expect(input.disabled).to.be.true; }); @@ -39,7 +39,7 @@ describe('', () => { it('should focus the input when clicking on the label', async () => { const el = await fixture(html` `); - const label = el.shadowRoot!.querySelector('[part="form-control-label"]')!; + const label = el.shadowRoot!.querySelector('[part~="form-control-label"]')!; const submitHandler = sinon.spy(); el.addEventListener('sl-focus', submitHandler); diff --git a/src/components/progress-bar/progress-bar.test.ts b/src/components/progress-bar/progress-bar.test.ts index 9344664e..36123121 100644 --- a/src/components/progress-bar/progress-bar.test.ts +++ b/src/components/progress-bar/progress-bar.test.ts @@ -22,8 +22,8 @@ describe('', () => { el = await fixture( html`` ); - base = el.shadowRoot!.querySelector('[part="base"]')!; - indicator = el.shadowRoot!.querySelector('[part="indicator"]')!; + base = el.shadowRoot!.querySelector('[part~="base"]')!; + indicator = el.shadowRoot!.querySelector('[part~="indicator"]')!; }); it('should pass accessibility tests', async () => { @@ -46,7 +46,7 @@ describe('', () => { el = await fixture( html`` ); - base = el.shadowRoot!.querySelector('[part="base"]')!; + base = el.shadowRoot!.querySelector('[part~="base"]')!; }); it('should pass accessibility tests', async () => { diff --git a/src/components/progress-ring/progress-ring.test.ts b/src/components/progress-ring/progress-ring.test.ts index 068cec85..9a6d6cff 100644 --- a/src/components/progress-ring/progress-ring.test.ts +++ b/src/components/progress-ring/progress-ring.test.ts @@ -21,7 +21,7 @@ describe('', () => { el = await fixture( html`` ); - base = el.shadowRoot!.querySelector('[part="base"]')!; + base = el.shadowRoot!.querySelector('[part~="base"]')!; }); it('should pass accessibility tests', async () => { diff --git a/src/components/range/range.test.ts b/src/components/range/range.test.ts index b61d22d9..02a4cd9b 100644 --- a/src/components/range/range.test.ts +++ b/src/components/range/range.test.ts @@ -10,7 +10,7 @@ describe('', () => { it('should be disabled with the disabled attribute', async () => { const el = await fixture(html` `); - const input = el.shadowRoot!.querySelector('[part="input"]')!; + const input = el.shadowRoot!.querySelector('[part~="input"]')!; expect(input.disabled).to.be.true; }); diff --git a/src/components/rating/rating.test.ts b/src/components/rating/rating.test.ts index aab3b92e..abdc0af4 100644 --- a/src/components/rating/rating.test.ts +++ b/src/components/rating/rating.test.ts @@ -6,7 +6,7 @@ describe('', () => { const el = await fixture(html` `); await expect(el).to.be.accessible(); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.getAttribute('role')).to.equal('slider'); expect(base.getAttribute('aria-disabled')).to.equal('false'); @@ -20,7 +20,7 @@ describe('', () => { it('should be readonly with the readonly attribute', async () => { const el = await fixture(html` `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.getAttribute('aria-readonly')).to.equal('true'); expect(base.getAttribute('class')).to.equal(' rating rating--readonly '); @@ -28,7 +28,7 @@ describe('', () => { it('should be disabled with the disabled attribute', async () => { const el = await fixture(html` `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.getAttribute('aria-disabled')).to.equal('true'); expect(base.getAttribute('class')).to.equal(' rating rating--disabled '); @@ -36,14 +36,14 @@ describe('', () => { it('should set max value by attribute', async () => { const el = await fixture(html` `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.getAttribute('aria-valuemax')).to.equal('12'); }); it('should set selected value by attribute', async () => { const el = await fixture(html` `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.getAttribute('aria-valuenow')).to.equal('3'); }); @@ -52,7 +52,7 @@ describe('', () => { it('should focus inner div', async () => { const el = await fixture(html` `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; el.focus(); await el.updateComplete; diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts index f6b903ce..778d7abe 100644 --- a/src/components/select/select.test.ts +++ b/src/components/select/select.test.ts @@ -35,7 +35,7 @@ describe('', () => { Option 3 `); - const label = el.shadowRoot!.querySelector('[part="form-control-label"]')!; + const label = el.shadowRoot!.querySelector('[part~="form-control-label"]')!; const submitHandler = sinon.spy(); el.addEventListener('sl-focus', submitHandler); @@ -119,7 +119,7 @@ describe('', () => { Option 3 `); - const displayLabel = el.shadowRoot!.querySelector('[part="display-label"]')!; + const displayLabel = el.shadowRoot!.querySelector('[part~="display-label"]')!; const menuItem = el.querySelector('sl-menu-item')!; expect(displayLabel.textContent?.trim()).to.equal('Option 1'); diff --git a/src/components/skeleton/skeleton.test.ts b/src/components/skeleton/skeleton.test.ts index 2f33ef3e..a63b0f49 100644 --- a/src/components/skeleton/skeleton.test.ts +++ b/src/components/skeleton/skeleton.test.ts @@ -7,8 +7,8 @@ describe('', () => { await expect(el).to.be.accessible(); - const base = el.shadowRoot!.querySelector('[part="base"]')!; - const indicator = el.shadowRoot!.querySelector('[part="indicator"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; + const indicator = el.shadowRoot!.querySelector('[part~="indicator"]')!; expect(base.getAttribute('class')).to.equal(' skeleton '); expect(base.getAttribute('aria-busy')).to.equal('true'); @@ -19,7 +19,7 @@ describe('', () => { it('should set pulse effect by attribute', async () => { const el = await fixture(html` `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.getAttribute('class')).to.equal(' skeleton skeleton--pulse '); }); @@ -27,7 +27,7 @@ describe('', () => { it('should set sheen effect by attribute', async () => { const el = await fixture(html` `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.getAttribute('class')).to.equal(' skeleton skeleton--sheen '); }); diff --git a/src/components/spinner/spinner.test.ts b/src/components/spinner/spinner.test.ts index 49604d61..9deed676 100644 --- a/src/components/spinner/spinner.test.ts +++ b/src/components/spinner/spinner.test.ts @@ -15,7 +15,7 @@ describe('', () => { it('should have a role of "status".', () => { // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base).have.attribute('role', 'progressbar'); }); }); diff --git a/src/components/tab/tab.test.ts b/src/components/tab/tab.test.ts index 608ed01e..479de2df 100644 --- a/src/components/tab/tab.test.ts +++ b/src/components/tab/tab.test.ts @@ -15,7 +15,7 @@ describe('', () => { it('should render default tab', async () => { const el = await fixture(html` Test `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(el.getAttribute('role')).to.equal('tab'); expect(el.getAttribute('aria-disabled')).to.equal('false'); @@ -30,7 +30,7 @@ describe('', () => { it('should disable tab by attribute', async () => { const el = await fixture(html` Test `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(el.disabled).to.equal(true); expect(el.getAttribute('aria-disabled')).to.equal('true'); @@ -41,7 +41,7 @@ describe('', () => { it('should set active tab by attribute', async () => { const el = await fixture(html` Test `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(el.active).to.equal(true); expect(el.getAttribute('aria-selected')).to.equal('true'); @@ -52,8 +52,8 @@ describe('', () => { it('should set closable by attribute', async () => { const el = await fixture(html` Test `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; - const closeButton = el.shadowRoot!.querySelector('[part="close-button"]'); + const base = el.shadowRoot!.querySelector('[part~="base"]')!; + const closeButton = el.shadowRoot!.querySelector('[part~="close-button"]'); expect(el.closable).to.equal(true); expect(base.getAttribute('class')).to.equal(' tab tab--closable '); @@ -64,7 +64,7 @@ describe('', () => { it('should focus inner div', async () => { const el = await fixture(html` Test `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; el.focus(); await el.updateComplete; @@ -91,7 +91,7 @@ describe('', () => { it('should emit close event when close button clicked', async () => { const el = await fixture(html` Test `); - const closeButton = el.shadowRoot!.querySelector('[part="close-button"]')!; + const closeButton = el.shadowRoot!.querySelector('[part~="close-button"]')!; const spy = sinon.spy(); el.addEventListener('sl-close', spy, { once: true }); diff --git a/src/components/tag/tag.test.ts b/src/components/tag/tag.test.ts index 67bb6df2..b8635773 100644 --- a/src/components/tag/tag.test.ts +++ b/src/components/tag/tag.test.ts @@ -6,7 +6,7 @@ describe('', () => { it('should render default tag', async () => { const el = await fixture(html` Test `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(el.getAttribute('size')).to.equal('medium'); expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--medium '); @@ -15,7 +15,7 @@ describe('', () => { it('should set variant by attribute', async () => { const el = await fixture(html` Test `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.getAttribute('class')).to.equal(' tag tag--danger tag--medium '); }); @@ -23,7 +23,7 @@ describe('', () => { it('should set size by attribute', async () => { const el = await fixture(html` Test `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--large '); }); @@ -31,7 +31,7 @@ describe('', () => { it('should set pill-attribute by attribute', async () => { const el = await fixture(html` Test `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; + const base = el.shadowRoot!.querySelector('[part~="base"]')!; expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--medium tag--pill '); }); @@ -39,8 +39,8 @@ describe('', () => { it('should set removable by attribute', async () => { const el = await fixture(html` Test `); - const base = el.shadowRoot!.querySelector('[part="base"]')!; - const removeButton = el.shadowRoot!.querySelector('[part="remove-button"]'); + const base = el.shadowRoot!.querySelector('[part~="base"]')!; + const removeButton = el.shadowRoot!.querySelector('[part~="remove-button"]'); expect(el.removable).to.equal(true); expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--medium tag--removable '); @@ -51,7 +51,7 @@ describe('', () => { it('should emit remove event when remove button clicked', async () => { const el = await fixture(html` Test `); - const removeButton = el.shadowRoot!.querySelector('[part="remove-button"]')!; + const removeButton = el.shadowRoot!.querySelector('[part~="remove-button"]')!; const spy = sinon.spy(); el.addEventListener('sl-remove', spy, { once: true }); diff --git a/src/components/textarea/textarea.test.ts b/src/components/textarea/textarea.test.ts index 2ef53e35..ec44ff14 100644 --- a/src/components/textarea/textarea.test.ts +++ b/src/components/textarea/textarea.test.ts @@ -11,14 +11,14 @@ describe('', () => { it('should be disabled with the disabled attribute', async () => { const el = await fixture(html` `); - const textarea = el.shadowRoot!.querySelector('[part="textarea"]')!; + const textarea = el.shadowRoot!.querySelector('[part~="textarea"]')!; expect(textarea.disabled).to.be.true; }); it('should focus the textarea when clicking on the label', async () => { const el = await fixture(html` `); - const label = el.shadowRoot!.querySelector('[part="form-control-label"]')!; + const label = el.shadowRoot!.querySelector('[part~="form-control-label"]')!; const submitHandler = sinon.spy(); el.addEventListener('sl-focus', submitHandler); diff --git a/src/components/tooltip/tooltip.test.ts b/src/components/tooltip/tooltip.test.ts index decfc770..a2b97296 100644 --- a/src/components/tooltip/tooltip.test.ts +++ b/src/components/tooltip/tooltip.test.ts @@ -10,7 +10,7 @@ describe('', () => { Hover Me `); - const body = el.shadowRoot!.querySelector('[part="body"]')!; + const body = el.shadowRoot!.querySelector('[part~="body"]')!; expect(body.hidden).to.be.false; }); @@ -21,7 +21,7 @@ describe('', () => { Hover Me `); - const body = el.shadowRoot!.querySelector('[part="body"]')!; + const body = el.shadowRoot!.querySelector('[part~="body"]')!; expect(body.hidden).to.be.true; }); @@ -32,7 +32,7 @@ describe('', () => { Hover Me `); - const body = el.shadowRoot!.querySelector('[part="body"]')!; + const body = el.shadowRoot!.querySelector('[part~="body"]')!; const showHandler = sinon.spy(); const afterShowHandler = sinon.spy(); @@ -54,7 +54,7 @@ describe('', () => { Hover Me `); - const body = el.shadowRoot!.querySelector('[part="body"]')!; + const body = el.shadowRoot!.querySelector('[part~="body"]')!; const hideHandler = sinon.spy(); const afterHideHandler = sinon.spy(); @@ -76,7 +76,7 @@ describe('', () => { Hover Me `); - const body = el.shadowRoot!.querySelector('[part="body"]')!; + const body = el.shadowRoot!.querySelector('[part~="body"]')!; const showHandler = sinon.spy(); const afterShowHandler = sinon.spy(); @@ -98,7 +98,7 @@ describe('', () => { Hover Me `); - const body = el.shadowRoot!.querySelector('[part="body"]')!; + const body = el.shadowRoot!.querySelector('[part~="body"]')!; const hideHandler = sinon.spy(); const afterHideHandler = sinon.spy(); @@ -120,7 +120,7 @@ describe('', () => { Hover Me `); - const body = el.shadowRoot!.querySelector('[part="body"]')!; + const body = el.shadowRoot!.querySelector('[part~="body"]')!; const hideHandler = sinon.spy(); const afterHideHandler = sinon.spy(); @@ -142,7 +142,7 @@ describe('', () => { Hover Me `); - const body = el.shadowRoot!.querySelector('[part="body"]')!; + const body = el.shadowRoot!.querySelector('[part~="body"]')!; await el.updateComplete; expect(body.hidden).to.be.false;