merge changes

src/components/checkbox/checkbox.test.ts

@@ -0,0 +1,47 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands'
+
+import '../../../dist/shoelace.js';
+import type SlCheckbox from './checkbox';
+
+describe('<sl-checkbox>', () => {
+  it('should be disabled with the disabled attribute', async () => {
+    const el = await fixture(html` <sl-checkbox disabled></sl-checkbox> `);
+    const checkbox = el.shadowRoot?.querySelector('input');
+
+    expect(checkbox.disabled).to.be.true;
+  });
+
+  it('should be valid by default', async () => {
+    const el = (await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `))
+
+    expect(el.invalid).to.be.false;
+  });
+
+  it('should fire sl-change when clicked', async () => {
+    const el = (await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `))
+    setTimeout(() => el.shadowRoot?.querySelector('input').click());
+    const event = await oneEvent(el, 'sl-change')
+    expect(event.target).to.equal(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should fire sl-change when toggled via keyboard', async () => {
+    const el = (await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `))
+    const input = el.shadowRoot?.querySelector('input');
+    input.focus();
+    setTimeout(() => sendKeys({ press: ' ' }));
+    const event = await oneEvent(el, 'sl-change')
+    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 () => {
+    const el = (await fixture<SlCheckbox>(html` <sl-checkbox></sl-checkbox> `))
+    el.addEventListener('sl-change', () => expect.fail('event fired'))
+    el.checked = true;
+    await el.updateComplete;
+    el.checked = false;
+    await el.updateComplete;
+  });
+});

src/components/checkbox/checkbox.ts

@@ -90,6 +90,7 @@ export default class SlCheckbox extends LitElement {
   handleClick() {
     this.checked = !this.checked;
     this.indeterminate = false;
+    emit(this, 'sl-change');
   }
 
   handleBlur() {
@@ -121,7 +122,6 @@ export default class SlCheckbox extends LitElement {
   @watch('indeterminate', { waitUntilFirstUpdate: true })
   handleStateChange() {
     this.invalid = !this.input.checkValidity();
-    emit(this, 'sl-change');
   }
 
   render() {

src/components/radio/radio.test.ts

@@ -0,0 +1,47 @@
+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';
+
+describe('<sl-radio>', () => {
+  it('should be disabled with the disabled attribute', async () => {
+    const el = await fixture(html` <sl-radio disabled></sl-radio> `);
+    const radio = el.shadowRoot?.querySelector('input');
+
+    expect(radio.disabled).to.be.true;
+  });
+
+  it('should be valid by default', async () => {
+    const el = (await fixture<SlRadio>(html` <sl-radio></sl-radio> `))
+
+    expect(el.invalid).to.be.false;
+  });
+
+  it('should fire sl-change when clicked', async () => {
+    const el = (await fixture<SlRadio>(html` <sl-radio></sl-radio> `))
+    setTimeout(() => el.shadowRoot?.querySelector('input').click());
+    const event = await oneEvent(el, 'sl-change')
+    expect(event.target).to.equal(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should fire sl-change when toggled via keyboard', async () => {
+    const el = (await fixture<SlRadio>(html` <sl-radio></sl-radio> `))
+    const input = el.shadowRoot?.querySelector('input');
+    input.focus();
+    setTimeout(() => sendKeys({ press: ' ' }));
+    const event = await oneEvent(el, 'sl-change')
+    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 () => {
+    const el = (await fixture<SlRadio>(html` <sl-radio></sl-radio> `))
+    el.addEventListener('sl-change', () => expect.fail('event fired'))
+    el.checked = true;
+    await el.updateComplete;
+    el.checked = false;
+    await el.updateComplete;
+  });
+});

src/components/radio/radio.ts

@@ -104,11 +104,11 @@ export default class SlRadio extends LitElement {
     if (this.checked) {
       this.getSiblingRadios().map(radio => (radio.checked = false));
     }
-    emit(this, 'sl-change');
   }
 
   handleClick() {
     this.checked = true;
+    emit(this, 'sl-change');
   }
 
   @watch('disabled')

src/components/switch/switch.test.ts

@@ -0,0 +1,47 @@
+import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands'
+
+import '../../../dist/shoelace.js';
+import type SlSwitch from './switch';
+
+describe('<sl-switch>', () => {
+  it('should be disabled with the disabled attribute', async () => {
+    const el = await fixture(html` <sl-switch disabled></sl-switch> `);
+    const input = el.shadowRoot?.querySelector('input');
+
+    expect(input.disabled).to.be.true;
+  });
+
+  it('should be valid by default', async () => {
+    const el = (await fixture<SlSwitch>(html` <sl-switch></sl-switch> `))
+
+    expect(el.invalid).to.be.false;
+  });
+
+  it('should fire sl-change when clicked', async () => {
+    const el = (await fixture<SlSwitch>(html` <sl-switch></sl-switch> `))
+    setTimeout(() => el.shadowRoot?.querySelector('input').click());
+    const event = await oneEvent(el, 'sl-change')
+    expect(event.target).to.equal(el);
+    expect(el.checked).to.be.true;
+  });
+
+  it('should fire sl-change when toggled via keyboard', async () => {
+    const el = (await fixture<SlSwitch>(html` <sl-switch></sl-switch> `))
+    const input = el.shadowRoot?.querySelector('input');
+    input.focus();
+    setTimeout(() => sendKeys({ press: ' ' }));
+    const event = await oneEvent(el, 'sl-change')
+    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 () => {
+    const el = (await fixture<SlSwitch>(html` <sl-switch></sl-switch> `))
+    el.addEventListener('sl-change', () => expect.fail('event fired'))
+    el.checked = true;
+    await el.updateComplete;
+    el.checked = false;
+    await el.updateComplete;
+  });
+});

src/components/switch/switch.ts

@@ -97,12 +97,12 @@ export default class SlSwitch extends LitElement {
     if (this.input) {
       this.input.checked = this.checked;
       this.invalid = !this.input.checkValidity();
-      emit(this, 'sl-change');
     }
   }
 
   handleClick() {
     this.checked = !this.checked;
+    emit(this, 'sl-change');
   }
 
   @watch('disabled')
@@ -123,11 +123,13 @@ export default class SlSwitch extends LitElement {
     if (event.key === 'ArrowLeft') {
       event.preventDefault();
       this.checked = false;
+      // emit(this, 'sl-change');
     }
 
     if (event.key === 'ArrowRight') {
       event.preventDefault();
       this.checked = true;
+      // emit(this, 'sl-change');
     }
   }