kempo-ui 0.3.7 → 0.3.8

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

@@ -0,0 +1,379 @@
+import HtmlEditor from '../../src/components/HtmlEditor.js';
+
+const wait = ms => new Promise(r => setTimeout(r, ms));
+
+const createEditor = async (options = {}) => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-html-editor
+			${options.value ? `value="${options.value.replace(/"/g, '&quot;')}"` : ''}
+			${options.mode ? `mode="${options.mode}"` : ''}
+			${options.nodes ? `nodes="${options.nodes}"` : ''}
+		></k-html-editor>
+	`;
+	document.body.appendChild(container);
+	const editor = container.querySelector('k-html-editor');
+	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
+	return { container, editor };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create html editor element': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		if(!(editor instanceof HtmlEditor)) {
+			cleanup(container);
+			return fail('Element should be instance of HtmlEditor');
+		}
+		cleanup(container);
+		pass('HtmlEditor element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		if(!editor.shadowRoot) {
+			cleanup(container);
+			return fail('HtmlEditor should have shadow root');
+		}
+		cleanup(container);
+		pass('HtmlEditor has shadow root');
+	},
+
+	'should default to visual mode': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		if(editor.mode !== 'visual') {
+			cleanup(container);
+			return fail(`Expected mode 'visual', got '${editor.mode}'`);
+		}
+		cleanup(container);
+		pass('Default mode is visual');
+	},
+
+	/*
+		Compatibility Detection - Compatible Content
+	*/
+	'isVisualCompatible should return true for simple HTML': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		if(!editor.isVisualCompatible('<p>Hello</p>')) {
+			cleanup(container);
+			return fail('Simple HTML should be compatible');
+		}
+		cleanup(container);
+		pass('Simple HTML is compatible');
+	},
+
+	'isVisualCompatible should return true for empty string': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		if(!editor.isVisualCompatible('')) {
+			cleanup(container);
+			return fail('Empty string should be compatible');
+		}
+		cleanup(container);
+		pass('Empty string is compatible');
+	},
+
+	'isVisualCompatible should return true for standard tags': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		const html = '<h1>Title</h1><p>Text</p><ul><li>Item</li></ul><a href="#">Link</a><strong>Bold</strong>';
+		if(!editor.isVisualCompatible(html)) {
+			cleanup(container);
+			return fail('Standard HTML tags should be compatible');
+		}
+		cleanup(container);
+		pass('Standard HTML tags are compatible');
+	},
+
+	/*
+		Compatibility Detection - Incompatible Content
+	*/
+	'isVisualCompatible should return false for svg': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		if(editor.isVisualCompatible('<p>Text</p><svg><rect/></svg>')) {
+			cleanup(container);
+			return fail('SVG should be incompatible');
+		}
+		cleanup(container);
+		pass('SVG is incompatible');
+	},
+
+	'isVisualCompatible should return false for script in body context': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		if(editor.isVisualCompatible('<p>Text</p><script>alert(1)</script><p>More</p>')) {
+			cleanup(container);
+			return fail('Script should be incompatible');
+		}
+		cleanup(container);
+		pass('Script is incompatible');
+	},
+
+	'isVisualCompatible should return false for style in body context': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		if(editor.isVisualCompatible('<p>Text</p><style>body{}</style><p>More</p>')) {
+			cleanup(container);
+			return fail('Style should be incompatible');
+		}
+		cleanup(container);
+		pass('Style is incompatible');
+	},
+
+	'isVisualCompatible should return false for form elements': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		const tags = ['form', 'input', 'textarea', 'select', 'button'];
+		for(const tag of tags) {
+			if(editor.isVisualCompatible(`<${tag}></${tag}>`)) {
+				cleanup(container);
+				return fail(`<${tag}> should be incompatible`);
+			}
+		}
+		cleanup(container);
+		pass('Form elements are incompatible');
+	},
+
+	'isVisualCompatible should return false for HTML comments without custom node': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		if(editor.isVisualCompatible('<p>Text <!-- comment --> more</p>')) {
+			cleanup(container);
+			return fail('HTML comments should be incompatible without HtmlComment node');
+		}
+		cleanup(container);
+		pass('HTML comments are incompatible without custom node');
+	},
+
+	/*
+		Auto Mode Detection
+	*/
+	'should auto-switch to code mode for incompatible initial value': async ({pass, fail}) => {
+		const { container, editor } = await createEditor({
+			value: '<p>Has SVG</p><svg><rect/></svg>'
+		});
+		if(editor.mode !== 'code') {
+			cleanup(container);
+			return fail(`Expected mode 'code' for incompatible content, got '${editor.mode}'`);
+		}
+		cleanup(container);
+		pass('Auto-switches to code mode for incompatible content');
+	},
+
+	'should stay in visual mode for compatible initial value': async ({pass, fail}) => {
+		const { container, editor } = await createEditor({
+			value: '<p>Simple paragraph</p>'
+		});
+		if(editor.mode !== 'visual') {
+			cleanup(container);
+			return fail(`Expected mode 'visual' for compatible content, got '${editor.mode}'`);
+		}
+		cleanup(container);
+		pass('Stays in visual mode for compatible content');
+	},
+
+	/*
+		Node Compatibility Hooks
+	*/
+	'should collect nodeCompatCheckers from custom nodes': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		if(!Array.isArray(editor.nodeCompatCheckers)) {
+			cleanup(container);
+			return fail('nodeCompatCheckers should be an array');
+		}
+		cleanup(container);
+		pass('nodeCompatCheckers is initialized as array');
+	},
+
+	'should collect nodePreprocessors from custom nodes': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		if(!Array.isArray(editor.nodePreprocessors)) {
+			cleanup(container);
+			return fail('nodePreprocessors should be an array');
+		}
+		cleanup(container);
+		pass('nodePreprocessors is initialized as array');
+	},
+
+	/*
+		Public Methods - Mode Control
+	*/
+	'setMode should accept visual': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.setMode('visual');
+		if(editor.mode !== 'visual') {
+			cleanup(container);
+			return fail(`Expected mode 'visual', got '${editor.mode}'`);
+		}
+		cleanup(container);
+		pass('setMode accepts visual');
+	},
+
+	'setMode should reject invalid modes': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.setMode('invalid');
+		if(editor.mode !== 'visual') {
+			cleanup(container);
+			return fail(`Mode should not change for invalid value, got '${editor.mode}'`);
+		}
+		cleanup(container);
+		pass('setMode rejects invalid modes');
+	},
+
+	'setMode should return this for chaining': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		const result = editor.setMode('visual');
+		if(result !== editor) {
+			cleanup(container);
+			return fail('setMode should return this');
+		}
+		cleanup(container);
+		pass('setMode returns this');
+	},
+
+	'toggleMode should switch from visual to code': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.toggleMode();
+		await wait(500);
+		if(editor.mode !== 'code') {
+			cleanup(container);
+			return fail(`Expected mode 'code' after toggle, got '${editor.mode}'`);
+		}
+		cleanup(container);
+		pass('toggleMode switches to code');
+	},
+
+	/*
+		Public Methods - Content Management
+	*/
+	'getValue should return current content': async ({pass, fail}) => {
+		const { container, editor } = await createEditor({ value: '<p>Test content</p>' });
+		const val = editor.getValue();
+		if(!val.includes('Test content')) {
+			cleanup(container);
+			return fail(`getValue should contain 'Test content', got '${val}'`);
+		}
+		cleanup(container);
+		pass('getValue returns current content');
+	},
+
+	'setValue should update content': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.setValue('<p>New content</p>');
+		const val = editor.getValue();
+		if(!val.includes('New content')) {
+			cleanup(container);
+			return fail(`setValue should update content, got '${val}'`);
+		}
+		cleanup(container);
+		pass('setValue updates content');
+	},
+
+	'setValue should auto-switch to code for incompatible content': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.setValue('<p>Text</p><svg><rect/></svg>');
+		await wait(300);
+		if(editor.mode !== 'code') {
+			cleanup(container);
+			return fail(`Expected mode 'code' after setting incompatible content, got '${editor.mode}'`);
+		}
+		cleanup(container);
+		pass('setValue auto-switches to code for incompatible content');
+	},
+
+	'setValue should return this for chaining': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		const result = editor.setValue('<p>Test</p>');
+		if(result !== editor) {
+			cleanup(container);
+			return fail('setValue should return this');
+		}
+		cleanup(container);
+		pass('setValue returns this');
+	},
+
+	'clear should empty the editor': async ({pass, fail}) => {
+		const { container, editor } = await createEditor({ value: '<p>Some content</p>' });
+		editor.clear();
+		const val = editor.getValue();
+		if(val.includes('Some content')) {
+			cleanup(container);
+			return fail('clear should remove content');
+		}
+		cleanup(container);
+		pass('clear empties the editor');
+	},
+
+	/*
+		Events
+	*/
+	'should dispatch ready event': async ({pass, fail}) => {
+		const container = document.createElement('div');
+		container.innerHTML = '<k-html-editor value="<p>Test</p>"></k-html-editor>';
+		const editor = container.querySelector('k-html-editor');
+		let fired = false;
+		editor.addEventListener('ready', () => { fired = true; }, { once: true });
+		document.body.appendChild(container);
+		await new Promise(r => setTimeout(r, 5000));
+		if(!fired) {
+			cleanup(container);
+			return fail('ready event should fire');
+		}
+		cleanup(container);
+		pass('ready event fires');
+	},
+
+	'should dispatch mode-changed event': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		let firedMode = null;
+		editor.addEventListener('mode-changed', e => { firedMode = e.detail.mode; }, { once: true });
+		editor.setMode('code');
+		await wait(500);
+		if(firedMode !== 'code') {
+			cleanup(container);
+			return fail(`Expected mode-changed with 'code', got '${firedMode}'`);
+		}
+		cleanup(container);
+		pass('mode-changed event fires');
+	},
+
+	/*
+		HTML Export Cleanup
+	*/
+	'cleanExportedHtml should strip k-editor classes': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		const cleaned = editor.cleanExportedHtml('<p class="k-editor-p">Text</p>');
+		if(cleaned.includes('k-editor-p')) {
+			cleanup(container);
+			return fail('k-editor classes should be stripped');
+		}
+		cleanup(container);
+		pass('k-editor classes are stripped');
+	},
+
+	'cleanExportedHtml should strip pre-wrap white-space': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		const cleaned = editor.cleanExportedHtml('<p style="white-space: pre-wrap;">Text</p>');
+		if(cleaned.includes('white-space')) {
+			cleanup(container);
+			return fail('white-space: pre-wrap should be stripped');
+		}
+		cleanup(container);
+		pass('white-space: pre-wrap is stripped');
+	},
+
+	'cleanExportedHtml should unwrap empty spans': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		const cleaned = editor.cleanExportedHtml('<p><span>Text</span></p>');
+		if(cleaned.includes('<span>')) {
+			cleanup(container);
+			return fail('Empty spans should be unwrapped');
+		}
+		if(!cleaned.includes('Text')) {
+			cleanup(container);
+			return fail('Text content should be preserved');
+		}
+		cleanup(container);
+		pass('Empty spans are unwrapped');
+	}
+};

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

@@ -0,0 +1,81 @@
+import NavSpacer from '../../src/components/NavSpacer.js';
+import '../../src/components/Nav.js';
+
+const createNavSpacer = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `<k-nav-spacer></k-nav-spacer>`;
+	document.body.appendChild(container);
+	const el = container.querySelector('k-nav-spacer');
+	await el.updateComplete;
+	return { container, el };
+};
+
+const cleanup = (container) => {
+	if(container && container.parentNode){
+		container.parentNode.removeChild(container);
+	}
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create nav-spacer element': async ({pass, fail}) => {
+		const { container, el } = await createNavSpacer();
+		if(!(el instanceof NavSpacer)){
+			cleanup(container);
+			return fail('Element should be instance of NavSpacer');
+		}
+		cleanup(container);
+		pass('NavSpacer element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, el } = await createNavSpacer();
+		if(!el.shadowRoot){
+			cleanup(container);
+			return fail('NavSpacer should have shadow root');
+		}
+		cleanup(container);
+		pass('NavSpacer has shadow root');
+	},
+
+	/*
+		Behaviour
+	*/
+	'should set height 0 when no fixed nav present': async ({pass, fail}) => {
+		const { container, el } = await createNavSpacer();
+		const h = el.style.height;
+		if(h !== '0px'){
+			cleanup(container);
+			return fail(`Expected height 0px when no k-nav[fixed] exists, got "${h}"`);
+		}
+		cleanup(container);
+		pass('Height is 0px when no fixed nav present');
+	},
+
+	'should match height of fixed nav when present': async ({pass, fail}) => {
+		const navContainer = document.createElement('div');
+		navContainer.innerHTML = `<k-nav fixed style="height:56px"></k-nav>`;
+		document.body.appendChild(navContainer);
+		await customElements.whenDefined('k-nav');
+		const nav = navContainer.querySelector('k-nav');
+		await nav.updateComplete;
+
+		const { container, el } = await createNavSpacer();
+
+		// Poll until ResizeObserver fires (up to 1s)
+		const start = Date.now();
+		while(el.style.height === '' && Date.now() - start < 1000){
+			await new Promise(r => setTimeout(r, 20));
+		}
+
+		const h = el.style.height;
+		cleanup(container);
+		cleanup(navContainer);
+		if(h === ''){
+			return fail('ResizeObserver never fired — height was never set');
+		}
+		pass(`NavSpacer height was set to ${h}`);
+	},
+};