kempo-ui 0.3.9 → 0.3.10

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

@@ -0,0 +1,138 @@
+import '../../../src/components/HtmlEditor.js';
+import DropdownControl from '../../../src/components/htmlEditorControls/DropdownControl.js';
+import '../../../src/components/htmlEditorControls/Bold.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-html-editor>
+			<k-hec-dropdown slot="toolbar-top-left">
+				<k-icon name="more_vert" slot="icon"></k-icon>
+				<k-hec-bold></k-hec-bold>
+			</k-hec-dropdown>
+		</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-dropdown');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create k-hec-dropdown element': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!(control instanceof DropdownControl)){
+			cleanup(container);
+			return fail('Element should be instance of DropdownControl');
+		}
+		cleanup(container);
+		pass('DropdownControl element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control.shadowRoot){
+			cleanup(container);
+			return fail('DropdownControl should have shadow root');
+		}
+		cleanup(container);
+		pass('DropdownControl has shadow root');
+	},
+
+	'should render a k-dropdown': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		const dropdown = control.shadowRoot.querySelector('k-dropdown');
+		if(!dropdown){
+			cleanup(container);
+			return fail('DropdownControl should render a k-dropdown');
+		}
+		cleanup(container);
+		pass('DropdownControl renders a k-dropdown');
+	},
+
+	'should render a trigger button': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		const button = control.shadowRoot.querySelector('button[slot="trigger"]');
+		if(!button){
+			cleanup(container);
+			return fail('DropdownControl should render a trigger button');
+		}
+		cleanup(container);
+		pass('DropdownControl renders a trigger button');
+	},
+
+	/*
+		Editor Integration
+	*/
+	'should find parent editor': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		if(control.editor !== editor){
+			cleanup(container);
+			return fail('DropdownControl should find its parent k-html-editor');
+		}
+		cleanup(container);
+		pass('DropdownControl finds parent editor');
+	},
+
+	/*
+		Opened State
+	*/
+	'should default to closed': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(control.opened){
+			cleanup(container);
+			return fail('DropdownControl should default to closed');
+		}
+		cleanup(container);
+		pass('DropdownControl defaults to closed');
+	},
+
+	'handleToggle should toggle opened state': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		control.handleToggle();
+		if(!control.opened){
+			cleanup(container);
+			return fail('handleToggle should open the dropdown');
+		}
+		control.handleToggle();
+		if(control.opened){
+			cleanup(container);
+			return fail('handleToggle should close the dropdown');
+		}
+		cleanup(container);
+		pass('handleToggle toggles opened state');
+	},
+
+	'handleOpened should set opened to true': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		control.handleOpened();
+		if(!control.opened){
+			cleanup(container);
+			return fail('handleOpened should set opened to true');
+		}
+		cleanup(container);
+		pass('handleOpened sets opened to true');
+	},
+
+	'handleClosed should set opened to false': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		control.opened = true;
+		control.handleClosed();
+		if(control.opened){
+			cleanup(container);
+			return fail('handleClosed should set opened to false');
+		}
+		cleanup(container);
+		pass('handleClosed sets opened to false');
+	},
+};

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

