From a54ca48f354413b80f83fece70fb94ee795d559b Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 30 Dec 2020 13:32:42 -0500 Subject: [PATCH] Update and move tests --- src/components.d.ts | 4 +- src/components/alert/alert.e2e.ts | 93 ++++++++ src/components/button/button.e2e.ts | 63 ++++++ src/components/checkbox/checkbox.e2e.ts | 138 ++++++++++++ .../color-picker/color-picker.e2e.ts | 73 ++++++ src/components/details/details.e2e.ts | 132 +++++++++++ src/components/dialog/dialog.e2e.ts | 109 +++++++++ src/components/drawer/drawer.e2e.ts | 109 +++++++++ src/components/dropdown/dropdown.e2e.ts | 213 ++++++++++++++++++ src/components/form/form.e2e.ts | 88 ++++++++ src/components/input/input.e2e.ts | 183 +++++++++++++++ src/components/menu-item/menu-item.tsx | 2 +- src/components/menu/menu.e2e.ts | 26 +++ src/components/radio/radio.e2e.ts | 139 ++++++++++++ src/components/range/range.e2e.ts | 90 ++++++++ src/components/rating/rating.e2e.ts | 43 ++++ src/components/select/select.e2e.ts | 83 +++++++ src/components/switch/switch.e2e.ts | 138 ++++++++++++ .../components/tab-group}/tab-group.e2e.ts | 94 ++++---- src/components/tag/tag.e2e.ts | 18 ++ src/components/textarea/textarea.e2e.ts | 169 ++++++++++++++ test/e2e/alert.e2e.ts | 101 --------- test/e2e/button.e2e.ts | 67 ------ test/e2e/checkbox.e2e.ts | 141 ------------ test/e2e/color-picker.e2e.ts | 74 ------ test/e2e/details.e2e.ts | 135 ----------- test/e2e/dialog.e2e.ts | 115 ---------- test/e2e/drawer.e2e.ts | 115 ---------- test/e2e/dropdown.e2e.ts | 158 ------------- test/e2e/form.e2e.ts | 90 -------- test/e2e/input.e2e.ts | 177 --------------- test/e2e/menu-item.e2e.ts | 115 ---------- test/e2e/menu.e2e.ts | 96 -------- test/e2e/radio.e2e.ts | 141 ------------ test/e2e/range.e2e.ts | 93 -------- test/e2e/rating.e2e.ts | 51 ----- test/e2e/select.e2e.ts | 78 ------- test/e2e/switch.e2e.ts | 141 ------------ test/e2e/tag.e2e.ts | 21 -- test/e2e/textarea.e2e.ts | 161 ------------- tsconfig.json | 2 +- 41 files changed, 1956 insertions(+), 2123 deletions(-) create mode 100644 src/components/alert/alert.e2e.ts create mode 100644 src/components/button/button.e2e.ts create mode 100644 src/components/checkbox/checkbox.e2e.ts create mode 100644 src/components/color-picker/color-picker.e2e.ts create mode 100644 src/components/details/details.e2e.ts create mode 100644 src/components/dialog/dialog.e2e.ts create mode 100644 src/components/drawer/drawer.e2e.ts create mode 100644 src/components/dropdown/dropdown.e2e.ts create mode 100644 src/components/form/form.e2e.ts create mode 100644 src/components/input/input.e2e.ts create mode 100644 src/components/menu/menu.e2e.ts create mode 100644 src/components/radio/radio.e2e.ts create mode 100644 src/components/range/range.e2e.ts create mode 100644 src/components/rating/rating.e2e.ts create mode 100644 src/components/select/select.e2e.ts create mode 100644 src/components/switch/switch.e2e.ts rename {test/e2e => src/components/tab-group}/tab-group.e2e.ts (65%) create mode 100644 src/components/tag/tag.e2e.ts create mode 100644 src/components/textarea/textarea.e2e.ts delete mode 100644 test/e2e/alert.e2e.ts delete mode 100644 test/e2e/button.e2e.ts delete mode 100644 test/e2e/checkbox.e2e.ts delete mode 100644 test/e2e/color-picker.e2e.ts delete mode 100644 test/e2e/details.e2e.ts delete mode 100644 test/e2e/dialog.e2e.ts delete mode 100644 test/e2e/drawer.e2e.ts delete mode 100644 test/e2e/dropdown.e2e.ts delete mode 100644 test/e2e/form.e2e.ts delete mode 100644 test/e2e/input.e2e.ts delete mode 100644 test/e2e/menu-item.e2e.ts delete mode 100644 test/e2e/menu.e2e.ts delete mode 100644 test/e2e/radio.e2e.ts delete mode 100644 test/e2e/range.e2e.ts delete mode 100644 test/e2e/rating.e2e.ts delete mode 100644 test/e2e/select.e2e.ts delete mode 100644 test/e2e/switch.e2e.ts delete mode 100644 test/e2e/tag.e2e.ts delete mode 100644 test/e2e/textarea.e2e.ts diff --git a/src/components.d.ts b/src/components.d.ts index ca0ebd1d5..13322bf82 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -811,7 +811,7 @@ export namespace Components { */ "setFocus": () => Promise; /** - * A unique value to store in the menu item. + * A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */ "value": string; } @@ -2505,7 +2505,7 @@ declare namespace LocalJSX { */ "disabled"?: boolean; /** - * A unique value to store in the menu item. + * A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */ "value"?: string; } diff --git a/src/components/alert/alert.e2e.ts b/src/components/alert/alert.e2e.ts new file mode 100644 index 000000000..cdbba8afe --- /dev/null +++ b/src/components/alert/alert.e2e.ts @@ -0,0 +1,93 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should open when the open attribute is set', async () => { + const page = await newE2EPage({ + html: ` + This is an alert + ` + }); + const alert = await page.find('sl-alert'); + const base = await page.find('sl-alert >>> .alert'); + const slShow = await alert.spyOnEvent('sl-show'); + const slAfterShow = await alert.spyOnEvent('sl-after-show'); + + expect(await base.isVisible()).toBe(false); + + const showEventHappened = alert.waitForEvent('sl-after-show'); + alert.setAttribute('open', ''); + await page.waitForChanges(); + await showEventHappened; + + expect(await base.isVisible()).toBe(true); + expect(slShow).toHaveReceivedEventTimes(1); + expect(slAfterShow).toHaveReceivedEventTimes(1); + }); + + it('should close when the open attribute is removed', async () => { + const page = await newE2EPage({ + html: ` + This is an alert + ` + }); + const alert = await page.find('sl-alert'); + const base = await page.find('sl-alert >>> .alert'); + const slHide = await alert.spyOnEvent('sl-hide'); + const slAfterHide = await alert.spyOnEvent('sl-after-hide'); + + expect(await base.isVisible()).toBe(true); + + const hideEventHappened = alert.waitForEvent('sl-after-hide'); + alert.removeAttribute('open'); + await page.waitForChanges(); + await hideEventHappened; + + expect(await base.isVisible()).toBe(false); + expect(slHide).toHaveReceivedEventTimes(1); + expect(slAfterHide).toHaveReceivedEventTimes(1); + }); + + it('should open with the show() method', async () => { + const page = await newE2EPage({ + html: ` + This is an alert + ` + }); + const alert = await page.find('sl-alert'); + const base = await page.find('sl-alert >>> .alert'); + const slShow = await alert.spyOnEvent('sl-show'); + const slAfterShow = await alert.spyOnEvent('sl-after-show'); + + expect(await base.isVisible()).toBe(false); + + const showEventHappened = alert.waitForEvent('sl-after-show'); + await alert.callMethod('show'); + await showEventHappened; + + expect(await base.isVisible()).toBe(true); + expect(slShow).toHaveReceivedEventTimes(1); + expect(slAfterShow).toHaveReceivedEventTimes(1); + }); + + it('should close with the hide() method', async () => { + const page = await newE2EPage({ + html: ` + This is an alert + ` + }); + const alert = await page.find('sl-alert'); + const base = await page.find('sl-alert >>> .alert'); + const slHide = await alert.spyOnEvent('sl-hide'); + const slAfterHide = await alert.spyOnEvent('sl-after-hide'); + + expect(await base.isVisible()).toBe(true); + + const hideEventHappened = alert.waitForEvent('sl-after-hide'); + await alert.callMethod('hide'); + await hideEventHappened; + + expect(await base.isVisible()).toBe(false); + expect(slHide).toHaveReceivedEventTimes(1); + expect(slAfterHide).toHaveReceivedEventTimes(1); + }); +}); diff --git a/src/components/button/button.e2e.ts b/src/components/button/button.e2e.ts new file mode 100644 index 000000000..6ced7dfd9 --- /dev/null +++ b/src/components/button/button.e2e.ts @@ -0,0 +1,63 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should emit sl-focus when gaining focus', async () => { + const page = await newE2EPage({ + html: ` + Button + ` + }); + const button = await page.find('sl-button'); + const slFocus = await button.spyOnEvent('sl-focus'); + + await button.click(); + + expect(slFocus).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-blur when losing focus', async () => { + const page = await newE2EPage({ + html: ` + Button + + ` + }); + const button = await page.find('sl-button'); + const nativeButton = await page.find('button'); + const slBlur = await button.spyOnEvent('sl-blur'); + + await button.click(); + await nativeButton.click(); + + expect(slBlur).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-focus when calling setFocus()', async () => { + const page = await newE2EPage({ + html: ` + Button + ` + }); + const button = await page.find('sl-button'); + const slFocus = await button.spyOnEvent('sl-focus'); + + await button.callMethod('setFocus'); + + expect(slFocus).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-blur when calling removeFocus()', async () => { + const page = await newE2EPage({ + html: ` + Button + ` + }); + const button = await page.find('sl-button'); + const slBlur = await button.spyOnEvent('sl-blur'); + + await button.callMethod('setFocus'); + await button.callMethod('removeFocus'); + + expect(slBlur).toHaveReceivedEventTimes(1); + }); +}); diff --git a/src/components/checkbox/checkbox.e2e.ts b/src/components/checkbox/checkbox.e2e.ts new file mode 100644 index 000000000..5fb77f49d --- /dev/null +++ b/src/components/checkbox/checkbox.e2e.ts @@ -0,0 +1,138 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should emit sl-focus when gaining focus', async () => { + const page = await newE2EPage({ + html: ` + Checkbox + ` + }); + const checkbox = await page.find('sl-checkbox'); + const slFocus = await checkbox.spyOnEvent('sl-focus'); + + await checkbox.click(); + + expect(slFocus).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-blur when losing focus', async () => { + const page = await newE2EPage({ + html: ` + Checkbox + + ` + }); + const checkbox = await page.find('sl-checkbox'); + const nativeButton = await page.find('button'); + const slBlur = await checkbox.spyOnEvent('sl-blur'); + + await checkbox.click(); + await nativeButton.click(); + + expect(slBlur).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-focus when calling setFocus()', async () => { + const page = await newE2EPage({ + html: ` + Checkbox + ` + }); + const checkbox = await page.find('sl-checkbox'); + const slFocus = await checkbox.spyOnEvent('sl-focus'); + + await checkbox.callMethod('setFocus'); + + expect(slFocus).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-blur when calling removeFocus()', async () => { + const page = await newE2EPage({ + html: ` + Checkbox + ` + }); + const checkbox = await page.find('sl-checkbox'); + const slBlur = await checkbox.spyOnEvent('sl-blur'); + + await checkbox.callMethod('setFocus'); + await checkbox.callMethod('removeFocus'); + + expect(slBlur).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when checked state changes via click', async () => { + const page = await newE2EPage({ + html: ` + Checkbox + ` + }); + const checkbox = await page.find('sl-checkbox'); + const slChange = await checkbox.spyOnEvent('sl-change'); + + await checkbox.click(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when setting checked attribute', async () => { + const page = await newE2EPage({ + html: ` + Checkbox + ` + }); + const checkbox = await page.find('sl-checkbox'); + const slChange = await checkbox.spyOnEvent('sl-change'); + + checkbox.setAttribute('checked', ''); + await page.waitForChanges(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when removing checked attribute', async () => { + const page = await newE2EPage({ + html: ` + Checkbox + ` + }); + const checkbox = await page.find('sl-checkbox'); + const slChange = await checkbox.spyOnEvent('sl-change'); + + checkbox.removeAttribute('checked'); + await page.waitForChanges(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when setting checked property to true', async () => { + const page = await newE2EPage({ + html: ` + Checkbox + ` + }); + const checkbox = await page.find('sl-checkbox'); + const slChange = await checkbox.spyOnEvent('sl-change'); + + checkbox.setProperty('checked', true); + await page.waitForChanges(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when setting checked property to false', async () => { + const page = await newE2EPage({ + html: ` + Checkbox + + ` + }); + const checkbox = await page.find('sl-checkbox'); + const slChange = await checkbox.spyOnEvent('sl-change'); + + checkbox.setProperty('checked', false); + await page.waitForChanges(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); +}); diff --git a/src/components/color-picker/color-picker.e2e.ts b/src/components/color-picker/color-picker.e2e.ts new file mode 100644 index 000000000..ba678a5bf --- /dev/null +++ b/src/components/color-picker/color-picker.e2e.ts @@ -0,0 +1,73 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should emit sl-show and sl-after-show events when opened', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const colorPicker = await page.find('sl-color-picker'); + const slShow = await colorPicker.spyOnEvent('sl-show'); + const slAfterShow = await colorPicker.spyOnEvent('sl-after-show'); + const eventHappened = colorPicker.waitForEvent('sl-after-show'); + + await colorPicker.click(); + await eventHappened; + + expect(slShow).toHaveReceivedEventTimes(1); + expect(slAfterShow).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-hide and sl-after-hide events when closed', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const colorPicker = await page.find('sl-color-picker'); + const slHide = await colorPicker.spyOnEvent('sl-hide'); + const slAfterHide = await colorPicker.spyOnEvent('sl-after-hide'); + const eventHappened = colorPicker.waitForEvent('sl-after-hide'); + + await colorPicker.click(); // open + await colorPicker.click(); // close + await eventHappened; + + expect(slHide).toHaveReceivedEventTimes(1); + expect(slAfterHide).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when value changes with click', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const colorPicker = await page.find('sl-color-picker'); + const colorPickerPicker = await page.find('sl-color-picker >>> .color-picker'); + const slChange = await colorPicker.spyOnEvent('sl-change'); + + await colorPicker.click(); + await colorPickerPicker.click(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should change value when clicking the color grid', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + 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(); + await colorPickerPicker.click(); + + expect(await colorPicker.getProperty('value')).not.toBe('#ffffff'); + }); +}); diff --git a/src/components/details/details.e2e.ts b/src/components/details/details.e2e.ts new file mode 100644 index 000000000..f2703e7dc --- /dev/null +++ b/src/components/details/details.e2e.ts @@ -0,0 +1,132 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should open and close when summary is clicked', async () => { + const page = await newE2EPage({ + html: ` + + 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. + + ` + }); + const details = await page.find('sl-details'); + const header = await page.find('sl-details >>> header'); + const base = await page.find('sl-details >>> .details__body'); + + let style = await base.getComputedStyle(); + expect(style.height).toBe('0px'); + + const showEventHappened = details.waitForEvent('sl-after-show'); + await header.click(); + await showEventHappened; + style = await base.getComputedStyle(); + expect(style.height).not.toBe('0px'); + + const hideEventHappened = details.waitForEvent('sl-after-hide'); + await header.click(); + await hideEventHappened; + style = await base.getComputedStyle(); + expect(style.height).toBe('0px'); + }); + + it('should open and close with the show() and hide() methods', async () => { + const page = await newE2EPage({ + html: ` + + 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. + + ` + }); + const details = await page.find('sl-details'); + const base = await page.find('sl-details >>> .details__body'); + + let style = await base.getComputedStyle(); + expect(style.height).toBe('0px'); + + const showEventHappened = details.waitForEvent('sl-after-show'); + await details.callMethod('show'); + await showEventHappened; + style = await base.getComputedStyle(); + expect(style.height).not.toBe('0px'); + + const hideEventHappened = details.waitForEvent('sl-after-hide'); + await details.callMethod('hide'); + await hideEventHappened; + style = await base.getComputedStyle(); + expect(style.height).toBe('0px'); + }); + + it('should open and close when the open attribute is added and removed', async () => { + const page = await newE2EPage({ + html: ` + + 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. + + ` + }); + const details = await page.find('sl-details'); + const base = await page.find('sl-details >>> .details__body'); + + let style = await base.getComputedStyle(); + expect(style.height).toBe('0px'); + + const showEventHappened = details.waitForEvent('sl-after-show'); + details.setAttribute('open', ''); + await page.waitForChanges(); + await showEventHappened; + style = await base.getComputedStyle(); + expect(style.height).not.toBe('0px'); + + const hideEventHappened = details.waitForEvent('sl-after-hide'); + details.removeAttribute('open'); + await page.waitForChanges(); + await hideEventHappened; + style = await base.getComputedStyle(); + expect(style.height).toBe('0px'); + }); + + it('should emit sl-show and sl-after-show events when opened', async () => { + const page = await newE2EPage({ + html: ` + + 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. + + ` + }); + const details = await page.find('sl-details'); + const slShow = await details.spyOnEvent('sl-show'); + const slAfterShow = await details.spyOnEvent('sl-after-show'); + const showEventHappened = details.waitForEvent('sl-after-show'); + + await details.callMethod('show'); + await showEventHappened; + + expect(slShow).toHaveReceivedEventTimes(1); + expect(slAfterShow).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-hide and sl-after-hide events when closed', async () => { + const page = await newE2EPage({ + html: ` + + 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. + + ` + }); + const details = await page.find('sl-details'); + const slHide = await details.spyOnEvent('sl-hide'); + const slAfterHide = await details.spyOnEvent('sl-after-hide'); + const hideEventHappened = details.waitForEvent('sl-after-hide'); + + await details.callMethod('hide'); + await hideEventHappened; + + expect(slHide).toHaveReceivedEventTimes(1); + expect(slAfterHide).toHaveReceivedEventTimes(1); + }); +}); diff --git a/src/components/dialog/dialog.e2e.ts b/src/components/dialog/dialog.e2e.ts new file mode 100644 index 000000000..8b4d4e2c2 --- /dev/null +++ b/src/components/dialog/dialog.e2e.ts @@ -0,0 +1,109 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should open when the open attribute added', async () => { + const page = await newE2EPage({ + html: ` + This is a dialog. + ` + }); + const dialog = await page.find('sl-dialog'); + const base = await page.find('sl-dialog >>> .dialog'); + const slShow = await dialog.spyOnEvent('sl-show'); + const slAfterShow = await dialog.spyOnEvent('sl-after-show'); + + expect(await base.isVisible()).toBe(false); + + const showEventHappened = dialog.waitForEvent('sl-after-show'); + dialog.setAttribute('open', ''); + await page.waitForChanges(); + await showEventHappened; + + expect(await base.isVisible()).toBe(true); + expect(slShow).toHaveReceivedEventTimes(1); + expect(slAfterShow).toHaveReceivedEventTimes(1); + }); + + it('should close when the open attribute is removed', async () => { + const page = await newE2EPage({ + html: ` + This is a dialog. + ` + }); + const dialog = await page.find('sl-dialog'); + const base = await page.find('sl-dialog >>> .dialog'); + const slHide = await dialog.spyOnEvent('sl-hide'); + const slAfterHide = await dialog.spyOnEvent('sl-after-hide'); + + expect(await base.isVisible()).toBe(true); + + const hideEventHappened = dialog.waitForEvent('sl-after-hide'); + dialog.removeAttribute('open'); + await page.waitForChanges(); + await hideEventHappened; + + expect(await base.isVisible()).toBe(false); + expect(slHide).toHaveReceivedEventTimes(1); + expect(slAfterHide).toHaveReceivedEventTimes(1); + }); + + it('should open when the show() method is called', async () => { + const page = await newE2EPage({ + html: ` + This is a dialog. + ` + }); + const dialog = await page.find('sl-dialog'); + const base = await page.find('sl-dialog >>> .dialog'); + const slShow = await dialog.spyOnEvent('sl-show'); + const slAfterShow = await dialog.spyOnEvent('sl-after-show'); + + expect(await base.isVisible()).toBe(false); + + const showEventHappened = dialog.waitForEvent('sl-after-show'); + await dialog.callMethod('show'); + await showEventHappened; + + expect(await base.isVisible()).toBe(true); + expect(slShow).toHaveReceivedEventTimes(1); + expect(slAfterShow).toHaveReceivedEventTimes(1); + }); + + it('should close when the hide() method is called', async () => { + const page = await newE2EPage({ + html: ` + This is a dialog. + ` + }); + const dialog = await page.find('sl-dialog'); + const base = await page.find('sl-dialog >>> .dialog'); + const slHide = await dialog.spyOnEvent('sl-hide'); + const slAfterHide = await dialog.spyOnEvent('sl-after-hide'); + + expect(await base.isVisible()).toBe(true); + + const hideEventHappened = dialog.waitForEvent('sl-after-hide'); + await dialog.callMethod('hide'); + await hideEventHappened; + + expect(await base.isVisible()).toBe(false); + expect(slHide).toHaveReceivedEventTimes(1); + expect(slAfterHide).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-overlay-dismiss when the overlay is clicked', async () => { + const page = await newE2EPage({ + html: ` + This is a dialog. + ` + }); + const dialog = await page.find('sl-dialog'); + const slOverlayDismiss = await dialog.spyOnEvent('sl-overlay-dismiss'); + + // We can't use the click method on the overlay since the click is in the middle, which will be behind the panel + await page.mouse.click(0, 0); + await page.waitForChanges(); + + expect(slOverlayDismiss).toHaveReceivedEventTimes(1); + }); +}); diff --git a/src/components/drawer/drawer.e2e.ts b/src/components/drawer/drawer.e2e.ts new file mode 100644 index 000000000..e961bb823 --- /dev/null +++ b/src/components/drawer/drawer.e2e.ts @@ -0,0 +1,109 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should open when the open attribute added', async () => { + const page = await newE2EPage({ + html: ` + This is a drawer. + ` + }); + const drawer = await page.find('sl-drawer'); + const base = await page.find('sl-drawer >>> .drawer'); + const slShow = await drawer.spyOnEvent('sl-show'); + const slAfterShow = await drawer.spyOnEvent('sl-after-show'); + + expect(await base.isVisible()).toBe(false); + + const showEventHappened = drawer.waitForEvent('sl-after-show'); + drawer.setAttribute('open', ''); + await page.waitForChanges(); + await showEventHappened; + + expect(await base.isVisible()).toBe(true); + expect(slShow).toHaveReceivedEventTimes(1); + expect(slAfterShow).toHaveReceivedEventTimes(1); + }); + + it('should close when the open attribute is removed', async () => { + const page = await newE2EPage({ + html: ` + This is a drawer. + ` + }); + const drawer = await page.find('sl-drawer'); + const base = await page.find('sl-drawer >>> .drawer'); + const slHide = await drawer.spyOnEvent('sl-hide'); + const slAfterHide = await drawer.spyOnEvent('sl-after-hide'); + + expect(await base.isVisible()).toBe(true); + + const hideEventHappened = drawer.waitForEvent('sl-after-hide'); + drawer.removeAttribute('open'); + await page.waitForChanges(); + await hideEventHappened; + + expect(await base.isVisible()).toBe(false); + expect(slHide).toHaveReceivedEventTimes(1); + expect(slAfterHide).toHaveReceivedEventTimes(1); + }); + + it('should open when the show() method is called', async () => { + const page = await newE2EPage({ + html: ` + This is a drawer. + ` + }); + const drawer = await page.find('sl-drawer'); + const base = await page.find('sl-drawer >>> .drawer'); + const slShow = await drawer.spyOnEvent('sl-show'); + const slAfterShow = await drawer.spyOnEvent('sl-after-show'); + + expect(await base.isVisible()).toBe(false); + + const showEventHappened = drawer.waitForEvent('sl-after-show'); + await drawer.callMethod('show'); + await showEventHappened; + + expect(await base.isVisible()).toBe(true); + expect(slShow).toHaveReceivedEventTimes(1); + expect(slAfterShow).toHaveReceivedEventTimes(1); + }); + + it('should close when the hide() method is called', async () => { + const page = await newE2EPage({ + html: ` + This is a drawer. + ` + }); + const drawer = await page.find('sl-drawer'); + const base = await page.find('sl-drawer >>> .drawer'); + const slHide = await drawer.spyOnEvent('sl-hide'); + const slAfterHide = await drawer.spyOnEvent('sl-after-hide'); + + expect(await base.isVisible()).toBe(true); + + const hideEventHappened = drawer.waitForEvent('sl-after-hide'); + await drawer.callMethod('hide'); + await hideEventHappened; + + expect(await base.isVisible()).toBe(false); + expect(slHide).toHaveReceivedEventTimes(1); + expect(slAfterHide).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-overlay-dismiss when the overlay is clicked', async () => { + const page = await newE2EPage({ + html: ` + This is a drawer. + ` + }); + const drawer = await page.find('sl-drawer'); + const slOverlayDismiss = await drawer.spyOnEvent('sl-overlay-dismiss'); + + // We can't use the click method on the overlay since the click is in the middle, which will be behind the panel + await page.mouse.click(0, 0); + await page.waitForChanges(); + + expect(slOverlayDismiss).toHaveReceivedEventTimes(1); + }); +}); diff --git a/src/components/dropdown/dropdown.e2e.ts b/src/components/dropdown/dropdown.e2e.ts new file mode 100644 index 000000000..6980bfea7 --- /dev/null +++ b/src/components/dropdown/dropdown.e2e.ts @@ -0,0 +1,213 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should open when the open attribute is added', async () => { + const page = await newE2EPage({ + html: ` + + Dropdown + + Dropdown Item + + + ` + }); + const dropdown = await page.find('sl-dropdown'); + const panel = await page.find('sl-dropdown >>> .dropdown__panel'); + const slShow = await dropdown.spyOnEvent('sl-show'); + const slAfterShow = await dropdown.spyOnEvent('sl-after-show'); + + expect(await panel.isVisible()).toBe(false); + + const showEventHappened = dropdown.waitForEvent('sl-after-show'); + dropdown.setAttribute('open', ''); + await page.waitForChanges(); + await showEventHappened; + + expect(await panel.isVisible()).toBe(true); + expect(slShow).toHaveReceivedEventTimes(1); + expect(slAfterShow).toHaveReceivedEventTimes(1); + }); + + it('should close when the open attribute is removed', async () => { + const page = await newE2EPage({ + html: ` + + Dropdown + + Dropdown Item + + + ` + }); + const dropdown = await page.find('sl-dropdown'); + const panel = await page.find('sl-dropdown >>> .dropdown__panel'); + const slHide = await dropdown.spyOnEvent('sl-hide'); + const slAfterHide = await dropdown.spyOnEvent('sl-after-hide'); + + expect(await panel.isVisible()).toBe(true); + + const hideEventHappened = dropdown.waitForEvent('sl-after-hide'); + dropdown.removeAttribute('open'); + await page.waitForChanges(); + await hideEventHappened; + + expect(await panel.isVisible()).toBe(false); + expect(slHide).toHaveReceivedEventTimes(1); + expect(slAfterHide).toHaveReceivedEventTimes(1); + }); + + it('should open when the show() method is called', async () => { + const page = await newE2EPage({ + html: ` + + Dropdown + + Dropdown Item + + + ` + }); + const dropdown = await page.find('sl-dropdown'); + const panel = await page.find('sl-dropdown >>> .dropdown__panel'); + const slShow = await dropdown.spyOnEvent('sl-show'); + const slAfterShow = await dropdown.spyOnEvent('sl-after-show'); + + expect(await panel.isVisible()).toBe(false); + + const showEventHappened = dropdown.waitForEvent('sl-after-show'); + await dropdown.callMethod('show'); + await showEventHappened; + + expect(await panel.isVisible()).toBe(true); + expect(slShow).toHaveReceivedEventTimes(1); + expect(slAfterShow).toHaveReceivedEventTimes(1); + }); + + it('should close when the hide() method is called', async () => { + const page = await newE2EPage({ + html: ` + + Dropdown + + Dropdown Item + + + ` + }); + + const dropdown = await page.find('sl-dropdown'); + const panel = await page.find('sl-dropdown >>> .dropdown__panel'); + const slHide = await dropdown.spyOnEvent('sl-hide'); + const slAfterHide = await dropdown.spyOnEvent('sl-after-hide'); + + expect(await panel.isVisible()).toBe(true); + + const hideEventHappened = dropdown.waitForEvent('sl-after-hide'); + await dropdown.callMethod('hide'); + await hideEventHappened; + + expect(await panel.isVisible()).toBe(false); + expect(slHide).toHaveReceivedEventTimes(1); + expect(slAfterHide).toHaveReceivedEventTimes(1); + }); + + it('should open when clicked and hidden', async () => { + const page = await newE2EPage({ + html: ` + + Dropdown + + Dropdown Item + + + ` + }); + const dropdown = await page.find('sl-dropdown'); + const panel = await page.find('sl-dropdown >>> .dropdown__panel'); + const slShow = await dropdown.spyOnEvent('sl-show'); + const slAfterShow = await dropdown.spyOnEvent('sl-after-show'); + + expect(await panel.isVisible()).toBe(false); + + const showEventHappened = dropdown.waitForEvent('sl-after-show'); + await dropdown.click(); + await showEventHappened; + + expect(await panel.isVisible()).toBe(true); + expect(slShow).toHaveReceivedEventTimes(1); + expect(slAfterShow).toHaveReceivedEventTimes(1); + }); + + it('should close when clicked while showing', async () => { + const page = await newE2EPage({ + html: ` + + Dropdown + + Dropdown Item + + + ` + }); + const dropdown = await page.find('sl-dropdown'); + const panel = await page.find('sl-dropdown >>> .dropdown__panel'); + const slHide = await dropdown.spyOnEvent('sl-hide'); + const slAfterHide = await dropdown.spyOnEvent('sl-after-hide'); + + expect(await panel.isVisible()).toBe(true); + + const afterEventHappened = dropdown.waitForEvent('sl-after-hide'); + await dropdown.click(); + await afterEventHappened; + + expect(await panel.isVisible()).toBe(false); + expect(slHide).toHaveReceivedEventTimes(1); + expect(slAfterHide).toHaveReceivedEventTimes(1); + }); + + it('should close when an item is selected', async () => { + const page = await newE2EPage({ + html: ` + + Dropdown + + Dropdown Item + + + ` + }); + const dropdown = await page.find('sl-dropdown'); + const panel = await page.find('sl-dropdown >>> .dropdown__panel'); + + expect(await panel.isVisible()).toBe(true); + + const eventHappened = dropdown.waitForEvent('sl-after-hide'); + await panel.click(); + await eventHappened; + + expect(await panel.isVisible()).toBe(false); + }); + + it('should not close when an item is selected and closeOnSelect is true', async () => { + const page = await newE2EPage({ + html: ` + + Dropdown + + Dropdown Item + + + ` + }); + const dropdown = await page.find('sl-dropdown'); + const panel = await page.find('sl-dropdown >>> .dropdown__panel'); + + dropdown.setProperty('closeOnSelect', false); + await page.waitForChanges(); + expect(await panel.isVisible()).toBe(true); + + await panel.click(); + expect(await panel.isVisible()).toBe(true); + }); +}); diff --git a/src/components/form/form.e2e.ts b/src/components/form/form.e2e.ts new file mode 100644 index 000000000..2132fe2a6 --- /dev/null +++ b/src/components/form/form.e2e.ts @@ -0,0 +1,88 @@ +import { newE2EPage } from '@stencil/core/testing'; + +const testForm = ` + + +
+ + Birds + Cats + Dogs + +
+ + I agree + +

+ Submit + +`; + +describe('', () => { + it('should emit sl-submit when submit button clicked', async () => { + const page = await newE2EPage({ + html: testForm + }); + const form = await page.find('sl-form'); + const button = await page.find('sl-button'); + const slSubmit = await form.spyOnEvent('sl-submit'); + + await button.click(); + + expect(slSubmit).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-submit when submit method called', async () => { + const page = await newE2EPage({ + html: testForm + }); + const form = await page.find('sl-form'); + const slSubmit = await form.spyOnEvent('sl-submit'); + + await form.callMethod('submit'); + + expect(slSubmit).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-submit when enter pressed inside an input', async () => { + const page = await newE2EPage({ + html: testForm + }); + const form = await page.find('sl-form'); + const inputControl = await page.find('sl-input >>> .input__control'); + const slSubmit = await form.spyOnEvent('sl-submit'); + + await inputControl.press('Enter'); + + expect(slSubmit).toHaveReceivedEventTimes(1); + }); + + it('should return array of form elements when getFormControls() is called', async () => { + const page = await newE2EPage({ + html: testForm + }); + 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() is called', async () => { + const page = await newE2EPage({ + html: testForm + }); + const formData = await page.$eval('sl-form', async (el: HTMLSlFormElement) => [ + ...(await el.getFormData()).entries() + ]); + + expect(formData).toEqual([ + ['name', 'Mr. Meow'], + ['favorite', 'cats'], + ['agree', 'yes'] + ]); + }); +}); diff --git a/src/components/input/input.e2e.ts b/src/components/input/input.e2e.ts new file mode 100644 index 000000000..137e03f8e --- /dev/null +++ b/src/components/input/input.e2e.ts @@ -0,0 +1,183 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should emit sl-focus when gaining focus', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const input = await page.find('sl-input'); + const slFocus = await input.spyOnEvent('sl-focus'); + + await input.click(); + + expect(slFocus).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-blur when losing focus', async () => { + const page = await newE2EPage({ + html: ` + + + ` + }); + const input = await page.find('sl-input'); + const button = await page.find('button'); + const slBlur = await input.spyOnEvent('sl-blur'); + + await input.click(); + await button.click(); + + expect(slBlur).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-focus when setFocus() is called', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const input = await page.find('sl-input'); + const slFocus = await input.spyOnEvent('sl-focus'); + + await input.callMethod('setFocus'); + + expect(slFocus).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-blur when removeFocus() is called', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const input = await page.find('sl-input'); + const slBlur = await input.spyOnEvent('sl-blur'); + + await input.callMethod('setFocus'); + await input.callMethod('removeFocus'); + + expect(slBlur).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when text is entered and focus is removed', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const input = await page.find('sl-input'); + const inputControl = await page.find('sl-input >>> .input__control'); + const slChange = await input.spyOnEvent('sl-change'); + + await inputControl.press('A'); + await input.callMethod('removeFocus'); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-input when text entered', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const input = await page.find('sl-input'); + const inputControl = await page.find('sl-input >>> .input__control'); + const slInput = await input.spyOnEvent('sl-input'); + + await inputControl.press('A'); + + expect(slInput).toHaveReceivedEventTimes(1); + }); + + it('should sync value when text is entered', async () => { + const page = await newE2EPage({ + html: ` + + + ` + }); + 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 sl-clear when cleared', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + 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('sl-clear'); + + await inputControl.press('A'); + await inputClear.click(); + + expect(slClear).toHaveReceivedEventTimes(1); + }); + + it('should select all text when select() method is called', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const input = await page.find('sl-input'); + const inputControl = await page.find('sl-input >>> .input__control'); + + await inputControl.press('S'); + await inputControl.press('h'); + await inputControl.press('o'); + await inputControl.press('e'); + await input.callMethod('select'); + + const selectedText = await page.evaluate(() => window.getSelection().toString()); + expect(selectedText).toBe('Shoe'); + }); + + it('should select a range of text when setSelectionRange() is called', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const input = await page.find('sl-input'); + const inputControl = await page.find('sl-input >>> .input__control'); + + await inputControl.press('S'); + await inputControl.press('h'); + await inputControl.press('o'); + await inputControl.press('e'); + await input.callMethod('setSelectionRange', 1, 3); + + const selectedText = await page.evaluate(() => window.getSelection().toString()); + expect(selectedText).toBe('ho'); + }); + + it('should replace text when setRangeText() is called', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const input = await page.find('sl-input'); + const inputControl = await page.find('sl-input >>> .input__control'); + + await inputControl.press('S'); + await inputControl.press('h'); + await inputControl.press('o'); + await inputControl.press('e'); + await input.callMethod('setRangeText', 'ur', 1, 3); + + const value = await input.getProperty('value'); + expect(value).toBe('Sure'); + }); +}); diff --git a/src/components/menu-item/menu-item.tsx b/src/components/menu-item/menu-item.tsx index be77b455e..4bb34d607 100644 --- a/src/components/menu-item/menu-item.tsx +++ b/src/components/menu-item/menu-item.tsx @@ -28,7 +28,7 @@ export class MenuItem { /** Set to true to draw the item in a checked state. */ @Prop({ reflect: true }) checked = false; - /** A unique value to store in the menu item. */ + /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */ @Prop({ reflect: true }) value = ''; /** Set to true to draw the menu item in a disabled state. */ diff --git a/src/components/menu/menu.e2e.ts b/src/components/menu/menu.e2e.ts new file mode 100644 index 000000000..af33a0cac --- /dev/null +++ b/src/components/menu/menu.e2e.ts @@ -0,0 +1,26 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should emit sl-select when a menu item is selected', async () => { + const page = await newE2EPage({ + html: ` + + Item 1 + Item 2 + Item 3 + + ` + }); + 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('sl-select'); + + await menuItem.click(); + + expect(slSelect).toHaveReceivedEventTimes(1); + expect(slSelect).toHaveReceivedEventDetail({ + item: menuItemEl + }); + }); +}); diff --git a/src/components/radio/radio.e2e.ts b/src/components/radio/radio.e2e.ts new file mode 100644 index 000000000..45014087e --- /dev/null +++ b/src/components/radio/radio.e2e.ts @@ -0,0 +1,139 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should emit sl-focus when gaining focus', async () => { + const page = await newE2EPage({ + html: ` + Radio + ` + }); + const radio = await page.find('sl-radio'); + const slFocus = await radio.spyOnEvent('sl-focus'); + + await radio.click(); + + expect(slFocus).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-blur when losing focus', async () => { + const page = await newE2EPage({ + html: ` + Radio + + ` + }); + const radio = await page.find('sl-radio'); + const button = await page.find('button'); + const slBlur = await radio.spyOnEvent('sl-blur'); + + await radio.click(); + await button.click(); + + expect(slBlur).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-focus when calling setFocus()', async () => { + const page = await newE2EPage({ + html: ` + Radio + ` + }); + const radio = await page.find('sl-radio'); + const slFocus = await radio.spyOnEvent('sl-focus'); + + await radio.callMethod('setFocus'); + + expect(slFocus).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-blur when calling removeFocus()', async () => { + const page = await newE2EPage({ + html: ` + Radio + ` + }); + const radio = await page.find('sl-radio'); + const slBlur = await radio.spyOnEvent('sl-blur'); + + await radio.callMethod('setFocus'); + await radio.callMethod('removeFocus'); + + expect(slBlur).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when checked state changes via click', async () => { + const page = await newE2EPage({ + html: ` + Radio + ` + }); + const radio = await page.find('sl-radio'); + const slChange = await radio.spyOnEvent('sl-change'); + + await radio.click(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when setting checked attribute', async () => { + const page = await newE2EPage({ + html: ` + Radio + ` + }); + const radio = await page.find('sl-radio'); + const slChange = await radio.spyOnEvent('sl-change'); + + radio.setAttribute('checked', ''); + await page.waitForChanges(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when removing checked attribute', async () => { + const page = await newE2EPage({ + html: ` + Radio + + ` + }); + const radio = await page.find('sl-radio'); + const slChange = await radio.spyOnEvent('sl-change'); + + radio.removeAttribute('checked'); + await page.waitForChanges(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when setting checked property to true', async () => { + const page = await newE2EPage({ + html: ` + Radio + ` + }); + const radio = await page.find('sl-radio'); + const slChange = await radio.spyOnEvent('sl-change'); + + radio.setProperty('checked', true); + await page.waitForChanges(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when setting checked property to false', async () => { + const page = await newE2EPage({ + html: ` + Radio + + ` + }); + const radio = await page.find('sl-radio'); + const slChange = await radio.spyOnEvent('sl-change'); + + radio.setProperty('checked', false); + await page.waitForChanges(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); +}); diff --git a/src/components/range/range.e2e.ts b/src/components/range/range.e2e.ts new file mode 100644 index 000000000..9b1103a02 --- /dev/null +++ b/src/components/range/range.e2e.ts @@ -0,0 +1,90 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should emit sl-focus when gaining focus', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const range = await page.find('sl-range'); + const slFocus = await range.spyOnEvent('sl-focus'); + + await range.click(); + + expect(slFocus).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-blur when losing focus', async () => { + const page = await newE2EPage({ + html: ` + + + ` + }); + const range = await page.find('sl-range'); + const button = await page.find('button'); + const slBlur = await range.spyOnEvent('sl-blur'); + + await range.click(); + await button.click(); + + expect(slBlur).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-focus when setFocus() is called', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const range = await page.find('sl-range'); + const slFocus = await range.spyOnEvent('sl-focus'); + + await range.callMethod('setFocus'); + + expect(slFocus).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-blur when removeFocus() is called', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const range = await page.find('sl-range'); + const slBlur = await range.spyOnEvent('sl-blur'); + + await range.callMethod('setFocus'); + await range.callMethod('removeFocus'); + + expect(slBlur).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when value changes with click', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const range = await page.find('sl-range'); + const slChange = await range.spyOnEvent('sl-change'); + + await range.click(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should sync value when changed with click', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const range = await page.find('sl-range'); + + await range.click(); + + expect(await range.getProperty('value')).toBe(50); + }); +}); diff --git a/src/components/rating/rating.e2e.ts b/src/components/rating/rating.e2e.ts new file mode 100644 index 000000000..58a95357f --- /dev/null +++ b/src/components/rating/rating.e2e.ts @@ -0,0 +1,43 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should emit sl-change when value changes with click', async () => { + const page = await newE2EPage({ + html: ` + > + ` + }); + const rating = await page.find('sl-rating'); + const slChange = await rating.spyOnEvent('sl-change'); + + await rating.click(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should sync value when clicked', async () => { + const page = await newE2EPage({ + html: ` + > + ` + }); + const rating = await page.find('sl-rating'); + + await rating.click(); // click in center = 3 + + expect(await rating.getProperty('value')).toBe(3); + }); + + it('should reset value when the current rating is clicked', async () => { + const page = await newE2EPage({ + html: ` + > + ` + }); + const rating = await page.find('sl-rating'); + + await rating.click(); + + expect(await rating.getProperty('value')).toBe(0); + }); +}); diff --git a/src/components/select/select.e2e.ts b/src/components/select/select.e2e.ts new file mode 100644 index 000000000..960084f4b --- /dev/null +++ b/src/components/select/select.e2e.ts @@ -0,0 +1,83 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should emit sl-focus when gaining focus', async () => { + const page = await newE2EPage({ + html: ` + + Option 1 + Option 2 + Option 3 + + ` + }); + const select = await page.find('sl-select'); + const slFocus = await select.spyOnEvent('sl-focus'); + + await select.click(); + + expect(slFocus).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-blur when losing focus', async () => { + const page = await newE2EPage({ + html: ` + + + Option 1 + Option 2 + Option 3 + + ` + }); + const select = await page.find('sl-select'); + const button = await page.find('button'); + const slBlur = await select.spyOnEvent('sl-blur'); + + await select.click(); + await button.click(); + + expect(slBlur).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when a menu item is selected', async () => { + const page = await newE2EPage({ + html: ` + + Option 1 + Option 2 + Option 3 + + ` + }); + const select = await page.find('sl-select'); + const menuItem = await page.find('sl-menu-item'); + const slChange = await select.spyOnEvent('sl-change'); + + await select.click(); + await menuItem.click(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should change value when menu item selected', async () => { + const page = await newE2EPage({ + html: ` + + Option 1 + Option 2 + Option 3 + + ` + }); + 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'); + }); +}); diff --git a/src/components/switch/switch.e2e.ts b/src/components/switch/switch.e2e.ts new file mode 100644 index 000000000..5fc1b0ba2 --- /dev/null +++ b/src/components/switch/switch.e2e.ts @@ -0,0 +1,138 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should emit sl-focus when gaining focus', async () => { + const page = await newE2EPage({ + html: ` + Switch + ` + }); + const switchEl = await page.find('sl-switch'); + const slFocus = await switchEl.spyOnEvent('sl-focus'); + + await switchEl.click(); + + expect(slFocus).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-blur when losing focus', async () => { + const page = await newE2EPage({ + html: ` + Switch + + ` + }); + const switchEl = await page.find('sl-switch'); + const nativeButton = await page.find('button'); + const slBlur = await switchEl.spyOnEvent('sl-blur'); + + await switchEl.click(); + await nativeButton.click(); + + expect(slBlur).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-focus when calling setFocus()', async () => { + const page = await newE2EPage({ + html: ` + Switch + ` + }); + const switchEl = await page.find('sl-switch'); + const slFocus = await switchEl.spyOnEvent('sl-focus'); + + await switchEl.callMethod('setFocus'); + + expect(slFocus).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-blur when calling removeFocus()', async () => { + const page = await newE2EPage({ + html: ` + Switch + ` + }); + const switchEl = await page.find('sl-switch'); + const slBlur = await switchEl.spyOnEvent('sl-blur'); + + await switchEl.callMethod('setFocus'); + await switchEl.callMethod('removeFocus'); + + expect(slBlur).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when checked state changes via click', async () => { + const page = await newE2EPage({ + html: ` + Switch + ` + }); + const switchEl = await page.find('sl-switch'); + const slChange = await switchEl.spyOnEvent('sl-change'); + + await switchEl.click(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when setting checked attribute', async () => { + const page = await newE2EPage({ + html: ` + Switch + ` + }); + const switchEl = await page.find('sl-switch'); + const slChange = await switchEl.spyOnEvent('sl-change'); + + switchEl.setAttribute('checked', ''); + await page.waitForChanges(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when removing checked attribute', async () => { + const page = await newE2EPage({ + html: ` + Switch + ` + }); + const switchEl = await page.find('sl-switch'); + const slChange = await switchEl.spyOnEvent('sl-change'); + + switchEl.removeAttribute('checked'); + await page.waitForChanges(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when setting checked property to true', async () => { + const page = await newE2EPage({ + html: ` + Switch + ` + }); + const switchEl = await page.find('sl-switch'); + const slChange = await switchEl.spyOnEvent('sl-change'); + + switchEl.setProperty('checked', true); + await page.waitForChanges(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when setting checked property to false', async () => { + const page = await newE2EPage({ + html: ` + Switch + + ` + }); + const switchEl = await page.find('sl-switch'); + const slChange = await switchEl.spyOnEvent('sl-change'); + + switchEl.setProperty('checked', false); + await page.waitForChanges(); + + expect(slChange).toHaveReceivedEventTimes(1); + }); +}); diff --git a/test/e2e/tab-group.e2e.ts b/src/components/tab-group/tab-group.e2e.ts similarity index 65% rename from test/e2e/tab-group.e2e.ts rename to src/components/tab-group/tab-group.e2e.ts index c70368e2c..9608320b1 100644 --- a/test/e2e/tab-group.e2e.ts +++ b/src/components/tab-group/tab-group.e2e.ts @@ -1,27 +1,25 @@ import { newE2EPage } from '@stencil/core/testing'; -const testContent = ` - - General - Custom - Advanced - Disabled +const testTabGroup = ` + + General + Custom + Advanced - This is the general tab panel. - This is the custom tab panel. - This is the advanced tab panel. - This is a disabled tab panel. - + This is the general tab panel. + This is the custom tab panel. + This is the advanced tab panel. + `; -describe('tab group', () => { +describe('', () => { it('should only show first panel by default', async () => { - const page = await newE2EPage(); - await page.setContent(testContent); - + const page = await newE2EPage({ + html: testTabGroup + }); 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}]`); @@ -31,22 +29,22 @@ describe('tab group', () => { }); it('should have first tab activated by default', async () => { - const page = await newE2EPage(); - await page.setContent(testContent); - + const page = await newE2EPage({ + html: testTabGroup + }); 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 page = await newE2EPage({ + html: testTabGroup + }); 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}]`); @@ -59,25 +57,25 @@ describe('tab group', () => { }); it('should have appropriate tab activated when selected by clicking', async () => { - const page = await newE2EPage(); - await page.setContent(testContent); - + const page = await newE2EPage({ + html: testTabGroup + }); 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); - + it('should show appropriate panel when show() is called', async () => { + const page = await newE2EPage({ + html: testTabGroup + }); 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}]`); @@ -87,17 +85,16 @@ describe('tab group', () => { 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); - + it('should emit sl-tab-hide and sl-tab-show events when tab is changed', async () => { + const page = await newE2EPage({ + html: testTabGroup + }); const tabGroup = await page.find('sl-tab-group'); - const slTabHide = await tabGroup.spyOnEvent('slTabHide'); - const slTabShow = await tabGroup.spyOnEvent('slTabShow'); - + const slTabHide = await tabGroup.spyOnEvent('sl-tab-hide'); + const slTabShow = await tabGroup.spyOnEvent('sl-tab-show'); const selectedPanelName = 'advanced'; - const selectedTab = await page.find(`sl-tab[panel=${selectedPanelName}]`); + await selectedTab.click(); expect(slTabHide).toHaveReceivedEventTimes(1); @@ -106,17 +103,16 @@ describe('tab group', () => { expect(slTabShow).toHaveReceivedEventDetail({ name: 'advanced' }); }); - it('should change tab with the show method', async () => { - const page = await newE2EPage(); - await page.setContent(testContent); - + it('should change tabs when show() is called', async () => { + const page = await newE2EPage({ + html: testTabGroup + }); const tabGroup = await page.find('sl-tab-group'); - const slTabHide = await tabGroup.spyOnEvent('slTabHide'); - const slTabShow = await tabGroup.spyOnEvent('slTabShow'); - + const slTabHide = await tabGroup.spyOnEvent('sl-tab-hide'); + const slTabShow = await tabGroup.spyOnEvent('sl-tab-show'); const selectedPanelName = 'advanced'; - const selectedTab = await page.find(`sl-tab[panel=${selectedPanelName}]`); + await selectedTab.click(); expect(slTabHide).toHaveReceivedEventTimes(1); diff --git a/src/components/tag/tag.e2e.ts b/src/components/tag/tag.e2e.ts new file mode 100644 index 000000000..d6db512d4 --- /dev/null +++ b/src/components/tag/tag.e2e.ts @@ -0,0 +1,18 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should emit sl-clear when cleared', async () => { + const page = await newE2EPage({ + html: ` + Tag + ` + }); + const tag = await page.find('sl-tag'); + const tagClear = await page.find('sl-tag >>> .tag__clear'); + const slClear = await tag.spyOnEvent('sl-clear'); + + await tagClear.click(); + + expect(slClear).toHaveReceivedEventTimes(1); + }); +}); diff --git a/src/components/textarea/textarea.e2e.ts b/src/components/textarea/textarea.e2e.ts new file mode 100644 index 000000000..b422af2a0 --- /dev/null +++ b/src/components/textarea/textarea.e2e.ts @@ -0,0 +1,169 @@ +import { newE2EPage } from '@stencil/core/testing'; + +describe('', () => { + it('should emit sl-focus when gaining focus', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const textarea = await page.find('sl-textarea'); + const slFocus = await textarea.spyOnEvent('sl-focus'); + + await textarea.click(); + + expect(slFocus).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-blur when losing focus', async () => { + const page = await newE2EPage({ + html: ` + + + ` + }); + const textarea = await page.find('sl-textarea'); + const button = await page.find('button'); + const slBlur = await textarea.spyOnEvent('sl-blur'); + + await textarea.click(); + await button.click(); + + expect(slBlur).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-focus when setFocus() is called', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const textarea = await page.find('sl-textarea'); + const slFocus = await textarea.spyOnEvent('sl-focus'); + + await textarea.callMethod('setFocus'); + + expect(slFocus).toHaveReceivedEventTimes(1); + }); + + it('should emit sk-blur when removeFocus() is called', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const textarea = await page.find('sl-textarea'); + const slBlur = await textarea.spyOnEvent('sl-blur'); + + await textarea.callMethod('setFocus'); + await textarea.callMethod('removeFocus'); + + expect(slBlur).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-change when text is entered and focus is removed', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const textarea = await page.find('sl-textarea'); + const textareaControl = await page.find('sl-textarea >>> .textarea__control'); + const slChange = await textarea.spyOnEvent('sl-change'); + + await textareaControl.press('A'); + await textarea.callMethod('removeFocus'); + + expect(slChange).toHaveReceivedEventTimes(1); + }); + + it('should emit sl-textarea when text entered', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const textarea = await page.find('sl-textarea'); + const textareaControl = await page.find('sl-textarea >>> .textarea__control'); + const slInput = await textarea.spyOnEvent('sl-input'); + + await textareaControl.press('A'); + + expect(slInput).toHaveReceivedEventTimes(1); + }); + + it('should sync value when text is entered', async () => { + const page = await newE2EPage({ + html: ` + + + ` + }); + 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 is called', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const textarea = await page.find('sl-textarea'); + const textareaControl = await page.find('sl-textarea >>> .textarea__control'); + + await textareaControl.press('S'); + await textareaControl.press('h'); + await textareaControl.press('o'); + await textareaControl.press('e'); + await textarea.callMethod('select'); + + const selectedText = await page.evaluate(() => window.getSelection().toString()); + + expect(selectedText).toBe('Shoe'); + }); + + it('should select a range of text when setSelectionRange() is called', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const textarea = await page.find('sl-textarea'); + const textareaControl = await page.find('sl-textarea >>> .textarea__control'); + + await textareaControl.press('S'); + await textareaControl.press('h'); + await textareaControl.press('o'); + await textareaControl.press('e'); + await textarea.callMethod('setSelectionRange', 1, 3); + + const selectedText = await page.evaluate(() => window.getSelection().toString()); + + expect(selectedText).toBe('ho'); + }); + + it('should replace text when setRangeText() is called', async () => { + const page = await newE2EPage({ + html: ` + + ` + }); + const textarea = await page.find('sl-textarea'); + const textareaControl = await page.find('sl-textarea >>> .textarea__control'); + + await textareaControl.press('S'); + await textareaControl.press('h'); + await textareaControl.press('o'); + await textareaControl.press('e'); + await textarea.callMethod('setRangeText', 'ur', 1, 3); + + const value = await textarea.getProperty('value'); + + expect(value).toBe('Sure'); + }); +}); diff --git a/test/e2e/alert.e2e.ts b/test/e2e/alert.e2e.ts deleted file mode 100644 index 2fad7ddd6..000000000 --- a/test/e2e/alert.e2e.ts +++ /dev/null @@ -1,101 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContentStartClosed = ` - - - This is a standard alert. You can customize its content and even the icon. - -`; - -const testContentStartOpen = ` - - - This is a standard alert. You can customize its content and even the icon. -> -`; - -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); - }); -}); diff --git a/test/e2e/button.e2e.ts b/test/e2e/button.e2e.ts deleted file mode 100644 index e4f1fddc7..000000000 --- a/test/e2e/button.e2e.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContent = ` -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); - }); -}); diff --git a/test/e2e/checkbox.e2e.ts b/test/e2e/checkbox.e2e.ts deleted file mode 100644 index a4d43bd2b..000000000 --- a/test/e2e/checkbox.e2e.ts +++ /dev/null @@ -1,141 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContentUnchecked = ` -Checkbox - -`; - -const testContentChecked = ` -Checkbox - -`; - -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); - }); -}); diff --git a/test/e2e/color-picker.e2e.ts b/test/e2e/color-picker.e2e.ts deleted file mode 100644 index 52c8a07eb..000000000 --- a/test/e2e/color-picker.e2e.ts +++ /dev/null @@ -1,74 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContent = ` - -`; - -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'); - }); -}); diff --git a/test/e2e/details.e2e.ts b/test/e2e/details.e2e.ts deleted file mode 100644 index 214f2a503..000000000 --- a/test/e2e/details.e2e.ts +++ /dev/null @@ -1,135 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContentStartClosed = ` - - 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. - -`; - -const testContentStartOpen = ` - - 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. - -`; - -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); - }); -}); diff --git a/test/e2e/dialog.e2e.ts b/test/e2e/dialog.e2e.ts deleted file mode 100644 index ac3e4ab70..000000000 --- a/test/e2e/dialog.e2e.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContentStartClosed = ` - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Close - -`; - -const testContentStartOpen = ` - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Close - -`; - -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); - }); -}); diff --git a/test/e2e/drawer.e2e.ts b/test/e2e/drawer.e2e.ts deleted file mode 100644 index cd2ff21fc..000000000 --- a/test/e2e/drawer.e2e.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContentStartClosed = ` - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Close - -`; - -const testContentStartOpen = ` - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Close - -`; - -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); - }); -}); diff --git a/test/e2e/dropdown.e2e.ts b/test/e2e/dropdown.e2e.ts deleted file mode 100644 index 747f9b333..000000000 --- a/test/e2e/dropdown.e2e.ts +++ /dev/null @@ -1,158 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContentStartClosed = ` - - Dropdown - - Dropdown Item 1 - - -`; - -const testContentStartOpen = ` - - Dropdown - - Dropdown Item 1 - - -`; - -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); - }); -}); diff --git a/test/e2e/form.e2e.ts b/test/e2e/form.e2e.ts deleted file mode 100644 index d4eeff93c..000000000 --- a/test/e2e/form.e2e.ts +++ /dev/null @@ -1,90 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContent = ` - - -
- - Birds - Cats - Dogs - -
- - I totally agree - -

- Submit - -`; - -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'] - ]); - }); -}); diff --git a/test/e2e/input.e2e.ts b/test/e2e/input.e2e.ts deleted file mode 100644 index 2e8ac7e55..000000000 --- a/test/e2e/input.e2e.ts +++ /dev/null @@ -1,177 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContent = ` - - -`; - -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'); - }); -}); diff --git a/test/e2e/menu-item.e2e.ts b/test/e2e/menu-item.e2e.ts deleted file mode 100644 index 38f0c8169..000000000 --- a/test/e2e/menu-item.e2e.ts +++ /dev/null @@ -1,115 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContent = ` -Other element - - Undo - Redo - - Cut - Copy - Paste - Delete - -`; - -const testContentActive = ` -Other element - - Undo - Redo - - Cut - Copy - Paste - Delete - -`; - -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); - }); -}); diff --git a/test/e2e/menu.e2e.ts b/test/e2e/menu.e2e.ts deleted file mode 100644 index d1d947ac8..000000000 --- a/test/e2e/menu.e2e.ts +++ /dev/null @@ -1,96 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContent = ` -Other element - - Undo - Redo - - Cut - Copy - Paste - Delete - -`; - -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 - }); - }); -}); diff --git a/test/e2e/radio.e2e.ts b/test/e2e/radio.e2e.ts deleted file mode 100644 index 86126462a..000000000 --- a/test/e2e/radio.e2e.ts +++ /dev/null @@ -1,141 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContentUnchecked = ` -Radio - -`; - -const testContentChecked = ` -Radio - -`; - -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); - }); -}); diff --git a/test/e2e/range.e2e.ts b/test/e2e/range.e2e.ts deleted file mode 100644 index 952e08f39..000000000 --- a/test/e2e/range.e2e.ts +++ /dev/null @@ -1,93 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContent = ` - - -`; - -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); - }); -}); diff --git a/test/e2e/rating.e2e.ts b/test/e2e/rating.e2e.ts deleted file mode 100644 index b7aa7a488..000000000 --- a/test/e2e/rating.e2e.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContent = ` -> - -`; - -const testContentValue3 = ` -> - -`; - -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); - }); -}); diff --git a/test/e2e/select.e2e.ts b/test/e2e/select.e2e.ts deleted file mode 100644 index 4cc733abd..000000000 --- a/test/e2e/select.e2e.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContent = ` - - - Option 1 - Option 2 - Option 3 - - Option 4 - Option 5 - Option 6 - -`; - -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'); - }); -}); diff --git a/test/e2e/switch.e2e.ts b/test/e2e/switch.e2e.ts deleted file mode 100644 index 2db51ea00..000000000 --- a/test/e2e/switch.e2e.ts +++ /dev/null @@ -1,141 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContentUnchecked = ` -Switch - -`; - -const testContentChecked = ` -Switch - -`; - -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); - }); -}); diff --git a/test/e2e/tag.e2e.ts b/test/e2e/tag.e2e.ts deleted file mode 100644 index 288bf7841..000000000 --- a/test/e2e/tag.e2e.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContent = ` -Tag -`; - -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); - }); -}); diff --git a/test/e2e/textarea.e2e.ts b/test/e2e/textarea.e2e.ts deleted file mode 100644 index 6d280475d..000000000 --- a/test/e2e/textarea.e2e.ts +++ /dev/null @@ -1,161 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -const testContent = ` - - -`; - -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'); - }); -}); diff --git a/tsconfig.json b/tsconfig.json index f12734f47..cbdb8876c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,6 +13,6 @@ "jsx": "react", "jsxFactory": "h" }, - "include": ["src", "test", "types/jsx.d.ts"], + "include": ["src", "types/jsx.d.ts"], "exclude": ["node_modules", "stencil.config.ts"] }