Merge branch 'tests' of https://github.com/lamplightdev/shoelace into lamplightdev-tests

package.json

@@ -50,6 +50,8 @@
     "@types/color": "^3.0.1",
     "@typescript-eslint/eslint-plugin": "^4.0.1",
     "@typescript-eslint/parser": "^4.0.1",
+    "@types/jest": "25.2.3",
+    "@types/puppeteer": "2.0.1",
     "bluebird": "^3.7.2",
     "bootstrap-icons": "^1.2.2",
     "browser-sync": "^2.26.13",
@@ -66,6 +68,9 @@
     "http-proxy-middleware": "^1.0.4",
     "husky": "^4.2.5",
     "prettier": "^2.0.5",
+    "jest": "26.0.1",
+    "jest-cli": "26.0.1",
+    "puppeteer": "2.1.1",
     "recursive-copy": "^2.0.10",
     "through2": "^3.0.1",
     "typescript": "^4.0.2",

test/e2e/alert.e2e.ts

@@ -0,0 +1,101 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContentStartClosed = `
+<sl-alert>
+  <sl-icon slot="icon" name="info-circle"></sl-icon>
+  This is a standard alert. You can customize its content and even the icon.
+</sl-alert>
+`;
+
+const testContentStartOpen = `
+<sl-alert open>
+  <sl-icon slot="icon" name="info-circle"></sl-icon>
+  This is a standard alert. You can customize its content and even the icon.
+</sl-alert>>
+`;
+
+describe('alert', () => {
+  it('should open/close with the show/hide methods', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const alert = await page.find('sl-alert');
+    const alertBase = await page.find('sl-alert >>> .alert');
+
+    expect(await alertBase.isVisible()).toBe(false);
+
+    const showEventHappened = alert.waitForEvent('slAfterShow');
+    await alert.callMethod('show');
+
+    await showEventHappened;
+
+    expect(await alertBase.isVisible()).toBe(true);
+
+    const hideEventHappened = alert.waitForEvent('slAfterHide');
+    await alert.callMethod('hide');
+
+    await hideEventHappened;
+
+    expect(await alertBase.isVisible()).toBe(false);
+  });
+
+  it('should open/close with the open attribute added/removed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const alert = await page.find('sl-alert');
+    const alertBase = await page.find('sl-alert >>> .alert');
+
+    expect(await alertBase.isVisible()).toBe(false);
+
+    const showEventHappened = alert.waitForEvent('slAfterShow');
+    alert.setAttribute('open', '');
+    await page.waitForChanges();
+
+    await showEventHappened;
+
+    expect(await alertBase.isVisible()).toBe(true);
+
+    const hideEventHappened = alert.waitForEvent('slAfterHide');
+    alert.removeAttribute('open');
+    await page.waitForChanges();
+
+    await hideEventHappened;
+
+    expect(await alertBase.isVisible()).toBe(false);
+  });
+
+  it('should emit slShow and slAfterShow events when alert is opened', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const alert = await page.find('sl-alert');
+    const slShow = await alert.spyOnEvent('slShow');
+    const slAfterShow = await alert.spyOnEvent('slAfterShow');
+
+    const showEventHappened = alert.waitForEvent('slAfterShow');
+    await alert.callMethod('show');
+
+    await showEventHappened;
+
+    expect(slShow).toHaveReceivedEventTimes(1);
+    expect(slAfterShow).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slHide and slAfterHide events when alert is closed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartOpen);
+
+    const alert = await page.find('sl-alert');
+    const slHide = await alert.spyOnEvent('slHide');
+    const slAfterHide = await alert.spyOnEvent('slAfterHide');
+
+    const hideEventHappened = alert.waitForEvent('slAfterHide');
+    await alert.callMethod('hide');
+
+    await hideEventHappened;
+
+    expect(slHide).toHaveReceivedEventTimes(1);
+    expect(slAfterHide).toHaveReceivedEventTimes(1);
+  });
+});

test/e2e/button.e2e.ts

@@ -0,0 +1,67 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContent = `
+<sl-button>Button</sl-button>
+<button>Other Element</button>
+`;
+
+describe('button', () => {
+  it('should emit slFocus when gaining focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const button = await page.find('sl-button');
+
+    const slFocus = await button.spyOnEvent('slFocus');
+
+    // give focus
+    await button.click();
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur when losing focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const button = await page.find('sl-button');
+    const otherElement = await page.find('button');
+
+    const slBlur = await button.spyOnEvent('slBlur');
+
+    //give focus
+    await button.click();
+
+    // remove focus by clicking on other element
+    await otherElement.click();
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slFocus on setFocus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const button = await page.find('sl-button');
+
+    const slFocus = await button.spyOnEvent('slFocus');
+
+    await button.callMethod('setFocus');
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur on removeFocus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const button = await page.find('sl-button');
+
+    const slBlur = await button.spyOnEvent('slBlur');
+
+    await button.callMethod('setFocus');
+    await button.callMethod('removeFocus');
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+});

test/e2e/checkbox.e2e.ts

@@ -0,0 +1,141 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContentUnchecked = `
+<sl-checkbox>Checkbox</sl-checkbox>
+<button>Other Element</button>
+`;
+
+const testContentChecked = `
+<sl-checkbox checked>Checkbox</sl-checkbox>
+<button>Other Element</button>
+`;
+
+describe('checkbox', () => {
+  it('should emit slFocus when gaining focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const checkbox = await page.find('sl-checkbox');
+
+    const slFocus = await checkbox.spyOnEvent('slFocus');
+
+    // give focus
+    await checkbox.click();
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur when losing focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const checkbox = await page.find('sl-checkbox');
+    const otherElement = await page.find('button');
+
+    const slBlur = await checkbox.spyOnEvent('slBlur');
+
+    //give focus
+    await checkbox.click();
+
+    // remove focus by clicking on other element
+    await otherElement.click();
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slFocus on setFocus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const checkbox = await page.find('sl-checkbox');
+
+    const slFocus = await checkbox.spyOnEvent('slFocus');
+
+    await checkbox.callMethod('setFocus');
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur on removeFocus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const checkbox = await page.find('sl-checkbox');
+
+    const slBlur = await checkbox.spyOnEvent('slBlur');
+
+    await checkbox.callMethod('setFocus');
+    await checkbox.callMethod('removeFocus');
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when state changes with click', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const checkbox = await page.find('sl-checkbox');
+
+    const slChange = await checkbox.spyOnEvent('slChange');
+
+    await checkbox.click();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when state changes when checked attribute set', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const checkbox = await page.find('sl-checkbox');
+
+    const slChange = await checkbox.spyOnEvent('slChange');
+
+    checkbox.setAttribute('checked', '');
+    await page.waitForChanges();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when state changes when checked attribute removed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentChecked);
+
+    const checkbox = await page.find('sl-checkbox');
+
+    const slChange = await checkbox.spyOnEvent('slChange');
+
+    checkbox.removeAttribute('checked');
+    await page.waitForChanges();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when state changes when checked property set to true', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const checkbox = await page.find('sl-checkbox');
+
+    const slChange = await checkbox.spyOnEvent('slChange');
+
+    checkbox.setProperty('checked', true);
+    await page.waitForChanges();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when state changes when checked property set to false', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentChecked);
+
+    const checkbox = await page.find('sl-checkbox');
+
+    const slChange = await checkbox.spyOnEvent('slChange');
+
+    checkbox.setProperty('checked', false);
+    await page.waitForChanges();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+});

test/e2e/color-picker.e2e.ts

@@ -0,0 +1,74 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContent = `
+<sl-color-picker></sl-color-picker>
+`;
+
+describe('color-picker', () => {
+  it('should emit slShow and slAfterShow events when opened', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const colorPicker = await page.find('sl-color-picker');
+    const slShow = await colorPicker.spyOnEvent('slShow');
+    const slAfterShow = await colorPicker.spyOnEvent('slAfterShow');
+
+    const eventHappened = colorPicker.waitForEvent('slAfterShow');
+    await colorPicker.click();
+
+    await eventHappened;
+
+    expect(slShow).toHaveReceivedEventTimes(1);
+    expect(slAfterShow).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slHide and slAfterHide events when color-picker is closed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const colorPicker = await page.find('sl-color-picker');
+    const slHide = await colorPicker.spyOnEvent('slHide');
+    const slAfterHide = await colorPicker.spyOnEvent('slAfterHide');
+
+    const eventHappened = colorPicker.waitForEvent('slAfterHide');
+    await colorPicker.click();
+    await colorPicker.click();
+
+    await eventHappened;
+
+    expect(slHide).toHaveReceivedEventTimes(1);
+    expect(slAfterHide).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when value changes with click', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const colorPicker = await page.find('sl-color-picker');
+    const colorPickerPicker = await page.find('sl-color-picker >>> .color-picker');
+
+    const slChange = await colorPicker.spyOnEvent('slChange');
+
+    await colorPicker.click();
+    // click in center of picker
+    await colorPickerPicker.click();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should change value when changed with click', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const colorPicker = await page.find('sl-color-picker');
+    const colorPickerPicker = await page.find('sl-color-picker >>> .color-picker');
+
+    expect(await colorPicker.getProperty('value')).toBe('#ffffff');
+
+    await colorPicker.click();
+    // click in center of picker
+    await colorPickerPicker.click();
+
+    expect(await colorPicker.getProperty('value')).not.toBe('#ffffff');
+  });
+});

