kempo-ui 0.3.9 → 0.3.10

package/tests/components/htmlEditorControls/ClearFormatting.browser-test.js

@@ -0,0 +1,127 @@
+import '../../../src/components/HtmlEditor.js';
+import ClearFormatting from '../../../src/components/htmlEditorControls/ClearFormatting.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-html-editor>
+			<k-hec-clear-formatting slot="toolbar-top-left"></k-hec-clear-formatting>
+		</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-hec-clear-formatting');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create k-hec-clear-formatting element': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!(control instanceof ClearFormatting)){
+			cleanup(container);
+			return fail('Element should be instance of ClearFormatting');
+		}
+		cleanup(container);
+		pass('ClearFormatting element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control.shadowRoot){
+			cleanup(container);
+			return fail('ClearFormatting should have shadow root');
+		}
+		cleanup(container);
+		pass('ClearFormatting has shadow root');
+	},
+
+	'should render a button': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		const button = control.shadowRoot.querySelector('button');
+		if(!button){
+			cleanup(container);
+			return fail('ClearFormatting should render a button');
+		}
+		cleanup(container);
+		pass('ClearFormatting renders a button');
+	},
+
+	'should render format_clear icon': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		const icon = control.shadowRoot.querySelector('k-icon');
+		if(!icon){
+			cleanup(container);
+			return fail('ClearFormatting should render a k-icon');
+		}
+		if(icon.getAttribute('name') !== 'format_clear'){
+			cleanup(container);
+			return fail(`Expected icon name "format_clear", got "${icon.getAttribute('name')}"`);
+		}
+		cleanup(container);
+		pass('ClearFormatting renders format_clear icon');
+	},
+
+	/*
+		Editor Integration
+	*/
+	'should find parent editor': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		if(control.editor !== editor){
+			cleanup(container);
+			return fail('ClearFormatting should find its parent k-html-editor');
+		}
+		cleanup(container);
+		pass('ClearFormatting finds parent editor');
+	},
+
+	'click should call editor.removeFormat()': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		let called = false;
+		editor.removeFormat = () => { called = true; };
+		control.shadowRoot.querySelector('button').click();
+		if(!called){
+			cleanup(container);
+			return fail('Click should call editor.removeFormat()');
+		}
+		cleanup(container);
+		pass('Click calls editor.removeFormat()');
+	},
+
+	/*
+		Code Mode Visibility
+	*/
+	'should hide in code mode': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		editor.setMode('code');
+		await new Promise(r => editor.addEventListener('mode-changed', r, { once: true }));
+		await control.updateComplete;
+		if(!control.hidden){
+			cleanup(container);
+			return fail('ClearFormatting should be hidden in code mode');
+		}
+		cleanup(container);
+		pass('ClearFormatting is hidden in code mode');
+	},
+
+	'should be visible in visual mode': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		if(control.hidden){
+			cleanup(container);
+			return fail('ClearFormatting should be visible in visual mode');
+		}
+		cleanup(container);
+		pass('ClearFormatting is visible in visual mode');
+	},
+};

package/tests/components/htmlEditorControls/CodeBlock.browser-test.js

