kempo-ui 0.3.6 → 0.3.8

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

@@ -466,5 +466,159 @@ export default {
 
 		cleanup(container);
 		pass('AccordionPanel active attribute reflects state');
+	},
+
+	/*
+		Persistent ID Tests
+	*/
+	'persistent-id: should save open panel state to localStorage': async ({pass, fail}) => {
+		const id = 'test-save-' + Date.now();
+		const key = `accordion-persistent-id-${id}`;
+		window.localStorage.removeItem(key);
+
+		const { container, accordion } = await createAccordion({ persistentId: id });
+
+		accordion.openPanel('panel1');
+		await accordion.updateComplete;
+		await new Promise(r => setTimeout(r, 300));
+
+		const stored = window.localStorage.getItem(key);
+		window.localStorage.removeItem(key);
+		cleanup(container);
+
+		if(stored !== 'panel1'){
+			fail(`Expected localStorage to contain "panel1", got "${stored}"`);
+			return;
+		}
+
+		pass('Open panel state saved to localStorage');
+	},
+
+	'persistent-id: should restore open panel state from localStorage': async ({pass, fail}) => {
+		const id = 'test-restore-' + Date.now();
+		const key = `accordion-persistent-id-${id}`;
+		window.localStorage.setItem(key, 'panel2');
+
+		const { container, accordion } = await createAccordion({ persistentId: id });
+		await new Promise(r => setTimeout(r, 50));
+
+		const panel1 = accordion.getPanel('panel1');
+		const panel2 = accordion.getPanel('panel2');
+		const panel3 = accordion.getPanel('panel3');
+
+		window.localStorage.removeItem(key);
+		cleanup(container);
+
+		if(panel1.active){
+			fail('panel1 should not be active');
+			return;
+		}
+		if(!panel2.active){
+			fail('panel2 should be active (restored from localStorage)');
+			return;
+		}
+		if(panel3.active){
+			fail('panel3 should not be active');
+			return;
+		}
+
+		pass('Open panel state restored from localStorage');
+	},
+
+	'persistent-id: should restore all-panels-closed state from localStorage': async ({pass, fail}) => {
+		const id = 'test-allclosed-' + Date.now();
+		const key = `accordion-persistent-id-${id}`;
+		window.localStorage.setItem(key, '');
+
+		const container = document.createElement('div');
+		container.innerHTML = `
+			<k-accordion persistent-id="${id}">
+				<k-accordion-header for-panel="p1">H1</k-accordion-header>
+				<k-accordion-panel name="p1" active>Content 1</k-accordion-panel>
+				<k-accordion-header for-panel="p2">H2</k-accordion-header>
+				<k-accordion-panel name="p2">Content 2</k-accordion-panel>
+			</k-accordion>
+		`;
+		document.body.appendChild(container);
+
+		const accordion = container.querySelector('k-accordion');
+		await accordion.updateComplete;
+		await new Promise(r => setTimeout(r, 50));
+
+		const p1 = accordion.getPanel('p1');
+		const p2 = accordion.getPanel('p2');
+
+		window.localStorage.removeItem(key);
+		cleanup(container);
+
+		if(p1.active){
+			fail('panel p1 should be closed (all-closed state restored), but it is active');
+			return;
+		}
+		if(p2.active){
+			fail('panel p2 should be closed');
+			return;
+		}
+
+		pass('All-panels-closed state correctly restored from localStorage');
+	},
+
+	'persistent-id: should not restore when no localStorage entry exists': async ({pass, fail}) => {
+		const id = 'test-noentry-' + Date.now();
+		const key = `accordion-persistent-id-${id}`;
+		window.localStorage.removeItem(key);
+
+		const container = document.createElement('div');
+		container.innerHTML = `
+			<k-accordion persistent-id="${id}">
+				<k-accordion-header for-panel="p1">H1</k-accordion-header>
+				<k-accordion-panel name="p1" active>Content 1</k-accordion-panel>
+				<k-accordion-header for-panel="p2">H2</k-accordion-header>
+				<k-accordion-panel name="p2">Content 2</k-accordion-panel>
+			</k-accordion>
+		`;
+		document.body.appendChild(container);
+
+		const accordion = container.querySelector('k-accordion');
+		await accordion.updateComplete;
+		await new Promise(r => setTimeout(r, 50));
+
+		const p1 = accordion.getPanel('p1');
+
+		cleanup(container);
+
+		if(!p1.active){
+			fail('panel p1 should remain active when no localStorage entry exists');
+			return;
+		}
+
+		pass('HTML active attributes preserved when no localStorage entry exists');
+	},
+
+	'persistent-id: should save all-closed state to localStorage': async ({pass, fail}) => {
+		const id = 'test-saveclosed-' + Date.now();
+		const key = `accordion-persistent-id-${id}`;
+		window.localStorage.removeItem(key);
+
+		const { container, accordion } = await createAccordion({ persistentId: id });
+
+		accordion.openPanel('panel1');
+		await accordion.updateComplete;
+		await new Promise(r => setTimeout(r, 300));
+
+		accordion.closePanel('panel1');
+		await accordion.updateComplete;
+		await new Promise(r => setTimeout(r, 300));
+
+		const stored = window.localStorage.getItem(key);
+		window.localStorage.removeItem(key);
+		cleanup(container);
+
+		if(stored !== ''){
+			fail(`Expected localStorage to contain "" (empty string), got ${JSON.stringify(stored)}`);
+			return;
+		}
+
+		pass('All-closed state saved as empty string in localStorage');
 	}
 };

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