@@ -0,0 +1,163 @@
+import '../../../src/components/HtmlEditor.js';
+import FormatBlock from '../../../src/components/htmlEditorControls/FormatBlock.js';
+
+const createEditorWithControl = async (tag = 'h1') => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-html-editor>
+			<k-hec-format-block tag="${tag}" slot="toolbar-top-left"></k-hec-format-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-format-block');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create k-hec-format-block element': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!(control instanceof FormatBlock)){
+			cleanup(container);
+			return fail('Element should be instance of FormatBlock');
+		}
+		cleanup(container);
+		pass('FormatBlock element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control.shadowRoot){
+			cleanup(container);
+			return fail('FormatBlock should have shadow root');
+		}
+		cleanup(container);
+		pass('FormatBlock 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('FormatBlock should render a button');
+		}
+		cleanup(container);
+		pass('FormatBlock renders a button');
+	},
+
+	/*
+		Tag Property
+	*/
+	'should default tag to "p"': async ({pass, fail}) => {
+		const container = document.createElement('div');
+		container.innerHTML = `
+			<k-html-editor>
+				<k-hec-format-block slot="toolbar-top-left"></k-hec-format-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-format-block');
+		if(control.tag !== 'p'){
+			cleanup(container);
+			return fail(`Expected default tag "p", got "${control.tag}"`);
+		}
+		cleanup(container);
+		pass('Default tag is "p"');
+	},
+
+	'should accept tag attribute': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl('h2');
+		if(control.tag !== 'h2'){
+			cleanup(container);
+			return fail(`Expected tag "h2", got "${control.tag}"`);
+		}
+		cleanup(container);
+		pass('Tag attribute is accepted');
+	},
+
+	/*
+		Editor Integration
+	*/
+	'should find parent editor': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		if(control.editor !== editor){
+			cleanup(container);
+			return fail('FormatBlock should find its parent k-html-editor');
+		}
+		cleanup(container);
+		pass('FormatBlock finds parent editor');
+	},
+
+	'click should call editor.formatBlock with tag value': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl('h3');
+		await control.updateComplete;
+		let calledWith = null;
+		editor.formatBlock = tag => { calledWith = tag; };
+		control.shadowRoot.querySelector('button').click();
+		if(calledWith !== 'h3'){
+			cleanup(container);
+			return fail(`Expected formatBlock("h3"), got formatBlock("${calledWith}")`);
+		}
+		cleanup(container);
+		pass('Click calls editor.formatBlock with tag value');
+	},
+
+	/*
+		Helper Methods
+	*/
+	'getDefaultLabel should return correct labels': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl('h1');
+		const expected = {h1: 'Heading 1', h2: 'Heading 2', p: 'Paragraph'};
+		for(const [tag, label] of Object.entries(expected)){
+			control.tag = tag;
+			if(control.getDefaultLabel() !== label){
+				cleanup(container);
+				return fail(`Expected label "${label}" for tag "${tag}", got "${control.getDefaultLabel()}"`);
+			}
+		}
+		cleanup(container);
+		pass('getDefaultLabel returns correct labels');
+	},
+
+	'getDefaultIcon should return correct icons': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl('h1');
+		const expected = {h1: 'format_h1', h2: 'format_h2', p: 'format_paragraph'};
+		for(const [tag, icon] of Object.entries(expected)){
+			control.tag = tag;
+			if(control.getDefaultIcon() !== icon){
+				cleanup(container);
+				return fail(`Expected icon "${icon}" for tag "${tag}", got "${control.getDefaultIcon()}"`);
+			}
+		}
+		cleanup(container);
+		pass('getDefaultIcon returns correct icons');
+	},
+
+	/*
+		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('FormatBlock should be hidden in code mode');
+		}
+		cleanup(container);
+		pass('FormatBlock is hidden in code mode');
+	},
+};

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

@@ -0,0 +1,127 @@
+import '../../../src/components/HtmlEditor.js';
+import InlineCode from '../../../src/components/htmlEditorControls/InlineCode.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-html-editor>
+			<k-hec-inline-code slot="toolbar-top-left"></k-hec-inline-code>
+		</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-inline-code');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create k-hec-inline-code element': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!(control instanceof InlineCode)){
+			cleanup(container);
+			return fail('Element should be instance of InlineCode');
+		}
+		cleanup(container);
+		pass('InlineCode element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control.shadowRoot){
+			cleanup(container);
+			return fail('InlineCode should have shadow root');
+		}
+		cleanup(container);
+		pass('InlineCode 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('InlineCode should render a button');
+		}
+		cleanup(container);
+		pass('InlineCode 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('InlineCode 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('InlineCode 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('InlineCode should find its parent k-html-editor');
+		}
+		cleanup(container);
+		pass('InlineCode finds parent editor');
+	},
+
+	'click should call editor.inlineCode()': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		let called = false;
+		editor.inlineCode = () => { called = true; };
+		control.shadowRoot.querySelector('button').click();
+		if(!called){
+			cleanup(container);
+			return fail('Click should call editor.inlineCode()');
+		}
+		cleanup(container);
+		pass('Click calls editor.inlineCode()');
+	},
+
+	/*
+		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('InlineCode should be hidden in code mode');
+		}
+		cleanup(container);
+		pass('InlineCode 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('InlineCode should be visible in visual mode');
+		}
+		cleanup(container);
+		pass('InlineCode is visible in visual mode');
+	},
+};

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

@@ -0,0 +1,129 @@
+import '../../../src/components/HtmlEditor.js';
+import InsertTable from '../../../src/components/htmlEditorControls/InsertTable.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-html-editor>
+			<k-hec-insert-table slot="toolbar-top-left"></k-hec-insert-table>
+		</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-insert-table');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create k-hec-insert-table element': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!(control instanceof InsertTable)){
+			cleanup(container);
+			return fail('Element should be instance of InsertTable');
+		}
+		cleanup(container);
+		pass('InsertTable element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control.shadowRoot){
+			cleanup(container);
+			return fail('InsertTable should have shadow root');
+		}
+		cleanup(container);
+		pass('InsertTable 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('InsertTable should render a button');
+		}
+		cleanup(container);
+		pass('InsertTable renders a button');
+	},
+
+	'should render table 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('InsertTable should render a k-icon');
+		}
+		if(icon.getAttribute('name') !== 'table'){
+			cleanup(container);
+			return fail(`Expected icon name "table", got "${icon.getAttribute('name')}"`);
+		}
+		cleanup(container);
+		pass('InsertTable renders table icon');
+	},
+
+	/*
+		Editor Integration
+	*/
+	'should find parent editor': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		if(control.editor !== editor){
+			cleanup(container);
+			return fail('InsertTable should find its parent k-html-editor');
+		}
+		cleanup(container);
+		pass('InsertTable finds parent editor');
+	},
+
+	'click should open a dialog': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		await control.updateComplete;
+		editor.getTableAtSelection = () => null;
+		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('InsertTable should be hidden in code mode');
+		}
+		cleanup(container);
+		pass('InsertTable 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('InsertTable should be visible in visual mode');
+		}
+		cleanup(container);
+		pass('InsertTable is visible in visual mode');
+	},
+};

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

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