@@ -0,0 +1,143 @@
+import '../../../src/components/HtmlEditor.js';
+import CodeBlock from '../../../src/components/htmlEditorControls/CodeBlock.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-html-editor>
+			<k-hec-code-block slot="toolbar-top-left"></k-hec-code-block>
+		</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-hec-code-block');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create k-hec-code-block element': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!(control instanceof CodeBlock)){
+			cleanup(container);
+			return fail('Element should be instance of CodeBlock');
+		}
+		cleanup(container);
+		pass('CodeBlock element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control.shadowRoot){
+			cleanup(container);
+			return fail('CodeBlock should have shadow root');
+		}
+		cleanup(container);
+		pass('CodeBlock has shadow root');
+	},
+
+	'should render a button': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		const button = control.shadowRoot.querySelector('button');
+		if(!button){
+			cleanup(container);
+			return fail('CodeBlock should render a button');
+		}
+		cleanup(container);
+		pass('CodeBlock renders a button');
+	},
+
+	'should render code_blocks icon': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		const icon = control.shadowRoot.querySelector('k-icon');
+		if(!icon){
+			cleanup(container);
+			return fail('CodeBlock should render a k-icon');
+		}
+		if(icon.getAttribute('name') !== 'code_blocks'){
+			cleanup(container);
+			return fail(`Expected icon name "code_blocks", got "${icon.getAttribute('name')}"`);
+		}
+		cleanup(container);
+		pass('CodeBlock renders code_blocks icon');
+	},
+
+	/*
+		Editor Integration
+	*/
+	'should find parent editor': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		if(control.editor !== editor){
+			cleanup(container);
+			return fail('CodeBlock should find its parent k-html-editor');
+		}
+		cleanup(container);
+		pass('CodeBlock finds parent editor');
+	},
+
+	'click should call editor.formatBlock when not in code block': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		let calledWith = null;
+		editor.isSelectionInCodeBlock = () => false;
+		editor.formatBlock = tag => { calledWith = tag; };
+		control.shadowRoot.querySelector('button').click();
+		if(calledWith !== 'pre'){
+			cleanup(container);
+			return fail(`Expected formatBlock("pre"), got formatBlock("${calledWith}")`);
+		}
+		cleanup(container);
+		pass('Click calls editor.formatBlock("pre") when not in code block');
+	},
+
+	'click should call editor.formatBlock("p") when in code block': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		let calledWith = null;
+		editor.isSelectionInCodeBlock = () => true;
+		editor.formatBlock = tag => { calledWith = tag; };
+		control.shadowRoot.querySelector('button').click();
+		if(calledWith !== 'p'){
+			cleanup(container);
+			return fail(`Expected formatBlock("p"), got formatBlock("${calledWith}")`);
+		}
+		cleanup(container);
+		pass('Click calls editor.formatBlock("p") when in code block');
+	},
+
+	/*
+		Code Mode Visibility
+	*/
+	'should hide in code mode': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		editor.setMode('code');
+		await new Promise(r => editor.addEventListener('mode-changed', r, { once: true }));
+		await control.updateComplete;
+		if(!control.hidden){
+			cleanup(container);
+			return fail('CodeBlock should be hidden in code mode');
+		}
+		cleanup(container);
+		pass('CodeBlock is hidden in code mode');
+	},
+
+	'should be visible in visual mode': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		if(control.hidden){
+			cleanup(container);
+			return fail('CodeBlock should be visible in visual mode');
+		}
+		cleanup(container);
+		pass('CodeBlock is visible in visual mode');
+	},
+};

package/tests/components/htmlEditorControls/ControlGroup.browser-test.js

@@ -0,0 +1,116 @@
+import '../../../src/components/HtmlEditor.js';
+import ControlGroup from '../../../src/components/htmlEditorControls/ControlGroup.js';
+import '../../../src/components/htmlEditorControls/Bold.js';
+import '../../../src/components/htmlEditorControls/Italic.js';
+
+const createEditorWithGroup = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-html-editor>
+			<k-hec-group slot="toolbar-top-left">
+				<k-hec-bold></k-hec-bold>
+				<k-hec-italic></k-hec-italic>
+			</k-hec-group>
+		</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 group = container.querySelector('k-hec-group');
+	return { container, editor, group };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create k-hec-group element': async ({pass, fail}) => {
+		const { container, group } = await createEditorWithGroup();
+		if(!(group instanceof ControlGroup)){
+			cleanup(container);
+			return fail('Element should be instance of ControlGroup');
+		}
+		cleanup(container);
+		pass('ControlGroup element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, group } = await createEditorWithGroup();
+		if(!group.shadowRoot){
+			cleanup(container);
+			return fail('ControlGroup should have shadow root');
+		}
+		cleanup(container);
+		pass('ControlGroup has shadow root');
+	},
+
+	'should render a slot': async ({pass, fail}) => {
+		const { container, group } = await createEditorWithGroup();
+		await group.updateComplete;
+		const slot = group.shadowRoot.querySelector('slot');
+		if(!slot){
+			cleanup(container);
+			return fail('ControlGroup should render a slot');
+		}
+		cleanup(container);
+		pass('ControlGroup renders a slot');
+	},
+
+	/*
+		Visibility
+	*/
+	'should default to not hidden': async ({pass, fail}) => {
+		const { container, group } = await createEditorWithGroup();
+		if(group.hidden){
+			cleanup(container);
+			return fail('ControlGroup should not be hidden by default');
+		}
+		cleanup(container);
+		pass('ControlGroup is not hidden by default');
+	},
+
+	'should hide when all children are hidden': async ({pass, fail}) => {
+		const { container, group } = await createEditorWithGroup();
+		const children = Array.from(group.children);
+		children.forEach(child => { child.hidden = true; });
+		group.checkVisibility(new CustomEvent('control_visibility_change'));
+		if(!group.hidden){
+			cleanup(container);
+			return fail('ControlGroup should hide when all children are hidden');
+		}
+		cleanup(container);
+		pass('ControlGroup hides when all children are hidden');
+	},
+
+	'should show when at least one child is visible': async ({pass, fail}) => {
+		const { container, group } = await createEditorWithGroup();
+		const children = Array.from(group.children);
+		children[0].hidden = true;
+		children[1].hidden = false;
+		group.checkVisibility(new CustomEvent('control_visibility_change'));
+		if(group.hidden){
+			cleanup(container);
+			return fail('ControlGroup should be visible when at least one child is visible');
+		}
+		cleanup(container);
+		pass('ControlGroup is visible when at least one child is visible');
+	},
+
+	/*
+		Class Attribute
+	*/
+	'should set default class attribute': async ({pass, fail}) => {
+		const { container, group } = await createEditorWithGroup();
+		const cls = group.getAttribute('class');
+		if(!cls || !cls.includes('b')){
+			cleanup(container);
+			return fail(`Expected default class containing "b", got "${cls}"`);
+		}
+		cleanup(container);
+		pass('ControlGroup sets default class attribute');
+	},
+};

