kempo-ui 0.3.8 → 0.3.10

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

@@ -375,5 +375,212 @@ export default {
 		}
 		cleanup(container);
 		pass('Empty spans are unwrapped');
+	},
+
+	/*
+		Code Editor Proxy Methods
+	*/
+	'should have code editor proxy methods': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		const methods = ['copyToClipboard', 'setEditorTheme', 'openFind', 'foldAll', 'unfoldAll', 'increaseFontSize', 'decreaseFontSize', 'setWordWrap', 'setMinimap', 'resolveMonacoTheme'];
+		for(const m of methods){
+			if(typeof editor[m] !== 'function'){
+				cleanup(container);
+				return fail(`Missing method: ${m}`);
+			}
+		}
+		cleanup(container);
+		pass('All code editor proxy methods exist');
+	},
+
+	'should initialize code editor properties': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		if(editor.editorTheme !== 'auto'){
+			cleanup(container);
+			return fail(`Expected editorTheme 'auto', got '${editor.editorTheme}'`);
+		}
+		if(editor.wordWrap !== true){
+			cleanup(container);
+			return fail(`Expected wordWrap true, got ${editor.wordWrap}`);
+		}
+		if(editor.minimapEnabled !== false){
+			cleanup(container);
+			return fail(`Expected minimapEnabled false, got ${editor.minimapEnabled}`);
+		}
+		if(editor.fontSize !== 14){
+			cleanup(container);
+			return fail(`Expected fontSize 14, got ${editor.fontSize}`);
+		}
+		cleanup(container);
+		pass('Code editor properties initialized correctly');
+	},
+
+	'undo should work in code mode': async ({pass, fail}) => {
+		const { container, editor } = await createEditor({ value: '<p>Hello</p>' });
+		await editor.setMode('code');
+		await wait(500);
+		try {
+			editor.undo();
+			cleanup(container);
+			pass('undo works in code mode');
+		} catch(e) {
+			cleanup(container);
+			fail(`undo threw in code mode: ${e.message}`);
+		}
+	},
+
+	'redo should work in code mode': async ({pass, fail}) => {
+		const { container, editor } = await createEditor({ value: '<p>Hello</p>' });
+		await editor.setMode('code');
+		await wait(500);
+		try {
+			editor.redo();
+			cleanup(container);
+			pass('redo works in code mode');
+		} catch(e) {
+			cleanup(container);
+			fail(`redo threw in code mode: ${e.message}`);
+		}
+	},
+
+	'setEditorTheme should update editorTheme property': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.setEditorTheme('dark');
+		if(editor.editorTheme !== 'dark'){
+			cleanup(container);
+			return fail(`Expected 'dark', got '${editor.editorTheme}'`);
+		}
+		editor.setEditorTheme('auto');
+		if(editor.editorTheme !== 'auto'){
+			cleanup(container);
+			return fail(`Expected 'auto', got '${editor.editorTheme}'`);
+		}
+		cleanup(container);
+		pass('setEditorTheme updates property');
+	},
+
+	'setEditorTheme should reject invalid values': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.setEditorTheme('invalid');
+		if(editor.editorTheme !== 'auto'){
+			cleanup(container);
+			return fail(`Should not accept invalid theme, got '${editor.editorTheme}'`);
+		}
+		cleanup(container);
+		pass('setEditorTheme rejects invalid values');
+	},
+
+	'increaseFontSize should increase fontSize': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.increaseFontSize();
+		if(editor.fontSize !== 16){
+			cleanup(container);
+			return fail(`Expected 16, got ${editor.fontSize}`);
+		}
+		cleanup(container);
+		pass('increaseFontSize works');
+	},
+
+	'decreaseFontSize should decrease fontSize': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.decreaseFontSize();
+		if(editor.fontSize !== 12){
+			cleanup(container);
+			return fail(`Expected 12, got ${editor.fontSize}`);
+		}
+		cleanup(container);
+		pass('decreaseFontSize works');
+	},
+
+	'fontSize should clamp to bounds': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		for(let i = 0; i < 20; i++) editor.increaseFontSize();
+		if(editor.fontSize !== 40){
+			cleanup(container);
+			return fail(`Expected max 40, got ${editor.fontSize}`);
+		}
+		editor.fontSize = 14;
+		for(let i = 0; i < 20; i++) editor.decreaseFontSize();
+		if(editor.fontSize !== 8){
+			cleanup(container);
+			return fail(`Expected min 8, got ${editor.fontSize}`);
+		}
+		cleanup(container);
+		pass('fontSize clamps correctly');
+	},
+
+	'setWordWrap should update wordWrap property': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.setWordWrap(false);
+		if(editor.wordWrap !== false){
+			cleanup(container);
+			return fail(`Expected false, got ${editor.wordWrap}`);
+		}
+		editor.setWordWrap(true);
+		if(editor.wordWrap !== true){
+			cleanup(container);
+			return fail(`Expected true, got ${editor.wordWrap}`);
+		}
+		cleanup(container);
+		pass('setWordWrap updates property');
+	},
+
+	'setMinimap should update minimapEnabled property': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.setMinimap(true);
+		if(editor.minimapEnabled !== true){
+			cleanup(container);
+			return fail(`Expected true, got ${editor.minimapEnabled}`);
+		}
+		editor.setMinimap(false);
+		if(editor.minimapEnabled !== false){
+			cleanup(container);
+			return fail(`Expected false, got ${editor.minimapEnabled}`);
+		}
+		cleanup(container);
+		pass('setMinimap updates property');
+	},
+
+	'resolveMonacoTheme should return correct theme strings': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		editor.editorTheme = 'dark';
+		if(editor.resolveMonacoTheme() !== 'vs-dark'){
+			cleanup(container);
+			return fail(`Expected 'vs-dark' for dark theme`);
+		}
+		editor.editorTheme = 'light';
+		if(editor.resolveMonacoTheme() !== 'vs'){
+			cleanup(container);
+			return fail(`Expected 'vs' for light theme`);
+		}
+		editor.editorTheme = 'auto';
+		const autoTheme = editor.resolveMonacoTheme();
+		if(autoTheme !== 'vs' && autoTheme !== 'vs-dark'){
+			cleanup(container);
+			return fail(`Expected 'vs' or 'vs-dark' for auto, got '${autoTheme}'`);
+		}
+		cleanup(container);
+		pass('resolveMonacoTheme returns correct strings');
+	},
+
+	'proxy methods should return this for chaining': async ({pass, fail}) => {
+		const { container, editor } = await createEditor();
+		const methods = [
+			['setEditorTheme', 'dark'],
+			['setWordWrap', false],
+			['setMinimap', true],
+			['increaseFontSize'],
+			['decreaseFontSize'],
+			['copyToClipboard']
+		];
+		for(const [method, ...args] of methods){
+			const result = editor[method](...args);
+			if(result !== editor){
+				cleanup(container);
+				return fail(`${method} should return this`);
+			}
+		}
+		cleanup(container);
+		pass('Proxy methods return this for chaining');
 	}
 };

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

