js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean up tests

Browse Source
This commit is contained in:
Jeremiah Hoyet
2021-11-22 17:17:31 -05:00
parent d4c41a2b27
commit b36d2edfde
3 changed files with 88 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/radio-group/radio-group.test.ts Normal file
View File

@@ -0,0 +1,88 @@
import { expect, fixture, html, oneEvent } from '@open-wc/testing';
import { sendKeys } from '@web/test-runner-commands';
import '../../../dist/shoelace.js';
import type SlRadio from '../radio/radio';
import type SlRadioGroup from './radio-group';
describe('<sl-radio-group>', () => {
it('should toggle selected radio when toggled via keyboard - arrow right key', async () => {
const radioGroup = await fixture<SlRadioGroup>(html`
<sl-radio-group>
<sl-radio id="radio-1" checked></sl-radio>
<sl-radio id="radio-2"></sl-radio>
</sl-radio-group>
`);
const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
expect(radio2.checked).to.be.false;
expect(radio1.checked).to.be.true;
radio1.focus();
await sendKeys({ press: 'ArrowRight' });
expect(radio2.checked).to.be.true;
expect(radio1.checked).to.be.false;
});
it('should toggle selected radio when toggled via keyboard - arrow down key', async () => {
const radioGroup = await fixture<SlRadioGroup>(html`
<sl-radio-group>
<sl-radio id="radio-1" checked></sl-radio>
<sl-radio id="radio-2"></sl-radio>
</sl-radio-group>
`);
const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
expect(radio2.checked).to.be.false;
expect(radio1.checked).to.be.true;
radio1.focus();
await sendKeys({ press: 'ArrowDown' });
expect(radio2.checked).to.be.true;
expect(radio1.checked).to.be.false;
});
it('should toggle selected radio when toggled via keyboard - arrow left key', async () => {
const radioGroup = await fixture<SlRadioGroup>(html`
<sl-radio-group>
<sl-radio id="radio-1"></sl-radio>
<sl-radio id="radio-2" checked></sl-radio>
</sl-radio-group>
`);
const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
expect(radio2.checked).to.be.true;
expect(radio1.checked).to.be.false;
radio1.focus();
await sendKeys({ press: 'ArrowLeft' });
expect(radio2.checked).to.be.false;
expect(radio1.checked).to.be.true;
});
it('should toggle selected radio when toggled via keyboard - arrow up key', async () => {
const radioGroup = await fixture<SlRadioGroup>(html`
<sl-radio-group>
<sl-radio id="radio-1"></sl-radio>
<sl-radio id="radio-2" checked></sl-radio>
</sl-radio-group>
`);
const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
expect(radio2.checked).to.be.true;
expect(radio1.checked).to.be.false;
radio1.focus();
await sendKeys({ press: 'ArrowUp' });
expect(radio2.checked).to.be.false;
expect(radio1.checked).to.be.true;
});
});

17
src/components/radio/radio.test.ts
View File

@@ -37,23 +37,6 @@ describe('<sl-radio>', () => {
expect(el.checked).to.be.true;
});
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>
`);
const radio1: SlRadio = radioGroup.querySelector('sl-radio#radio-1');
const radio2: SlRadio = radioGroup.querySelector('sl-radio#radio-2');
const input1 = radio1.shadowRoot?.querySelector('input');
input1.focus();
setTimeout(() => sendKeys({ press: 'ArrowRight' }));
const event = await oneEvent(radio2, 'sl-change');
expect(event.target).to.equal(radio2);
expect(radio2.checked).to.be.true;
});
it('should not fire sl-change when checked is set by javascript', async () => {
const el = await fixture<SlRadio>(html` <sl-radio></sl-radio> `);
el.addEventListener('sl-change', () => expect.fail('event fired'));

7
src/components/radio/radio.ts
View File

@@ -87,13 +87,6 @@ export default class SlRadio extends LitElement {
emit(this, 'sl-blur');
}
@watch('checked', { waitUntilFirstUpdate: true })
handleCheckedChange() {
if (this.checked) {
emit(this, 'sl-change');
}
}
handleClick() {
this.checked = true;
emit(this, 'sl-change');