kempo-ui 0.3.8 → 0.3.10

package/tests/components/codeEditorControls/Fullscreen.browser-test.js

@@ -0,0 +1,152 @@
+import '../../../src/components/CodeEditor.js';
+import '../../../src/components/HtmlEditor.js';
+import '../../../src/components/codeEditorControls/Fullscreen.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-code-editor language="javascript" style="height:200px">
+			<k-cec-fullscreen slot="toolbar-top-right"></k-cec-fullscreen>
+		</k-code-editor>
+	`;
+	document.body.appendChild(container);
+	const editor = container.querySelector('k-code-editor');
+	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
+	const control = container.querySelector('k-cec-fullscreen');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	'should create element with shadow root': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control?.shadowRoot){
+			cleanup(container);
+			return fail('Should create element with shadow root');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should render a button': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		if(!control.shadowRoot.querySelector('button')){
+			cleanup(container);
+			return fail('Should render a button');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should find parent editor': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		if(control.editor !== editor){
+			cleanup(container);
+			return fail('Should find parent k-code-editor');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should default to fullscreen false': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(control.fullscreen !== false){
+			cleanup(container);
+			return fail('Should default to fullscreen=false');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'click should call toggleFullscreen on editor': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		let called = false;
+		const orig = editor.toggleFullscreen.bind(editor);
+		editor.toggleFullscreen = () => { called = true; return orig(); };
+		control.shadowRoot.querySelector('button').click();
+		if(!called){
+			cleanup(container);
+			return fail('Should call toggleFullscreen on click');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'click should toggle control fullscreen state to true': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		control.shadowRoot.querySelector('button').click();
+		await control.updateComplete;
+		if(!control.fullscreen){
+			cleanup(container);
+			return fail('Should set fullscreen to true after click');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'button title should update on fullscreen': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		const btnBefore = control.shadowRoot.querySelector('button');
+		if(btnBefore.title !== 'Fullscreen'){
+			cleanup(container);
+			return fail(`Expected title "Fullscreen", got "${btnBefore.title}"`);
+		}
+		editor.enterFullscreen();
+		await control.updateComplete;
+		const btnAfter = control.shadowRoot.querySelector('button');
+		if(btnAfter.title !== 'Exit Fullscreen'){
+			cleanup(container);
+			editor.exitFullscreen();
+			return fail(`Expected title "Exit Fullscreen", got "${btnAfter.title}"`);
+		}
+		editor.exitFullscreen();
+		cleanup(container);
+		pass();
+	},
+
+	'control should sync state when editor dispatches fullscreen-changed': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		editor.enterFullscreen();
+		await control.updateComplete;
+		if(!control.fullscreen){
+			editor.exitFullscreen();
+			cleanup(container);
+			return fail('Control should sync to fullscreen=true');
+		}
+		editor.exitFullscreen();
+		await control.updateComplete;
+		if(control.fullscreen){
+			cleanup(container);
+			return fail('Control should sync to fullscreen=false');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should not be hidden in visual mode when in html editor': async ({pass, fail}) => {
+		const container = document.createElement('div');
+		container.innerHTML = `
+			<k-html-editor>
+				<k-cec-fullscreen slot="toolbar-top-right"></k-cec-fullscreen>
+			</k-html-editor>
+		`;
+		document.body.appendChild(container);
+		const editor = container.querySelector('k-html-editor');
+		await new Promise(r => editor.addEventListener('ready', r, { once: true }));
+		const control = container.querySelector('k-cec-fullscreen');
+		await control.updateComplete;
+		if(control.hidden){
+			cleanup(container);
+			return fail('Fullscreen control should not be hidden in visual mode');
+		}
+		cleanup(container);
+		pass();
+	}
+};

package/tests/components/codeEditorControls/LanguageSelect.browser-test.js

@@ -0,0 +1,82 @@
+import '../../../src/components/CodeEditor.js';
+import '../../../src/components/codeEditorControls/LanguageSelect.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-code-editor language="javascript" style="height:200px">
+			<k-cec-language slot="toolbar-top-right"></k-cec-language>
+		</k-code-editor>
+	`;
+	document.body.appendChild(container);
+	const editor = container.querySelector('k-code-editor');
+	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
+	const control = container.querySelector('k-cec-language');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	'should create element with select': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		if(!control.shadowRoot.querySelector('select')){
+			cleanup(container);
+			return fail('Should render a select');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should find parent editor': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		if(control.editor !== editor){
+			cleanup(container);
+			return fail('Should find parent k-code-editor');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should sync initial value from editor language': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		if(control.value !== 'javascript'){
+			cleanup(container);
+			return fail(`Expected 'javascript', got '${control.value}'`);
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should have multiple language options': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		const options = control.shadowRoot.querySelectorAll('option');
+		if(options.length < 10){
+			cleanup(container);
+			return fail(`Expected at least 10 options, got ${options.length}`);
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'change should call editor.setLanguage()': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		let calledWith = null;
+		editor.setLanguage = lang => { calledWith = lang; return editor; };
+		const select = control.shadowRoot.querySelector('select');
+		select.value = 'html';
+		select.dispatchEvent(new Event('change'));
+		if(calledWith !== 'html'){
+			cleanup(container);
+			return fail(`Expected setLanguage('html'), got setLanguage('${calledWith}')`);
+		}
+		cleanup(container);
+		pass();
+	}
+};