test/e2e/details.e2e.ts

@@ -0,0 +1,135 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContentStartClosed = `
+<sl-details summary="Toggle Me">
+  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>
+`;
+
+const testContentStartOpen = `
+<sl-details summary="Toggle Me" 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>
+`;
+
+describe('details', () => {
+  it('should open/close when summary clicked', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const details = await page.find('sl-details');
+    const detailsHeader = await page.find('sl-details >>> header');
+    const detailsBase = await page.find('sl-details >>> .details__body');
+
+    let style = await detailsBase.getComputedStyle();
+    expect(style.height).toBe('0px');
+
+    const showEventHappened = details.waitForEvent('slAfterShow');
+    await detailsHeader.click();
+
+    await showEventHappened;
+
+    style = await detailsBase.getComputedStyle();
+    expect(style.height).not.toBe('0px');
+
+    const hideEventHappened = details.waitForEvent('slAfterHide');
+    await detailsHeader.click();
+
+    await hideEventHappened;
+
+    style = await detailsBase.getComputedStyle();
+    expect(style.height).toBe('0px');
+  });
+
+  it('should open/close with the show/hide methods', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const details = await page.find('sl-details');
+    const detailsBase = await page.find('sl-details >>> .details__body');
+
+    let style = await detailsBase.getComputedStyle();
+    expect(style.height).toBe('0px');
+
+    const showEventHappened = details.waitForEvent('slAfterShow');
+    await details.callMethod('show');
+
+    await showEventHappened;
+
+    style = await detailsBase.getComputedStyle();
+    expect(style.height).not.toBe('0px');
+
+    const hideEventHappened = details.waitForEvent('slAfterHide');
+    await details.callMethod('hide');
+
+    await hideEventHappened;
+
+    style = await detailsBase.getComputedStyle();
+    expect(style.height).toBe('0px');
+  });
+
+  it('should open/close with the open attribute added/removed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const details = await page.find('sl-details');
+    const detailsBase = await page.find('sl-details >>> .details__body');
+
+    let style = await detailsBase.getComputedStyle();
+    expect(style.height).toBe('0px');
+
+    const showEventHappened = details.waitForEvent('slAfterShow');
+    details.setAttribute('open', '');
+    await page.waitForChanges();
+
+    await showEventHappened;
+
+    style = await detailsBase.getComputedStyle();
+    expect(style.height).not.toBe('0px');
+
+    const hideEventHappened = details.waitForEvent('slAfterHide');
+    details.removeAttribute('open');
+    await page.waitForChanges();
+
+    await hideEventHappened;
+
+    style = await detailsBase.getComputedStyle();
+    expect(style.height).toBe('0px');
+  });
+
+  it('should emit slShow and slAfterShow events when opened', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const details = await page.find('sl-details');
+    const slShow = await details.spyOnEvent('slShow');
+    const slAfterShow = await details.spyOnEvent('slAfterShow');
+
+    const showEventHappened = details.waitForEvent('slAfterShow');
+    await details.callMethod('show');
+
+    await showEventHappened;
+
+    expect(slShow).toHaveReceivedEventTimes(1);
+    expect(slAfterShow).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slHide and slAfterHide events when details is closed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartOpen);
+
+    const details = await page.find('sl-details');
+    const slHide = await details.spyOnEvent('slHide');
+    const slAfterHide = await details.spyOnEvent('slAfterHide');
+
+    const hideEventHappened = details.waitForEvent('slAfterHide');
+    await details.callMethod('hide');
+
+    await hideEventHappened;
+
+    expect(slHide).toHaveReceivedEventTimes(1);
+    expect(slAfterHide).toHaveReceivedEventTimes(1);
+  });
+});

test/e2e/dialog.e2e.ts