@@ -452,6 +452,81 @@ export default {
 		pass('Dispatches offscreen event on disconnect');
 	},
 
+	/*
+		Persistent ID
+	*/
+	'persistentId: should default to null': async ({pass, fail}) => {
+		const aside = await createAside();
+		if(aside.persistentId !== null) {
+			cleanup(aside);
+			return fail(`Expected persistentId null, got ${aside.persistentId}`);
+		}
+		cleanup(aside);
+		pass('persistentId defaults to null');
+	},
+
+	'persistentId: should save state to localStorage on state change': async ({pass, fail}) => {
+		const id = `test-aside-save-${Date.now()}`;
+		const key = `aside-persistent-id-${id}`;
+		localStorage.removeItem(key);
+		const aside = await createAside({ main: 'push', state: 'offscreen' });
+		aside.persistentId = id;
+		await aside.updateComplete;
+		aside.expand();
+		await aside.updateComplete;
+		const saved = localStorage.getItem(key);
+		localStorage.removeItem(key);
+		cleanup(aside);
+		if(saved !== 'expanded') return fail(`Expected "expanded" in localStorage, got "${saved}"`);
+		pass('persistentId saves state to localStorage');
+	},
+
+	'persistentId: should restore state from localStorage on connect': async ({pass, fail}) => {
+		const id = `test-aside-restore-${Date.now()}`;
+		const key = `aside-persistent-id-${id}`;
+		localStorage.setItem(key, 'expanded');
+		const aside = document.createElement('k-aside');
+		aside.setAttribute('main', 'push');
+		aside.setAttribute('state', 'offscreen');
+		aside.setAttribute('persistent-id', id);
+		document.body.appendChild(aside);
+		await aside.updateComplete;
+		// Wait for the property change to apply
+		await new Promise(r => setTimeout(r, 50));
+		const state = aside.state;
+		localStorage.removeItem(key);
+		cleanup(aside);
+		if(state !== 'expanded') return fail(`Expected restored state "expanded", got "${state}"`);
+		pass('persistentId restores state from localStorage');
+	},
+
+	'persistentId: should save collapsed state': async ({pass, fail}) => {
+		const id = `test-aside-collapsed-${Date.now()}`;
+		const key = `aside-persistent-id-${id}`;
+		localStorage.removeItem(key);
+		const aside = await createAside({ main: 'push', state: 'offscreen' });
+		aside.persistentId = id;
+		await aside.updateComplete;
+		aside.collapse();
+		await aside.updateComplete;
+		const saved = localStorage.getItem(key);
+		localStorage.removeItem(key);
+		cleanup(aside);
+		if(saved !== 'collapsed') return fail(`Expected "collapsed" in localStorage, got "${saved}"`);
+		pass('persistentId saves collapsed state');
+	},
+
+	'persistentId: should not save state when not set': async ({pass, fail}) => {
+		const aside = await createAside({ main: 'push', state: 'offscreen' });
+		const keysBefore = Object.keys(localStorage).filter(k => k.startsWith('aside-persistent-id-'));
+		aside.expand();
+		await aside.updateComplete;
+		const keysAfter = Object.keys(localStorage).filter(k => k.startsWith('aside-persistent-id-'));
+		cleanup(aside);
+		if(keysAfter.length > keysBefore.length) return fail('Should not save to localStorage when persistentId is null');
+		pass('Does not save to localStorage without persistentId');
+	},
+
 	/*
 		AsideItem
 	*/

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