package/tests/components/codeEditorControls/Minimap.browser-test.js

@@ -0,0 +1,84 @@
+import '../../../src/components/CodeEditor.js';
+import '../../../src/components/codeEditorControls/Minimap.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-code-editor language="javascript" style="height:200px">
+			<k-cec-minimap slot="toolbar-top-left"></k-cec-minimap>
+		</k-code-editor>
+	`;
+	document.body.appendChild(container);
+	const editor = container.querySelector('k-code-editor');
+	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
+	const control = container.querySelector('k-cec-minimap');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	'should create element': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control?.shadowRoot){
+			cleanup(container);
+			return fail('Should create element with shadow root');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should render a button': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		if(!control.shadowRoot.querySelector('button')){
+			cleanup(container);
+			return fail('Should render a button');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should find parent editor': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		if(control.editor !== editor){
+			cleanup(container);
+			return fail('Should find parent k-code-editor');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should default to inactive (minimap off)': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(control.active){
+			cleanup(container);
+			return fail('Should default to inactive');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'click should toggle minimap on': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		let called = false;
+		const orig = editor.toggleMinimap.bind(editor);
+		editor.toggleMinimap = () => { called = true; return orig(); };
+		control.shadowRoot.querySelector('button').click();
+		await editor.updateComplete;
+		await control.updateComplete;
+		if(!called){
+			cleanup(container);
+			return fail('Should call toggleMinimap on click');
+		}
+		if(!control.active){
+			cleanup(container);
+			return fail('Should toggle active to true');
+		}
+		cleanup(container);
+		pass();
+	}
+};

package/tests/components/codeEditorControls/ModeVisibility.browser-test.js

@@ -0,0 +1,82 @@
+import '../../../src/components/HtmlEditor.js';
+import '../../../src/components/codeEditorControls/CopyCode.js';
+import '../../../src/components/codeEditorControls/WordWrap.js';
+
+const createHtmlEditorWithControls = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-html-editor>
+			<k-cec-copy-code slot="toolbar-top-left"></k-cec-copy-code>
+			<k-cec-word-wrap slot="toolbar-top-left"></k-cec-word-wrap>
+		</k-html-editor>
+	`;
+	document.body.appendChild(container);
+	const editor = container.querySelector('k-html-editor');
+	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
+	const copyCode = container.querySelector('k-cec-copy-code');
+	const wordWrap = container.querySelector('k-cec-word-wrap');
+	return { container, editor, copyCode, wordWrap };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	'controls should be hidden in HtmlEditor visual mode': async ({pass, fail}) => {
+		const { container, copyCode, wordWrap } = await createHtmlEditorWithControls();
+		await copyCode.updateComplete;
+		if(!copyCode.hidden){
+			cleanup(container);
+			return fail('CopyCode should be hidden in visual mode');
+		}
+		if(!wordWrap.hidden){
+			cleanup(container);
+			return fail('WordWrap should be hidden in visual mode');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'controls should be visible in HtmlEditor code mode': async ({pass, fail}) => {
+		const { container, editor, copyCode, wordWrap } = await createHtmlEditorWithControls();
+		editor.mode = 'code';
+		await new Promise(r => editor.addEventListener('mode-changed', r, { once: true }));
+		await copyCode.updateComplete;
+		if(copyCode.hidden){
+			cleanup(container);
+			return fail('CopyCode should be visible in code mode');
+		}
+		if(wordWrap.hidden){
+			cleanup(container);
+			return fail('WordWrap should be visible in code mode');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'controls should hide again when switching back to visual': async ({pass, fail}) => {
+		const { container, editor, copyCode } = await createHtmlEditorWithControls();
+		editor.mode = 'code';
+		await new Promise(r => editor.addEventListener('mode-changed', r, { once: true }));
+		editor.mode = 'visual';
+		await new Promise(r => editor.addEventListener('mode-changed', r, { once: true }));
+		await copyCode.updateComplete;
+		if(!copyCode.hidden){
+			cleanup(container);
+			return fail('CopyCode should be hidden after switching back to visual');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'controls should find HtmlEditor as parent': async ({pass, fail}) => {
+		const { container, editor, copyCode } = await createHtmlEditorWithControls();
+		if(copyCode.editor !== editor){
+			cleanup(container);
+			return fail('Should find k-html-editor as parent');
+		}
+		cleanup(container);
+		pass();
+	}
+};

package/tests/components/codeEditorControls/UndoRedo.browser-test.js

@@ -0,0 +1,85 @@
+import '../../../src/components/CodeEditor.js';
+import '../../../src/components/codeEditorControls/Undo.js';
+import '../../../src/components/codeEditorControls/Redo.js';
+
+const createEditorWithControls = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-code-editor language="javascript" style="height:200px">
+			<k-cec-undo slot="toolbar-top-left"></k-cec-undo>
+			<k-cec-redo slot="toolbar-top-left"></k-cec-redo>
+		</k-code-editor>
+	`;
+	document.body.appendChild(container);
+	const editor = container.querySelector('k-code-editor');
+	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
+	const undo = container.querySelector('k-cec-undo');
+	const redo = container.querySelector('k-cec-redo');
+	return { container, editor, undo, redo };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	'undo should create element with button': async ({pass, fail}) => {
+		const { container, undo } = await createEditorWithControls();
+		await undo.updateComplete;
+		if(!undo.shadowRoot.querySelector('button')){
+			cleanup(container);
+			return fail('Undo should render a button');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'redo should create element with button': async ({pass, fail}) => {
+		const { container, redo } = await createEditorWithControls();
+		await redo.updateComplete;
+		if(!redo.shadowRoot.querySelector('button')){
+			cleanup(container);
+			return fail('Redo should render a button');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'undo should find parent editor': async ({pass, fail}) => {
+		const { container, editor, undo } = await createEditorWithControls();
+		if(undo.editor !== editor){
+			cleanup(container);
+			return fail('Undo should find parent k-code-editor');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'undo click should call editor.undo()': async ({pass, fail}) => {
+		const { container, editor, undo } = await createEditorWithControls();
+		await undo.updateComplete;
+		let called = false;
+		editor.undo = () => { called = true; };
+		undo.shadowRoot.querySelector('button').click();
+		if(!called){
+			cleanup(container);
+			return fail('Should call editor.undo() on click');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'redo click should call editor.redo()': async ({pass, fail}) => {
+		const { container, editor, redo } = await createEditorWithControls();
+		await redo.updateComplete;
+		let called = false;
+		editor.redo = () => { called = true; };
+		redo.shadowRoot.querySelector('button').click();
+		if(!called){
+			cleanup(container);
+			return fail('Should call editor.redo() on click');
+		}
+		cleanup(container);
+		pass();
+	}
+};

package/tests/components/codeEditorControls/WordWrap.browser-test.js

@@ -0,0 +1,95 @@
+import '../../../src/components/CodeEditor.js';
+import '../../../src/components/codeEditorControls/WordWrap.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-code-editor language="javascript" style="height:200px">
+			<k-cec-word-wrap slot="toolbar-top-left"></k-cec-word-wrap>
+		</k-code-editor>
+	`;
+	document.body.appendChild(container);
+	const editor = container.querySelector('k-code-editor');
+	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
+	const control = container.querySelector('k-cec-word-wrap');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	'should create element': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control?.shadowRoot){
+			cleanup(container);
+			return fail('Should create element with shadow root');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should render a button': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		if(!control.shadowRoot.querySelector('button')){
+			cleanup(container);
+			return fail('Should render a button');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should find parent editor': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		if(control.editor !== editor){
+			cleanup(container);
+			return fail('Should find parent k-code-editor');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should default to active (word wrap on)': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control.active){
+			cleanup(container);
+			return fail('Should default to active');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'click should toggle word wrap off': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		let called = false;
+		const orig = editor.toggleWordWrap.bind(editor);
+		editor.toggleWordWrap = () => { called = true; return orig(); };
+		control.shadowRoot.querySelector('button').click();
+		await editor.updateComplete;
+		await control.updateComplete;
+		if(!called){
+			cleanup(container);
+			return fail('Should call toggleWordWrap on click');
+		}
+		if(control.active){
+			cleanup(container);
+			return fail('Should toggle active to false');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'should not be hidden in CodeEditor': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		if(control.hidden){
+			cleanup(container);
+			return fail('Should not be hidden in CodeEditor');
+		}
+		cleanup(container);
+		pass();
+	}
+};