kempo-ui 0.0.2

package/tests/HybridComponent.browser-test.js

@@ -0,0 +1,214 @@
+import HybridComponent from '/src/components/HybridComponent.js';
+import { html } from '/src/lit-all.min.js';
+
+class TestHybridComponent extends HybridComponent {
+	render() {
+		return html`<p>Shadow content</p>`;
+	}
+	
+	renderLightDom() {
+		return html`<span>Light content</span>`;
+	}
+}
+
+customElements.define('test-hybrid-component', TestHybridComponent);
+
+export default {
+	'should inherit shadow root with stylesheet from ShadowComponent': async ({pass, fail, log}) => {
+		const component = new TestHybridComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 0));
+		
+		if(!component.shadowRoot) {
+			document.body.removeChild(component);
+			fail('Component should have shadow root');
+			return;
+		}
+		
+		const stylesheetLink = component.shadowRoot.querySelector('link[href="/kempo.min.css"]');
+		if(!stylesheetLink) {
+			document.body.removeChild(component);
+			fail('Shadow root should contain kempo.min.css link');
+			return;
+		}
+		
+		log('✓ Inherited shadow root with stylesheet from ShadowComponent');
+		document.body.removeChild(component);
+		pass('HybridComponent inherits ShadowComponent functionality');
+	},
+
+	'should create light root for light DOM rendering': async ({pass, fail, log}) => {
+		const component = new TestHybridComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 0));
+		
+		if(!component.lightRoot) {
+			document.body.removeChild(component);
+			fail('Component should have lightRoot property');
+			return;
+		}
+		
+		if(component.lightRoot.tagName !== 'DIV') {
+			document.body.removeChild(component);
+			fail('lightRoot should be a div element');
+			return;
+		}
+		
+		if(component.lightRoot.style.display !== 'contents') {
+			document.body.removeChild(component);
+			fail('lightRoot should have display: contents');
+			return;
+		}
+		
+		if(component.lightRoot.slot !== 'lightRoot') {
+			document.body.removeChild(component);
+			fail('lightRoot should have slot="lightRoot"');
+			return;
+		}
+		
+		log('✓ Light root properly configured for hybrid rendering');
+		document.body.removeChild(component);
+		pass('HybridComponent creates proper light root');
+	},
+
+	'should render shadow DOM content': async ({pass, fail, log}) => {
+		const component = new TestHybridComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 10));
+		
+		const shadowParagraph = component.renderRoot.querySelector('p');
+		if(!shadowParagraph) {
+			document.body.removeChild(component);
+			fail('Shadow DOM should contain paragraph element');
+			return;
+		}
+		
+		if(shadowParagraph.textContent !== 'Shadow content') {
+			document.body.removeChild(component);
+			fail(`Expected "Shadow content", got "${shadowParagraph.textContent}"`);
+			return;
+		}
+		
+		log('✓ Shadow DOM content rendered correctly');
+		document.body.removeChild(component);
+		pass('HybridComponent renders shadow DOM content');
+	},
+
+	'should render light DOM content': async ({pass, fail, log}) => {
+		const component = new TestHybridComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 10));
+		
+		const lightSpan = component.lightRoot.querySelector('span');
+		if(!lightSpan) {
+			document.body.removeChild(component);
+			fail('Light DOM should contain span element');
+			return;
+		}
+		
+		if(lightSpan.textContent !== 'Light content') {
+			document.body.removeChild(component);
+			fail(`Expected "Light content", got "${lightSpan.textContent}"`);
+			return;
+		}
+		
+		log('✓ Light DOM content rendered correctly');
+		document.body.removeChild(component);
+		pass('HybridComponent renders light DOM content');
+	},
+
+	'should render both shadow and light DOM simultaneously': async ({pass, fail, log}) => {
+		const component = new TestHybridComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 10));
+		
+		const shadowContent = component.renderRoot.querySelector('p');
+		const lightContent = component.lightRoot.querySelector('span');
+		
+		if(!shadowContent || shadowContent.textContent !== 'Shadow content') {
+			document.body.removeChild(component);
+			fail('Shadow content should be present');
+			return;
+		}
+		
+		if(!lightContent || lightContent.textContent !== 'Light content') {
+			document.body.removeChild(component);
+			fail('Light content should be present');
+			return;
+		}
+		
+		log('✓ Both shadow and light content rendered simultaneously');
+		document.body.removeChild(component);
+		pass('HybridComponent renders both DOM types');
+	},
+
+	'should preserve natural children alongside hybrid content': async ({pass, fail, log}) => {
+		const component = new TestHybridComponent();
+		const naturalChild = document.createElement('div');
+		naturalChild.textContent = 'Natural child';
+		component.appendChild(naturalChild);
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 10));
+		
+		const foundNaturalChild = component.querySelector('div');
+		if(!foundNaturalChild || foundNaturalChild.textContent !== 'Natural child') {
+			document.body.removeChild(component);
+			fail('Natural child should be preserved');
+			return;
+		}
+		
+		const shadowContent = component.renderRoot.querySelector('p');
+		const lightContent = component.lightRoot.querySelector('span');
+		
+		if(!shadowContent || !lightContent) {
+			document.body.removeChild(component);
+			fail('Both rendered contents should be present with natural children');
+			return;
+		}
+		
+		log('✓ Natural children preserved alongside hybrid rendering');
+		document.body.removeChild(component);
+		pass('HybridComponent preserves natural children');
+	},
+
+	'should handle slot system for light root': async ({pass, fail, log}) => {
+		const component = new TestHybridComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 10));
+		await component.updateComplete;
+		
+		// The slot should be in the render root (which is the div container)
+		const slot = component.renderRoot.querySelector('slot[name="lightRoot"]');
+		const lightContent = component.lightRoot.querySelector('span');
+		
+		if(!slot && !lightContent) {
+			document.body.removeChild(component);
+			fail('Either slot should exist or light content should be rendered via slotting');
+			return;
+		}
+		
+		if(component.lightRoot.slot !== 'lightRoot') {
+			document.body.removeChild(component);
+			fail('lightRoot should be assigned to lightRoot slot');
+			return;
+		}
+		
+		// Check that light content is actually rendered
+		if(!lightContent || lightContent.textContent !== 'Light content') {
+			document.body.removeChild(component);
+			fail('Light content should be rendered through slot system');
+			return;
+		}
+		
+		log('✓ Slot system working - light content rendered');
+		document.body.removeChild(component);
+		pass('HybridComponent implements proper slot system');
+	}
+};

