kempo-ui 0.3.9 → 0.3.10

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

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

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

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

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

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

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

@@ -0,0 +1,136 @@
+import '../../../src/components/HtmlEditor.js';
+import TextBackgroundColor from '../../../src/components/htmlEditorControls/TextBackgroundColor.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-html-editor>
+			<k-hec-text-background-color slot="toolbar-top-left"></k-hec-text-background-color>
+		</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-text-background-color');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create k-hec-text-bg-color element': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!(control instanceof TextBackgroundColor)){
+			cleanup(container);
+			return fail('Element should be instance of TextBackgroundColor');
+		}
+		cleanup(container);
+		pass('TextBackgroundColor element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control.shadowRoot){
+			cleanup(container);
+			return fail('TextBackgroundColor should have shadow root');
+		}
+		cleanup(container);
+		pass('TextBackgroundColor has shadow root');
+	},
+
+	'should have default colors': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control.colors || control.colors.length === 0){
+			cleanup(container);
+			return fail('TextBackgroundColor should have default colors');
+		}
+		if(!control.colors.includes('#ffff00')){
+			cleanup(container);
+			return fail('TextBackgroundColor default colors should include #ffff00');
+		}
+		cleanup(container);
+		pass('TextBackgroundColor has default colors');
+	},
+
+	/*
+		Editor Integration
+	*/
+	'should find parent editor': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		if(control.editor !== editor){
+			cleanup(container);
+			return fail('TextBackgroundColor should find its parent k-html-editor');
+		}
+		cleanup(container);
+		pass('TextBackgroundColor finds parent editor');
+	},
+
+	'handleRemove should call editor.removeTextBackgroundColor()': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		let called = false;
+		editor.removeTextBackgroundColor = () => { called = true; };
+		control.handleRemove();
+		if(!called){
+			cleanup(container);
+			return fail('handleRemove should call editor.removeTextBackgroundColor()');
+		}
+		cleanup(container);
+		pass('handleRemove calls editor.removeTextBackgroundColor()');
+	},
+
+	'handleRemove should close dropdown': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		control.opened = true;
+		control.handleRemove();
+		if(control.opened){
+			cleanup(container);
+			return fail('handleRemove should close the dropdown');
+		}
+		cleanup(container);
+		pass('handleRemove closes the dropdown');
+	},
+
+	/*
+		Properties
+	*/
+	'disableRemove should default to false': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(control.disableRemove !== false){
+			cleanup(container);
+			return fail('disableRemove should default to false');
+		}
+		cleanup(container);
+		pass('disableRemove defaults to false');
+	},
+
+	'disablePicker should default to false': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(control.disablePicker !== false){
+			cleanup(container);
+			return fail('disablePicker should default to false');
+		}
+		cleanup(container);
+		pass('disablePicker defaults to false');
+	},
+
+	/*
+		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('TextBackgroundColor should be hidden in code mode');
+		}
+		cleanup(container);
+		pass('TextBackgroundColor is hidden in code mode');
+	},
+};

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

@@ -0,0 +1,136 @@
+import '../../../src/components/HtmlEditor.js';
+import TextColor from '../../../src/components/htmlEditorControls/TextColor.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-html-editor>
+			<k-hec-text-color slot="toolbar-top-left"></k-hec-text-color>
+		</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-text-color');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create k-hec-text-color element': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!(control instanceof TextColor)){
+			cleanup(container);
+			return fail('Element should be instance of TextColor');
+		}
+		cleanup(container);
+		pass('TextColor element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control.shadowRoot){
+			cleanup(container);
+			return fail('TextColor should have shadow root');
+		}
+		cleanup(container);
+		pass('TextColor has shadow root');
+	},
+
+	'should have default colors': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control.colors || control.colors.length === 0){
+			cleanup(container);
+			return fail('TextColor should have default colors');
+		}
+		if(!control.colors.includes('#000000')){
+			cleanup(container);
+			return fail('TextColor default colors should include #000000');
+		}
+		cleanup(container);
+		pass('TextColor has default colors');
+	},
+
+	/*
+		Editor Integration
+	*/
+	'should find parent editor': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		if(control.editor !== editor){
+			cleanup(container);
+			return fail('TextColor should find its parent k-html-editor');
+		}
+		cleanup(container);
+		pass('TextColor finds parent editor');
+	},
+
+	'handleRemove should call editor.removeTextColor()': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		let called = false;
+		editor.removeTextColor = () => { called = true; };
+		control.handleRemove();
+		if(!called){
+			cleanup(container);
+			return fail('handleRemove should call editor.removeTextColor()');
+		}
+		cleanup(container);
+		pass('handleRemove calls editor.removeTextColor()');
+	},
+
+	'handleRemove should close dropdown': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		control.opened = true;
+		control.handleRemove();
+		if(control.opened){
+			cleanup(container);
+			return fail('handleRemove should close the dropdown');
+		}
+		cleanup(container);
+		pass('handleRemove closes the dropdown');
+	},
+
+	/*
+		Properties
+	*/
+	'disableRemove should default to false': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(control.disableRemove !== false){
+			cleanup(container);
+			return fail('disableRemove should default to false');
+		}
+		cleanup(container);
+		pass('disableRemove defaults to false');
+	},
+
+	'disablePicker should default to false': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(control.disablePicker !== false){
+			cleanup(container);
+			return fail('disablePicker should default to false');
+		}
+		cleanup(container);
+		pass('disablePicker defaults to false');
+	},
+
+	/*
+		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('TextColor should be hidden in code mode');
+		}
+		cleanup(container);
+		pass('TextColor is hidden in code mode');
+	},
+};