@@ -0,0 +1,115 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContentStartClosed = `
+<sl-dialog label="Dialog" class="dialog-overview">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <sl-button slot="footer" type="primary">Close</sl-button>
+</sl-dialog>
+`;
+
+const testContentStartOpen = `
+<sl-dialog label="Dialog" class="dialog-overview" open>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <sl-button slot="footer" type="primary">Close</sl-button>
+</sl-dialog>
+`;
+
+describe('dialog', () => {
+  it('should open/close with the show/hide methods', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const dialog = await page.find('sl-dialog');
+    const dialogBase = await page.find('sl-dialog >>> .dialog');
+
+    expect(await dialogBase.isVisible()).toBe(false);
+
+    const showEventHappened = dialog.waitForEvent('slAfterShow');
+    await dialog.callMethod('show');
+
+    await showEventHappened;
+
+    expect(await dialogBase.isVisible()).toBe(true);
+
+    const hideEventHappened = dialog.waitForEvent('slAfterHide');
+    await dialog.callMethod('hide');
+
+    await hideEventHappened;
+
+    expect(await dialogBase.isVisible()).toBe(false);
+  });
+
+  it('should open/close with the open attribute added/removed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const dialog = await page.find('sl-dialog');
+    const dialogBase = await page.find('sl-dialog >>> .dialog');
+
+    expect(await dialogBase.isVisible()).toBe(false);
+
+    const showEventHappened = dialog.waitForEvent('slAfterShow');
+    dialog.setAttribute('open', '');
+    await page.waitForChanges();
+
+    await showEventHappened;
+
+    expect(await dialogBase.isVisible()).toBe(true);
+
+    const hideEventHappened = dialog.waitForEvent('slAfterHide');
+    dialog.removeAttribute('open');
+    await page.waitForChanges();
+
+    await hideEventHappened;
+
+    expect(await dialogBase.isVisible()).toBe(false);
+  });
+
+  it('should emit slShow and slAfterShow events when dialog is opened', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const dialog = await page.find('sl-dialog');
+    const slShow = await dialog.spyOnEvent('slShow');
+    const slAfterShow = await dialog.spyOnEvent('slAfterShow');
+
+    const showEventHappened = dialog.waitForEvent('slAfterShow');
+    await dialog.callMethod('show');
+
+    await showEventHappened;
+
+    expect(slShow).toHaveReceivedEventTimes(1);
+    expect(slAfterShow).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slHide and slAfterHide events when dialog is closed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartOpen);
+
+    const dialog = await page.find('sl-dialog');
+    const slHide = await dialog.spyOnEvent('slHide');
+    const slAfterHide = await dialog.spyOnEvent('slAfterHide');
+
+    const hideEventHappened = dialog.waitForEvent('slAfterHide');
+    await dialog.callMethod('hide');
+
+    await hideEventHappened;
+
+    expect(slHide).toHaveReceivedEventTimes(1);
+    expect(slAfterHide).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit the slOverlayDismiss event when overlay is clicked', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartOpen);
+
+    const dialog = await page.find('sl-dialog');
+    const slOverlayDismiss = await dialog.spyOnEvent('slOverlayDismiss');
+
+    // can't use click method on overlay element since is always clicks in
+    // the middle of an element which in this case will be behind the panel
+    await page.mouse.click(0, 0);
+    await page.waitForChanges();
+    expect(slOverlayDismiss).toHaveReceivedEventTimes(1);
+  });
+});

test/e2e/drawer.e2e.ts

@@ -0,0 +1,115 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContentStartClosed = `
+<sl-drawer label="Drawer" class="drawer-overview">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <sl-button slot="footer" type="primary">Close</sl-button>
+</sl-drawer>
+`;
+
+const testContentStartOpen = `
+<sl-drawer label="Drawer" class="drawer-overview" open>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <sl-button slot="footer" type="primary">Close</sl-button>
+</sl-drawer>
+`;
+
+describe('drawer', () => {
+  it('should open/close with the show/hide methods', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const drawer = await page.find('sl-drawer');
+    const drawerBase = await page.find('sl-drawer >>> .drawer');
+
+    expect(await drawerBase.isVisible()).toBe(false);
+
+    const showEventHappened = drawer.waitForEvent('slAfterShow');
+    await drawer.callMethod('show');
+
+    await showEventHappened;
+
+    expect(await drawerBase.isVisible()).toBe(true);
+
+    const hideEventHappened = drawer.waitForEvent('slAfterHide');
+    await drawer.callMethod('hide');
+
+    await hideEventHappened;
+
+    expect(await drawerBase.isVisible()).toBe(false);
+  });
+
+  it('should open/close with the open attribute added/removed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const drawer = await page.find('sl-drawer');
+    const drawerBase = await page.find('sl-drawer >>> .drawer');
+
+    expect(await drawerBase.isVisible()).toBe(false);
+
+    const showEventHappened = drawer.waitForEvent('slAfterShow');
+    drawer.setAttribute('open', '');
+    await page.waitForChanges();
+
+    await showEventHappened;
+
+    expect(await drawerBase.isVisible()).toBe(true);
+
+    const hideEventHappened = drawer.waitForEvent('slAfterHide');
+    drawer.removeAttribute('open');
+    await page.waitForChanges();
+
+    await hideEventHappened;
+
+    expect(await drawerBase.isVisible()).toBe(false);
+  });
+
+  it('should emit slShow and slAfterShow events when drawer is opened', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const drawer = await page.find('sl-drawer');
+    const slShow = await drawer.spyOnEvent('slShow');
+    const slAfterShow = await drawer.spyOnEvent('slAfterShow');
+
+    const showEventHappened = drawer.waitForEvent('slAfterShow');
+    await drawer.callMethod('show');
+
+    await showEventHappened;
+
+    expect(slShow).toHaveReceivedEventTimes(1);
+    expect(slAfterShow).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slHide and slAfterHide events when drawer is closed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartOpen);
+
+    const drawer = await page.find('sl-drawer');
+    const slHide = await drawer.spyOnEvent('slHide');
+    const slAfterHide = await drawer.spyOnEvent('slAfterHide');
+
+    const hideEventHappened = drawer.waitForEvent('slAfterHide');
+    await drawer.callMethod('hide');
+
+    await hideEventHappened;
+
+    expect(slHide).toHaveReceivedEventTimes(1);
+    expect(slAfterHide).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit the slOverlayDismiss event when overlay is clicked', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartOpen);
+
+    const drawer = await page.find('sl-drawer');
+    const slOverlayDismiss = await drawer.spyOnEvent('slOverlayDismiss');
+
+    // can't use click method on overlay element since is always clicks in
+    // the middle of an element which in this case will be behind the panel
+    await page.mouse.click(0, 0);
+    await page.waitForChanges();
+    expect(slOverlayDismiss).toHaveReceivedEventTimes(1);
+  });
+});

test/e2e/dropdown.e2e.ts

