2022-03-24 12:11:49 +00:00
|
|
|
import { aTimeout, expect, fixture, html, oneEvent, waitUntil } from '@open-wc/testing';
|
2021-08-10 21:11:07 +00:00
|
|
|
import { sendKeys } from '@web/test-runner-commands';
|
2022-03-24 12:11:49 +00:00
|
|
|
import sinon from 'sinon';
|
2021-08-10 15:21:56 +00:00
|
|
|
import type SlCheckbox from './checkbox';
|
2021-08-10 12:49:18 +00:00
|
|
|
|
|
|
|
describe('<sl-checkbox>', () => {
|
|
|
|
it('should be disabled with the disabled attribute', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlCheckbox>(html` <sl-checkbox disabled></sl-checkbox> `);
|
2022-01-17 04:44:10 +00:00
|
|
|
const checkbox = el.shadowRoot!.querySelector('input')!;
|
2021-08-10 12:49:18 +00:00
|
|
|
|
2022-01-17 04:44:10 +00:00
|
|
|
expect(checkbox.disabled).to.be.true;
|
2021-08-10 12:49:18 +00:00
|
|
|
});
|
|
|
|
|
2022-04-07 11:24:48 +00:00
|
|
|
it('should be disabled when disabled property is set', async () => {
|
|
|
|
const el = await fixture<SlCheckbox>(html`<sl-checkbox></sl-checkbox>`);
|
|
|
|
const checkbox = el.shadowRoot!.querySelector('input')!;
|
|
|
|
|
|
|
|
el.disabled = true;
|
|
|
|
await el.updateComplete;
|
|
|
|
|
|
|
|
expect(checkbox.disabled).to.be.true;
|
|
|
|
});
|
|
|
|
|
2021-08-10 12:49:18 +00:00
|
|
|
it('should be valid by default', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `);
|
2021-08-10 12:49:18 +00:00
|
|
|
|
|
|
|
expect(el.invalid).to.be.false;
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should fire sl-change when clicked', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `);
|
2022-01-17 04:44:10 +00:00
|
|
|
setTimeout(() => el.shadowRoot!.querySelector('input')!.click());
|
2021-08-10 21:11:07 +00:00
|
|
|
const event = await oneEvent(el, 'sl-change');
|
2021-08-10 12:49:18 +00:00
|
|
|
expect(event.target).to.equal(el);
|
|
|
|
expect(el.checked).to.be.true;
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should fire sl-change when toggled via keyboard', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `);
|
2022-01-16 05:47:14 +00:00
|
|
|
const input = el.shadowRoot!.querySelector('input')!;
|
2021-08-10 12:49:18 +00:00
|
|
|
input.focus();
|
2022-01-17 04:44:10 +00:00
|
|
|
setTimeout(() => sendKeys({ press: ' ' }));
|
2021-08-10 21:11:07 +00:00
|
|
|
const event = await oneEvent(el, 'sl-change');
|
2021-08-10 12:49:18 +00:00
|
|
|
expect(event.target).to.equal(el);
|
|
|
|
expect(el.checked).to.be.true;
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should not fire sl-change when checked is set by javascript', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `);
|
|
|
|
el.addEventListener('sl-change', () => expect.fail('event fired'));
|
2021-08-10 12:49:18 +00:00
|
|
|
el.checked = true;
|
|
|
|
await el.updateComplete;
|
|
|
|
el.checked = false;
|
|
|
|
await el.updateComplete;
|
|
|
|
});
|
2022-03-24 12:11:49 +00:00
|
|
|
|
|
|
|
describe('when submitting a form', () => {
|
|
|
|
it('should submit the correct value', async () => {
|
|
|
|
const form = await fixture<HTMLFormElement>(html`
|
|
|
|
<form>
|
|
|
|
<sl-checkbox name="a" value="1" checked></sl-checkbox>
|
|
|
|
<sl-button type="submit">Submit</sl-button>
|
|
|
|
</form>
|
|
|
|
`);
|
|
|
|
const button = form.querySelector('sl-button')!;
|
|
|
|
const submitHandler = sinon.spy((event: SubmitEvent) => {
|
|
|
|
formData = new FormData(form);
|
|
|
|
event.preventDefault();
|
|
|
|
});
|
|
|
|
let formData: FormData;
|
|
|
|
|
|
|
|
form.addEventListener('submit', submitHandler);
|
|
|
|
button.click();
|
|
|
|
|
|
|
|
await waitUntil(() => submitHandler.calledOnce);
|
|
|
|
|
|
|
|
expect(formData!.get('a')).to.equal('1');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should show a constraint validation error when setCustomValidity() is called', async () => {
|
|
|
|
const form = await fixture<HTMLFormElement>(html`
|
|
|
|
<form>
|
|
|
|
<sl-checkbox name="a" value="1" checked></sl-checkbox>
|
|
|
|
<sl-button type="submit">Submit</sl-button>
|
|
|
|
</form>
|
|
|
|
`);
|
|
|
|
const button = form.querySelector('sl-button')!;
|
|
|
|
const checkbox = form.querySelector('sl-checkbox')!;
|
|
|
|
const submitHandler = sinon.spy((event: SubmitEvent) => event.preventDefault());
|
|
|
|
|
|
|
|
// Submitting the form after setting custom validity should not trigger the handler
|
|
|
|
checkbox.setCustomValidity('Invalid selection');
|
|
|
|
form.addEventListener('submit', submitHandler);
|
|
|
|
button.click();
|
|
|
|
|
|
|
|
await aTimeout(100);
|
|
|
|
|
|
|
|
expect(submitHandler).to.not.have.been.called;
|
|
|
|
});
|
|
|
|
});
|
2022-04-07 11:24:48 +00:00
|
|
|
|
|
|
|
describe('click', () => {
|
|
|
|
it('should click the inner input', async () => {
|
|
|
|
const el = await fixture<SlCheckbox>(html`<sl-checkbox></sl-checkbox>`);
|
|
|
|
const checkbox = el.shadowRoot!.querySelector('input')!;
|
|
|
|
const clickSpy = sinon.spy();
|
|
|
|
|
|
|
|
checkbox.addEventListener('click', clickSpy, { once: true });
|
|
|
|
|
|
|
|
el.click();
|
|
|
|
await el.updateComplete;
|
|
|
|
|
|
|
|
expect(clickSpy.called).to.equal(true);
|
|
|
|
expect(el.checked).to.equal(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('focus', () => {
|
|
|
|
it('should focus the inner input', async () => {
|
|
|
|
const el = await fixture<SlCheckbox>(html`<sl-checkbox></sl-checkbox>`);
|
|
|
|
const checkbox = el.shadowRoot!.querySelector('input')!;
|
|
|
|
const focusSpy = sinon.spy();
|
|
|
|
|
|
|
|
checkbox.addEventListener('focus', focusSpy, { once: true });
|
|
|
|
|
|
|
|
el.focus();
|
|
|
|
await el.updateComplete;
|
|
|
|
|
|
|
|
expect(focusSpy.called).to.equal(true);
|
|
|
|
expect(el.shadowRoot!.activeElement).to.equal(checkbox);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('blur', () => {
|
|
|
|
it('should blur the inner input', async () => {
|
|
|
|
const el = await fixture<SlCheckbox>(html`<sl-checkbox></sl-checkbox>`);
|
|
|
|
const checkbox = el.shadowRoot!.querySelector('input')!;
|
|
|
|
const blurSpy = sinon.spy();
|
|
|
|
|
|
|
|
checkbox.addEventListener('blur', blurSpy, { once: true });
|
|
|
|
|
|
|
|
el.focus();
|
|
|
|
await el.updateComplete;
|
|
|
|
|
|
|
|
el.blur();
|
|
|
|
await el.updateComplete;
|
|
|
|
|
|
|
|
expect(blurSpy.called).to.equal(true);
|
|
|
|
expect(el.shadowRoot!.activeElement).to.equal(null);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
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"]')!;
|
|
|
|
|
|
|
|
expect(indeterminateIcon).not.to.be.null;
|
|
|
|
|
|
|
|
el.click();
|
|
|
|
await el.updateComplete;
|
|
|
|
|
|
|
|
indeterminateIcon = el.shadowRoot!.querySelector('[part="indeterminate-icon"]')!;
|
|
|
|
|
|
|
|
expect(indeterminateIcon).to.be.null;
|
|
|
|
});
|
|
|
|
});
|
2021-08-10 12:49:18 +00:00
|
|
|
});
|