@@ -576,5 +576,90 @@ export default {
 		}
 		cleanup(container);
 		pass('Disabled items skipped in navigation');
+	},
+
+	/*
+		Shadow DOM Compatibility (composedPath)
+	*/
+	'should close when clicking outside via composedPath': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		dropdown.open();
+		await dropdown.updateComplete;
+		const outside = document.createElement('div');
+		outside.textContent = 'outside';
+		document.body.appendChild(outside);
+		outside.click();
+		await dropdown.updateComplete;
+		if(dropdown.opened) {
+			cleanup(container);
+			outside.remove();
+			return fail('Dropdown should close on outside click');
+		}
+		cleanup(container);
+		outside.remove();
+		pass('Dropdown closes on outside click via composedPath');
+	},
+
+	'should not close when clicking inside menu with close-on-select false': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown({ closeOnSelect: false });
+		dropdown.open();
+		await dropdown.updateComplete;
+		const item = dropdown.querySelector('[data-value="item1"]');
+		item.click();
+		await dropdown.updateComplete;
+		if(!dropdown.opened) {
+			cleanup(container);
+			return fail('Dropdown should stay open with close-on-select="false"');
+		}
+		cleanup(container);
+		pass('Dropdown stays open with close-on-select="false"');
+	},
+
+	/*
+		Host Styles
+	*/
+	'host should have white-space normal': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		const style = getComputedStyle(dropdown);
+		if(style.whiteSpace !== 'normal') {
+			cleanup(container);
+			return fail(`Expected white-space: normal, got ${style.whiteSpace}`);
+		}
+		cleanup(container);
+		pass('Host has white-space: normal');
+	},
+
+	'trigger should have inline-flex display': async ({pass, fail}) => {
+		const { container, dropdown } = await createDropdown();
+		await dropdown.updateComplete;
+		const trigger = dropdown.shadowRoot.querySelector('#trigger');
+		const style = getComputedStyle(trigger);
+		if(style.display !== 'inline-flex') {
+			cleanup(container);
+			return fail(`Expected trigger display: inline-flex, got ${style.display}`);
+		}
+		cleanup(container);
+		pass('Trigger has inline-flex display');
+	},
+
+	'dropdown should not inflate height in pre-wrap context': async ({pass, fail}) => {
+		const container = document.createElement('div');
+		container.style.whiteSpace = 'pre-wrap';
+		container.innerHTML = `
+			<k-dropdown>
+				<button slot="trigger">T</button>
+				<button>Item</button>
+			</k-dropdown>
+		`;
+		document.body.appendChild(container);
+		const dropdown = container.querySelector('k-dropdown');
+		await dropdown.updateComplete;
+		const height = dropdown.getBoundingClientRect().height;
+		if(height > 60) {
+			cleanup(container);
+			return fail(`Dropdown height should not inflate in pre-wrap context, got ${height}px`);
+		}
+		cleanup(container);
+		pass('Dropdown does not inflate in pre-wrap context');
 	}
 };

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