@@ -0,0 +1,158 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContentStartClosed = `
+<sl-dropdown>
+  <sl-button slot="trigger" caret>Dropdown</sl-button>
+  <sl-menu>
+    <sl-menu-item>Dropdown Item 1</sl-menu-item>
+  </sl-menu>
+</sl-dropdown>
+`;
+
+const testContentStartOpen = `
+<sl-dropdown open>
+  <sl-button slot="trigger" caret>Dropdown</sl-button>
+  <sl-menu>
+    <sl-menu-item>Dropdown Item 1</sl-menu-item>
+  </sl-menu>
+</sl-dropdown>
+`;
+
+describe('dropdown', () => {
+  it('should open/close when clicked', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const dropdown = await page.find('sl-dropdown');
+    const dropdownPanel = await page.find('sl-dropdown >>> .dropdown__panel');
+
+    expect(await dropdownPanel.isVisible()).toBe(false);
+
+    const showEventHappened = dropdown.waitForEvent('slAfterShow');
+    await dropdown.click();
+    await showEventHappened;
+
+    expect(await dropdownPanel.isVisible()).toBe(true);
+
+    const afterEventHappened = dropdown.waitForEvent('slAfterHide');
+    await dropdown.click();
+    await afterEventHappened;
+
+    expect(await dropdownPanel.isVisible()).toBe(false);
+  });
+
+  it('should open/close with the show/hide methods', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const dropdown = await page.find('sl-dropdown');
+    const dropdownPanel = await page.find('sl-dropdown >>> .dropdown__panel');
+
+    expect(await dropdownPanel.isVisible()).toBe(false);
+
+    const showEventHappened = dropdown.waitForEvent('slAfterShow');
+    await dropdown.callMethod('show');
+    await showEventHappened;
+
+    expect(await dropdownPanel.isVisible()).toBe(true);
+
+    const hideEventHappened = dropdown.waitForEvent('slAfterHide');
+    await dropdown.callMethod('hide');
+    await hideEventHappened;
+
+    expect(await dropdownPanel.isVisible()).toBe(false);
+  });
+
+  it('should open/close with the open attribute added/removed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const dropdown = await page.find('sl-dropdown');
+    const dropdownPanel = await page.find('sl-dropdown >>> .dropdown__panel');
+
+    expect(await dropdownPanel.isVisible()).toBe(false);
+
+    const showEventHappened = dropdown.waitForEvent('slAfterShow');
+    dropdown.setAttribute('open', '');
+    await page.waitForChanges();
+    await showEventHappened;
+
+    expect(await dropdownPanel.isVisible()).toBe(true);
+
+    const hideEventHappened = dropdown.waitForEvent('slAfterHide');
+    dropdown.removeAttribute('open');
+    await page.waitForChanges();
+    await hideEventHappened;
+
+    expect(await dropdownPanel.isVisible()).toBe(false);
+  });
+
+  it('should emit slShow and slAfterShow events when opened', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartClosed);
+
+    const dropdown = await page.find('sl-dropdown');
+    const slShow = await dropdown.spyOnEvent('slShow');
+    const slAfterShow = await dropdown.spyOnEvent('slAfterShow');
+
+    const eventHappened = dropdown.waitForEvent('slAfterShow');
+    await dropdown.callMethod('show');
+
+    await eventHappened;
+
+    expect(slShow).toHaveReceivedEventTimes(1);
+    expect(slAfterShow).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slHide and slAfterHide events when dropdown is closed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartOpen);
+    await page.waitForChanges();
+
+    const dropdown = await page.find('sl-dropdown');
+    const slHide = await dropdown.spyOnEvent('slHide');
+    const slAfterHide = await dropdown.spyOnEvent('slAfterHide');
+
+    const eventHappened = dropdown.waitForEvent('slAfterHide');
+    await dropdown.callMethod('hide');
+
+    await eventHappened;
+
+    expect(slHide).toHaveReceivedEventTimes(1);
+    expect(slAfterHide).toHaveReceivedEventTimes(1);
+  });
+
+  it('should close on item select', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartOpen);
+
+    const dropdown = await page.find('sl-dropdown');
+    const dropdownPanel = await page.find('sl-dropdown >>> .dropdown__panel');
+
+    expect(await dropdownPanel.isVisible()).toBe(true);
+
+    const eventHappened = dropdown.waitForEvent('slAfterHide');
+    await dropdownPanel.click();
+
+    await eventHappened;
+
+    expect(await dropdownPanel.isVisible()).toBe(false);
+  });
+
+  it('should not close on item select when closeOnSelect === true', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentStartOpen);
+
+    const dropdown = await page.find('sl-dropdown');
+    const dropdownPanel = await page.find('sl-dropdown >>> .dropdown__panel');
+
+    dropdown.setProperty('closeOnSelect', false);
+    await page.waitForChanges();
+
+    expect(await dropdownPanel.isVisible()).toBe(true);
+
+    await dropdownPanel.click();
+
+    expect(await dropdownPanel.isVisible()).toBe(true);
+  });
+});

test/e2e/form.e2e.ts

@@ -0,0 +1,90 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContent = `
+<sl-form class="form-overview">
+  <sl-input name="name" type="text" label="Name" value="Ada"></sl-input>
+  <br>
+  <sl-select name="favorite" label="Select your favorite" value="dogs">
+    <sl-menu-item value="birds">Birds</sl-menu-item>
+    <sl-menu-item value="cats">Cats</sl-menu-item>
+    <sl-menu-item value="dogs">Dogs</sl-menu-item>
+  </sl-select>
+  <br>
+  <sl-checkbox name="agree" value="yes" checked>
+    I totally agree
+  </sl-checkbox>
+  <br><br>
+  <sl-button submit>Submit</sl-button>
+</sl-form>
+`;
+
+describe('button', () => {
+  it('should emit slSubmit when submit button clicked', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const form = await page.find('sl-form');
+    const button = await page.find('sl-button');
+
+    const slSubmit = await form.spyOnEvent('slSubmit');
+
+    await button.click();
+
+    expect(slSubmit).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slSubmit when submit method called', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const form = await page.find('sl-form');
+
+    const slSubmit = await form.spyOnEvent('slSubmit');
+
+    await form.callMethod('submit');
+
+    expect(slSubmit).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slSubmit when enter pressed in input', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const form = await page.find('sl-form');
+    const inputControl = await page.find('sl-input >>> .input__control');
+
+    const slSubmit = await form.spyOnEvent('slSubmit');
+
+    await inputControl.press('Enter');
+
+    expect(slSubmit).toHaveReceivedEventTimes(1);
+  });
+
+  it('should return array of form elements when getFormControls called', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const form = await page.find('sl-form');
+    const inputEl = await page.$eval('sl-input', el => el);
+    const selectEl = await page.$eval('sl-select', el => el);
+    const checkboxEl = await page.$eval('sl-checkbox', el => el);
+    const buttonEl = await page.$eval('sl-button', el => el);
+
+    const formControls = await form.callMethod('getFormControls');
+
+    expect(formControls).toEqual([inputEl, selectEl, checkboxEl, buttonEl]);
+  });
+
+  it('should return FormData object when getFormData called', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const formData = await page.$eval('sl-form', async el => [...(await el.getFormData()).entries()]);
+
+    expect(formData).toEqual([
+      ['name', 'Ada'],
+      ['favorite', 'dogs'],
+      ['agree', 'yes']
+    ]);
+  });
+});

