(html`
Option 1
Option 2
Option 3
`);
const form = el.querySelector('form')!;
const formData = new FormData(form);
expect(formData.get('a')).to.equal('option-1');
});
});
describe('when resetting a form', () => {
it('should reset the element to its initial value', async () => {
const form = await fixture(html`
`);
const resetButton = form.querySelector('sl-button')!;
const select = form.querySelector('sl-select')!;
select.value = 'option-3';
await select.updateComplete;
expect(select.value).to.equal('option-3');
setTimeout(() => clickOnElement(resetButton));
await oneEvent(form, 'reset');
await select.updateComplete;
expect(select.value).to.equal('option-1');
});
});
it('should update the display label when an option changes', async () => {
const el = await fixture(html`
Option 1
Option 2
Option 3
`);
const displayInput = el.shadowRoot!.querySelector('.select__display-input')!;
const option = el.querySelector('sl-option')!;
expect(displayInput.value).to.equal('Option 1');
option.textContent = 'updated';
await oneEvent(option, 'slotchange');
await el.updateComplete;
expect(displayInput.value).to.equal('updated');
});
it('should emit sl-focus and sl-blur when receiving and losing focus', async () => {
const el = await fixture(html`
Option 1
Option 2
Option 3
`);
const focusHandler = sinon.spy();
const blurHandler = sinon.spy();
el.addEventListener('sl-focus', focusHandler);
el.addEventListener('sl-blur', blurHandler);
el.focus();
await el.updateComplete;
el.blur();
await el.updateComplete;
expect(focusHandler).to.have.been.calledOnce;
expect(blurHandler).to.have.been.calledOnce;
});
it('should emit sl-clear when the clear button is clicked', async () => {
const el = await fixture(html`
Option 1
Option 2
Option 3
`);
const clearHandler = sinon.spy();
const clearButton = el.shadowRoot!.querySelector('[part~="clear-button"]')!;
el.addEventListener('sl-clear', clearHandler);
await el.show();
await clickOnElement(clearButton);
await el.updateComplete;
expect(clearHandler).to.have.been.calledOnce;
});
it('should emit sl-change and sl-input when a tag is removed', async () => {
const el = await fixture(html`
Option 1
Option 2
Option 3
`);
const changeHandler = sinon.spy();
const inputHandler = sinon.spy();
const tag = el.shadowRoot!.querySelector('[part~="tag"]')!;
const removeButton = tag.shadowRoot!.querySelector('[part~="remove-button"]')!;
el.addEventListener('sl-change', changeHandler);
el.addEventListener('sl-input', inputHandler);
await clickOnElement(removeButton);
await el.updateComplete;
expect(changeHandler).to.have.been.calledOnce;
expect(inputHandler).to.have.been.calledOnce;
});
it('should emit sl-show, sl-after-show, sl-hide, and sl-after-hide events when the listbox opens and closes', async () => {
const el = await fixture(html`
Option 1
Option 2
Option 3
`);
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
el.addEventListener('sl-show', showHandler);
el.addEventListener('sl-after-show', afterShowHandler);
el.addEventListener('sl-hide', hideHandler);
el.addEventListener('sl-after-hide', afterHideHandler);
await el.show();
expect(showHandler).to.have.been.calledOnce;
expect(afterShowHandler).to.have.been.calledOnce;
await el.hide();
expect(hideHandler).to.have.been.calledOnce;
expect(afterHideHandler).to.have.been.calledOnce;
});
it('should have rounded tags when using the pill attribute', async () => {
const el = await fixture(html`
Option 1
Option 2
Option 3
`);
const tag = el.shadowRoot!.querySelector('[part~="tag"]')!;
expect(tag.hasAttribute('pill')).to.be.true;
});
});