kopia lustrzana https://github.com/shoelace-style/shoelace
97 wiersze
2.7 KiB
TypeScript
97 wiersze
2.7 KiB
TypeScript
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
|
|
});
|
|
});
|
|
});
|