test/e2e/input.e2e.ts

@@ -0,0 +1,177 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContent = `
+<sl-input clearable></sl-input>
+<button>Other Element</button>
+`;
+
+describe('input', () => {
+  it('should emit slFocus when gaining focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const input = await page.find('sl-input');
+
+    const slFocus = await input.spyOnEvent('slFocus');
+
+    // give focus
+    await input.click();
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur when losing focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const input = await page.find('sl-input');
+    const otherElement = await page.find('button');
+
+    const slBlur = await input.spyOnEvent('slBlur');
+
+    //give focus
+    await input.click();
+
+    // remove focus by clicking on other element
+    await otherElement.click();
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slFocus on setFocus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const input = await page.find('sl-input');
+
+    const slFocus = await input.spyOnEvent('slFocus');
+
+    await input.callMethod('setFocus');
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur on removeFocus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const input = await page.find('sl-input');
+
+    const slBlur = await input.spyOnEvent('slBlur');
+
+    await input.callMethod('setFocus');
+    await input.callMethod('removeFocus');
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when text entered and focus removed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const input = await page.find('sl-input');
+    const inputControl = await page.find('sl-input >>> .input__control');
+
+    const slChange = await input.spyOnEvent('slChange');
+
+    await inputControl.press('A');
+    await input.callMethod('removeFocus');
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slInput when text entered', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const input = await page.find('sl-input');
+    const inputControl = await page.find('sl-input >>> .input__control');
+
+    const slInput = await input.spyOnEvent('slInput');
+
+    await inputControl.press('A');
+
+    expect(slInput).toHaveReceivedEventTimes(1);
+  });
+
+  it('should change value when text entered', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const input = await page.find('sl-input');
+    const inputControl = await page.find('sl-input >>> .input__control');
+
+    await inputControl.press('A');
+
+    expect(await input.getProperty('value')).toBe('A');
+  });
+
+  it('should emit slClear when cleared', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const input = await page.find('sl-input');
+    const inputControl = await page.find('sl-input >>> .input__control');
+    const inputClear = await page.find('sl-input >>> .input__clear');
+
+    const slClear = await input.spyOnEvent('slClear');
+
+    await inputControl.press('A');
+    await inputClear.click();
+
+    expect(slClear).toHaveReceivedEventTimes(1);
+  });
+
+  it('should select all text when select method called', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const input = await page.find('sl-input');
+    const inputControl = await page.find('sl-input >>> .input__control');
+
+    await inputControl.press('A');
+    await inputControl.press('d');
+    await inputControl.press('a');
+
+    await input.callMethod('select');
+
+    const selectedText = await page.evaluate(() => window.getSelection().toString());
+
+    expect(selectedText).toBe('Ada');
+  });
+
+  it('should select range of text when setSelectionRange method called', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const input = await page.find('sl-input');
+    const inputControl = await page.find('sl-input >>> .input__control');
+
+    await inputControl.press('A');
+    await inputControl.press('d');
+    await inputControl.press('a');
+
+    await input.callMethod('setSelectionRange', 1, 2);
+
+    const selectedText = await page.evaluate(() => window.getSelection().toString());
+
+    expect(selectedText).toBe('d');
+  });
+
+  it('should replace text when setRangeText method called', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const input = await page.find('sl-input');
+    const inputControl = await page.find('sl-input >>> .input__control');
+
+    await inputControl.press('A');
+    await inputControl.press('d');
+    await inputControl.press('a');
+
+    await input.callMethod('setRangeText', 'bb', 1, 2);
+    const value = await input.getProperty('value');
+
+    expect(value).toBe('Abba');
+  });
+});

test/e2e/menu-item.e2e.ts

@@ -0,0 +1,115 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContent = `
+<sl-button>Other element</sl-button>
+<sl-menu
+  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
+>
+  <sl-menu-item value="undo">Undo</sl-menu-item>
+  <sl-menu-item value="redo">Redo</sl-menu-item>
+  <sl-menu-divider></sl-menu-divider>
+  <sl-menu-item value="cut">Cut</sl-menu-item>
+  <sl-menu-item value="copy">Copy</sl-menu-item>
+  <sl-menu-item value="paste">Paste</sl-menu-item>
+  <sl-menu-item value="delete">Delete</sl-menu-item>
+</sl-menu>
+`;
+
+const testContentActive = `
+<sl-button>Other element</sl-button>
+<sl-menu
+  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
+>
+  <sl-menu-item value="undo" active>Undo</sl-menu-item>
+  <sl-menu-item value="redo">Redo</sl-menu-item>
+  <sl-menu-divider></sl-menu-divider>
+  <sl-menu-item value="cut">Cut</sl-menu-item>
+  <sl-menu-item value="copy">Copy</sl-menu-item>
+  <sl-menu-item value="paste">Paste</sl-menu-item>
+  <sl-menu-item value="delete">Delete</sl-menu-item>
+</sl-menu>
+`;
+
+describe('menuItem', () => {
+  it('should become active when active property set to true', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const menuItem = await page.find('sl-menu-item');
+    const menuItemItem = await page.find('sl-menu-item >>> .menu-item');
+
+    expect(menuItemItem).not.toHaveClass('menu-item--active');
+
+    menuItem.setProperty('active', true);
+    await page.waitForChanges();
+
+    expect(menuItemItem).toHaveClass('menu-item--active');
+  });
+
+  it('should become inactive when active property set to false', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentActive);
+
+    const menuItem = await page.find('sl-menu-item');
+    const menuItemItem = await page.find('sl-menu-item >>> .menu-item');
+
+    expect(menuItemItem).toHaveClass('menu-item--active');
+
+    menuItem.setProperty('active', false);
+    await page.waitForChanges();
+
+    expect(menuItemItem).not.toHaveClass('menu-item--active');
+  });
+
+  it('should emit slActivate event when active property set to true', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const menuItem = await page.find('sl-menu-item');
+    const slActivate = await menuItem.spyOnEvent('slActivate');
+
+    menuItem.setProperty('active', true);
+    await page.waitForChanges();
+
+    expect(slActivate).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slDeactivate event when active property set to false', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentActive);
+
+    const menuItem = await page.find('sl-menu-item');
+    const slDeactivate = await menuItem.spyOnEvent('slDeactivate');
+
+    menuItem.setProperty('active', false);
+    await page.waitForChanges();
+
+    expect(slDeactivate).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slActivate event when hovered', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const menuItem = await page.find('sl-menu-item');
+    const slActivate = await menuItem.spyOnEvent('slActivate');
+
+    await menuItem.hover();
+
+    expect(slActivate).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slDeactivate event when no longer hovered', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const menuItem = await page.find('sl-menu-item');
+    const secondMenuItem = await page.find('sl-menu-item:nth-child(2)');
+    const slDeactivate = await menuItem.spyOnEvent('slDeactivate');
+
+    await menuItem.hover();
+    await secondMenuItem.hover();
+
+    expect(slDeactivate).toHaveReceivedEventTimes(1);
+  });
+});