@@ -0,0 +1,57 @@
+import '../../../src/components/CodeEditor.js';
+import '../../../src/components/codeEditorControls/CopyCode.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-code-editor language="javascript" style="height:200px">
+			<k-cec-copy-code slot="toolbar-top-left"></k-cec-copy-code>
+		</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-copy-code');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	'should create element with 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();
+	},
+
+	'click should call editor.copyToClipboard()': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		let called = false;
+		editor.copyToClipboard = () => { called = true; return editor; };
+		control.shadowRoot.querySelector('button').click();
+		if(!called){
+			cleanup(container);
+			return fail('Should call editor.copyToClipboard() on click');
+		}
+		cleanup(container);
+		pass();
+	}
+};

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

@@ -0,0 +1,70 @@
+import '../../../src/components/CodeEditor.js';
+import '../../../src/components/codeEditorControls/EditorTheme.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-code-editor language="javascript" style="height:200px">
+			<k-cec-editor-theme slot="toolbar-top-right"></k-cec-editor-theme>
+		</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-editor-theme');
+	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 default to auto': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		if(control.value !== 'auto'){
+			cleanup(container);
+			return fail(`Expected 'auto', got '${control.value}'`);
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'change should call editor.setEditorTheme()': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		let calledWith = null;
+		editor.setEditorTheme = theme => { calledWith = theme; return editor; };
+		const select = control.shadowRoot.querySelector('select');
+		select.value = 'dark';
+		select.dispatchEvent(new Event('change'));
+		if(calledWith !== 'dark'){
+			cleanup(container);
+			return fail(`Expected setEditorTheme('dark'), got '${calledWith}'`);
+		}
+		cleanup(container);
+		pass();
+	}
+};

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

