2022-03-24 11:48:03 +00:00
|
|
|
import { 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-14 21:47:02 +00:00
|
|
|
import sinon from 'sinon';
|
2022-03-24 11:48:03 +00:00
|
|
|
import type SlRadioGroup from '~/components/radio-group/radio-group';
|
2021-08-10 15:21:56 +00:00
|
|
|
import type SlRadio from './radio';
|
|
|
|
|
|
|
|
describe('<sl-radio>', () => {
|
|
|
|
it('should be disabled with the disabled attribute', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlRadio>(html` <sl-radio disabled></sl-radio> `);
|
2022-03-15 21:42:59 +00:00
|
|
|
const radio = el.input;
|
2021-08-10 15:21:56 +00:00
|
|
|
|
|
|
|
expect(radio.disabled).to.be.true;
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should be valid by default', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlRadio>(html` <sl-radio></sl-radio> `);
|
2021-08-10 15:21:56 +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<SlRadio>(html` <sl-radio></sl-radio> `);
|
2022-03-15 21:42:59 +00:00
|
|
|
setTimeout(() => el.input.click());
|
2021-08-10 21:11:07 +00:00
|
|
|
const event = await oneEvent(el, 'sl-change');
|
2021-08-10 15:21:56 +00:00
|
|
|
expect(event.target).to.equal(el);
|
|
|
|
expect(el.checked).to.be.true;
|
|
|
|
});
|
|
|
|
|
2021-10-05 06:27:28 +00:00
|
|
|
it('should fire sl-change when toggled via keyboard - space', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlRadio>(html` <sl-radio></sl-radio> `);
|
2022-03-15 21:42:59 +00:00
|
|
|
el.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 15:21:56 +00:00
|
|
|
expect(event.target).to.equal(el);
|
|
|
|
expect(el.checked).to.be.true;
|
|
|
|
});
|
|
|
|
|
2021-11-23 16:05:04 +00:00
|
|
|
it('should fire sl-change when toggled via keyboard - arrow key', async () => {
|
|
|
|
const radioGroup = await fixture<SlRadioGroup>(html`
|
|
|
|
<sl-radio-group>
|
|
|
|
<sl-radio id="radio-1"></sl-radio>
|
|
|
|
<sl-radio id="radio-2"></sl-radio>
|
|
|
|
</sl-radio-group>
|
|
|
|
`);
|
2022-03-15 21:42:59 +00:00
|
|
|
const radio1 = radioGroup.querySelector<SlRadio>('#radio-1')!;
|
|
|
|
const radio2 = radioGroup.querySelector<SlRadio>('#radio-2')!;
|
|
|
|
radio1.input.focus();
|
2022-01-17 04:44:10 +00:00
|
|
|
setTimeout(() => sendKeys({ press: 'ArrowRight' }));
|
2021-11-23 16:05:04 +00:00
|
|
|
const event = await oneEvent(radio2, 'sl-change');
|
|
|
|
expect(event.target).to.equal(radio2);
|
|
|
|
expect(radio2.checked).to.be.true;
|
|
|
|
});
|
|
|
|
|
2022-03-15 21:42:59 +00:00
|
|
|
it('should not get checked when disabled', async () => {
|
|
|
|
const radioGroup = await fixture<SlRadioGroup>(html`
|
|
|
|
<sl-radio-group>
|
|
|
|
<sl-radio checked></sl-radio>
|
|
|
|
<sl-radio disabled></sl-radio>
|
|
|
|
</sl-radio-group>
|
|
|
|
`);
|
|
|
|
const radio1 = radioGroup.querySelector<SlRadio>('sl-radio[checked]')!;
|
|
|
|
const radio2 = radioGroup.querySelector<SlRadio>('sl-radio[disabled]')!;
|
|
|
|
|
|
|
|
radio2.click();
|
|
|
|
await Promise.all([radio1.updateComplete, radio2.updateComplete]);
|
|
|
|
|
|
|
|
expect(radio1.checked).to.be.true;
|
|
|
|
expect(radio2.checked).to.be.false;
|
|
|
|
});
|
|
|
|
|
2022-03-14 21:47:02 +00:00
|
|
|
describe('when submitting a form', () => {
|
|
|
|
it('should submit the correct value', async () => {
|
|
|
|
const form = await fixture<HTMLFormElement>(html`
|
|
|
|
<form>
|
|
|
|
<sl-radio-group>
|
|
|
|
<sl-radio id="radio-1" name="a" value="1" checked></sl-radio>
|
|
|
|
<sl-radio id="radio-2" name="a" value="2"></sl-radio>
|
2022-03-24 11:48:03 +00:00
|
|
|
<sl-radio id="radio-2" name="a" value="3"></sl-radio>
|
2022-03-14 21:47:02 +00:00
|
|
|
</sl-radio-group>
|
|
|
|
<sl-button type="submit">Submit</sl-button>
|
|
|
|
</form>
|
|
|
|
`);
|
|
|
|
const button = form.querySelector('sl-button')!;
|
|
|
|
const radio = form.querySelectorAll('sl-radio')[1]!;
|
|
|
|
const submitHandler = sinon.spy((event: SubmitEvent) => {
|
|
|
|
formData = new FormData(form);
|
|
|
|
event.preventDefault();
|
|
|
|
});
|
|
|
|
let formData: FormData;
|
|
|
|
|
|
|
|
form.addEventListener('submit', submitHandler);
|
|
|
|
radio.click();
|
|
|
|
button.click();
|
|
|
|
|
|
|
|
await waitUntil(() => submitHandler.calledOnce);
|
|
|
|
|
|
|
|
expect(formData!.get('a')).to.equal('2');
|
|
|
|
});
|
2021-08-10 15:21:56 +00:00
|
|
|
});
|
|
|
|
});
|