test/e2e/menu.e2e.ts

@@ -0,0 +1,96 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContent = `
+<sl-button>Other element</sl-button>
+<sl-menu
+  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
+>
+  <sl-menu-item value="undo">Undo</sl-menu-item>
+  <sl-menu-item value="redo">Redo</sl-menu-item>
+  <sl-menu-divider></sl-menu-divider>
+  <sl-menu-item value="cut">Cut</sl-menu-item>
+  <sl-menu-item value="copy">Copy</sl-menu-item>
+  <sl-menu-item value="paste">Paste</sl-menu-item>
+  <sl-menu-item value="delete">Delete</sl-menu-item>
+</sl-menu>
+`;
+
+describe('menu', () => {
+  it('should emit slFocus when gaining focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const menu = await page.find('sl-menu');
+    const button = await page.find('sl-button');
+
+    const slFocus = await menu.spyOnEvent('slFocus');
+
+    // give focus to button
+    await button.click();
+    // tab to menu
+    await button.press('Tab');
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur when losing focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const menu = await page.find('sl-menu');
+
+    const slBlur = await menu.spyOnEvent('slBlur');
+
+    //give focus
+    await menu.callMethod('setFocus');
+    // remove focus by tabbing to other element
+    await menu.press('Tab');
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slFocus on setFocus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const menu = await page.find('sl-menu');
+
+    const slFocus = await menu.spyOnEvent('slFocus');
+
+    await menu.callMethod('setFocus');
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur on removeFocus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const menu = await page.find('sl-menu');
+
+    const slBlur = await menu.spyOnEvent('slBlur');
+
+    await menu.callMethod('setFocus');
+    await menu.callMethod('removeFocus');
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slSelect when menu item selected', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const menu = await page.find('sl-menu');
+    const menuItem = await page.find('sl-menu-item');
+    const menuItemEl = await page.$eval('sl-menu-item', el => el);
+
+    const slSelect = await menu.spyOnEvent('slSelect');
+
+    await menuItem.click();
+
+    expect(slSelect).toHaveReceivedEventTimes(1);
+    expect(slSelect).toHaveReceivedEventDetail({
+      item: menuItemEl
+    });
+  });
+});

test/e2e/radio.e2e.ts

@@ -0,0 +1,141 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContentUnchecked = `
+<sl-radio>Radio</sl-radio>
+<button>Other Element</button>
+`;
+
+const testContentChecked = `
+<sl-radio checked>Radio</sl-radio>
+<button>Other Element</button>
+`;
+
+describe('radio', () => {
+  it('should emit slFocus when gaining focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const radio = await page.find('sl-radio');
+
+    const slFocus = await radio.spyOnEvent('slFocus');
+
+    // give focus
+    await radio.click();
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur when losing focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const radio = await page.find('sl-radio');
+    const otherElement = await page.find('button');
+
+    const slBlur = await radio.spyOnEvent('slBlur');
+
+    //give focus
+    await radio.click();
+
+    // remove focus by clicking on other element
+    await otherElement.click();
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slFocus on setFocus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const radio = await page.find('sl-radio');
+
+    const slFocus = await radio.spyOnEvent('slFocus');
+
+    await radio.callMethod('setFocus');
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur on removeFocus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const radio = await page.find('sl-radio');
+
+    const slBlur = await radio.spyOnEvent('slBlur');
+
+    await radio.callMethod('setFocus');
+    await radio.callMethod('removeFocus');
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when state changes with click', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const radio = await page.find('sl-radio');
+
+    const slChange = await radio.spyOnEvent('slChange');
+
+    await radio.click();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when state changes when checked attribute set', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const radio = await page.find('sl-radio');
+
+    const slChange = await radio.spyOnEvent('slChange');
+
+    radio.setAttribute('checked', '');
+    await page.waitForChanges();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when state changes when checked attribute removed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentChecked);
+
+    const radio = await page.find('sl-radio');
+
+    const slChange = await radio.spyOnEvent('slChange');
+
+    radio.removeAttribute('checked');
+    await page.waitForChanges();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when state changes when checked property set to true', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const radio = await page.find('sl-radio');
+
+    const slChange = await radio.spyOnEvent('slChange');
+
+    radio.setProperty('checked', true);
+    await page.waitForChanges();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when state changes when checked property set to false', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentChecked);
+
+    const radio = await page.find('sl-radio');
+
+    const slChange = await radio.spyOnEvent('slChange');
+
+    radio.setProperty('checked', false);
+    await page.waitForChanges();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+});

test/e2e/range.e2e.ts

@@ -0,0 +1,93 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContent = `
+<sl-range min="0" max="100" step="1"></sl-range>
+<button>Other Element</button>
+`;
+
+describe('range', () => {
+  it('should emit slFocus when gaining focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const range = await page.find('sl-range');
+
+    const slFocus = await range.spyOnEvent('slFocus');
+
+    // give focus
+    await range.click();
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur when losing focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const range = await page.find('sl-range');
+    const otherElement = await page.find('button');
+
+    const slBlur = await range.spyOnEvent('slBlur');
+
+    //give focus
+    await range.click();
+
+    // remove focus by clicking on other element
+    await otherElement.click();
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slFocus on setFocus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const range = await page.find('sl-range');
+
+    const slFocus = await range.spyOnEvent('slFocus');
+
+    await range.callMethod('setFocus');
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur on removeFocus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const range = await page.find('sl-range');
+
+    const slBlur = await range.spyOnEvent('slBlur');
+
+    await range.callMethod('setFocus');
+    await range.callMethod('removeFocus');
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when value changes with click', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const range = await page.find('sl-range');
+
+    const slChange = await range.spyOnEvent('slChange');
+
+    // click in center of range
+    await range.click();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should change value when changed with click', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const range = await page.find('sl-range');
+
+    // click in center of range
+    await range.click();
+
+    expect(await range.getProperty('value')).toBe(50);
+  });
+});

test/e2e/rating.e2e.ts

@@ -0,0 +1,51 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContent = `
+<sl-rating></sl-rating>>
+<button>Other Element</button>
+`;
+
+const testContentValue3 = `
+<sl-rating value="3"></sl-rating>>
+<button>Other Element</button>
+`;
+
+describe('rating', () => {
+  it('should emit slChange when value changes with click', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const rating = await page.find('sl-rating');
+
+    const slChange = await rating.spyOnEvent('slChange');
+
+    // click in center of rating
+    await rating.click();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should change value when changed with click', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const rating = await page.find('sl-rating');
+
+    // click in center of rating (3)
+    await rating.click();
+
+    expect(await rating.getProperty('value')).toBe(3);
+  });
+
+  it('should reset value when active rating clicked', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentValue3);
+
+    const rating = await page.find('sl-rating');
+
+    // click in center of rating (3)
+    await rating.click();
+
+    expect(await rating.getProperty('value')).toBe(0);
+  });
+});

test/e2e/select.e2e.ts

@@ -0,0 +1,78 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContent = `
+<button>Other Element</button>
+<sl-select>
+  <sl-menu-item value="option-1">Option 1</sl-menu-item>
+  <sl-menu-item value="option-2">Option 2</sl-menu-item>
+  <sl-menu-item value="option-3">Option 3</sl-menu-item>
+  <sl-menu-divider></sl-menu-divider>
+  <sl-menu-item value="option-4">Option 4</sl-menu-item>
+  <sl-menu-item value="option-5">Option 5</sl-menu-item>
+  <sl-menu-item value="option-6">Option 6</sl-menu-item>
+</sl-select>
+`;
+
+describe('select', () => {
+  it('should emit slFocus when gaining focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const select = await page.find('sl-select');
+
+    const slFocus = await select.spyOnEvent('slFocus');
+
+    // give focus
+    await select.click();
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur when losing focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const select = await page.find('sl-select');
+    const otherElement = await page.find('button');
+
+    const slBlur = await select.spyOnEvent('slBlur');
+
+    //give focus
+    await select.click();
+
+    // remove focus by clicking on other element
+    await otherElement.click();
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when menu item selected', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const select = await page.find('sl-select');
+    const menuItem = await page.find('sl-menu-item');
+
+    const slChange = await select.spyOnEvent('slChange');
+
+    await select.click();
+    await menuItem.click();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should change value when menu item selected', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const select = await page.find('sl-select');
+    const menuItem = await page.find('sl-menu-item');
+
+    expect(await select.getProperty('value')).toBe('');
+
+    await select.click();
+    await menuItem.click();
+
+    expect(await select.getProperty('value')).toBe('option-1');
+  });
+});

test/e2e/switch.e2e.ts

@@ -0,0 +1,141 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContentUnchecked = `
+<sl-switch>Switch</sl-switch>
+<button>Other Element</button>
+`;
+
+const testContentChecked = `
+<sl-switch checked>Switch</sl-switch>
+<button>Other Element</button>
+`;
+
+describe('switch', () => {
+  it('should emit slFocus when gaining focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const switchComponent = await page.find('sl-switch');
+
+    const slFocus = await switchComponent.spyOnEvent('slFocus');
+
+    // give focus
+    await switchComponent.click();
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur when losing focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const switchComponent = await page.find('sl-switch');
+    const otherElement = await page.find('button');
+
+    const slBlur = await switchComponent.spyOnEvent('slBlur');
+
+    //give focus
+    await switchComponent.click();
+
+    // remove focus by clicking on other element
+    await otherElement.click();
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slFocus on setFocus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const switchComponent = await page.find('sl-switch');
+
+    const slFocus = await switchComponent.spyOnEvent('slFocus');
+
+    await switchComponent.callMethod('setFocus');
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur on removeFocus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const switchComponent = await page.find('sl-switch');
+
+    const slBlur = await switchComponent.spyOnEvent('slBlur');
+
+    await switchComponent.callMethod('setFocus');
+    await switchComponent.callMethod('removeFocus');
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when state changes with click', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const switchComponent = await page.find('sl-switch');
+
+    const slChange = await switchComponent.spyOnEvent('slChange');
+
+    await switchComponent.click();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when state changes when checked attribute set', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const switchComponent = await page.find('sl-switch');
+
+    const slChange = await switchComponent.spyOnEvent('slChange');
+
+    switchComponent.setAttribute('checked', '');
+    await page.waitForChanges();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when state changes when checked attribute removed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentChecked);
+
+    const switchComponent = await page.find('sl-switch');
+
+    const slChange = await switchComponent.spyOnEvent('slChange');
+
+    switchComponent.removeAttribute('checked');
+    await page.waitForChanges();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when state changes when checked property set to true', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentUnchecked);
+
+    const switchComponent = await page.find('sl-switch');
+
+    const slChange = await switchComponent.spyOnEvent('slChange');
+
+    switchComponent.setProperty('checked', true);
+    await page.waitForChanges();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when state changes when checked property set to false', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContentChecked);
+
+    const switchComponent = await page.find('sl-switch');
+
+    const slChange = await switchComponent.spyOnEvent('slChange');
+
+    switchComponent.setProperty('checked', false);
+    await page.waitForChanges();
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+});

test/e2e/tab-group.e2e.ts