package/tests/LightComponent.browser-test.js

@@ -0,0 +1,169 @@
+import LightComponent from '/src/components/LightComponent.js';
+import { html } from '/src/lit-all.min.js';
+
+class TestLightComponent extends LightComponent {
+	renderLightDom() {
+		return html`<p>Test light content</p>`;
+	}
+}
+
+customElements.define('test-light-component', TestLightComponent);
+
+export default {
+	'should not create shadow root': async ({pass, fail, log}) => {
+		const component = new TestLightComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 0));
+		
+		if(component.shadowRoot) {
+			document.body.removeChild(component);
+			fail('LightComponent should not have shadow root');
+			return;
+		}
+		
+		log('✓ No shadow root created as expected');
+		document.body.removeChild(component);
+		pass('LightComponent does not create shadow root');
+	},
+
+	'should have itself as render root': async ({pass, fail, log}) => {
+		const component = new TestLightComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 0));
+		
+		if(component.renderRoot !== component) {
+			document.body.removeChild(component);
+			fail('Render root should be the component itself');
+			return;
+		}
+		
+		log('✓ Component is its own render root');
+		document.body.removeChild(component);
+		pass('LightComponent uses itself as render root');
+	},
+
+	'should create light root container': async ({pass, fail, log}) => {
+		const component = new TestLightComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 0));
+		
+		if(!component.lightRoot) {
+			document.body.removeChild(component);
+			fail('Component should have lightRoot property');
+			return;
+		}
+		
+		if(component.lightRoot.tagName !== 'DIV') {
+			document.body.removeChild(component);
+			fail('lightRoot should be a div element');
+			return;
+		}
+		
+		if(component.lightRoot.style.display !== 'contents') {
+			document.body.removeChild(component);
+			fail('lightRoot should have display: contents');
+			return;
+		}
+		
+		if(component.lightRoot.parentNode !== component) {
+			document.body.removeChild(component);
+			fail('lightRoot should be child of component');
+			return;
+		}
+		
+		log('✓ Light root container properly configured');
+		document.body.removeChild(component);
+		pass('LightComponent creates proper light root container');
+	},
+
+	'should render content in light root': async ({pass, fail, log}) => {
+		const component = new TestLightComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 10));
+		
+		const paragraph = component.lightRoot.querySelector('p');
+		if(!paragraph) {
+			document.body.removeChild(component);
+			fail('Component should render paragraph in light root');
+			return;
+		}
+		
+		if(paragraph.textContent !== 'Test light content') {
+			document.body.removeChild(component);
+			fail(`Expected "Test light content", got "${paragraph.textContent}"`);
+			return;
+		}
+		
+		log('✓ Content rendered properly in light root');
+		document.body.removeChild(component);
+		pass('LightComponent renders content in light DOM');
+	},
+
+	'should preserve natural children': async ({pass, fail, log}) => {
+		const component = new TestLightComponent();
+		const naturalChild = document.createElement('span');
+		naturalChild.textContent = 'Natural child';
+		component.appendChild(naturalChild);
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 10));
+		
+		const foundNaturalChild = component.querySelector('span');
+		if(!foundNaturalChild) {
+			document.body.removeChild(component);
+			fail('Natural child should be preserved');
+			return;
+		}
+		
+		if(foundNaturalChild.textContent !== 'Natural child') {
+			document.body.removeChild(component);
+			fail('Natural child content should be preserved');
+			return;
+		}
+		
+		const renderedContent = component.lightRoot.querySelector('p');
+		if(!renderedContent) {
+			document.body.removeChild(component);
+			fail('Rendered content should also be present');
+			return;
+		}
+		
+		log('✓ Natural children preserved alongside rendered content');
+		document.body.removeChild(component);
+		pass('LightComponent preserves natural children');
+	},
+
+	'should call super.updated() requirement': async ({pass, fail, log}) => {
+		class BadLightComponent extends LightComponent {
+			updated() {
+				// Intentionally not calling super.updated()
+			}
+			
+			renderLightDom() {
+				return html`<p>Should not render</p>`;
+			}
+		}
+		
+		customElements.define('bad-light-component', BadLightComponent);
+		
+		const component = new BadLightComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 10));
+		
+		const paragraph = component.lightRoot?.querySelector('p');
+		if(paragraph) {
+			document.body.removeChild(component);
+			fail('Content should not render without super.updated() call');
+			return;
+		}
+		
+		log('✓ Content does not render without super.updated()');
+		document.body.removeChild(component);
+		pass('LightComponent requires super.updated() to function');
+	}
+};