package/tests/components/htmlEditorControls/ControlSpacer.browser-test.js

@@ -0,0 +1,69 @@
+import '../../../src/components/HtmlEditor.js';
+import ControlSpacer from '../../../src/components/htmlEditorControls/ControlSpacer.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-html-editor>
+			<k-hec-spacer slot="toolbar-top-left"></k-hec-spacer>
+		</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-hec-spacer');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create k-hec-spacer element': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!(control instanceof ControlSpacer)){
+			cleanup(container);
+			return fail('Element should be instance of ControlSpacer');
+		}
+		cleanup(container);
+		pass('ControlSpacer element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control.shadowRoot){
+			cleanup(container);
+			return fail('ControlSpacer should have shadow root');
+		}
+		cleanup(container);
+		pass('ControlSpacer has shadow root');
+	},
+
+	'should have flex: 1 style': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		const style = getComputedStyle(control);
+		if(style.flexGrow !== '1'){
+			cleanup(container);
+			return fail(`Expected flex-grow "1", got "${style.flexGrow}"`);
+		}
+		cleanup(container);
+		pass('ControlSpacer has flex: 1 style');
+	},
+
+	'should render no visible elements': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		const buttons = control.shadowRoot.querySelectorAll('button, input, select, textarea, a');
+		if(buttons.length > 0){
+			cleanup(container);
+			return fail('ControlSpacer should not render interactive elements');
+		}
+		cleanup(container);
+		pass('ControlSpacer renders no interactive elements');
+	},
+};

package/tests/components/htmlEditorControls/CreateLink.browser-test.js

@@ -0,0 +1,129 @@
+import '../../../src/components/HtmlEditor.js';
+import CreateLink from '../../../src/components/htmlEditorControls/CreateLink.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-html-editor>
+			<k-hec-create-link slot="toolbar-top-left"></k-hec-create-link>
+		</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-hec-create-link');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create k-hec-create-link element': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!(control instanceof CreateLink)){
+			cleanup(container);
+			return fail('Element should be instance of CreateLink');
+		}
+		cleanup(container);
+		pass('CreateLink element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control.shadowRoot){
+			cleanup(container);
+			return fail('CreateLink should have shadow root');
+		}
+		cleanup(container);
+		pass('CreateLink has shadow root');
+	},
+
+	'should render a button': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		const button = control.shadowRoot.querySelector('button');
+		if(!button){
+			cleanup(container);
+			return fail('CreateLink should render a button');
+		}
+		cleanup(container);
+		pass('CreateLink renders a button');
+	},
+
+	'should render link icon': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		const icon = control.shadowRoot.querySelector('k-icon');
+		if(!icon){
+			cleanup(container);
+			return fail('CreateLink should render a k-icon');
+		}
+		if(icon.getAttribute('name') !== 'link'){
+			cleanup(container);
+			return fail(`Expected icon name "link", got "${icon.getAttribute('name')}"`);
+		}
+		cleanup(container);
+		pass('CreateLink renders link icon');
+	},
+
+	/*
+		Editor Integration
+	*/
+	'should find parent editor': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		if(control.editor !== editor){
+			cleanup(container);
+			return fail('CreateLink should find its parent k-html-editor');
+		}
+		cleanup(container);
+		pass('CreateLink finds parent editor');
+	},
+
+	'click should open a dialog': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		editor.getSelectedText = () => '';
+		control.shadowRoot.querySelector('button').click();
+		await new Promise(r => setTimeout(r, 100));
+		const dialog = document.querySelector('k-dialog');
+		if(!dialog){
+			cleanup(container);
+			return fail('Click should open a k-dialog');
+		}
+		dialog.remove();
+		cleanup(container);
+		pass('Click opens a dialog');
+	},
+
+	/*
+		Code Mode Visibility
+	*/
+	'should hide in code mode': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		editor.setMode('code');
+		await new Promise(r => editor.addEventListener('mode-changed', r, { once: true }));
+		await control.updateComplete;
+		if(!control.hidden){
+			cleanup(container);
+			return fail('CreateLink should be hidden in code mode');
+		}
+		cleanup(container);
+		pass('CreateLink is hidden in code mode');
+	},
+
+	'should be visible in visual mode': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		if(control.hidden){
+			cleanup(container);
+			return fail('CreateLink should be visible in visual mode');
+		}
+		cleanup(container);
+		pass('CreateLink is visible in visual mode');
+	},
+};