@@ -0,0 +1,127 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContent = `
+<sl-tab-group>
+  <sl-tab slot="nav" panel="general">General</sl-tab>
+  <sl-tab slot="nav" panel="custom">Custom</sl-tab>
+  <sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
+  <sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
+
+  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
+  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
+  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
+  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
+</sl-tab-group>
+`;
+
+describe('tab group', () => {
+  it('should only show first panel by default', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const firstPanelName = 'general';
+
+    const firstPanel = await page.find(`sl-tab-panel[name=${firstPanelName}]`);
+    expect(await firstPanel.isVisible()).toBe(true);
+
+    const otherPanels = await page.findAll(`sl-tab-panel:not([name=${firstPanelName}]`);
+    for (let panel of otherPanels) {
+      expect(await panel.isVisible()).not.toBe(true);
+    }
+  });
+
+  it('should have first tab activated by default', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const firstPanelName = 'general';
+
+    const tab = await page.find(`sl-tab[panel=${firstPanelName}] >>> .tab`);
+    expect(tab).toHaveClass('tab--active');
+  });
+
+  it('should show appropriate panel when tab is selected by clicking', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const selectedPanelName = 'custom';
+
+    const selectedTab = await page.find(`sl-tab[panel=${selectedPanelName}]`);
+    await selectedTab.click();
+
+    const selectedPanel = await page.find(`sl-tab-panel[name=${selectedPanelName}]`);
+    expect(await selectedPanel.isVisible()).toBe(true);
+
+    const otherPanels = await page.findAll(`sl-tab-panel:not([name=${selectedPanelName}]`);
+    for (let panel of otherPanels) {
+      expect(await panel.isVisible()).not.toBe(true);
+    }
+  });
+
+  it('should have appropriate tab activated when selected by clicking', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const selectedPanelName = 'advanced';
+
+    const selectedTab = await page.find(`sl-tab[panel=${selectedPanelName}]`);
+    await selectedTab.click();
+
+    const tab = await page.find(`sl-tab[panel=${selectedPanelName}] >>> .tab`);
+    expect(tab).toHaveClass('tab--active');
+  });
+
+  it('should show appropriate panel when show method called', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const selectedPanelName = 'custom';
+
+    const tabGroup = await page.find('sl-tab-group');
+    await tabGroup.callMethod('show', selectedPanelName);
+
+    const selectedPanel = await page.find(`sl-tab-panel[name=${selectedPanelName}]`);
+    expect(await selectedPanel.isVisible()).toBe(true);
+
+    const tab = await page.find(`sl-tab[panel=${selectedPanelName}] >>> .tab`);
+    expect(tab).toHaveClass('tab--active');
+  });
+
+  it('should emit slTabHide and slTabShow events when tab is changed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const tabGroup = await page.find('sl-tab-group');
+    const slTabHide = await tabGroup.spyOnEvent('slTabHide');
+    const slTabShow = await tabGroup.spyOnEvent('slTabShow');
+
+    const selectedPanelName = 'advanced';
+
+    const selectedTab = await page.find(`sl-tab[panel=${selectedPanelName}]`);
+    await selectedTab.click();
+
+    expect(slTabHide).toHaveReceivedEventTimes(1);
+    expect(slTabHide).toHaveReceivedEventDetail({ name: 'general' });
+    expect(slTabShow).toHaveReceivedEventTimes(1);
+    expect(slTabShow).toHaveReceivedEventDetail({ name: 'advanced' });
+  });
+
+  it('should change tab with the show method', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const tabGroup = await page.find('sl-tab-group');
+    const slTabHide = await tabGroup.spyOnEvent('slTabHide');
+    const slTabShow = await tabGroup.spyOnEvent('slTabShow');
+
+    const selectedPanelName = 'advanced';
+
+    const selectedTab = await page.find(`sl-tab[panel=${selectedPanelName}]`);
+    await selectedTab.click();
+
+    expect(slTabHide).toHaveReceivedEventTimes(1);
+    expect(slTabHide).toHaveReceivedEventDetail({ name: 'general' });
+    expect(slTabShow).toHaveReceivedEventTimes(1);
+    expect(slTabShow).toHaveReceivedEventDetail({ name: 'advanced' });
+  });
+});

test/e2e/tag.e2e.ts

@@ -0,0 +1,21 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContent = `
+<sl-tag clearable>Tag</sl-input>
+`;
+
+describe('tag', () => {
+  it('should emit slClear when cleared', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const tag = await page.find('sl-tag');
+    const tagClear = await page.find('sl-tag >>> .tag__clear');
+
+    const slClear = await tag.spyOnEvent('slClear');
+
+    await tagClear.click();
+
+    expect(slClear).toHaveReceivedEventTimes(1);
+  });
+});

test/e2e/textarea.e2e.ts

@@ -0,0 +1,161 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+const testContent = `
+<sl-textarea></sl-textarea>
+<button>Other Element</button>
+`;
+
+describe('textarea', () => {
+  it('should emit slFocus when gaining focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const textarea = await page.find('sl-textarea');
+
+    const slFocus = await textarea.spyOnEvent('slFocus');
+
+    // give focus
+    await textarea.click();
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur when losing focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const textarea = await page.find('sl-textarea');
+    const otherElement = await page.find('button');
+
+    const slBlur = await textarea.spyOnEvent('slBlur');
+
+    //give focus
+    await textarea.click();
+
+    // remove focus by clicking on other element
+    await otherElement.click();
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slFocus on setFocus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const textarea = await page.find('sl-textarea');
+
+    const slFocus = await textarea.spyOnEvent('slFocus');
+
+    await textarea.callMethod('setFocus');
+
+    expect(slFocus).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slBlur on removeFocus', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const textarea = await page.find('sl-textarea');
+
+    const slBlur = await textarea.spyOnEvent('slBlur');
+
+    await textarea.callMethod('setFocus');
+    await textarea.callMethod('removeFocus');
+
+    expect(slBlur).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slChange when text entered and focus removed', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const textarea = await page.find('sl-textarea');
+    const textareaControl = await page.find('sl-textarea >>> .textarea__control');
+
+    const slChange = await textarea.spyOnEvent('slChange');
+
+    await textareaControl.press('A');
+    await textarea.callMethod('removeFocus');
+
+    expect(slChange).toHaveReceivedEventTimes(1);
+  });
+
+  it('should emit slInput when text entered', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const textarea = await page.find('sl-textarea');
+    const textareaControl = await page.find('sl-textarea >>> .textarea__control');
+
+    const slInput = await textarea.spyOnEvent('slInput');
+
+    await textareaControl.press('A');
+
+    expect(slInput).toHaveReceivedEventTimes(1);
+  });
+
+  it('should change value when text entered', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const textarea = await page.find('sl-textarea');
+    const textareaControl = await page.find('sl-textarea >>> .textarea__control');
+
+    await textareaControl.press('A');
+
+    expect(await textarea.getProperty('value')).toBe('A');
+  });
+
+  it('should select all text when select method called', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const textarea = await page.find('sl-textarea');
+    const textareaControl = await page.find('sl-textarea >>> .textarea__control');
+
+    await textareaControl.press('A');
+    await textareaControl.press('d');
+    await textareaControl.press('a');
+
+    await textarea.callMethod('select');
+
+    const selectedText = await page.evaluate(() => window.getSelection().toString());
+
+    expect(selectedText).toBe('Ada');
+  });
+
+  it('should select range of text when setSelectionRange method called', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const textarea = await page.find('sl-textarea');
+    const textareaControl = await page.find('sl-textarea >>> .textarea__control');
+
+    await textareaControl.press('A');
+    await textareaControl.press('d');
+    await textareaControl.press('a');
+
+    await textarea.callMethod('setSelectionRange', 1, 2);
+
+    const selectedText = await page.evaluate(() => window.getSelection().toString());
+
+    expect(selectedText).toBe('d');
+  });
+
+  it('should replace text when setRangeText method called', async () => {
+    const page = await newE2EPage();
+    await page.setContent(testContent);
+
+    const textarea = await page.find('sl-textarea');
+    const textareaControl = await page.find('sl-textarea >>> .textarea__control');
+
+    await textareaControl.press('A');
+    await textareaControl.press('d');
+    await textareaControl.press('a');
+
+    await textarea.callMethod('setRangeText', 'bb', 1, 2);
+    const value = await textarea.getProperty('value');
+
+    expect(value).toBe('Abba');
+  });
+});

tsconfig.json

@@ -13,6 +13,6 @@
     "jsx": "react",
     "jsxFactory": "h"
   },
-  "include": ["src", "types/jsx.d.ts"],
+  "include": ["src", "test", "types/jsx.d.ts"],
   "exclude": ["node_modules", "stencil.config.ts"]
 }