package/tests/ShadowComponent.browser-test.js

@@ -0,0 +1,130 @@
+import ShadowComponent from '/src/components/ShadowComponent.js';
+import { html } from '/src/lit-all.min.js';
+
+class TestShadowComponent extends ShadowComponent {
+	render() {
+		return html`<p>Test shadow content</p>`;
+	}
+}
+
+customElements.define('test-shadow-component', TestShadowComponent);
+
+export default {
+	'should create shadow root with stylesheet': async ({pass, fail, log}) => {
+		const component = new TestShadowComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 0));
+		
+		if(!component.shadowRoot) {
+			document.body.removeChild(component);
+			fail('Component should have shadow root');
+			return;
+		}
+		
+		const stylesheetLink = component.shadowRoot.querySelector('link[href="/kempo.min.css"]');
+		if(!stylesheetLink) {
+			document.body.removeChild(component);
+			fail('Shadow root should contain kempo.min.css link');
+			return;
+		}
+		
+		if(stylesheetLink.rel !== 'stylesheet') {
+			document.body.removeChild(component);
+			fail('Link should have rel="stylesheet"');
+			return;
+		}
+		
+		log('✓ Shadow root created with proper stylesheet');
+		document.body.removeChild(component);
+		pass('ShadowComponent creates shadow root with stylesheet injection');
+	},
+
+	'should have render container as render root': async ({pass, fail, log}) => {
+		const component = new TestShadowComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 0));
+		
+		const renderRoot = component.renderRoot;
+		if(!renderRoot) {
+			document.body.removeChild(component);
+			fail('Component should have render root');
+			return;
+		}
+		
+		if(renderRoot.tagName !== 'DIV') {
+			document.body.removeChild(component);
+			fail('Render root should be a div element');
+			return;
+		}
+		
+		if(renderRoot.parentNode !== component.shadowRoot) {
+			document.body.removeChild(component);
+			fail('Render root should be child of shadow root');
+			return;
+		}
+		
+		log('✓ Render root is properly configured div element');
+		document.body.removeChild(component);
+		pass('ShadowComponent has proper render container setup');
+	},
+
+	'should render content inside render container': async ({pass, fail, log}) => {
+		const component = new TestShadowComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 10));
+		
+		const paragraph = component.renderRoot.querySelector('p');
+		if(!paragraph) {
+			document.body.removeChild(component);
+			fail('Component should render paragraph element');
+			return;
+		}
+		
+		if(paragraph.textContent !== 'Test shadow content') {
+			document.body.removeChild(component);
+			fail(`Expected "Test shadow content", got "${paragraph.textContent}"`);
+			return;
+		}
+		
+		log('✓ Content rendered properly inside render container');
+		document.body.removeChild(component);
+		pass('ShadowComponent renders content correctly');
+	},
+
+	'should maintain stylesheet after re-rendering': async ({pass, fail, log}) => {
+		const component = new TestShadowComponent();
+		document.body.appendChild(component);
+		
+		await new Promise(resolve => setTimeout(resolve, 0));
+		
+		const stylesheetBefore = component.shadowRoot.querySelector('link[href="/kempo.min.css"]');
+		if(!stylesheetBefore) {
+			document.body.removeChild(component);
+			fail('Stylesheet should exist before re-render');
+			return;
+		}
+		
+		component.requestUpdate();
+		await component.updateComplete;
+		
+		const stylesheetAfter = component.shadowRoot.querySelector('link[href="/kempo.min.css"]');
+		if(!stylesheetAfter) {
+			document.body.removeChild(component);
+			fail('Stylesheet should persist after re-render');
+			return;
+		}
+		
+		if(stylesheetBefore !== stylesheetAfter) {
+			document.body.removeChild(component);
+			fail('Stylesheet should be the same element after re-render');
+			return;
+		}
+		
+		log('✓ Stylesheet persists through re-renders');
+		document.body.removeChild(component);
+		pass('ShadowComponent maintains stylesheet across updates');
+	}
+};