mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

bulletproof part selectors

pull/1017/head
Cory LaViska 2022-11-17 09:35:44 -05:00
rodzic 23414fe411
commit a3f658938d
25 zmienionych plików z 109 dodań i 109 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

12
src/components/alert/alert.test.ts
Wyświetl plik

@ -5,21 +5,21 @@ import type SlAlert from './alert';
describe('<sl-alert>', () => {
it('should be visible with the open attribute', async () => {
const el = await fixture<SlAlert>(html` <sl-alert open>I am an alert</sl-alert> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.hidden).to.be.false;
});
it('should not be visible without the open attribute', async () => {
const el = await fixture<SlAlert>(html` <sl-alert>I am an alert</sl-alert> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[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<SlAlert>(html` <sl-alert>I am an alert</sl-alert> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
@ -37,7 +37,7 @@ describe('<sl-alert>', () => {
it('should emit sl-hide and sl-after-hide when calling hide()', async () => {
const el = await fixture<SlAlert>(html` <sl-alert open>I am an alert</sl-alert> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
@ -55,7 +55,7 @@ describe('<sl-alert>', () => {
it('should emit sl-show and sl-after-show when setting open = true', async () => {
const el = await fixture<SlAlert>(html` <sl-alert>I am an alert</sl-alert> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
@ -73,7 +73,7 @@ describe('<sl-alert>', () => {
it('should emit sl-hide and sl-after-hide when setting open = false', async () => {
const el = await fixture<SlAlert>(html` <sl-alert open>I am an alert</sl-alert> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();

2
src/components/alert/alert.ts
Wyświetl plik

@ -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;

10
src/components/avatar/avatar.test.ts
Wyświetl plik

@ -15,7 +15,7 @@ describe('<sl-avatar>', () => {
});
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('<sl-avatar>', () => {
});
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('<sl-avatar>', () => {
});
it('renders "initials" part, with initials as the text node', () => {
const part = el.shadowRoot!.querySelector<HTMLElement>('[part="initials"]')!;
const part = el.shadowRoot!.querySelector<HTMLElement>('[part~="initials"]')!;
expect(part.innerText).to.eq(initials);
});
@ -80,7 +80,7 @@ describe('<sl-avatar>', () => {
});
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}`);

10
src/components/badge/badge.test.ts
Wyświetl plik

@ -12,7 +12,7 @@ describe('<sl-badge>', () => {
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('<sl-badge>', () => {
});
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('<sl-badge>', () => {
});
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('<sl-badge>', () => {
});
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('<sl-badge>', () => {
});
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}`);
});
});

12
src/components/breadcrumb-item/breadcrumb-item.test.ts
Wyświetl plik

@ -14,12 +14,12 @@ describe('<sl-breadcrumb-item>', () => {
});
it('should hide the separator from screen readers', () => {
const separator = el.shadowRoot!.querySelector<HTMLSpanElement>('[part="separator"]');
const separator = el.shadowRoot!.querySelector<HTMLSpanElement>('[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<HTMLButtonElement>('[part="label"]');
const button = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="label"]');
expect(button).to.exist;
expect(button).attribute('type', 'button');
});
@ -38,7 +38,7 @@ describe('<sl-breadcrumb-item>', () => {
});
it('should render a HTMLAnchorElement as the part "label", with the supplied href value', () => {
const hyperlink = el.shadowRoot!.querySelector<HTMLAnchorElement>('[part="label"]');
const hyperlink = el.shadowRoot!.querySelector<HTMLAnchorElement>('[part~="label"]');
expect(hyperlink).attribute('href', 'https://jsonplaceholder.typicode.com/');
});
});
@ -58,7 +58,7 @@ describe('<sl-breadcrumb-item>', () => {
let hyperlink: HTMLAnchorElement | null;
before(() => {
hyperlink = el.shadowRoot!.querySelector<HTMLAnchorElement>('[part="label"]');
hyperlink = el.shadowRoot!.querySelector<HTMLAnchorElement>('[part~="label"]');
});
it('should use the supplied href value, as the href attribute value', () => {
@ -124,7 +124,7 @@ describe('<sl-breadcrumb-item>', () => {
});
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('<sl-breadcrumb-item>', () => {
});
it('should append class "breadcrumb-item--has-suffix" to "base" part', () => {
const part = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const part = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(part.classList.value.trim()).to.equal('breadcrumb-item breadcrumb-item--has-suffix');
});
});

4
src/components/button/button.test.ts
Wyświetl plik

@ -46,7 +46,7 @@ describe('<sl-button>', () => {
it('should not have a caret present', async () => {
const el = await fixture<SlButton>(html` <sl-button>Button Label</sl-button> `);
expect(el.shadowRoot?.querySelector('[part="caret"]')).not.to.exist;
expect(el.shadowRoot?.querySelector('[part~="caret"]')).not.to.exist;
});
});
@ -98,7 +98,7 @@ describe('<sl-button>', () => {
describe('when caret', () => {
it('should have a caret present', async () => {
const el = await fixture<SlButton>(html` <sl-button caret>Button Label</sl-button> `);
expect(el.shadowRoot!.querySelector('[part="caret"]')).to.exist;
expect(el.shadowRoot!.querySelector('[part~="caret"]')).to.exist;
});
});

4
src/components/checkbox/checkbox.test.ts
Wyświetl plik

@ -205,14 +205,14 @@ describe('<sl-checkbox>', () => {
describe('indeterminate', () => {
it('should render indeterminate icon until checked', async () => {
const el = await fixture<SlCheckbox>(html`<sl-checkbox indeterminate></sl-checkbox>`);
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;
});

8
src/components/color-picker/color-picker.test.ts
Wyświetl plik

@ -5,7 +5,7 @@ import type SlColorPicker from './color-picker';
describe('<sl-color-picker>', () => {
it('should emit change and show correct color when the value changes', async () => {
const el = await fixture<SlColorPicker>(html` <sl-color-picker></sl-color-picker> `);
const trigger = el.shadowRoot!.querySelector<HTMLElement>('[part="trigger"]')!;
const trigger = el.shadowRoot!.querySelector<HTMLElement>('[part~="trigger"]')!;
const changeHandler = sinon.spy();
const color = 'rgb(255, 204, 0)';
@ -41,15 +41,15 @@ describe('<sl-color-picker>', () => {
it('should display a color when an initial value is provided', async () => {
const el = await fixture<SlColorPicker>(html` <sl-color-picker value="#000"></sl-color-picker> `);
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part="trigger"]');
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[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<SlColorPicker>(html` <sl-color-picker opacity value="#ff000050"></sl-color-picker> `);
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part="trigger"]');
const previewButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part="preview"]');
const trigger = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="trigger"]');
const previewButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="preview"]');
const previewColor = getComputedStyle(previewButton!).getPropertyValue('--preview-color');
expect(trigger!.style.color).to.equal('rgba(255, 0, 0, 0.314)');

4
src/components/color-picker/color-picker.ts
Wyświetl plik

@ -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

14
src/components/dialog/dialog.test.ts
Wyświetl plik

@ -9,7 +9,7 @@ describe('<sl-dialog>', () => {
const el = await fixture<SlDialog>(html`
<sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.hidden).to.be.false;
});
@ -18,7 +18,7 @@ describe('<sl-dialog>', () => {
const el = await fixture<SlDialog>(
html` <sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog> `
);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.hidden).to.be.true;
});
@ -27,7 +27,7 @@ describe('<sl-dialog>', () => {
const el = await fixture<SlDialog>(html`
<sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
@ -47,7 +47,7 @@ describe('<sl-dialog>', () => {
const el = await fixture<SlDialog>(html`
<sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
@ -67,7 +67,7 @@ describe('<sl-dialog>', () => {
const el = await fixture<SlDialog>(html`
<sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
@ -87,7 +87,7 @@ describe('<sl-dialog>', () => {
const el = await fixture<SlDialog>(html`
<sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
@ -107,7 +107,7 @@ describe('<sl-dialog>', () => {
const el = await fixture<SlDialog>(html`
<sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
`);
const overlay = el.shadowRoot!.querySelector<HTMLElement>('[part="overlay"]')!;
const overlay = el.shadowRoot!.querySelector<HTMLElement>('[part~="overlay"]')!;
el.addEventListener('sl-request-close', event => {
event.preventDefault();

14
src/components/drawer/drawer.test.ts
Wyświetl plik

@ -9,7 +9,7 @@ describe('<sl-drawer>', () => {
const el = await fixture<SlDrawer>(html`
<sl-drawer open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.hidden).to.be.false;
});
@ -18,7 +18,7 @@ describe('<sl-drawer>', () => {
const el = await fixture<SlDrawer>(
html` <sl-drawer>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer> `
);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.hidden).to.be.true;
});
@ -27,7 +27,7 @@ describe('<sl-drawer>', () => {
const el = await fixture<SlDrawer>(html`
<sl-drawer>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
@ -47,7 +47,7 @@ describe('<sl-drawer>', () => {
const el = await fixture<SlDrawer>(html`
<sl-drawer open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
@ -67,7 +67,7 @@ describe('<sl-drawer>', () => {
const el = await fixture<SlDrawer>(html`
<sl-drawer>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
@ -87,7 +87,7 @@ describe('<sl-drawer>', () => {
const el = await fixture<SlDrawer>(html`
<sl-drawer open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
@ -107,7 +107,7 @@ describe('<sl-drawer>', () => {
const el = await fixture<SlDrawer>(html`
<sl-drawer open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-drawer>
`);
const overlay = el.shadowRoot!.querySelector<HTMLElement>('[part="overlay"]')!;
const overlay = el.shadowRoot!.querySelector<HTMLElement>('[part~="overlay"]')!;
el.addEventListener('sl-request-close', event => {
event.preventDefault();

12
src/components/dropdown/dropdown.test.ts
Wyświetl plik

@ -15,7 +15,7 @@ describe('<sl-dropdown>', () => {
</sl-menu>
</sl-dropdown>
`);
const panel = el.shadowRoot!.querySelector<HTMLElement>('[part="panel"]')!;
const panel = el.shadowRoot!.querySelector<HTMLElement>('[part~="panel"]')!;
expect(panel.hidden).to.be.false;
});
@ -31,7 +31,7 @@ describe('<sl-dropdown>', () => {
</sl-menu>
</sl-dropdown>
`);
const panel = el.shadowRoot!.querySelector<HTMLElement>('[part="panel"]')!;
const panel = el.shadowRoot!.querySelector<HTMLElement>('[part~="panel"]')!;
expect(panel.hidden).to.be.true;
});
@ -47,7 +47,7 @@ describe('<sl-dropdown>', () => {
</sl-menu>
</sl-dropdown>
`);
const panel = el.shadowRoot!.querySelector<HTMLElement>('[part="panel"]')!;
const panel = el.shadowRoot!.querySelector<HTMLElement>('[part~="panel"]')!;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
@ -74,7 +74,7 @@ describe('<sl-dropdown>', () => {
</sl-menu>
</sl-dropdown>
`);
const panel = el.shadowRoot!.querySelector<HTMLElement>('[part="panel"]')!;
const panel = el.shadowRoot!.querySelector<HTMLElement>('[part~="panel"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
@ -101,7 +101,7 @@ describe('<sl-dropdown>', () => {
</sl-menu>
</sl-dropdown>
`);
const panel = el.shadowRoot!.querySelector<HTMLElement>('[part="panel"]')!;
const panel = el.shadowRoot!.querySelector<HTMLElement>('[part~="panel"]')!;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
@ -128,7 +128,7 @@ describe('<sl-dropdown>', () => {
</sl-menu>
</sl-dropdown>
`);
const panel = el.shadowRoot!.querySelector<HTMLElement>('[part="panel"]')!;
const panel = el.shadowRoot!.querySelector<HTMLElement>('[part~="panel"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();

24
src/components/image-comparer/image-comparer.test.ts
Wyświetl plik

@ -11,9 +11,9 @@ describe('<sl-image-comparer>', () => {
</sl-image-comparer>
`);
const afterPart = el.shadowRoot!.querySelector<HTMLElement>('[part="after"]')!;
const afterPart = el.shadowRoot!.querySelector<HTMLElement>('[part~="after"]')!;
const iconContainer = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name="handle-icon"]')!;
const handle = el.shadowRoot!.querySelector<HTMLElement>('[part="handle"]')!;
const handle = el.shadowRoot!.querySelector<HTMLElement>('[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('<sl-image-comparer>', () => {
</sl-image-comparer>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
base.dispatchEvent(
new KeyboardEvent('keydown', {
@ -69,7 +69,7 @@ describe('<sl-image-comparer>', () => {
</sl-image-comparer>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
base.dispatchEvent(
new KeyboardEvent('keydown', {
@ -89,7 +89,7 @@ describe('<sl-image-comparer>', () => {
</sl-image-comparer>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
base.dispatchEvent(
new KeyboardEvent('keydown', {
@ -109,7 +109,7 @@ describe('<sl-image-comparer>', () => {
</sl-image-comparer>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
base.dispatchEvent(
new KeyboardEvent('keydown', {
@ -132,7 +132,7 @@ describe('<sl-image-comparer>', () => {
el.position = 0;
await el.updateComplete;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
base.dispatchEvent(
new KeyboardEvent('keydown', {
@ -155,7 +155,7 @@ describe('<sl-image-comparer>', () => {
el.position = 100;
await el.updateComplete;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
base.dispatchEvent(
new KeyboardEvent('keydown', {
@ -175,7 +175,7 @@ describe('<sl-image-comparer>', () => {
</sl-image-comparer>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
base.dispatchEvent(
new KeyboardEvent('keydown', {
@ -196,7 +196,7 @@ describe('<sl-image-comparer>', () => {
</sl-image-comparer>
`);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
base.dispatchEvent(
new KeyboardEvent('keydown', {
@ -227,8 +227,8 @@ describe('<sl-image-comparer>', () => {
<div slot="after" style="width: 50px"></div>
</sl-image-comparer>
`);
const handle = el.shadowRoot!.querySelector<HTMLElement>('[part="handle"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const handle = el.shadowRoot!.querySelector<HTMLElement>('[part~="handle"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
const rect = base.getBoundingClientRect();
const offsetX = rect.left + window.pageXOffset;
const offsetY = rect.top + window.pageYOffset;

4
src/components/input/input.test.ts
Wyświetl plik

@ -12,7 +12,7 @@ describe('<sl-input>', () => {
it('should be disabled with the disabled attribute', async () => {
const el = await fixture<SlInput>(html` <sl-input disabled></sl-input> `);
const input = el.shadowRoot!.querySelector<HTMLInputElement>('[part="input"]')!;
const input = el.shadowRoot!.querySelector<HTMLInputElement>('[part~="input"]')!;
expect(input.disabled).to.be.true;
});
@ -39,7 +39,7 @@ describe('<sl-input>', () => {
it('should focus the input when clicking on the label', async () => {
const el = await fixture<SlInput>(html` <sl-input label="Name"></sl-input> `);
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);

6
src/components/progress-bar/progress-bar.test.ts
Wyświetl plik

@ -22,8 +22,8 @@ describe('<sl-progress-bar>', () => {
el = await fixture<SlProgressBar>(
html`<sl-progress-bar title="Titled Progress Ring" value="25"></sl-progress-bar>`
);
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('<sl-progress-bar>', () => {
el = await fixture<SlProgressBar>(
html`<sl-progress-bar title="Titled Progress Ring" indeterminate></sl-progress-bar>`
);
base = el.shadowRoot!.querySelector('[part="base"]')!;
base = el.shadowRoot!.querySelector('[part~="base"]')!;
});
it('should pass accessibility tests', async () => {

2
src/components/progress-ring/progress-ring.test.ts
Wyświetl plik

@ -21,7 +21,7 @@ describe('<sl-progress-ring>', () => {
el = await fixture<SlProgressRing>(
html`<sl-progress-ring title="Titled Progress Ring" value="25"></sl-progress-ring>`
);
base = el.shadowRoot!.querySelector('[part="base"]')!;
base = el.shadowRoot!.querySelector('[part~="base"]')!;
});
it('should pass accessibility tests', async () => {

2
src/components/range/range.test.ts
Wyświetl plik

@ -10,7 +10,7 @@ describe('<sl-range>', () => {
it('should be disabled with the disabled attribute', async () => {
const el = await fixture<SlRange>(html` <sl-range disabled></sl-range> `);
const input = el.shadowRoot!.querySelector<HTMLInputElement>('[part="input"]')!;
const input = el.shadowRoot!.querySelector<HTMLInputElement>('[part~="input"]')!;
expect(input.disabled).to.be.true;
});

12
src/components/rating/rating.test.ts
Wyświetl plik

@ -6,7 +6,7 @@ describe('<sl-rating>', () => {
const el = await fixture<SlRating>(html` <sl-rating label="Test"></sl-rating> `);
await expect(el).to.be.accessible();
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.getAttribute('role')).to.equal('slider');
expect(base.getAttribute('aria-disabled')).to.equal('false');
@ -20,7 +20,7 @@ describe('<sl-rating>', () => {
it('should be readonly with the readonly attribute', async () => {
const el = await fixture<SlRating>(html` <sl-rating label="Test" readonly></sl-rating> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.getAttribute('aria-readonly')).to.equal('true');
expect(base.getAttribute('class')).to.equal(' rating rating--readonly ');
@ -28,7 +28,7 @@ describe('<sl-rating>', () => {
it('should be disabled with the disabled attribute', async () => {
const el = await fixture<SlRating>(html` <sl-rating label="Test" disabled></sl-rating> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.getAttribute('aria-disabled')).to.equal('true');
expect(base.getAttribute('class')).to.equal(' rating rating--disabled ');
@ -36,14 +36,14 @@ describe('<sl-rating>', () => {
it('should set max value by attribute', async () => {
const el = await fixture<SlRating>(html` <sl-rating label="Test" max="12"></sl-rating> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.getAttribute('aria-valuemax')).to.equal('12');
});
it('should set selected value by attribute', async () => {
const el = await fixture<SlRating>(html` <sl-rating label="Test" value="3"></sl-rating> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.getAttribute('aria-valuenow')).to.equal('3');
});
@ -52,7 +52,7 @@ describe('<sl-rating>', () => {
it('should focus inner div', async () => {
const el = await fixture<SlRating>(html` <sl-rating label="Test"></sl-rating> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
el.focus();
await el.updateComplete;

4
src/components/select/select.test.ts
Wyświetl plik

@ -35,7 +35,7 @@ describe('<sl-select>', () => {
<sl-menu-item value="option-3">Option 3</sl-menu-item>
</sl-select>
`);
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('<sl-select>', () => {
<sl-menu-item value="option-3">Option 3</sl-menu-item>
</sl-select>
`);
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');

8
src/components/skeleton/skeleton.test.ts
Wyświetl plik

@ -7,8 +7,8 @@ describe('<sl-skeleton>', () => {
await expect(el).to.be.accessible();
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const indicator = el.shadowRoot!.querySelector<HTMLElement>('[part="indicator"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
const indicator = el.shadowRoot!.querySelector<HTMLElement>('[part~="indicator"]')!;
expect(base.getAttribute('class')).to.equal(' skeleton ');
expect(base.getAttribute('aria-busy')).to.equal('true');
@ -19,7 +19,7 @@ describe('<sl-skeleton>', () => {
it('should set pulse effect by attribute', async () => {
const el = await fixture<SlSkeleton>(html` <sl-skeleton effect="pulse"></sl-skeleton> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.getAttribute('class')).to.equal(' skeleton skeleton--pulse ');
});
@ -27,7 +27,7 @@ describe('<sl-skeleton>', () => {
it('should set sheen effect by attribute', async () => {
const el = await fixture<SlSkeleton>(html` <sl-skeleton effect="sheen"></sl-skeleton> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.getAttribute('class')).to.equal(' skeleton skeleton--sheen ');
});

2
src/components/spinner/spinner.test.ts
Wyświetl plik

@ -15,7 +15,7 @@ describe('<sl-spinner>', () => {
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');
});
});

14
src/components/tab/tab.test.ts
Wyświetl plik

@ -15,7 +15,7 @@ describe('<sl-tab>', () => {
it('should render default tab', async () => {
const el = await fixture<SlTab>(html` <sl-tab>Test</sl-tab> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(el.getAttribute('role')).to.equal('tab');
expect(el.getAttribute('aria-disabled')).to.equal('false');
@ -30,7 +30,7 @@ describe('<sl-tab>', () => {
it('should disable tab by attribute', async () => {
const el = await fixture<SlTab>(html` <sl-tab disabled>Test</sl-tab> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(el.disabled).to.equal(true);
expect(el.getAttribute('aria-disabled')).to.equal('true');
@ -41,7 +41,7 @@ describe('<sl-tab>', () => {
it('should set active tab by attribute', async () => {
const el = await fixture<SlTab>(html` <sl-tab active>Test</sl-tab> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(el.active).to.equal(true);
expect(el.getAttribute('aria-selected')).to.equal('true');
@ -52,8 +52,8 @@ describe('<sl-tab>', () => {
it('should set closable by attribute', async () => {
const el = await fixture<SlTab>(html` <sl-tab closable>Test</sl-tab> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const closeButton = el.shadowRoot!.querySelector('[part="close-button"]');
const base = el.shadowRoot!.querySelector<HTMLElement>('[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('<sl-tab>', () => {
it('should focus inner div', async () => {
const el = await fixture<SlTab>(html` <sl-tab>Test</sl-tab> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
el.focus();
await el.updateComplete;
@ -91,7 +91,7 @@ describe('<sl-tab>', () => {
it('should emit close event when close button clicked', async () => {
const el = await fixture<SlTab>(html` <sl-tab closable>Test</sl-tab> `);
const closeButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part="close-button"]')!;
const closeButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="close-button"]')!;
const spy = sinon.spy();
el.addEventListener('sl-close', spy, { once: true });

14
src/components/tag/tag.test.ts
Wyświetl plik

@ -6,7 +6,7 @@ describe('<sl-tag>', () => {
it('should render default tag', async () => {
const el = await fixture<SlTag>(html` <sl-tag>Test</sl-tag> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[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('<sl-tag>', () => {
it('should set variant by attribute', async () => {
const el = await fixture<SlTag>(html` <sl-tag variant="danger">Test</sl-tag> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.getAttribute('class')).to.equal(' tag tag--danger tag--medium ');
});
@ -23,7 +23,7 @@ describe('<sl-tag>', () => {
it('should set size by attribute', async () => {
const el = await fixture<SlTag>(html` <sl-tag size="large">Test</sl-tag> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--large ');
});
@ -31,7 +31,7 @@ describe('<sl-tag>', () => {
it('should set pill-attribute by attribute', async () => {
const el = await fixture<SlTag>(html` <sl-tag pill>Test</sl-tag> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
expect(base.getAttribute('class')).to.equal(' tag tag--neutral tag--medium tag--pill ');
});
@ -39,8 +39,8 @@ describe('<sl-tag>', () => {
it('should set removable by attribute', async () => {
const el = await fixture<SlTag>(html` <sl-tag removable>Test</sl-tag> `);
const base = el.shadowRoot!.querySelector<HTMLElement>('[part="base"]')!;
const removeButton = el.shadowRoot!.querySelector('[part="remove-button"]');
const base = el.shadowRoot!.querySelector<HTMLElement>('[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('<sl-tag>', () => {
it('should emit remove event when remove button clicked', async () => {
const el = await fixture<SlTag>(html` <sl-tag removable>Test</sl-tag> `);
const removeButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part="remove-button"]')!;
const removeButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="remove-button"]')!;
const spy = sinon.spy();
el.addEventListener('sl-remove', spy, { once: true });

4
src/components/textarea/textarea.test.ts
Wyświetl plik

@ -11,14 +11,14 @@ describe('<sl-textarea>', () => {
it('should be disabled with the disabled attribute', async () => {
const el = await fixture<SlTextarea>(html` <sl-textarea disabled></sl-textarea> `);
const textarea = el.shadowRoot!.querySelector<HTMLTextAreaElement>('[part="textarea"]')!;
const textarea = el.shadowRoot!.querySelector<HTMLTextAreaElement>('[part~="textarea"]')!;
expect(textarea.disabled).to.be.true;
});
it('should focus the textarea when clicking on the label', async () => {
const el = await fixture<SlTextarea>(html` <sl-textarea label="Name"></sl-textarea> `);
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);

16
src/components/tooltip/tooltip.test.ts
Wyświetl plik

@ -10,7 +10,7 @@ describe('<sl-tooltip>', () => {
<sl-button>Hover Me</sl-button>
</sl-tooltip>
`);
const body = el.shadowRoot!.querySelector<HTMLElement>('[part="body"]')!;
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
expect(body.hidden).to.be.false;
});
@ -21,7 +21,7 @@ describe('<sl-tooltip>', () => {
<sl-button>Hover Me</sl-button>
</sl-tooltip>
`);
const body = el.shadowRoot!.querySelector<HTMLElement>('[part="body"]')!;
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
expect(body.hidden).to.be.true;
});
@ -32,7 +32,7 @@ describe('<sl-tooltip>', () => {
<sl-button>Hover Me</sl-button>
</sl-tooltip>
`);
const body = el.shadowRoot!.querySelector<HTMLElement>('[part="body"]')!;
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
@ -54,7 +54,7 @@ describe('<sl-tooltip>', () => {
<sl-button>Hover Me</sl-button>
</sl-tooltip>
`);
const body = el.shadowRoot!.querySelector<HTMLElement>('[part="body"]')!;
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
@ -76,7 +76,7 @@ describe('<sl-tooltip>', () => {
<sl-button>Hover Me</sl-button>
</sl-tooltip>
`);
const body = el.shadowRoot!.querySelector<HTMLElement>('[part="body"]')!;
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
@ -98,7 +98,7 @@ describe('<sl-tooltip>', () => {
<sl-button>Hover Me</sl-button>
</sl-tooltip>
`);
const body = el.shadowRoot!.querySelector<HTMLElement>('[part="body"]')!;
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
@ -120,7 +120,7 @@ describe('<sl-tooltip>', () => {
<sl-button>Hover Me</sl-button>
</sl-tooltip>
`);
const body = el.shadowRoot!.querySelector<HTMLElement>('[part="body"]')!;
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
@ -142,7 +142,7 @@ describe('<sl-tooltip>', () => {
<sl-button>Hover Me</sl-button>
</sl-tooltip>
`);
const body = el.shadowRoot!.querySelector<HTMLElement>('[part="body"]')!;
const body = el.shadowRoot!.querySelector<HTMLElement>('[part~="body"]')!;
await el.updateComplete;
expect(body.hidden).to.be.false;