kempo-ui 0.0.40 → 0.0.41

package/tests/components/Dropdown.browser-test.js

@@ -0,0 +1,557 @@
+import Dropdown from '../../src/components/Dropdown.js';
+
+const createDropdown = async (options = {}) => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-dropdown
+			${options.openDirection ? `open-direction="${options.openDirection}"` : ''}
+			${options.opened ? 'opened' : ''}
+			${options.closeOnSelect === false ? 'close-on-select="false"' : ''}
+			${options.closeOnClickOutside === false ? 'close-on-click-outside="false"' : ''}
+		>
+			<button slot="trigger">Trigger</button>
+			<button data-value="item1">Item 1</button>
+			<button data-value="item2">Item 2</button>
+			<button data-value="item3">Item 3</button>
+			${options.withDisabled ? '<button data-value="disabled" disabled>Disabled</button>' : ''}
+			${options.withDivider ? '<hr /><button data-value="item4">Item 4</button>' : ''}
+			${options.withLinks ? '<a href="#link1">Link 1</a><a href="#link2">Link 2</a>' : ''}
+		</k-dropdown>
+	`;
+	document.body.appendChild(container);
+	const dropdown = container.querySelector('k-dropdown');
+	await dropdown.updateComplete;
+	return { container, dropdown };
+};
+
+const cleanup = (container) => {
+	if(container && container.parentNode) {
+		container.parentNode.removeChild(container);
+	}
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create dropdown element': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		if(!dropdown) {
+			cleanup(container);
+			return fail('Dropdown element should be created');
+		}
+		if(!(dropdown instanceof Dropdown)) {
+			cleanup(container);
+			return fail('Element should be instance of Dropdown');
+		}
+		cleanup(container);
+		pass('Dropdown element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		if(!dropdown.shadowRoot) {
+			cleanup(container);
+			return fail('Dropdown should have shadow root');
+		}
+		cleanup(container);
+		pass('Dropdown has shadow root');
+	},
+
+	'should be closed by default': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		if(dropdown.opened !== false) {
+			cleanup(container);
+			return fail(`Expected opened to be false, got ${dropdown.opened}`);
+		}
+		cleanup(container);
+		pass('Dropdown is closed by default');
+	},
+
+	'should have default openDirection of down left': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		if(dropdown.openDirection !== 'down left') {
+			cleanup(container);
+			return fail(`Expected openDirection to be 'down left', got ${dropdown.openDirection}`);
+		}
+		cleanup(container);
+		pass('Default openDirection is down left');
+	},
+
+	/*
+		Property Reflection
+	*/
+	'should reflect opened attribute': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ opened: true });
+		if(!dropdown.hasAttribute('opened')) {
+			cleanup(container);
+			return fail('Dropdown should have opened attribute');
+		}
+		cleanup(container);
+		pass('Opened attribute reflects correctly');
+	},
+
+	'should reflect open-direction attribute': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ openDirection: 'up right' });
+		if(dropdown.getAttribute('open-direction') !== 'up right') {
+			cleanup(container);
+			return fail('open-direction attribute should be up right');
+		}
+		cleanup(container);
+		pass('open-direction attribute reflects correctly');
+	},
+
+	/*
+		Public Methods - open()
+	*/
+	'should have open method': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		if(typeof dropdown.open !== 'function') {
+			cleanup(container);
+			return fail('Dropdown should have open method');
+		}
+		cleanup(container);
+		pass('Dropdown has open method');
+	},
+
+	'open() should set opened to true': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		dropdown.open();
+		if(dropdown.opened !== true) {
+			cleanup(container);
+			return fail(`Expected opened to be true after open(), got ${dropdown.opened}`);
+		}
+		cleanup(container);
+		pass('open() sets opened to true');
+	},
+
+	'open() should return this for chaining': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		const result = dropdown.open();
+		if(result !== dropdown) {
+			cleanup(container);
+			return fail('open() should return this');
+		}
+		cleanup(container);
+		pass('open() returns this');
+	},
+
+	/*
+		Public Methods - close()
+	*/
+	'should have close method': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		if(typeof dropdown.close !== 'function') {
+			cleanup(container);
+			return fail('Dropdown should have close method');
+		}
+		cleanup(container);
+		pass('Dropdown has close method');
+	},
+
+	'close() should set opened to false': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ opened: true });
+		dropdown.close();
+		if(dropdown.opened !== false) {
+			cleanup(container);
+			return fail(`Expected opened to be false after close(), got ${dropdown.opened}`);
+		}
+		cleanup(container);
+		pass('close() sets opened to false');
+	},
+
+	'close() should return this for chaining': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		const result = dropdown.close();
+		if(result !== dropdown) {
+			cleanup(container);
+			return fail('close() should return this');
+		}
+		cleanup(container);
+		pass('close() returns this');
+	},
+
+	/*
+		Public Methods - toggle()
+	*/
+	'should have toggle method': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		if(typeof dropdown.toggle !== 'function') {
+			cleanup(container);
+			return fail('Dropdown should have toggle method');
+		}
+		cleanup(container);
+		pass('Dropdown has toggle method');
+	},
+
+	'toggle() should open when closed': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		dropdown.toggle();
+		if(dropdown.opened !== true) {
+			cleanup(container);
+			return fail(`Expected opened to be true after toggle(), got ${dropdown.opened}`);
+		}
+		cleanup(container);
+		pass('toggle() opens when closed');
+	},
+
+	'toggle() should close when open': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ opened: true });
+		dropdown.toggle();
+		if(dropdown.opened !== false) {
+			cleanup(container);
+			return fail(`Expected opened to be false after toggle(), got ${dropdown.opened}`);
+		}
+		cleanup(container);
+		pass('toggle() closes when open');
+	},
+
+	/*
+		Events
+	*/
+	'should dispatch opened event when opening': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		let eventFired = false;
+		dropdown.addEventListener('opened', () => { eventFired = true; });
+		dropdown.open();
+		await dropdown.updateComplete;
+		if(!eventFired) {
+			cleanup(container);
+			return fail('opened event should be fired');
+		}
+		cleanup(container);
+		pass('opened event dispatched');
+	},
+
+	'should dispatch closed event when closing': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ opened: true });
+		let eventFired = false;
+		dropdown.addEventListener('closed', () => { eventFired = true; });
+		dropdown.close();
+		await dropdown.updateComplete;
+		if(!eventFired) {
+			cleanup(container);
+			return fail('closed event should be fired');
+		}
+		cleanup(container);
+		pass('closed event dispatched');
+	},
+
+	'should dispatch select event when button item clicked': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ opened: true });
+		let eventFired = false;
+		let eventDetail = null;
+		dropdown.addEventListener('select', e => {
+			eventFired = true;
+			eventDetail = e.detail;
+		});
+		const item = dropdown.querySelector('button[data-value="item1"]');
+		item.click();
+		if(!eventFired) {
+			cleanup(container);
+			return fail('select event should be fired');
+		}
+		if(eventDetail.value !== 'item1') {
+			cleanup(container);
+			return fail(`Expected value to be 'item1', got ${eventDetail.value}`);
+		}
+		cleanup(container);
+		pass('select event dispatched with correct value');
+	},
+
+	'select event should include item reference': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ opened: true });
+		let eventDetail = null;
+		dropdown.addEventListener('select', e => { eventDetail = e.detail; });
+		const item = dropdown.querySelector('button[data-value="item2"]');
+		item.click();
+		if(eventDetail.item !== item) {
+			cleanup(container);
+			return fail('Event detail should include item reference');
+		}
+		cleanup(container);
+		pass('select event includes item reference');
+	},
+
+	/*
+		Close Behavior
+	*/
+	'should close on select by default': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ opened: true });
+		const item = dropdown.querySelector('button[data-value="item1"]');
+		item.click();
+		if(dropdown.opened !== false) {
+			cleanup(container);
+			return fail('Dropdown should close after selection');
+		}
+		cleanup(container);
+		pass('Dropdown closes on select');
+	},
+
+	'should not close on select when close-on-select is false': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ opened: true, closeOnSelect: false });
+		const item = dropdown.querySelector('button[data-value="item1"]');
+		item.click();
+		if(dropdown.opened !== true) {
+			cleanup(container);
+			return fail('Dropdown should remain open when close-on-select is false');
+		}
+		cleanup(container);
+		pass('Dropdown stays open when close-on-select is false');
+	},
+
+	'should close on Escape key': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ opened: true });
+		const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+		document.dispatchEvent(event);
+		if(dropdown.opened !== false) {
+			cleanup(container);
+			return fail('Dropdown should close on Escape');
+		}
+		cleanup(container);
+		pass('Dropdown closes on Escape');
+	},
+
+	/*
+		Trigger Click
+	*/
+	'should toggle on trigger click': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		const trigger = dropdown.querySelector('[slot="trigger"]');
+		trigger.click();
+		if(dropdown.opened !== true) {
+			cleanup(container);
+			return fail('Dropdown should open on trigger click');
+		}
+		cleanup(container);
+		pass('Dropdown opens on trigger click');
+	},
+
+	/*
+		Slotted Content
+	*/
+	'should style slotted buttons': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		const buttons = dropdown.querySelectorAll('button:not([slot])');
+		if(buttons.length !== 3) {
+			cleanup(container);
+			return fail(`Expected 3 button items, got ${buttons.length}`);
+		}
+		cleanup(container);
+		pass('Slotted buttons exist');
+	},
+
+	'should style slotted links': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ withLinks: true });
+		const links = dropdown.querySelectorAll('a');
+		if(links.length !== 2) {
+			cleanup(container);
+			return fail(`Expected 2 link items, got ${links.length}`);
+		}
+		cleanup(container);
+		pass('Slotted links exist');
+	},
+
+	'should style slotted hr as divider': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ withDivider: true });
+		const divider = dropdown.querySelector('hr');
+		if(!divider) {
+			cleanup(container);
+			return fail('HR divider should exist');
+		}
+		cleanup(container);
+		pass('HR divider exists');
+	},
+
+	/*
+		Keyboard Navigation
+	*/
+	'ArrowDown should move focus to next item': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ opened: true });
+		const items = dropdown.querySelectorAll('button:not([slot])');
+		items[0].focus();
+		const event = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true });
+		document.dispatchEvent(event);
+		if(document.activeElement !== items[1]) {
+			cleanup(container);
+			return fail('Focus should move to next item');
+		}
+		cleanup(container);
+		pass('ArrowDown moves focus to next item');
+	},
+
+	'ArrowUp should move focus to previous item': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ opened: true });
+		const items = dropdown.querySelectorAll('button:not([slot])');
+		items[1].focus();
+		const event = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true });
+		document.dispatchEvent(event);
+		if(document.activeElement !== items[0]) {
+			cleanup(container);
+			return fail('Focus should move to previous item');
+		}
+		cleanup(container);
+		pass('ArrowUp moves focus to previous item');
+	},
+
+	'ArrowDown should wrap to first item': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ opened: true });
+		const items = dropdown.querySelectorAll('button:not([slot])');
+		items[2].focus();
+		const event = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true });
+		document.dispatchEvent(event);
+		if(document.activeElement !== items[0]) {
+			cleanup(container);
+			return fail('Focus should wrap to first item');
+		}
+		cleanup(container);
+		pass('ArrowDown wraps to first item');
+	},
+
+	'ArrowUp should wrap to last item': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ opened: true });
+		const items = dropdown.querySelectorAll('button:not([slot])');
+		items[0].focus();
+		const event = new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true });
+		document.dispatchEvent(event);
+		if(document.activeElement !== items[2]) {
+			cleanup(container);
+			return fail('Focus should wrap to last item');
+		}
+		cleanup(container);
+		pass('ArrowUp wraps to last item');
+	},
+
+	/*
+		Shadow DOM Structure
+	*/
+	'should render trigger slot': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		const triggerSlot = dropdown.shadowRoot.querySelector('slot[name="trigger"]');
+		if(!triggerSlot) {
+			cleanup(container);
+			return fail('Trigger slot should be rendered');
+		}
+		cleanup(container);
+		pass('Trigger slot rendered');
+	},
+
+	'should render menu container': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		const menu = dropdown.shadowRoot.querySelector('#menu');
+		if(!menu) {
+			cleanup(container);
+			return fail('Menu container should be rendered');
+		}
+		cleanup(container);
+		pass('Menu container rendered');
+	},
+
+	'menu should have role menu': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		const menu = dropdown.shadowRoot.querySelector('#menu');
+		if(menu.getAttribute('role') !== 'menu') {
+			cleanup(container);
+			return fail('Menu should have role menu');
+		}
+		cleanup(container);
+		pass('Menu has correct role');
+	},
+
+	/*
+		Method Chaining
+	*/
+	'should support method chaining': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		dropdown.open().close().toggle();
+		if(dropdown.opened !== true) {
+			cleanup(container);
+			return fail('Expected opened to be true after chain');
+		}
+		cleanup(container);
+		pass('Method chaining works correctly');
+	},
+
+	/*
+		Multiple Dropdowns
+	*/
+	'clicking another dropdown trigger should close this one': async ({pass, fail}) => {
+		const container1 = document.createElement('div');
+		container1.innerHTML = `
+			<k-dropdown id="dd1">
+				<button slot="trigger">Dropdown 1</button>
+				<button data-value="1">Item 1</button>
+			</k-dropdown>
+		`;
+		const container2 = document.createElement('div');
+		container2.innerHTML = `
+			<k-dropdown id="dd2">
+				<button slot="trigger">Dropdown 2</button>
+				<button data-value="2">Item 2</button>
+			</k-dropdown>
+		`;
+		document.body.appendChild(container1);
+		document.body.appendChild(container2);
+		const dd1 = container1.querySelector('k-dropdown');
+		const dd2 = container2.querySelector('k-dropdown');
+		await dd1.updateComplete;
+		await dd2.updateComplete;
+
+		dd1.open();
+		await dd1.updateComplete;
+
+		if(!dd1.opened) {
+			cleanup(container1);
+			cleanup(container2);
+			return fail('Dropdown 1 should be open');
+		}
+
+		const trigger2 = dd2.querySelector('[slot="trigger"]');
+		trigger2.click();
+		await dd2.updateComplete;
+
+		if(dd1.opened) {
+			cleanup(container1);
+			cleanup(container2);
+			return fail('Dropdown 1 should be closed after clicking dd2 trigger');
+		}
+
+		cleanup(container1);
+		cleanup(container2);
+		pass('Opening another dropdown closes the first');
+	},
+
+	/*
+		Open Direction Attribute
+	*/
+	'should accept various open-direction values': async ({pass, fail}) => {
+		const directions = ['down left', 'down right', 'up left', 'up right', 'left up', 'left down', 'right up', 'right down'];
+		for(const dir of directions) {
+			const { container, dropdown } = await createDropdown({ openDirection: dir });
+			if(dropdown.openDirection !== dir) {
+				cleanup(container);
+				return fail(`Expected openDirection to be '${dir}', got ${dropdown.openDirection}`);
+			}
+			cleanup(container);
+		}
+		pass('All open-direction values accepted');
+	},
+
+	/*
+		Disabled Items
+	*/
+	'disabled items should be skipped in keyboard navigation': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ opened: true, withDisabled: true });
+		const items = dropdown.querySelectorAll('button:not([slot]):not([disabled])');
+		items[2].focus(); // item3
+		const event = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true });
+		document.dispatchEvent(event);
+		// Should skip disabled and wrap to first
+		if(document.activeElement !== items[0]) {
+			cleanup(container);
+			return fail('Focus should skip disabled item and wrap');
+		}
+		cleanup(container);
+		pass('Disabled items skipped in navigation');
+	}
+};

package/tests/components/HybridComponent.browser-test.js

@@ -26,10 +26,16 @@ export default {
 			return;
 		}
 		
-		const stylesheetLink = component.shadowRoot.querySelector('link[href="/kempo.min.css"]');
+		const stylesheetLink = component.shadowRoot.querySelector('link[rel="stylesheet"]');
 		if(!stylesheetLink) {
 			document.body.removeChild(component);
-			fail('Shadow root should contain kempo.min.css link');
+			fail('Shadow root should contain stylesheet link');
+			return;
+		}
+		
+		if(!stylesheetLink.href.includes('kempo')) {
+			document.body.removeChild(component);
+			fail('Stylesheet should reference kempo css');
 			return;
 		}
 		

package/tests/components/ShadowComponent.browser-test.js

@@ -22,16 +22,16 @@ export default {
 			return;
 		}
 		
-		const stylesheetLink = component.shadowRoot.querySelector('link[href="/kempo.min.css"]');
+		const stylesheetLink = component.shadowRoot.querySelector('link[rel="stylesheet"]');
 		if(!stylesheetLink) {
 			document.body.removeChild(component);
-			fail('Shadow root should contain kempo.min.css link');
+			fail('Shadow root should contain stylesheet link');
 			return;
 		}
 		
-		if(stylesheetLink.rel !== 'stylesheet') {
+		if(!stylesheetLink.href.includes('kempo')) {
 			document.body.removeChild(component);
-			fail('Link should have rel="stylesheet"');
+			fail('Stylesheet should reference kempo css');
 			return;
 		}
 		
@@ -100,7 +100,7 @@ export default {
 		
 		await new Promise(resolve => setTimeout(resolve, 0));
 		
-		const stylesheetBefore = component.shadowRoot.querySelector('link[href="/kempo.min.css"]');
+		const stylesheetBefore = component.shadowRoot.querySelector('link[rel="stylesheet"]');
 		if(!stylesheetBefore) {
 			document.body.removeChild(component);
 			fail('Stylesheet should exist before re-render');
@@ -110,7 +110,7 @@ export default {
 		component.requestUpdate();
 		await component.updateComplete;
 		
-		const stylesheetAfter = component.shadowRoot.querySelector('link[href="/kempo.min.css"]');
+		const stylesheetAfter = component.shadowRoot.querySelector('link[rel="stylesheet"]');
 		if(!stylesheetAfter) {
 			document.body.removeChild(component);
 			fail('Stylesheet should persist after re-render');