Skip to content

Commit

Permalink
Merge branch 'bennypowers-fix/checkbox-emit-on-user-action-only' into…
Browse files Browse the repository at this point in the history 
… next
  • Loading branch information
@claviska
claviska committed Aug 10, 2021
2 parents ab1a68d + 3bb8614 commit 0d3d9c8
Show file tree
Hide file tree
Showing 17 changed files with 241 additions and 82 deletions.
12 changes: 6 additions & 6 deletions src/components/alert/alert.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,21 @@ import type SlAlert from './alert';

describe('<sl-alert>', () => {
it('should be visible with the open attribute', async () => {
const el = await fixture(html` <sl-alert open>I am an alert</sl-alert> `);
const el = await fixture<SlAlert>(html` <sl-alert open>I am an alert</sl-alert> `);
const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;

expect(base.hidden).to.be.false;
});

it('should not be visible without the open attribute', async () => {
const el = await fixture(html` <sl-alert>I am an alert</sl-alert> `);
const el = await fixture<SlAlert>(html` <sl-alert>I am an alert</sl-alert> `);
const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;

expect(base.hidden).to.be.true;
});

it('should emit sl-show and sl-after-show when calling show()', async () => {
const el = (await fixture(html` <sl-alert>I am an alert</sl-alert> `)) as SlAlert;
const el = await fixture<SlAlert>(html` <sl-alert>I am an alert</sl-alert> `);
const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
Expand All @@ -38,7 +38,7 @@ describe('<sl-alert>', () => {
});

it('should emit sl-hide and sl-after-hide when calling hide()', async () => {
const el = (await fixture(html` <sl-alert open>I am an alert</sl-alert> `)) as SlAlert;
const el = await fixture<SlAlert>(html` <sl-alert open>I am an alert</sl-alert> `);
const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
Expand All @@ -56,7 +56,7 @@ describe('<sl-alert>', () => {
});

it('should emit sl-show and sl-after-show when setting open = true', async () => {
const el = (await fixture(html` <sl-alert>I am an alert</sl-alert> `)) as SlAlert;
const el = await fixture<SlAlert>(html` <sl-alert>I am an alert</sl-alert> `);
const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
Expand All @@ -74,7 +74,7 @@ describe('<sl-alert>', () => {
});

it('should emit sl-hide and sl-after-hide when setting open = false', async () => {
const el = (await fixture(html` <sl-alert open>I am an alert</sl-alert> `)) as SlAlert;
const el = await fixture<SlAlert>(html` <sl-alert open>I am an alert</sl-alert> `);
const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
Expand Down
47 changes: 47 additions & 0 deletions src/components/checkbox/checkbox.test.ts
View file
Original file line number Diff line number Diff line change
@@ -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<SlCheckbox>(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;
});
});
2 changes: 1 addition & 1 deletion src/components/checkbox/checkbox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ export default class SlCheckbox extends LitElement {
handleClick() {
this.checked = !this.checked;
this.indeterminate = false;
emit(this, 'sl-change');
}

handleBlur() {
Expand Down Expand Up @@ -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() {
Expand Down
8 changes: 4 additions & 4 deletions src/components/color-picker/color-picker.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type SlColorPicker from './color-picker';

describe('<sl-color-picker>', () => {
it('should emit change and show correct color when the value changes', async () => {
const el = (await fixture(html` <sl-color-picker></sl-color-picker> `)) as SlColorPicker;
const el = await fixture<SlColorPicker>(html` <sl-color-picker></sl-color-picker> `);
const trigger = el.shadowRoot.querySelector('[part="trigger"]') as HTMLElement;
const changeHandler = sinon.spy();
const color = 'rgb(255, 204, 0)';
Expand All @@ -21,21 +21,21 @@ describe('<sl-color-picker>', () => {
});

it('should render in a dropdown', async () => {
const el = (await fixture(html` <sl-color-picker></sl-color-picker> `)) as SlColorPicker;
const el = await fixture<SlColorPicker>(html` <sl-color-picker></sl-color-picker> `);
const dropdown = el.shadowRoot.querySelector('sl-dropdown');

expect(dropdown).to.exist;
});

it('should not render in a dropdown when inline is enabled', async () => {
const el = (await fixture(html` <sl-color-picker inline></sl-color-picker> `)) as SlColorPicker;
const el = await fixture<SlColorPicker>(html` <sl-color-picker inline></sl-color-picker> `);
const dropdown = el.shadowRoot.querySelector('sl-dropdown');

expect(dropdown).to.not.exist;
});

it('should show opacity slider when opacity is enabled', async () => {
const el = (await fixture(html` <sl-color-picker opacity></sl-color-picker> `)) as SlColorPicker;
const el = await fixture<SlColorPicker>(html` <sl-color-picker opacity></sl-color-picker> `);
const opacitySlider = el.shadowRoot.querySelector('[part*="opacity-slider"]') as HTMLElement;

expect(opacitySlider).to.exist;
Expand Down
22 changes: 11 additions & 11 deletions src/components/details/details.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type SlDetails from './details';

describe('<sl-details>', () => {
it('should be visible with the open attribute', async () => {
const el = await fixture(html`
const el = await fixture<SlDetails>(html`
<sl-details open>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
Expand All @@ -19,7 +19,7 @@ describe('<sl-details>', () => {
});

it('should not be visible without the open attribute', async () => {
const el = await fixture(html`
const el = await fixture<SlDetails>(html`
<sl-details>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
Expand All @@ -32,13 +32,13 @@ describe('<sl-details>', () => {
});

it('should emit sl-show and sl-after-show when calling show()', async () => {
const el = (await fixture(html`
const el = await fixture<SlDetails>(html`
<sl-details>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</sl-details>
`)) as SlDetails;
`);
const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
Expand All @@ -56,13 +56,13 @@ describe('<sl-details>', () => {
});

it('should emit sl-hide and sl-after-hide when calling hide()', async () => {
const el = (await fixture(html`
const el = await fixture<SlDetails>(html`
<sl-details open>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</sl-details>
`)) as SlDetails;
`);
const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
Expand All @@ -80,13 +80,13 @@ describe('<sl-details>', () => {
});

it('should emit sl-show and sl-after-show when setting open = true', async () => {
const el = (await fixture(html`
const el = await fixture<SlDetails>(html`
<sl-details>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</sl-details>
`)) as SlDetails;
`);
const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
Expand All @@ -104,13 +104,13 @@ describe('<sl-details>', () => {
});

it('should emit sl-hide and sl-after-hide when setting open = false', async () => {
const el = (await fixture(html`
const el = await fixture<SlDetails>(html`
<sl-details open>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</sl-details>
`)) as SlDetails;
`);
const body = el.shadowRoot?.querySelector('.details__body') as HTMLElement;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
Expand All @@ -128,7 +128,7 @@ describe('<sl-details>', () => {
});

it('should be the correct size after opening more than one instance', async () => {
const el = await fixture(html`
const el = await fixture<SlDetails>(html`
<div>
<sl-details>
<div style="height: 200px;"></div>
Expand Down
28 changes: 15 additions & 13 deletions src/components/dialog/dialog.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type SlDialog from './dialog';

describe('<sl-dialog>', () => {
it('should be visible with the open attribute', async () => {
const el = await fixture(html`
const el = await fixture<SlDialog>(html`
<sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
`);
const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
Expand All @@ -15,16 +15,18 @@ describe('<sl-dialog>', () => {
});

it('should not be visible without the open attribute', async () => {
const el = await fixture(html` <sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog> `);
const el = await fixture<SlDialog>(
html` <sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog> `
);
const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;

expect(base.hidden).to.be.true;
});

it('should emit sl-show and sl-after-show when calling show()', async () => {
const el = (await fixture(html`
const el = await fixture<SlDialog>(html`
<sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
`)) as SlDialog;
`);
const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
Expand All @@ -42,9 +44,9 @@ describe('<sl-dialog>', () => {
});

it('should emit sl-hide and sl-after-hide when calling hide()', async () => {
const el = (await fixture(html`
const el = await fixture<SlDialog>(html`
<sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
`)) as SlDialog;
`);
const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
Expand All @@ -62,9 +64,9 @@ describe('<sl-dialog>', () => {
});

it('should emit sl-show and sl-after-show when setting open = true', async () => {
const el = (await fixture(html`
const el = await fixture<SlDialog>(html`
<sl-dialog>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
`)) as SlDialog;
`);
const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
const showHandler = sinon.spy();
const afterShowHandler = sinon.spy();
Expand All @@ -82,9 +84,9 @@ describe('<sl-dialog>', () => {
});

it('should emit sl-hide and sl-after-hide when setting open = false', async () => {
const el = (await fixture(html`
const el = await fixture<SlDialog>(html`
<sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
`)) as SlDialog;
`);
const base = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
const hideHandler = sinon.spy();
const afterHideHandler = sinon.spy();
Expand All @@ -102,9 +104,9 @@ describe('<sl-dialog>', () => {
});

it('should not close when sl-request-close is prevented', async () => {
const el = (await fixture(html`
const el = await fixture<SlDialog>(html`
<sl-dialog open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sl-dialog>
`)) as SlDialog;
`);
const overlay = el.shadowRoot?.querySelector('[part="overlay"]') as HTMLElement;

el.addEventListener('sl-request-close', event => event.preventDefault());
Expand All @@ -114,7 +116,7 @@ describe('<sl-dialog>', () => {
});

it('should allow initial focus to be set', async () => {
const el = (await fixture(html` <sl-dialog><input /></sl-dialog> `)) as SlDialog;
const el = await fixture<SlDialog>(html` <sl-dialog><input /></sl-dialog> `);
const input = el.querySelector('input');
const initialFocusHandler = sinon.spy(event => {
event.preventDefault();
Expand Down

0 comments on commit 0d3d9c8

Please sign in to comment.