kopia lustrzana https://github.com/shoelace-style/shoelace
Update and move tests
Cory LaViska
rodzic
262fa463f6
commit
a54ca48f35
|
|
@ -811,7 +811,7 @@ export namespace Components {
|
|||
*/
|
||||
"setFocus": () => Promise<void>;
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-alert>', () => {
|
||||
it('should open when the open attribute is set', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-alert>This is an alert</sl-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: `
|
||||
<sl-alert open>This is an alert</sl-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: `
|
||||
<sl-alert>This is an alert</sl-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: `
|
||||
<sl-alert open>This is an alert</sl-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);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-button>', () => {
|
||||
it('should emit sl-focus when gaining focus', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-button>Button</sl-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: `
|
||||
<sl-button>Button</sl-button>
|
||||
<button>Native Button</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: `
|
||||
<sl-button>Button</sl-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: `
|
||||
<sl-button>Button</sl-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);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-checkbox>', () => {
|
||||
it('should emit sl-focus when gaining focus', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-checkbox>Checkbox</sl-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: `
|
||||
<sl-checkbox>Checkbox</sl-checkbox>
|
||||
<button>Native Button</button>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-checkbox>Checkbox</sl-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: `
|
||||
<sl-checkbox>Checkbox</sl-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: `
|
||||
<sl-checkbox>Checkbox</sl-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: `
|
||||
<sl-checkbox>Checkbox</sl-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: `
|
||||
<sl-checkbox checked>Checkbox</sl-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: `
|
||||
<sl-checkbox>Checkbox</sl-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: `
|
||||
<sl-checkbox checked>Checkbox</sl-checkbox>
|
||||
<button>Native Button</button>
|
||||
`
|
||||
});
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-color-picker>', () => {
|
||||
it('should emit sl-show and sl-after-show events when opened', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-color-picker></sl-color-picker>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-color-picker></sl-color-picker>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-color-picker></sl-color-picker>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-color-picker></sl-color-picker>
|
||||
`
|
||||
});
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-details>', () => {
|
||||
it('should open and close when summary is clicked', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-details summary="Toggle Me">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</sl-details>
|
||||
`
|
||||
});
|
||||
const 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: `
|
||||
<sl-details summary="Toggle Me">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</sl-details>
|
||||
`
|
||||
});
|
||||
const 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: `
|
||||
<sl-details summary="Toggle Me">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</sl-details>
|
||||
`
|
||||
});
|
||||
const 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: `
|
||||
<sl-details summary="Toggle Me">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</sl-details>
|
||||
`
|
||||
});
|
||||
const 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: `
|
||||
<sl-details summary="Toggle Me" open>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</sl-details>
|
||||
`
|
||||
});
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-dialog>', () => {
|
||||
it('should open when the open attribute added', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-dialog>This is a dialog.</sl-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: `
|
||||
<sl-dialog open>This is a dialog.</sl-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: `
|
||||
<sl-dialog>This is a dialog.</sl-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: `
|
||||
<sl-dialog open>This is a dialog.</sl-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: `
|
||||
<sl-dialog open>This is a dialog.</sl-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);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-drawer>', () => {
|
||||
it('should open when the open attribute added', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-drawer>This is a drawer.</sl-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: `
|
||||
<sl-drawer open>This is a drawer.</sl-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: `
|
||||
<sl-drawer>This is a drawer.</sl-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: `
|
||||
<sl-drawer open>This is a drawer.</sl-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: `
|
||||
<sl-drawer open>This is a drawer.</sl-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);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,213 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-dropdown>', () => {
|
||||
it('should open when the open attribute is added', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-dropdown>
|
||||
<sl-button slot="trigger" caret>Dropdown</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item>Dropdown Item</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-dropdown open>
|
||||
<sl-button slot="trigger" caret>Dropdown</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item>Dropdown Item</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-dropdown>
|
||||
<sl-button slot="trigger" caret>Dropdown</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item>Dropdown Item</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-dropdown open>
|
||||
<sl-button slot="trigger" caret>Dropdown</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item>Dropdown Item</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
`
|
||||
});
|
||||
|
||||
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: `
|
||||
<sl-dropdown>
|
||||
<sl-button slot="trigger" caret>Dropdown</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item>Dropdown Item</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-dropdown open>
|
||||
<sl-button slot="trigger" caret>Dropdown</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item>Dropdown Item</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-dropdown open>
|
||||
<sl-button slot="trigger" caret>Dropdown</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item>Dropdown Item</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-dropdown open>
|
||||
<sl-button slot="trigger" caret>Dropdown</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item>Dropdown Item</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
`
|
||||
});
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testForm = `
|
||||
<sl-form class="form-overview">
|
||||
<sl-input name="name" type="text" label="Name" value="Mr. Meow"></sl-input>
|
||||
<br>
|
||||
<sl-select name="favorite" label="Select your favorite" value="cats">
|
||||
<sl-menu-item value="birds">Birds</sl-menu-item>
|
||||
<sl-menu-item value="cats">Cats</sl-menu-item>
|
||||
<sl-menu-item value="dogs">Dogs</sl-menu-item>
|
||||
</sl-select>
|
||||
<br>
|
||||
<sl-checkbox name="agree" value="yes" checked>
|
||||
I agree
|
||||
</sl-checkbox>
|
||||
<br><br>
|
||||
<sl-button submit>Submit</sl-button>
|
||||
</sl-form>
|
||||
`;
|
||||
|
||||
describe('<sl-form>', () => {
|
||||
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']
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-input>', () => {
|
||||
it('should emit sl-focus when gaining focus', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-input></sl-input>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-input></sl-input>
|
||||
<button>Other Element</button>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-input></sl-input>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-input></sl-input>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-input></sl-input>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-input></sl-input>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-input></sl-input>
|
||||
<button>Other Element</button>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-input clearable></sl-input>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-input></sl-input>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-input></sl-input>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-input></sl-input>
|
||||
`
|
||||
});
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
|
@ -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. */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-menu>', () => {
|
||||
it('should emit sl-select when a menu item is selected', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-menu>
|
||||
<sl-menu-item value="1">Item 1</sl-menu-item>
|
||||
<sl-menu-item value="2">Item 2</sl-menu-item>
|
||||
<sl-menu-item value="3">Item 3</sl-menu-item>
|
||||
</sl-menu>
|
||||
`
|
||||
});
|
||||
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
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-radio>', () => {
|
||||
it('should emit sl-focus when gaining focus', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-radio>Radio</sl-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: `
|
||||
<sl-radio>Radio</sl-radio>
|
||||
<button>Button</button>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-radio>Radio</sl-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: `
|
||||
<sl-radio>Radio</sl-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: `
|
||||
<sl-radio>Radio</sl-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: `
|
||||
<sl-radio>Radio</sl-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: `
|
||||
<sl-radio checked>Radio</sl-radio>
|
||||
<button>Button</button>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-radio>Radio</sl-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: `
|
||||
<sl-radio checked>Radio</sl-radio>
|
||||
<button>Button</button>
|
||||
`
|
||||
});
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-range>', () => {
|
||||
it('should emit sl-focus when gaining focus', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-range min="0" max="100" step="1"></sl-range>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-range min="0" max="100" step="1"></sl-range>
|
||||
<button>Other Element</button>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-range min="0" max="100" step="1"></sl-range>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-range min="0" max="100" step="1"></sl-range>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-range min="0" max="100" step="1"></sl-range>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-range min="0" max="100" step="1"></sl-range>
|
||||
`
|
||||
});
|
||||
const range = await page.find('sl-range');
|
||||
|
||||
await range.click();
|
||||
|
||||
expect(await range.getProperty('value')).toBe(50);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-rating>', () => {
|
||||
it('should emit sl-change when value changes with click', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-rating></sl-rating>>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-rating></sl-rating>>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-rating value="3"></sl-rating>>
|
||||
`
|
||||
});
|
||||
const rating = await page.find('sl-rating');
|
||||
|
||||
await rating.click();
|
||||
|
||||
expect(await rating.getProperty('value')).toBe(0);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-select>', () => {
|
||||
it('should emit sl-focus when gaining focus', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-select>
|
||||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="option-2">Option 2</sl-menu-item>
|
||||
<sl-menu-item value="option-3">Option 3</sl-menu-item>
|
||||
</sl-select>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<button>Other Element</button>
|
||||
<sl-select>
|
||||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="option-2">Option 2</sl-menu-item>
|
||||
<sl-menu-item value="option-3">Option 3</sl-menu-item>
|
||||
</sl-select>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-select>
|
||||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="option-2">Option 2</sl-menu-item>
|
||||
<sl-menu-item value="option-3">Option 3</sl-menu-item>
|
||||
</sl-select>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-select>
|
||||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="option-2">Option 2</sl-menu-item>
|
||||
<sl-menu-item value="option-3">Option 3</sl-menu-item>
|
||||
</sl-select>
|
||||
`
|
||||
});
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-switch>', () => {
|
||||
it('should emit sl-focus when gaining focus', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-switch>Switch</sl-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: `
|
||||
<sl-switch>Switch</sl-switch>
|
||||
<button>Native Button</button>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-switch>Switch</sl-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: `
|
||||
<sl-switch>Switch</sl-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: `
|
||||
<sl-switch>Switch</sl-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: `
|
||||
<sl-switch>Switch</sl-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: `
|
||||
<sl-switch checked>Switch</sl-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: `
|
||||
<sl-switch>Switch</sl-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: `
|
||||
<sl-switch checked>Switch</sl-switch>
|
||||
<button>Native Button</button>
|
||||
`
|
||||
});
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,27 +1,25 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContent = `
|
||||
<sl-tab-group>
|
||||
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||||
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
|
||||
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
|
||||
<sl-tab slot="nav" panel="disabled" disabled>Disabled</sl-tab>
|
||||
const testTabGroup = `
|
||||
<sl-tab-group>
|
||||
<sl-tab slot="nav" panel="general">General</sl-tab>
|
||||
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
|
||||
<sl-tab slot="nav" panel="advanced">Advanced</sl-tab>
|
||||
|
||||
<sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
|
||||
<sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
|
||||
<sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
|
||||
<sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
<sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
|
||||
<sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
|
||||
<sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
`;
|
||||
|
||||
describe('tab group', () => {
|
||||
describe('<sl-tab group>', () => {
|
||||
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);
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-tag>', () => {
|
||||
it('should emit sl-clear when cleared', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-tag clearable>Tag</sl-input>
|
||||
`
|
||||
});
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
describe('<sl-textarea>', () => {
|
||||
it('should emit sl-focus when gaining focus', async () => {
|
||||
const page = await newE2EPage({
|
||||
html: `
|
||||
<sl-textarea></sl-textarea>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-textarea></sl-textarea>
|
||||
<button>Other Element</button>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-textarea></sl-textarea>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-textarea></sl-textarea>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-textarea></sl-textarea>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-textarea></sl-textarea>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-textarea></sl-textarea>
|
||||
<button>Other Element</button>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-textarea></sl-textarea>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-textarea></sl-textarea>
|
||||
`
|
||||
});
|
||||
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: `
|
||||
<sl-textarea></sl-textarea>
|
||||
`
|
||||
});
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContentStartClosed = `
|
||||
<sl-alert>
|
||||
<sl-icon slot="icon" name="info-circle"></sl-icon>
|
||||
This is a standard alert. You can customize its content and even the icon.
|
||||
</sl-alert>
|
||||
`;
|
||||
|
||||
const testContentStartOpen = `
|
||||
<sl-alert open>
|
||||
<sl-icon slot="icon" name="info-circle"></sl-icon>
|
||||
This is a standard alert. You can customize its content and even the icon.
|
||||
</sl-alert>>
|
||||
`;
|
||||
|
||||
describe('alert', () => {
|
||||
it('should open/close with the show/hide methods', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const alert = await page.find('sl-alert');
|
||||
const alertBase = await page.find('sl-alert >>> .alert');
|
||||
|
||||
expect(await alertBase.isVisible()).toBe(false);
|
||||
|
||||
const showEventHappened = alert.waitForEvent('slAfterShow');
|
||||
await alert.callMethod('show');
|
||||
|
||||
await showEventHappened;
|
||||
|
||||
expect(await alertBase.isVisible()).toBe(true);
|
||||
|
||||
const hideEventHappened = alert.waitForEvent('slAfterHide');
|
||||
await alert.callMethod('hide');
|
||||
|
||||
await hideEventHappened;
|
||||
|
||||
expect(await alertBase.isVisible()).toBe(false);
|
||||
});
|
||||
|
||||
it('should open/close with the open attribute added/removed', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const alert = await page.find('sl-alert');
|
||||
const alertBase = await page.find('sl-alert >>> .alert');
|
||||
|
||||
expect(await alertBase.isVisible()).toBe(false);
|
||||
|
||||
const showEventHappened = alert.waitForEvent('slAfterShow');
|
||||
alert.setAttribute('open', '');
|
||||
await page.waitForChanges();
|
||||
|
||||
await showEventHappened;
|
||||
|
||||
expect(await alertBase.isVisible()).toBe(true);
|
||||
|
||||
const hideEventHappened = alert.waitForEvent('slAfterHide');
|
||||
alert.removeAttribute('open');
|
||||
await page.waitForChanges();
|
||||
|
||||
await hideEventHappened;
|
||||
|
||||
expect(await alertBase.isVisible()).toBe(false);
|
||||
});
|
||||
|
||||
it('should emit slShow and slAfterShow events when alert is opened', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const alert = await page.find('sl-alert');
|
||||
const slShow = await alert.spyOnEvent('slShow');
|
||||
const slAfterShow = await alert.spyOnEvent('slAfterShow');
|
||||
|
||||
const showEventHappened = alert.waitForEvent('slAfterShow');
|
||||
await alert.callMethod('show');
|
||||
|
||||
await showEventHappened;
|
||||
|
||||
expect(slShow).toHaveReceivedEventTimes(1);
|
||||
expect(slAfterShow).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slHide and slAfterHide events when alert is closed', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartOpen);
|
||||
|
||||
const alert = await page.find('sl-alert');
|
||||
const slHide = await alert.spyOnEvent('slHide');
|
||||
const slAfterHide = await alert.spyOnEvent('slAfterHide');
|
||||
|
||||
const hideEventHappened = alert.waitForEvent('slAfterHide');
|
||||
await alert.callMethod('hide');
|
||||
|
||||
await hideEventHappened;
|
||||
|
||||
expect(slHide).toHaveReceivedEventTimes(1);
|
||||
expect(slAfterHide).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContent = `
|
||||
<sl-button>Button</sl-button>
|
||||
<button>Other Element</button>
|
||||
`;
|
||||
|
||||
describe('button', () => {
|
||||
it('should emit slFocus when gaining focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const button = await page.find('sl-button');
|
||||
|
||||
const slFocus = await button.spyOnEvent('slFocus');
|
||||
|
||||
// give focus
|
||||
await button.click();
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur when losing focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const button = await page.find('sl-button');
|
||||
const otherElement = await page.find('button');
|
||||
|
||||
const slBlur = await button.spyOnEvent('slBlur');
|
||||
|
||||
//give focus
|
||||
await button.click();
|
||||
|
||||
// remove focus by clicking on other element
|
||||
await otherElement.click();
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slFocus on setFocus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const button = await page.find('sl-button');
|
||||
|
||||
const slFocus = await button.spyOnEvent('slFocus');
|
||||
|
||||
await button.callMethod('setFocus');
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur on removeFocus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const button = await page.find('sl-button');
|
||||
|
||||
const slBlur = await button.spyOnEvent('slBlur');
|
||||
|
||||
await button.callMethod('setFocus');
|
||||
await button.callMethod('removeFocus');
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContentUnchecked = `
|
||||
<sl-checkbox>Checkbox</sl-checkbox>
|
||||
<button>Other Element</button>
|
||||
`;
|
||||
|
||||
const testContentChecked = `
|
||||
<sl-checkbox checked>Checkbox</sl-checkbox>
|
||||
<button>Other Element</button>
|
||||
`;
|
||||
|
||||
describe('checkbox', () => {
|
||||
it('should emit slFocus when gaining focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const checkbox = await page.find('sl-checkbox');
|
||||
|
||||
const slFocus = await checkbox.spyOnEvent('slFocus');
|
||||
|
||||
// give focus
|
||||
await checkbox.click();
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur when losing focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const checkbox = await page.find('sl-checkbox');
|
||||
const otherElement = await page.find('button');
|
||||
|
||||
const slBlur = await checkbox.spyOnEvent('slBlur');
|
||||
|
||||
//give focus
|
||||
await checkbox.click();
|
||||
|
||||
// remove focus by clicking on other element
|
||||
await otherElement.click();
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slFocus on setFocus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const checkbox = await page.find('sl-checkbox');
|
||||
|
||||
const slFocus = await checkbox.spyOnEvent('slFocus');
|
||||
|
||||
await checkbox.callMethod('setFocus');
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur on removeFocus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const checkbox = await page.find('sl-checkbox');
|
||||
|
||||
const slBlur = await checkbox.spyOnEvent('slBlur');
|
||||
|
||||
await checkbox.callMethod('setFocus');
|
||||
await checkbox.callMethod('removeFocus');
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when state changes with click', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const checkbox = await page.find('sl-checkbox');
|
||||
|
||||
const slChange = await checkbox.spyOnEvent('slChange');
|
||||
|
||||
await checkbox.click();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when state changes when checked attribute set', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const checkbox = await page.find('sl-checkbox');
|
||||
|
||||
const slChange = await checkbox.spyOnEvent('slChange');
|
||||
|
||||
checkbox.setAttribute('checked', '');
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when state changes when checked attribute removed', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentChecked);
|
||||
|
||||
const checkbox = await page.find('sl-checkbox');
|
||||
|
||||
const slChange = await checkbox.spyOnEvent('slChange');
|
||||
|
||||
checkbox.removeAttribute('checked');
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when state changes when checked property set to true', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const checkbox = await page.find('sl-checkbox');
|
||||
|
||||
const slChange = await checkbox.spyOnEvent('slChange');
|
||||
|
||||
checkbox.setProperty('checked', true);
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when state changes when checked property set to false', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentChecked);
|
||||
|
||||
const checkbox = await page.find('sl-checkbox');
|
||||
|
||||
const slChange = await checkbox.spyOnEvent('slChange');
|
||||
|
||||
checkbox.setProperty('checked', false);
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContent = `
|
||||
<sl-color-picker></sl-color-picker>
|
||||
`;
|
||||
|
||||
describe('color-picker', () => {
|
||||
it('should emit slShow and slAfterShow events when opened', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const colorPicker = await page.find('sl-color-picker');
|
||||
const slShow = await colorPicker.spyOnEvent('slShow');
|
||||
const slAfterShow = await colorPicker.spyOnEvent('slAfterShow');
|
||||
|
||||
const eventHappened = colorPicker.waitForEvent('slAfterShow');
|
||||
await colorPicker.click();
|
||||
|
||||
await eventHappened;
|
||||
|
||||
expect(slShow).toHaveReceivedEventTimes(1);
|
||||
expect(slAfterShow).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slHide and slAfterHide events when color-picker is closed', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const colorPicker = await page.find('sl-color-picker');
|
||||
const slHide = await colorPicker.spyOnEvent('slHide');
|
||||
const slAfterHide = await colorPicker.spyOnEvent('slAfterHide');
|
||||
|
||||
const eventHappened = colorPicker.waitForEvent('slAfterHide');
|
||||
await colorPicker.click();
|
||||
await colorPicker.click();
|
||||
|
||||
await eventHappened;
|
||||
|
||||
expect(slHide).toHaveReceivedEventTimes(1);
|
||||
expect(slAfterHide).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when value changes with click', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const colorPicker = await page.find('sl-color-picker');
|
||||
const colorPickerPicker = await page.find('sl-color-picker >>> .color-picker');
|
||||
|
||||
const slChange = await colorPicker.spyOnEvent('slChange');
|
||||
|
||||
await colorPicker.click();
|
||||
// click in center of picker
|
||||
await colorPickerPicker.click();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should change value when changed with click', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const colorPicker = await page.find('sl-color-picker');
|
||||
const colorPickerPicker = await page.find('sl-color-picker >>> .color-picker');
|
||||
|
||||
expect(await colorPicker.getProperty('value')).toBe('#ffffff');
|
||||
|
||||
await colorPicker.click();
|
||||
// click in center of picker
|
||||
await colorPickerPicker.click();
|
||||
|
||||
expect(await colorPicker.getProperty('value')).not.toBe('#ffffff');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContentStartClosed = `
|
||||
<sl-details summary="Toggle Me">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</sl-details>
|
||||
`;
|
||||
|
||||
const testContentStartOpen = `
|
||||
<sl-details summary="Toggle Me" open>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</sl-details>
|
||||
`;
|
||||
|
||||
describe('details', () => {
|
||||
it('should open/close when summary clicked', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const details = await page.find('sl-details');
|
||||
const detailsHeader = await page.find('sl-details >>> header');
|
||||
const detailsBase = await page.find('sl-details >>> .details__body');
|
||||
|
||||
let style = await detailsBase.getComputedStyle();
|
||||
expect(style.height).toBe('0px');
|
||||
|
||||
const showEventHappened = details.waitForEvent('slAfterShow');
|
||||
await detailsHeader.click();
|
||||
|
||||
await showEventHappened;
|
||||
|
||||
style = await detailsBase.getComputedStyle();
|
||||
expect(style.height).not.toBe('0px');
|
||||
|
||||
const hideEventHappened = details.waitForEvent('slAfterHide');
|
||||
await detailsHeader.click();
|
||||
|
||||
await hideEventHappened;
|
||||
|
||||
style = await detailsBase.getComputedStyle();
|
||||
expect(style.height).toBe('0px');
|
||||
});
|
||||
|
||||
it('should open/close with the show/hide methods', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const details = await page.find('sl-details');
|
||||
const detailsBase = await page.find('sl-details >>> .details__body');
|
||||
|
||||
let style = await detailsBase.getComputedStyle();
|
||||
expect(style.height).toBe('0px');
|
||||
|
||||
const showEventHappened = details.waitForEvent('slAfterShow');
|
||||
await details.callMethod('show');
|
||||
|
||||
await showEventHappened;
|
||||
|
||||
style = await detailsBase.getComputedStyle();
|
||||
expect(style.height).not.toBe('0px');
|
||||
|
||||
const hideEventHappened = details.waitForEvent('slAfterHide');
|
||||
await details.callMethod('hide');
|
||||
|
||||
await hideEventHappened;
|
||||
|
||||
style = await detailsBase.getComputedStyle();
|
||||
expect(style.height).toBe('0px');
|
||||
});
|
||||
|
||||
it('should open/close with the open attribute added/removed', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const details = await page.find('sl-details');
|
||||
const detailsBase = await page.find('sl-details >>> .details__body');
|
||||
|
||||
let style = await detailsBase.getComputedStyle();
|
||||
expect(style.height).toBe('0px');
|
||||
|
||||
const showEventHappened = details.waitForEvent('slAfterShow');
|
||||
details.setAttribute('open', '');
|
||||
await page.waitForChanges();
|
||||
|
||||
await showEventHappened;
|
||||
|
||||
style = await detailsBase.getComputedStyle();
|
||||
expect(style.height).not.toBe('0px');
|
||||
|
||||
const hideEventHappened = details.waitForEvent('slAfterHide');
|
||||
details.removeAttribute('open');
|
||||
await page.waitForChanges();
|
||||
|
||||
await hideEventHappened;
|
||||
|
||||
style = await detailsBase.getComputedStyle();
|
||||
expect(style.height).toBe('0px');
|
||||
});
|
||||
|
||||
it('should emit slShow and slAfterShow events when opened', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const details = await page.find('sl-details');
|
||||
const slShow = await details.spyOnEvent('slShow');
|
||||
const slAfterShow = await details.spyOnEvent('slAfterShow');
|
||||
|
||||
const showEventHappened = details.waitForEvent('slAfterShow');
|
||||
await details.callMethod('show');
|
||||
|
||||
await showEventHappened;
|
||||
|
||||
expect(slShow).toHaveReceivedEventTimes(1);
|
||||
expect(slAfterShow).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slHide and slAfterHide events when details is closed', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartOpen);
|
||||
|
||||
const details = await page.find('sl-details');
|
||||
const slHide = await details.spyOnEvent('slHide');
|
||||
const slAfterHide = await details.spyOnEvent('slAfterHide');
|
||||
|
||||
const hideEventHappened = details.waitForEvent('slAfterHide');
|
||||
await details.callMethod('hide');
|
||||
|
||||
await hideEventHappened;
|
||||
|
||||
expect(slHide).toHaveReceivedEventTimes(1);
|
||||
expect(slAfterHide).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContentStartClosed = `
|
||||
<sl-dialog label="Dialog" class="dialog-overview">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<sl-button slot="footer" type="primary">Close</sl-button>
|
||||
</sl-dialog>
|
||||
`;
|
||||
|
||||
const testContentStartOpen = `
|
||||
<sl-dialog label="Dialog" class="dialog-overview" open>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<sl-button slot="footer" type="primary">Close</sl-button>
|
||||
</sl-dialog>
|
||||
`;
|
||||
|
||||
describe('dialog', () => {
|
||||
it('should open/close with the show/hide methods', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const dialog = await page.find('sl-dialog');
|
||||
const dialogBase = await page.find('sl-dialog >>> .dialog');
|
||||
|
||||
expect(await dialogBase.isVisible()).toBe(false);
|
||||
|
||||
const showEventHappened = dialog.waitForEvent('slAfterShow');
|
||||
await dialog.callMethod('show');
|
||||
|
||||
await showEventHappened;
|
||||
|
||||
expect(await dialogBase.isVisible()).toBe(true);
|
||||
|
||||
const hideEventHappened = dialog.waitForEvent('slAfterHide');
|
||||
await dialog.callMethod('hide');
|
||||
|
||||
await hideEventHappened;
|
||||
|
||||
expect(await dialogBase.isVisible()).toBe(false);
|
||||
});
|
||||
|
||||
it('should open/close with the open attribute added/removed', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const dialog = await page.find('sl-dialog');
|
||||
const dialogBase = await page.find('sl-dialog >>> .dialog');
|
||||
|
||||
expect(await dialogBase.isVisible()).toBe(false);
|
||||
|
||||
const showEventHappened = dialog.waitForEvent('slAfterShow');
|
||||
dialog.setAttribute('open', '');
|
||||
await page.waitForChanges();
|
||||
|
||||
await showEventHappened;
|
||||
|
||||
expect(await dialogBase.isVisible()).toBe(true);
|
||||
|
||||
const hideEventHappened = dialog.waitForEvent('slAfterHide');
|
||||
dialog.removeAttribute('open');
|
||||
await page.waitForChanges();
|
||||
|
||||
await hideEventHappened;
|
||||
|
||||
expect(await dialogBase.isVisible()).toBe(false);
|
||||
});
|
||||
|
||||
it('should emit slShow and slAfterShow events when dialog is opened', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const dialog = await page.find('sl-dialog');
|
||||
const slShow = await dialog.spyOnEvent('slShow');
|
||||
const slAfterShow = await dialog.spyOnEvent('slAfterShow');
|
||||
|
||||
const showEventHappened = dialog.waitForEvent('slAfterShow');
|
||||
await dialog.callMethod('show');
|
||||
|
||||
await showEventHappened;
|
||||
|
||||
expect(slShow).toHaveReceivedEventTimes(1);
|
||||
expect(slAfterShow).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slHide and slAfterHide events when dialog is closed', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartOpen);
|
||||
|
||||
const dialog = await page.find('sl-dialog');
|
||||
const slHide = await dialog.spyOnEvent('slHide');
|
||||
const slAfterHide = await dialog.spyOnEvent('slAfterHide');
|
||||
|
||||
const hideEventHappened = dialog.waitForEvent('slAfterHide');
|
||||
await dialog.callMethod('hide');
|
||||
|
||||
await hideEventHappened;
|
||||
|
||||
expect(slHide).toHaveReceivedEventTimes(1);
|
||||
expect(slAfterHide).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit the slOverlayDismiss event when overlay is clicked', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartOpen);
|
||||
|
||||
const dialog = await page.find('sl-dialog');
|
||||
const slOverlayDismiss = await dialog.spyOnEvent('slOverlayDismiss');
|
||||
|
||||
// can't use click method on overlay element since is always clicks in
|
||||
// the middle of an element which in this case will be behind the panel
|
||||
await page.mouse.click(0, 0);
|
||||
await page.waitForChanges();
|
||||
expect(slOverlayDismiss).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContentStartClosed = `
|
||||
<sl-drawer label="Drawer" class="drawer-overview">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<sl-button slot="footer" type="primary">Close</sl-button>
|
||||
</sl-drawer>
|
||||
`;
|
||||
|
||||
const testContentStartOpen = `
|
||||
<sl-drawer label="Drawer" class="drawer-overview" open>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<sl-button slot="footer" type="primary">Close</sl-button>
|
||||
</sl-drawer>
|
||||
`;
|
||||
|
||||
describe('drawer', () => {
|
||||
it('should open/close with the show/hide methods', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const drawer = await page.find('sl-drawer');
|
||||
const drawerBase = await page.find('sl-drawer >>> .drawer');
|
||||
|
||||
expect(await drawerBase.isVisible()).toBe(false);
|
||||
|
||||
const showEventHappened = drawer.waitForEvent('slAfterShow');
|
||||
await drawer.callMethod('show');
|
||||
|
||||
await showEventHappened;
|
||||
|
||||
expect(await drawerBase.isVisible()).toBe(true);
|
||||
|
||||
const hideEventHappened = drawer.waitForEvent('slAfterHide');
|
||||
await drawer.callMethod('hide');
|
||||
|
||||
await hideEventHappened;
|
||||
|
||||
expect(await drawerBase.isVisible()).toBe(false);
|
||||
});
|
||||
|
||||
it('should open/close with the open attribute added/removed', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const drawer = await page.find('sl-drawer');
|
||||
const drawerBase = await page.find('sl-drawer >>> .drawer');
|
||||
|
||||
expect(await drawerBase.isVisible()).toBe(false);
|
||||
|
||||
const showEventHappened = drawer.waitForEvent('slAfterShow');
|
||||
drawer.setAttribute('open', '');
|
||||
await page.waitForChanges();
|
||||
|
||||
await showEventHappened;
|
||||
|
||||
expect(await drawerBase.isVisible()).toBe(true);
|
||||
|
||||
const hideEventHappened = drawer.waitForEvent('slAfterHide');
|
||||
drawer.removeAttribute('open');
|
||||
await page.waitForChanges();
|
||||
|
||||
await hideEventHappened;
|
||||
|
||||
expect(await drawerBase.isVisible()).toBe(false);
|
||||
});
|
||||
|
||||
it('should emit slShow and slAfterShow events when drawer is opened', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const drawer = await page.find('sl-drawer');
|
||||
const slShow = await drawer.spyOnEvent('slShow');
|
||||
const slAfterShow = await drawer.spyOnEvent('slAfterShow');
|
||||
|
||||
const showEventHappened = drawer.waitForEvent('slAfterShow');
|
||||
await drawer.callMethod('show');
|
||||
|
||||
await showEventHappened;
|
||||
|
||||
expect(slShow).toHaveReceivedEventTimes(1);
|
||||
expect(slAfterShow).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slHide and slAfterHide events when drawer is closed', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartOpen);
|
||||
|
||||
const drawer = await page.find('sl-drawer');
|
||||
const slHide = await drawer.spyOnEvent('slHide');
|
||||
const slAfterHide = await drawer.spyOnEvent('slAfterHide');
|
||||
|
||||
const hideEventHappened = drawer.waitForEvent('slAfterHide');
|
||||
await drawer.callMethod('hide');
|
||||
|
||||
await hideEventHappened;
|
||||
|
||||
expect(slHide).toHaveReceivedEventTimes(1);
|
||||
expect(slAfterHide).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit the slOverlayDismiss event when overlay is clicked', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartOpen);
|
||||
|
||||
const drawer = await page.find('sl-drawer');
|
||||
const slOverlayDismiss = await drawer.spyOnEvent('slOverlayDismiss');
|
||||
|
||||
// can't use click method on overlay element since is always clicks in
|
||||
// the middle of an element which in this case will be behind the panel
|
||||
await page.mouse.click(0, 0);
|
||||
await page.waitForChanges();
|
||||
expect(slOverlayDismiss).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,158 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContentStartClosed = `
|
||||
<sl-dropdown>
|
||||
<sl-button slot="trigger" caret>Dropdown</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item>Dropdown Item 1</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
`;
|
||||
|
||||
const testContentStartOpen = `
|
||||
<sl-dropdown open>
|
||||
<sl-button slot="trigger" caret>Dropdown</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item>Dropdown Item 1</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
`;
|
||||
|
||||
describe('dropdown', () => {
|
||||
it('should open/close when clicked', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const dropdown = await page.find('sl-dropdown');
|
||||
const dropdownPanel = await page.find('sl-dropdown >>> .dropdown__panel');
|
||||
|
||||
expect(await dropdownPanel.isVisible()).toBe(false);
|
||||
|
||||
const showEventHappened = dropdown.waitForEvent('slAfterShow');
|
||||
await dropdown.click();
|
||||
await showEventHappened;
|
||||
|
||||
expect(await dropdownPanel.isVisible()).toBe(true);
|
||||
|
||||
const afterEventHappened = dropdown.waitForEvent('slAfterHide');
|
||||
await dropdown.click();
|
||||
await afterEventHappened;
|
||||
|
||||
expect(await dropdownPanel.isVisible()).toBe(false);
|
||||
});
|
||||
|
||||
it('should open/close with the show/hide methods', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const dropdown = await page.find('sl-dropdown');
|
||||
const dropdownPanel = await page.find('sl-dropdown >>> .dropdown__panel');
|
||||
|
||||
expect(await dropdownPanel.isVisible()).toBe(false);
|
||||
|
||||
const showEventHappened = dropdown.waitForEvent('slAfterShow');
|
||||
await dropdown.callMethod('show');
|
||||
await showEventHappened;
|
||||
|
||||
expect(await dropdownPanel.isVisible()).toBe(true);
|
||||
|
||||
const hideEventHappened = dropdown.waitForEvent('slAfterHide');
|
||||
await dropdown.callMethod('hide');
|
||||
await hideEventHappened;
|
||||
|
||||
expect(await dropdownPanel.isVisible()).toBe(false);
|
||||
});
|
||||
|
||||
it('should open/close with the open attribute added/removed', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const dropdown = await page.find('sl-dropdown');
|
||||
const dropdownPanel = await page.find('sl-dropdown >>> .dropdown__panel');
|
||||
|
||||
expect(await dropdownPanel.isVisible()).toBe(false);
|
||||
|
||||
const showEventHappened = dropdown.waitForEvent('slAfterShow');
|
||||
dropdown.setAttribute('open', '');
|
||||
await page.waitForChanges();
|
||||
await showEventHappened;
|
||||
|
||||
expect(await dropdownPanel.isVisible()).toBe(true);
|
||||
|
||||
const hideEventHappened = dropdown.waitForEvent('slAfterHide');
|
||||
dropdown.removeAttribute('open');
|
||||
await page.waitForChanges();
|
||||
await hideEventHappened;
|
||||
|
||||
expect(await dropdownPanel.isVisible()).toBe(false);
|
||||
});
|
||||
|
||||
it('should emit slShow and slAfterShow events when opened', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartClosed);
|
||||
|
||||
const dropdown = await page.find('sl-dropdown');
|
||||
const slShow = await dropdown.spyOnEvent('slShow');
|
||||
const slAfterShow = await dropdown.spyOnEvent('slAfterShow');
|
||||
|
||||
const eventHappened = dropdown.waitForEvent('slAfterShow');
|
||||
await dropdown.callMethod('show');
|
||||
|
||||
await eventHappened;
|
||||
|
||||
expect(slShow).toHaveReceivedEventTimes(1);
|
||||
expect(slAfterShow).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slHide and slAfterHide events when dropdown is closed', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartOpen);
|
||||
await page.waitForChanges();
|
||||
|
||||
const dropdown = await page.find('sl-dropdown');
|
||||
const slHide = await dropdown.spyOnEvent('slHide');
|
||||
const slAfterHide = await dropdown.spyOnEvent('slAfterHide');
|
||||
|
||||
const eventHappened = dropdown.waitForEvent('slAfterHide');
|
||||
await dropdown.callMethod('hide');
|
||||
|
||||
await eventHappened;
|
||||
|
||||
expect(slHide).toHaveReceivedEventTimes(1);
|
||||
expect(slAfterHide).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should close on item select', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartOpen);
|
||||
|
||||
const dropdown = await page.find('sl-dropdown');
|
||||
const dropdownPanel = await page.find('sl-dropdown >>> .dropdown__panel');
|
||||
|
||||
expect(await dropdownPanel.isVisible()).toBe(true);
|
||||
|
||||
const eventHappened = dropdown.waitForEvent('slAfterHide');
|
||||
await dropdownPanel.click();
|
||||
|
||||
await eventHappened;
|
||||
|
||||
expect(await dropdownPanel.isVisible()).toBe(false);
|
||||
});
|
||||
|
||||
it('should not close on item select when closeOnSelect === true', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentStartOpen);
|
||||
|
||||
const dropdown = await page.find('sl-dropdown');
|
||||
const dropdownPanel = await page.find('sl-dropdown >>> .dropdown__panel');
|
||||
|
||||
dropdown.setProperty('closeOnSelect', false);
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(await dropdownPanel.isVisible()).toBe(true);
|
||||
|
||||
await dropdownPanel.click();
|
||||
|
||||
expect(await dropdownPanel.isVisible()).toBe(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContent = `
|
||||
<sl-form class="form-overview">
|
||||
<sl-input name="name" type="text" label="Name" value="Ada"></sl-input>
|
||||
<br>
|
||||
<sl-select name="favorite" label="Select your favorite" value="dogs">
|
||||
<sl-menu-item value="birds">Birds</sl-menu-item>
|
||||
<sl-menu-item value="cats">Cats</sl-menu-item>
|
||||
<sl-menu-item value="dogs">Dogs</sl-menu-item>
|
||||
</sl-select>
|
||||
<br>
|
||||
<sl-checkbox name="agree" value="yes" checked>
|
||||
I totally agree
|
||||
</sl-checkbox>
|
||||
<br><br>
|
||||
<sl-button submit>Submit</sl-button>
|
||||
</sl-form>
|
||||
`;
|
||||
|
||||
describe('button', () => {
|
||||
it('should emit slSubmit when submit button clicked', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const form = await page.find('sl-form');
|
||||
const button = await page.find('sl-button');
|
||||
|
||||
const slSubmit = await form.spyOnEvent('slSubmit');
|
||||
|
||||
await button.click();
|
||||
|
||||
expect(slSubmit).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slSubmit when submit method called', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const form = await page.find('sl-form');
|
||||
|
||||
const slSubmit = await form.spyOnEvent('slSubmit');
|
||||
|
||||
await form.callMethod('submit');
|
||||
|
||||
expect(slSubmit).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slSubmit when enter pressed in input', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const form = await page.find('sl-form');
|
||||
const inputControl = await page.find('sl-input >>> .input__control');
|
||||
|
||||
const slSubmit = await form.spyOnEvent('slSubmit');
|
||||
|
||||
await inputControl.press('Enter');
|
||||
|
||||
expect(slSubmit).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should return array of form elements when getFormControls called', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const form = await page.find('sl-form');
|
||||
const inputEl = await page.$eval('sl-input', el => el);
|
||||
const selectEl = await page.$eval('sl-select', el => el);
|
||||
const checkboxEl = await page.$eval('sl-checkbox', el => el);
|
||||
const buttonEl = await page.$eval('sl-button', el => el);
|
||||
|
||||
const formControls = await form.callMethod('getFormControls');
|
||||
|
||||
expect(formControls).toEqual([inputEl, selectEl, checkboxEl, buttonEl]);
|
||||
});
|
||||
|
||||
it('should return FormData object when getFormData called', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const formData = await page.$eval('sl-form', async el => [...(await el.getFormData()).entries()]);
|
||||
|
||||
expect(formData).toEqual([
|
||||
['name', 'Ada'],
|
||||
['favorite', 'dogs'],
|
||||
['agree', 'yes']
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,177 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContent = `
|
||||
<sl-input clearable></sl-input>
|
||||
<button>Other Element</button>
|
||||
`;
|
||||
|
||||
describe('input', () => {
|
||||
it('should emit slFocus when gaining focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const input = await page.find('sl-input');
|
||||
|
||||
const slFocus = await input.spyOnEvent('slFocus');
|
||||
|
||||
// give focus
|
||||
await input.click();
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur when losing focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const input = await page.find('sl-input');
|
||||
const otherElement = await page.find('button');
|
||||
|
||||
const slBlur = await input.spyOnEvent('slBlur');
|
||||
|
||||
//give focus
|
||||
await input.click();
|
||||
|
||||
// remove focus by clicking on other element
|
||||
await otherElement.click();
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slFocus on setFocus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const input = await page.find('sl-input');
|
||||
|
||||
const slFocus = await input.spyOnEvent('slFocus');
|
||||
|
||||
await input.callMethod('setFocus');
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur on removeFocus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const input = await page.find('sl-input');
|
||||
|
||||
const slBlur = await input.spyOnEvent('slBlur');
|
||||
|
||||
await input.callMethod('setFocus');
|
||||
await input.callMethod('removeFocus');
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when text entered and focus removed', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const input = await page.find('sl-input');
|
||||
const inputControl = await page.find('sl-input >>> .input__control');
|
||||
|
||||
const slChange = await input.spyOnEvent('slChange');
|
||||
|
||||
await inputControl.press('A');
|
||||
await input.callMethod('removeFocus');
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slInput when text entered', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const input = await page.find('sl-input');
|
||||
const inputControl = await page.find('sl-input >>> .input__control');
|
||||
|
||||
const slInput = await input.spyOnEvent('slInput');
|
||||
|
||||
await inputControl.press('A');
|
||||
|
||||
expect(slInput).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should change value when text entered', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const input = await page.find('sl-input');
|
||||
const inputControl = await page.find('sl-input >>> .input__control');
|
||||
|
||||
await inputControl.press('A');
|
||||
|
||||
expect(await input.getProperty('value')).toBe('A');
|
||||
});
|
||||
|
||||
it('should emit slClear when cleared', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const input = await page.find('sl-input');
|
||||
const inputControl = await page.find('sl-input >>> .input__control');
|
||||
const inputClear = await page.find('sl-input >>> .input__clear');
|
||||
|
||||
const slClear = await input.spyOnEvent('slClear');
|
||||
|
||||
await inputControl.press('A');
|
||||
await inputClear.click();
|
||||
|
||||
expect(slClear).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should select all text when select method called', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const input = await page.find('sl-input');
|
||||
const inputControl = await page.find('sl-input >>> .input__control');
|
||||
|
||||
await inputControl.press('A');
|
||||
await inputControl.press('d');
|
||||
await inputControl.press('a');
|
||||
|
||||
await input.callMethod('select');
|
||||
|
||||
const selectedText = await page.evaluate(() => window.getSelection().toString());
|
||||
|
||||
expect(selectedText).toBe('Ada');
|
||||
});
|
||||
|
||||
it('should select range of text when setSelectionRange method called', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const input = await page.find('sl-input');
|
||||
const inputControl = await page.find('sl-input >>> .input__control');
|
||||
|
||||
await inputControl.press('A');
|
||||
await inputControl.press('d');
|
||||
await inputControl.press('a');
|
||||
|
||||
await input.callMethod('setSelectionRange', 1, 2);
|
||||
|
||||
const selectedText = await page.evaluate(() => window.getSelection().toString());
|
||||
|
||||
expect(selectedText).toBe('d');
|
||||
});
|
||||
|
||||
it('should replace text when setRangeText method called', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const input = await page.find('sl-input');
|
||||
const inputControl = await page.find('sl-input >>> .input__control');
|
||||
|
||||
await inputControl.press('A');
|
||||
await inputControl.press('d');
|
||||
await inputControl.press('a');
|
||||
|
||||
await input.callMethod('setRangeText', 'bb', 1, 2);
|
||||
const value = await input.getProperty('value');
|
||||
|
||||
expect(value).toBe('Abba');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContent = `
|
||||
<sl-button>Other element</sl-button>
|
||||
<sl-menu
|
||||
style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
|
||||
>
|
||||
<sl-menu-item value="undo">Undo</sl-menu-item>
|
||||
<sl-menu-item value="redo">Redo</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-menu-item value="cut">Cut</sl-menu-item>
|
||||
<sl-menu-item value="copy">Copy</sl-menu-item>
|
||||
<sl-menu-item value="paste">Paste</sl-menu-item>
|
||||
<sl-menu-item value="delete">Delete</sl-menu-item>
|
||||
</sl-menu>
|
||||
`;
|
||||
|
||||
const testContentActive = `
|
||||
<sl-button>Other element</sl-button>
|
||||
<sl-menu
|
||||
style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
|
||||
>
|
||||
<sl-menu-item value="undo" active>Undo</sl-menu-item>
|
||||
<sl-menu-item value="redo">Redo</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-menu-item value="cut">Cut</sl-menu-item>
|
||||
<sl-menu-item value="copy">Copy</sl-menu-item>
|
||||
<sl-menu-item value="paste">Paste</sl-menu-item>
|
||||
<sl-menu-item value="delete">Delete</sl-menu-item>
|
||||
</sl-menu>
|
||||
`;
|
||||
|
||||
describe('menuItem', () => {
|
||||
it('should become active when active property set to true', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const menuItem = await page.find('sl-menu-item');
|
||||
const menuItemItem = await page.find('sl-menu-item >>> .menu-item');
|
||||
|
||||
expect(menuItemItem).not.toHaveClass('menu-item--active');
|
||||
|
||||
menuItem.setProperty('active', true);
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(menuItemItem).toHaveClass('menu-item--active');
|
||||
});
|
||||
|
||||
it('should become inactive when active property set to false', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentActive);
|
||||
|
||||
const menuItem = await page.find('sl-menu-item');
|
||||
const menuItemItem = await page.find('sl-menu-item >>> .menu-item');
|
||||
|
||||
expect(menuItemItem).toHaveClass('menu-item--active');
|
||||
|
||||
menuItem.setProperty('active', false);
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(menuItemItem).not.toHaveClass('menu-item--active');
|
||||
});
|
||||
|
||||
it('should emit slActivate event when active property set to true', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const menuItem = await page.find('sl-menu-item');
|
||||
const slActivate = await menuItem.spyOnEvent('slActivate');
|
||||
|
||||
menuItem.setProperty('active', true);
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(slActivate).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slDeactivate event when active property set to false', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentActive);
|
||||
|
||||
const menuItem = await page.find('sl-menu-item');
|
||||
const slDeactivate = await menuItem.spyOnEvent('slDeactivate');
|
||||
|
||||
menuItem.setProperty('active', false);
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(slDeactivate).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slActivate event when hovered', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const menuItem = await page.find('sl-menu-item');
|
||||
const slActivate = await menuItem.spyOnEvent('slActivate');
|
||||
|
||||
await menuItem.hover();
|
||||
|
||||
expect(slActivate).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slDeactivate event when no longer hovered', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const menuItem = await page.find('sl-menu-item');
|
||||
const secondMenuItem = await page.find('sl-menu-item:nth-child(2)');
|
||||
const slDeactivate = await menuItem.spyOnEvent('slDeactivate');
|
||||
|
||||
await menuItem.hover();
|
||||
await secondMenuItem.hover();
|
||||
|
||||
expect(slDeactivate).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContent = `
|
||||
<sl-button>Other element</sl-button>
|
||||
<sl-menu
|
||||
style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
|
||||
>
|
||||
<sl-menu-item value="undo">Undo</sl-menu-item>
|
||||
<sl-menu-item value="redo">Redo</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-menu-item value="cut">Cut</sl-menu-item>
|
||||
<sl-menu-item value="copy">Copy</sl-menu-item>
|
||||
<sl-menu-item value="paste">Paste</sl-menu-item>
|
||||
<sl-menu-item value="delete">Delete</sl-menu-item>
|
||||
</sl-menu>
|
||||
`;
|
||||
|
||||
describe('menu', () => {
|
||||
it('should emit slFocus when gaining focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const menu = await page.find('sl-menu');
|
||||
const button = await page.find('sl-button');
|
||||
|
||||
const slFocus = await menu.spyOnEvent('slFocus');
|
||||
|
||||
// give focus to button
|
||||
await button.click();
|
||||
// tab to menu
|
||||
await button.press('Tab');
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur when losing focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const menu = await page.find('sl-menu');
|
||||
|
||||
const slBlur = await menu.spyOnEvent('slBlur');
|
||||
|
||||
//give focus
|
||||
await menu.callMethod('setFocus');
|
||||
// remove focus by tabbing to other element
|
||||
await menu.press('Tab');
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slFocus on setFocus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const menu = await page.find('sl-menu');
|
||||
|
||||
const slFocus = await menu.spyOnEvent('slFocus');
|
||||
|
||||
await menu.callMethod('setFocus');
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur on removeFocus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const menu = await page.find('sl-menu');
|
||||
|
||||
const slBlur = await menu.spyOnEvent('slBlur');
|
||||
|
||||
await menu.callMethod('setFocus');
|
||||
await menu.callMethod('removeFocus');
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slSelect when menu item selected', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const menu = await page.find('sl-menu');
|
||||
const menuItem = await page.find('sl-menu-item');
|
||||
const menuItemEl = await page.$eval('sl-menu-item', el => el);
|
||||
|
||||
const slSelect = await menu.spyOnEvent('slSelect');
|
||||
|
||||
await menuItem.click();
|
||||
|
||||
expect(slSelect).toHaveReceivedEventTimes(1);
|
||||
expect(slSelect).toHaveReceivedEventDetail({
|
||||
item: menuItemEl
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContentUnchecked = `
|
||||
<sl-radio>Radio</sl-radio>
|
||||
<button>Other Element</button>
|
||||
`;
|
||||
|
||||
const testContentChecked = `
|
||||
<sl-radio checked>Radio</sl-radio>
|
||||
<button>Other Element</button>
|
||||
`;
|
||||
|
||||
describe('radio', () => {
|
||||
it('should emit slFocus when gaining focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const radio = await page.find('sl-radio');
|
||||
|
||||
const slFocus = await radio.spyOnEvent('slFocus');
|
||||
|
||||
// give focus
|
||||
await radio.click();
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur when losing focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const radio = await page.find('sl-radio');
|
||||
const otherElement = await page.find('button');
|
||||
|
||||
const slBlur = await radio.spyOnEvent('slBlur');
|
||||
|
||||
//give focus
|
||||
await radio.click();
|
||||
|
||||
// remove focus by clicking on other element
|
||||
await otherElement.click();
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slFocus on setFocus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const radio = await page.find('sl-radio');
|
||||
|
||||
const slFocus = await radio.spyOnEvent('slFocus');
|
||||
|
||||
await radio.callMethod('setFocus');
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur on removeFocus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const radio = await page.find('sl-radio');
|
||||
|
||||
const slBlur = await radio.spyOnEvent('slBlur');
|
||||
|
||||
await radio.callMethod('setFocus');
|
||||
await radio.callMethod('removeFocus');
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when state changes with click', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const radio = await page.find('sl-radio');
|
||||
|
||||
const slChange = await radio.spyOnEvent('slChange');
|
||||
|
||||
await radio.click();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when state changes when checked attribute set', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const radio = await page.find('sl-radio');
|
||||
|
||||
const slChange = await radio.spyOnEvent('slChange');
|
||||
|
||||
radio.setAttribute('checked', '');
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when state changes when checked attribute removed', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentChecked);
|
||||
|
||||
const radio = await page.find('sl-radio');
|
||||
|
||||
const slChange = await radio.spyOnEvent('slChange');
|
||||
|
||||
radio.removeAttribute('checked');
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when state changes when checked property set to true', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const radio = await page.find('sl-radio');
|
||||
|
||||
const slChange = await radio.spyOnEvent('slChange');
|
||||
|
||||
radio.setProperty('checked', true);
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when state changes when checked property set to false', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentChecked);
|
||||
|
||||
const radio = await page.find('sl-radio');
|
||||
|
||||
const slChange = await radio.spyOnEvent('slChange');
|
||||
|
||||
radio.setProperty('checked', false);
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContent = `
|
||||
<sl-range min="0" max="100" step="1"></sl-range>
|
||||
<button>Other Element</button>
|
||||
`;
|
||||
|
||||
describe('range', () => {
|
||||
it('should emit slFocus when gaining focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const range = await page.find('sl-range');
|
||||
|
||||
const slFocus = await range.spyOnEvent('slFocus');
|
||||
|
||||
// give focus
|
||||
await range.click();
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur when losing focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const range = await page.find('sl-range');
|
||||
const otherElement = await page.find('button');
|
||||
|
||||
const slBlur = await range.spyOnEvent('slBlur');
|
||||
|
||||
//give focus
|
||||
await range.click();
|
||||
|
||||
// remove focus by clicking on other element
|
||||
await otherElement.click();
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slFocus on setFocus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const range = await page.find('sl-range');
|
||||
|
||||
const slFocus = await range.spyOnEvent('slFocus');
|
||||
|
||||
await range.callMethod('setFocus');
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur on removeFocus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const range = await page.find('sl-range');
|
||||
|
||||
const slBlur = await range.spyOnEvent('slBlur');
|
||||
|
||||
await range.callMethod('setFocus');
|
||||
await range.callMethod('removeFocus');
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when value changes with click', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const range = await page.find('sl-range');
|
||||
|
||||
const slChange = await range.spyOnEvent('slChange');
|
||||
|
||||
// click in center of range
|
||||
await range.click();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should change value when changed with click', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const range = await page.find('sl-range');
|
||||
|
||||
// click in center of range
|
||||
await range.click();
|
||||
|
||||
expect(await range.getProperty('value')).toBe(50);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContent = `
|
||||
<sl-rating></sl-rating>>
|
||||
<button>Other Element</button>
|
||||
`;
|
||||
|
||||
const testContentValue3 = `
|
||||
<sl-rating value="3"></sl-rating>>
|
||||
<button>Other Element</button>
|
||||
`;
|
||||
|
||||
describe('rating', () => {
|
||||
it('should emit slChange when value changes with click', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const rating = await page.find('sl-rating');
|
||||
|
||||
const slChange = await rating.spyOnEvent('slChange');
|
||||
|
||||
// click in center of rating
|
||||
await rating.click();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should change value when changed with click', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const rating = await page.find('sl-rating');
|
||||
|
||||
// click in center of rating (3)
|
||||
await rating.click();
|
||||
|
||||
expect(await rating.getProperty('value')).toBe(3);
|
||||
});
|
||||
|
||||
it('should reset value when active rating clicked', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentValue3);
|
||||
|
||||
const rating = await page.find('sl-rating');
|
||||
|
||||
// click in center of rating (3)
|
||||
await rating.click();
|
||||
|
||||
expect(await rating.getProperty('value')).toBe(0);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContent = `
|
||||
<button>Other Element</button>
|
||||
<sl-select>
|
||||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="option-2">Option 2</sl-menu-item>
|
||||
<sl-menu-item value="option-3">Option 3</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-menu-item value="option-4">Option 4</sl-menu-item>
|
||||
<sl-menu-item value="option-5">Option 5</sl-menu-item>
|
||||
<sl-menu-item value="option-6">Option 6</sl-menu-item>
|
||||
</sl-select>
|
||||
`;
|
||||
|
||||
describe('select', () => {
|
||||
it('should emit slFocus when gaining focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const select = await page.find('sl-select');
|
||||
|
||||
const slFocus = await select.spyOnEvent('slFocus');
|
||||
|
||||
// give focus
|
||||
await select.click();
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur when losing focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const select = await page.find('sl-select');
|
||||
const otherElement = await page.find('button');
|
||||
|
||||
const slBlur = await select.spyOnEvent('slBlur');
|
||||
|
||||
//give focus
|
||||
await select.click();
|
||||
|
||||
// remove focus by clicking on other element
|
||||
await otherElement.click();
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when menu item selected', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const select = await page.find('sl-select');
|
||||
const menuItem = await page.find('sl-menu-item');
|
||||
|
||||
const slChange = await select.spyOnEvent('slChange');
|
||||
|
||||
await select.click();
|
||||
await menuItem.click();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should change value when menu item selected', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const select = await page.find('sl-select');
|
||||
const menuItem = await page.find('sl-menu-item');
|
||||
|
||||
expect(await select.getProperty('value')).toBe('');
|
||||
|
||||
await select.click();
|
||||
await menuItem.click();
|
||||
|
||||
expect(await select.getProperty('value')).toBe('option-1');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContentUnchecked = `
|
||||
<sl-switch>Switch</sl-switch>
|
||||
<button>Other Element</button>
|
||||
`;
|
||||
|
||||
const testContentChecked = `
|
||||
<sl-switch checked>Switch</sl-switch>
|
||||
<button>Other Element</button>
|
||||
`;
|
||||
|
||||
describe('switch', () => {
|
||||
it('should emit slFocus when gaining focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const switchComponent = await page.find('sl-switch');
|
||||
|
||||
const slFocus = await switchComponent.spyOnEvent('slFocus');
|
||||
|
||||
// give focus
|
||||
await switchComponent.click();
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur when losing focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const switchComponent = await page.find('sl-switch');
|
||||
const otherElement = await page.find('button');
|
||||
|
||||
const slBlur = await switchComponent.spyOnEvent('slBlur');
|
||||
|
||||
//give focus
|
||||
await switchComponent.click();
|
||||
|
||||
// remove focus by clicking on other element
|
||||
await otherElement.click();
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slFocus on setFocus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const switchComponent = await page.find('sl-switch');
|
||||
|
||||
const slFocus = await switchComponent.spyOnEvent('slFocus');
|
||||
|
||||
await switchComponent.callMethod('setFocus');
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur on removeFocus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const switchComponent = await page.find('sl-switch');
|
||||
|
||||
const slBlur = await switchComponent.spyOnEvent('slBlur');
|
||||
|
||||
await switchComponent.callMethod('setFocus');
|
||||
await switchComponent.callMethod('removeFocus');
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when state changes with click', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const switchComponent = await page.find('sl-switch');
|
||||
|
||||
const slChange = await switchComponent.spyOnEvent('slChange');
|
||||
|
||||
await switchComponent.click();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when state changes when checked attribute set', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const switchComponent = await page.find('sl-switch');
|
||||
|
||||
const slChange = await switchComponent.spyOnEvent('slChange');
|
||||
|
||||
switchComponent.setAttribute('checked', '');
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when state changes when checked attribute removed', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentChecked);
|
||||
|
||||
const switchComponent = await page.find('sl-switch');
|
||||
|
||||
const slChange = await switchComponent.spyOnEvent('slChange');
|
||||
|
||||
switchComponent.removeAttribute('checked');
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when state changes when checked property set to true', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentUnchecked);
|
||||
|
||||
const switchComponent = await page.find('sl-switch');
|
||||
|
||||
const slChange = await switchComponent.spyOnEvent('slChange');
|
||||
|
||||
switchComponent.setProperty('checked', true);
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when state changes when checked property set to false', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContentChecked);
|
||||
|
||||
const switchComponent = await page.find('sl-switch');
|
||||
|
||||
const slChange = await switchComponent.spyOnEvent('slChange');
|
||||
|
||||
switchComponent.setProperty('checked', false);
|
||||
await page.waitForChanges();
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContent = `
|
||||
<sl-tag clearable>Tag</sl-input>
|
||||
`;
|
||||
|
||||
describe('tag', () => {
|
||||
it('should emit slClear when cleared', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const tag = await page.find('sl-tag');
|
||||
const tagClear = await page.find('sl-tag >>> .tag__clear');
|
||||
|
||||
const slClear = await tag.spyOnEvent('slClear');
|
||||
|
||||
await tagClear.click();
|
||||
|
||||
expect(slClear).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,161 +0,0 @@
|
|||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
const testContent = `
|
||||
<sl-textarea></sl-textarea>
|
||||
<button>Other Element</button>
|
||||
`;
|
||||
|
||||
describe('textarea', () => {
|
||||
it('should emit slFocus when gaining focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const textarea = await page.find('sl-textarea');
|
||||
|
||||
const slFocus = await textarea.spyOnEvent('slFocus');
|
||||
|
||||
// give focus
|
||||
await textarea.click();
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur when losing focus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const textarea = await page.find('sl-textarea');
|
||||
const otherElement = await page.find('button');
|
||||
|
||||
const slBlur = await textarea.spyOnEvent('slBlur');
|
||||
|
||||
//give focus
|
||||
await textarea.click();
|
||||
|
||||
// remove focus by clicking on other element
|
||||
await otherElement.click();
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slFocus on setFocus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const textarea = await page.find('sl-textarea');
|
||||
|
||||
const slFocus = await textarea.spyOnEvent('slFocus');
|
||||
|
||||
await textarea.callMethod('setFocus');
|
||||
|
||||
expect(slFocus).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slBlur on removeFocus', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const textarea = await page.find('sl-textarea');
|
||||
|
||||
const slBlur = await textarea.spyOnEvent('slBlur');
|
||||
|
||||
await textarea.callMethod('setFocus');
|
||||
await textarea.callMethod('removeFocus');
|
||||
|
||||
expect(slBlur).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slChange when text entered and focus removed', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const textarea = await page.find('sl-textarea');
|
||||
const textareaControl = await page.find('sl-textarea >>> .textarea__control');
|
||||
|
||||
const slChange = await textarea.spyOnEvent('slChange');
|
||||
|
||||
await textareaControl.press('A');
|
||||
await textarea.callMethod('removeFocus');
|
||||
|
||||
expect(slChange).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should emit slInput when text entered', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const textarea = await page.find('sl-textarea');
|
||||
const textareaControl = await page.find('sl-textarea >>> .textarea__control');
|
||||
|
||||
const slInput = await textarea.spyOnEvent('slInput');
|
||||
|
||||
await textareaControl.press('A');
|
||||
|
||||
expect(slInput).toHaveReceivedEventTimes(1);
|
||||
});
|
||||
|
||||
it('should change value when text entered', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const textarea = await page.find('sl-textarea');
|
||||
const textareaControl = await page.find('sl-textarea >>> .textarea__control');
|
||||
|
||||
await textareaControl.press('A');
|
||||
|
||||
expect(await textarea.getProperty('value')).toBe('A');
|
||||
});
|
||||
|
||||
it('should select all text when select method called', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const textarea = await page.find('sl-textarea');
|
||||
const textareaControl = await page.find('sl-textarea >>> .textarea__control');
|
||||
|
||||
await textareaControl.press('A');
|
||||
await textareaControl.press('d');
|
||||
await textareaControl.press('a');
|
||||
|
||||
await textarea.callMethod('select');
|
||||
|
||||
const selectedText = await page.evaluate(() => window.getSelection().toString());
|
||||
|
||||
expect(selectedText).toBe('Ada');
|
||||
});
|
||||
|
||||
it('should select range of text when setSelectionRange method called', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const textarea = await page.find('sl-textarea');
|
||||
const textareaControl = await page.find('sl-textarea >>> .textarea__control');
|
||||
|
||||
await textareaControl.press('A');
|
||||
await textareaControl.press('d');
|
||||
await textareaControl.press('a');
|
||||
|
||||
await textarea.callMethod('setSelectionRange', 1, 2);
|
||||
|
||||
const selectedText = await page.evaluate(() => window.getSelection().toString());
|
||||
|
||||
expect(selectedText).toBe('d');
|
||||
});
|
||||
|
||||
it('should replace text when setRangeText method called', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent(testContent);
|
||||
|
||||
const textarea = await page.find('sl-textarea');
|
||||
const textareaControl = await page.find('sl-textarea >>> .textarea__control');
|
||||
|
||||
await textareaControl.press('A');
|
||||
await textareaControl.press('d');
|
||||
await textareaControl.press('a');
|
||||
|
||||
await textarea.callMethod('setRangeText', 'bb', 1, 2);
|
||||
const value = await textarea.getProperty('value');
|
||||
|
||||
expect(value).toBe('Abba');
|
||||
});
|
||||
});
|
||||
|
|
@ -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"]
|
||||
}
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue