kempo-ui 0.3.9 → 0.3.11

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');
+	},
+};

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');
+	},
+};