kopia lustrzana https://github.com/shoelace-style/shoelace
103 wiersze
3.5 KiB
TypeScript
103 wiersze
3.5 KiB
TypeScript
import { clickOnElement } from '../../internal/test';
|
|
import { expect, fixture } from '@open-wc/testing';
|
|
import { html } from 'lit';
|
|
import { sendKeys } from '@web/test-runner-commands';
|
|
import sinon from 'sinon';
|
|
import type SlMenu from './menu';
|
|
import type SlMenuItem from '../menu-item/menu-item';
|
|
|
|
describe('<sl-menu>', () => {
|
|
it('emits sl-select with the correct event detail when clicking an item', async () => {
|
|
const menu = await fixture<SlMenu>(html`
|
|
<sl-menu>
|
|
<sl-menu-item value="item-1">Item 1</sl-menu-item>
|
|
<sl-menu-item value="item-2">Item 2</sl-menu-item>
|
|
<sl-menu-item value="item-3">Item 3</sl-menu-item>
|
|
<sl-menu-item value="item-4">Item 4</sl-menu-item>
|
|
</sl-menu>
|
|
`);
|
|
const item2 = menu.querySelectorAll('sl-menu-item')[1];
|
|
const selectHandler = sinon.spy((event: CustomEvent) => {
|
|
const item = event.detail.item as SlMenuItem; // eslint-disable-line
|
|
if (item !== item2) {
|
|
expect.fail('Incorrect event detail emitted with sl-select');
|
|
}
|
|
});
|
|
|
|
menu.addEventListener('sl-select', selectHandler);
|
|
await clickOnElement(item2);
|
|
|
|
expect(selectHandler).to.have.been.calledOnce;
|
|
});
|
|
|
|
it('can be selected via keyboard', async () => {
|
|
const menu = await fixture<SlMenu>(html`
|
|
<sl-menu>
|
|
<sl-menu-item value="item-1">Item 1</sl-menu-item>
|
|
<sl-menu-item value="item-2">Item 2</sl-menu-item>
|
|
<sl-menu-item value="item-3">Item 3</sl-menu-item>
|
|
<sl-menu-item value="item-4">Item 4</sl-menu-item>
|
|
</sl-menu>
|
|
`);
|
|
const [item1, item2] = menu.querySelectorAll('sl-menu-item');
|
|
const selectHandler = sinon.spy((event: CustomEvent) => {
|
|
const item = event.detail.item as SlMenuItem; // eslint-disable-line
|
|
if (item !== item2) {
|
|
expect.fail('Incorrect item selected');
|
|
}
|
|
});
|
|
|
|
menu.addEventListener('sl-select', selectHandler);
|
|
|
|
item1.focus();
|
|
await item1.updateComplete;
|
|
await sendKeys({ press: 'ArrowDown' });
|
|
await sendKeys({ press: 'Enter' });
|
|
|
|
expect(selectHandler).to.have.been.calledOnce;
|
|
});
|
|
|
|
it('does not select disabled items when clicking', async () => {
|
|
const menu = await fixture<SlMenu>(html`
|
|
<sl-menu>
|
|
<sl-menu-item value="item-1">Item 1</sl-menu-item>
|
|
<sl-menu-item value="item-2" disabled>Item 2</sl-menu-item>
|
|
<sl-menu-item value="item-3">Item 3</sl-menu-item>
|
|
<sl-menu-item value="item-4">Item 4</sl-menu-item>
|
|
</sl-menu>
|
|
`);
|
|
const item2 = menu.querySelectorAll('sl-menu-item')[1];
|
|
const selectHandler = sinon.spy();
|
|
|
|
menu.addEventListener('sl-select', selectHandler);
|
|
|
|
await clickOnElement(item2);
|
|
|
|
expect(selectHandler).to.not.have.been.calledOnce;
|
|
});
|
|
|
|
it('does not select disabled items when pressing enter', async () => {
|
|
const menu = await fixture<SlMenu>(html`
|
|
<sl-menu>
|
|
<sl-menu-item value="item-1">Item 1</sl-menu-item>
|
|
<sl-menu-item value="item-2" disabled>Item 2</sl-menu-item>
|
|
<sl-menu-item value="item-3">Item 3</sl-menu-item>
|
|
<sl-menu-item value="item-4">Item 4</sl-menu-item>
|
|
</sl-menu>
|
|
`);
|
|
const [item1, item2] = menu.querySelectorAll('sl-menu-item');
|
|
const selectHandler = sinon.spy();
|
|
|
|
menu.addEventListener('sl-select', selectHandler);
|
|
|
|
item1.focus();
|
|
await item1.updateComplete;
|
|
await sendKeys({ press: 'ArrowDown' });
|
|
expect(document.activeElement).to.equal(item2);
|
|
await sendKeys({ press: 'Enter' });
|
|
await item2.updateComplete;
|
|
|
|
expect(selectHandler).to.not.have.been.called;
|
|
});
|
|
});
|