@@ -0,0 +1,115 @@
+import '../../../src/components/htmlEditorNodes/HtmlComment.js';
+
+const HenHtmlComment = customElements.get('k-hen-html-comment');
+
+export default {
+	/*
+		Custom Element Registration
+	*/
+	'should register k-hen-html-comment element': async ({pass, fail}) => {
+		if(!HenHtmlComment) return fail('k-hen-html-comment should be registered');
+		pass('k-hen-html-comment is registered');
+	},
+
+	'should have static lexicalNode property': async ({pass, fail}) => {
+		if(!HenHtmlComment.lexicalNode) return fail('HenHtmlComment should have static lexicalNode');
+		if(HenHtmlComment.lexicalNode.getType() !== 'html-comment') return fail(`Expected type 'html-comment', got '${HenHtmlComment.lexicalNode.getType()}'`);
+		pass('lexicalNode property exists with correct type');
+	},
+
+	/*
+		isVisualCompatible
+	*/
+	'isVisualCompatible should return true for comment nodes': async ({pass, fail}) => {
+		const commentNode = document.createComment('test');
+		if(!HenHtmlComment.lexicalNode.isVisualCompatible(commentNode)) return fail('Should return true for comment nodes');
+		pass('Returns true for comment nodes');
+	},
+
+	'isVisualCompatible should return false for element nodes': async ({pass, fail}) => {
+		const el = document.createElement('div');
+		if(HenHtmlComment.lexicalNode.isVisualCompatible(el)) return fail('Should return false for element nodes');
+		pass('Returns false for element nodes');
+	},
+
+	'isVisualCompatible should return false for text nodes': async ({pass, fail}) => {
+		const textNode = document.createTextNode('hello');
+		if(HenHtmlComment.lexicalNode.isVisualCompatible(textNode)) return fail('Should return false for text nodes');
+		pass('Returns false for text nodes');
+	},
+
+	/*
+		preprocessHtml
+	*/
+	'preprocessHtml should convert comments to spans': async ({pass, fail}) => {
+		const result = HenHtmlComment.lexicalNode.preprocessHtml('<p>text <!-- hello --> more</p>');
+		if(result.includes('<!--')) return fail('Comment should be replaced');
+		if(!result.includes('data-html-comment=')) return fail(`Expected data-html-comment attribute, got '${result}'`);
+		if(!result.includes('<span')) return fail('Should convert to span element');
+		pass('Converts comments to spans');
+	},
+
+	'preprocessHtml should handle multiple comments': async ({pass, fail}) => {
+		const result = HenHtmlComment.lexicalNode.preprocessHtml('<!-- a --><!-- b -->');
+		const count = (result.match(/data-html-comment/g) || []).length;
+		if(count !== 2) return fail(`Expected 2 spans, got ${count}`);
+		pass('Handles multiple comments');
+	},
+
+	'preprocessHtml should handle multiline comments': async ({pass, fail}) => {
+		const result = HenHtmlComment.lexicalNode.preprocessHtml('<!-- line1\nline2 -->');
+		if(result.includes('<!--')) return fail('Multiline comment should be replaced');
+		if(!result.includes('data-html-comment')) return fail('Should produce data-html-comment attribute');
+		pass('Handles multiline comments');
+	},
+
+	'preprocessHtml should leave non-comment HTML untouched': async ({pass, fail}) => {
+		const html = '<p>No comments here</p>';
+		const result = HenHtmlComment.lexicalNode.preprocessHtml(html);
+		if(result !== html) return fail(`Should not modify non-comment HTML, got '${result}'`);
+		pass('Leaves non-comment HTML untouched');
+	},
+
+	'preprocessHtml should escape quotes in comment text': async ({pass, fail}) => {
+		const result = HenHtmlComment.lexicalNode.preprocessHtml('<!-- say "hello" -->');
+		if(result.includes('<!--')) return fail('Comment should be replaced');
+		if(!result.includes('&quot;')) return fail('Quotes should be escaped in attribute');
+		pass('Escapes quotes in comment text');
+	},
+
+	/*
+		importDOM
+	*/
+	'importDOM should return span handler': async ({pass, fail}) => {
+		const domConfig = HenHtmlComment.lexicalNode.importDOM();
+		if(!domConfig || !domConfig.span) return fail('importDOM should return config with span key');
+		pass('importDOM returns span handler');
+	},
+
+	'importDOM span handler should return null for non-comment spans': async ({pass, fail}) => {
+		const domConfig = HenHtmlComment.lexicalNode.importDOM();
+		const span = document.createElement('span');
+		const result = domConfig.span(span);
+		if(result !== null) return fail('Should return null for spans without data-html-comment');
+		pass('Returns null for non-comment spans');
+	},
+
+	'importDOM span handler should return conversion for comment spans': async ({pass, fail}) => {
+		const domConfig = HenHtmlComment.lexicalNode.importDOM();
+		const span = document.createElement('span');
+		span.setAttribute('data-html-comment', 'test comment');
+		const result = domConfig.span(span);
+		if(!result) return fail('Should return conversion for comment spans');
+		if(!result.conversion) return fail('Result should have conversion function');
+		if(result.priority !== 2) return fail(`Expected priority 2, got ${result.priority}`);
+		pass('Returns conversion for comment spans');
+	},
+
+	/*
+		Lexical Node (static only - instance methods require active Lexical editor)
+	*/
+	'lexical node should have correct type': async ({pass, fail}) => {
+		if(HenHtmlComment.lexicalNode.getType() !== 'html-comment') return fail('Type should be html-comment');
+		pass('Type is html-comment');
+	}
+};