@@ -0,0 +1,57 @@
+import '../../../src/components/CodeEditor.js';
+import '../../../src/components/codeEditorControls/FindReplace.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-code-editor language="javascript" style="height:200px">
+			<k-cec-find-replace slot="toolbar-top-left"></k-cec-find-replace>
+		</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-find-replace');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	'should create element with 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();
+	},
+
+	'click should call editor.openFind()': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		let called = false;
+		editor.openFind = () => { called = true; };
+		control.shadowRoot.querySelector('button').click();
+		if(!called){
+			cleanup(container);
+			return fail('Should call editor.openFind() on click');
+		}
+		cleanup(container);
+		pass();
+	}
+};

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

@@ -0,0 +1,92 @@
+import '../../../src/components/CodeEditor.js';
+import '../../../src/components/codeEditorControls/FoldAll.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-code-editor language="javascript" style="height:200px">
+			<k-cec-fold-all slot="toolbar-top-left"></k-cec-fold-all>
+		</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-fold-all');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	'should create element with 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 unfolded': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(control.folded){
+			cleanup(container);
+			return fail('Should default to unfolded');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'click should toggle to folded and call foldAll': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		let called = false;
+		editor.foldAll = () => { called = true; return editor; };
+		control.shadowRoot.querySelector('button').click();
+		if(!called){
+			cleanup(container);
+			return fail('Should call editor.foldAll()');
+		}
+		if(!control.folded){
+			cleanup(container);
+			return fail('Should set folded to true');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'second click should unfold and call unfoldAll': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		editor.foldAll = () => editor;
+		editor.unfoldAll = () => { return editor; };
+		control.shadowRoot.querySelector('button').click();
+		let called = false;
+		editor.unfoldAll = () => { called = true; return editor; };
+		control.shadowRoot.querySelector('button').click();
+		if(!called){
+			cleanup(container);
+			return fail('Should call editor.unfoldAll()');
+		}
+		if(control.folded){
+			cleanup(container);
+			return fail('Should set folded to false');
+		}
+		cleanup(container);
+		pass();
+	}
+};

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

@@ -0,0 +1,74 @@
+import '../../../src/components/CodeEditor.js';
+import '../../../src/components/codeEditorControls/FontSize.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-code-editor language="javascript" style="height:200px">
+			<k-cec-font-size slot="toolbar-top-left"></k-cec-font-size>
+		</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-font-size');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	'should render two buttons': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		const buttons = control.shadowRoot.querySelectorAll('button');
+		if(buttons.length !== 2){
+			cleanup(container);
+			return fail(`Expected 2 buttons, got ${buttons.length}`);
+		}
+		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();
+	},
+
+	'increase click should call editor.increaseFontSize()': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		let called = false;
+		editor.increaseFontSize = () => { called = true; return editor; };
+		const buttons = control.shadowRoot.querySelectorAll('button');
+		buttons[1].click();
+		if(!called){
+			cleanup(container);
+			return fail('Should call editor.increaseFontSize() on second button click');
+		}
+		cleanup(container);
+		pass();
+	},
+
+	'decrease click should call editor.decreaseFontSize()': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		let called = false;
+		editor.decreaseFontSize = () => { called = true; return editor; };
+		const buttons = control.shadowRoot.querySelectorAll('button');
+		buttons[0].click();
+		if(!called){
+			cleanup(container);
+			return fail('Should call editor.decreaseFontSize() on first button click');
+		}
+		cleanup(container);
+		pass();
+	}
+};