diff --git a/src/components/menu/menu.test.ts b/src/components/menu/menu.test.ts new file mode 100644 index 00000000..27f01869 --- /dev/null +++ b/src/components/menu/menu.test.ts @@ -0,0 +1,89 @@ +import { expect, fixture, waitUntil } from '@open-wc/testing'; +import { sendKeys } from '@web/test-runner-commands'; +import { html } from 'lit'; +import sinon from 'sinon'; +import type SlMenuItem from '../menu-item/menu-item'; +import type SlMenu from './menu'; + +interface Payload { + item: SlMenuItem; +} + +const createTestMenu = (): Promise => { + return fixture(html` + + test1 + test2 + test3 + testDisabled + + `); +}; + +const clickOnItemWithValue = (menu: SlMenu, value: string) => { + const clickedItem = menu.querySelector(`[value=${value}]`); + if (clickedItem) { + (clickedItem as SlMenuItem).click(); + } +}; + +const spyOnSelectHandler = (menu: SlMenu): sinon.SinonSpy => { + const selectHandler = sinon.spy(); + menu.addEventListener('sl-select', selectHandler); + return selectHandler; +}; + +const expectSelectHandlerToHaveBeenCalledOn = async ( + selectHandler: sinon.SinonSpy, + expectedValue: string +): Promise => { + await waitUntil(() => selectHandler.calledOnce); + expect(selectHandler).to.have.been.calledOnce; + const event = selectHandler.args[0][0] as CustomEvent; + const detail = event.detail as Payload; + expect(detail.item.value).to.equal(expectedValue); +}; + +describe('', () => { + it('emits sl-select on click of an item returning the selected item as payload', async () => { + const menu = await createTestMenu(); + const selectHandler = spyOnSelectHandler(menu); + + clickOnItemWithValue(menu, 'test1'); + + await expectSelectHandlerToHaveBeenCalledOn(selectHandler, 'test1'); + }); + + it('can be selected via keyboard', async () => { + const menu = await createTestMenu(); + const selectHandler = spyOnSelectHandler(menu); + + await sendKeys({ press: 'Tab' }); + await sendKeys({ press: 'ArrowDown' }); + await sendKeys({ press: 'Enter' }); + + await expectSelectHandlerToHaveBeenCalledOn(selectHandler, 'test2'); + }); + + it('can be selected via type to select', async () => { + const menu = await createTestMenu(); + const selectHandler = spyOnSelectHandler(menu); + + await sendKeys({ press: 'Tab' }); + await sendKeys({ type: 'test3' }); + await sendKeys({ press: 'Enter' }); + + await expectSelectHandlerToHaveBeenCalledOn(selectHandler, 'test3'); + }); + + it('does not select disabled items', async () => { + const menu = await createTestMenu(); + const selectHandler = spyOnSelectHandler(menu); + + await sendKeys({ press: 'Tab' }); + await sendKeys({ type: 'testDisabled' }); + await sendKeys({ press: 'Enter' }); + + await expectSelectHandlerToHaveBeenCalledOn(selectHandler, 'test1'); + }); +});