kempo-ui 0.3.9 → 0.3.11

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

@@ -0,0 +1,203 @@
+import '../../../src/components/HtmlEditor.js';
+import AlignLeft from '../../../src/components/htmlEditorControls/AlignLeft.js';
+import AlignCenter from '../../../src/components/htmlEditorControls/AlignCenter.js';
+import AlignRight from '../../../src/components/htmlEditorControls/AlignRight.js';
+import AlignJustify from '../../../src/components/htmlEditorControls/AlignJustify.js';
+
+const createEditorWithControls = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-html-editor>
+			<k-hec-align-left slot="toolbar-top-left"></k-hec-align-left>
+			<k-hec-align-center slot="toolbar-top-left"></k-hec-align-center>
+			<k-hec-align-right slot="toolbar-top-left"></k-hec-align-right>
+			<k-hec-align-justify slot="toolbar-top-left"></k-hec-align-justify>
+		</k-html-editor>
+	`;
+	document.body.appendChild(container);
+	const editor = container.querySelector('k-html-editor');
+	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
+	return {
+		container,
+		editor,
+		left: container.querySelector('k-hec-align-left'),
+		center: container.querySelector('k-hec-align-center'),
+		right: container.querySelector('k-hec-align-right'),
+		justify: container.querySelector('k-hec-align-justify')
+	};
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	/*
+		AlignLeft
+	*/
+	'AlignLeft: should create element': async ({pass, fail}) => {
+		const { container, left } = await createEditorWithControls();
+		if(!(left instanceof AlignLeft)){
+			cleanup(container);
+			return fail('Element should be instance of AlignLeft');
+		}
+		cleanup(container);
+		pass('AlignLeft element created correctly');
+	},
+
+	'AlignLeft: should render format_align_left icon': async ({pass, fail}) => {
+		const { container, left } = await createEditorWithControls();
+		await left.updateComplete;
+		const icon = left.shadowRoot.querySelector('k-icon');
+		if(icon?.getAttribute('name') !== 'format_align_left'){
+			cleanup(container);
+			return fail(`Expected icon "format_align_left", got "${icon?.getAttribute('name')}"`);
+		}
+		cleanup(container);
+		pass('AlignLeft renders correct icon');
+	},
+
+	'AlignLeft: click should call editor.alignLeft()': async ({pass, fail}) => {
+		const { container, editor, left } = await createEditorWithControls();
+		await left.updateComplete;
+		let called = false;
+		editor.alignLeft = () => { called = true; };
+		left.shadowRoot.querySelector('button').click();
+		if(!called){
+			cleanup(container);
+			return fail('Click should call editor.alignLeft()');
+		}
+		cleanup(container);
+		pass('Click calls editor.alignLeft()');
+	},
+
+	'AlignLeft: should hide in code mode': async ({pass, fail}) => {
+		const { container, editor, left } = await createEditorWithControls();
+		editor.setMode('code');
+		await new Promise(r => editor.addEventListener('mode-changed', r, { once: true }));
+		await left.updateComplete;
+		if(!left.hidden){
+			cleanup(container);
+			return fail('AlignLeft should be hidden in code mode');
+		}
+		cleanup(container);
+		pass('AlignLeft is hidden in code mode');
+	},
+
+	/*
+		AlignCenter
+	*/
+	'AlignCenter: should create element': async ({pass, fail}) => {
+		const { container, center } = await createEditorWithControls();
+		if(!(center instanceof AlignCenter)){
+			cleanup(container);
+			return fail('Element should be instance of AlignCenter');
+		}
+		cleanup(container);
+		pass('AlignCenter element created correctly');
+	},
+
+	'AlignCenter: should render format_align_center icon': async ({pass, fail}) => {
+		const { container, center } = await createEditorWithControls();
+		await center.updateComplete;
+		const icon = center.shadowRoot.querySelector('k-icon');
+		if(icon?.getAttribute('name') !== 'format_align_center'){
+			cleanup(container);
+			return fail(`Expected icon "format_align_center", got "${icon?.getAttribute('name')}"`);
+		}
+		cleanup(container);
+		pass('AlignCenter renders correct icon');
+	},
+
+	'AlignCenter: click should call editor.alignCenter()': async ({pass, fail}) => {
+		const { container, editor, center } = await createEditorWithControls();
+		await center.updateComplete;
+		let called = false;
+		editor.alignCenter = () => { called = true; };
+		center.shadowRoot.querySelector('button').click();
+		if(!called){
+			cleanup(container);
+			return fail('Click should call editor.alignCenter()');
+		}
+		cleanup(container);
+		pass('Click calls editor.alignCenter()');
+	},
+
+	/*
+		AlignRight
+	*/
+	'AlignRight: should create element': async ({pass, fail}) => {
+		const { container, right } = await createEditorWithControls();
+		if(!(right instanceof AlignRight)){
+			cleanup(container);
+			return fail('Element should be instance of AlignRight');
+		}
+		cleanup(container);
+		pass('AlignRight element created correctly');
+	},
+
+	'AlignRight: should render format_align_right icon': async ({pass, fail}) => {
+		const { container, right } = await createEditorWithControls();
+		await right.updateComplete;
+		const icon = right.shadowRoot.querySelector('k-icon');
+		if(icon?.getAttribute('name') !== 'format_align_right'){
+			cleanup(container);
+			return fail(`Expected icon "format_align_right", got "${icon?.getAttribute('name')}"`);
+		}
+		cleanup(container);
+		pass('AlignRight renders correct icon');
+	},
+
+	'AlignRight: click should call editor.alignRight()': async ({pass, fail}) => {
+		const { container, editor, right } = await createEditorWithControls();
+		await right.updateComplete;
+		let called = false;
+		editor.alignRight = () => { called = true; };
+		right.shadowRoot.querySelector('button').click();
+		if(!called){
+			cleanup(container);
+			return fail('Click should call editor.alignRight()');
+		}
+		cleanup(container);
+		pass('Click calls editor.alignRight()');
+	},
+
+	/*
+		AlignJustify
+	*/
+	'AlignJustify: should create element': async ({pass, fail}) => {
+		const { container, justify } = await createEditorWithControls();
+		if(!(justify instanceof AlignJustify)){
+			cleanup(container);
+			return fail('Element should be instance of AlignJustify');
+		}
+		cleanup(container);
+		pass('AlignJustify element created correctly');
+	},
+
+	'AlignJustify: should render format_align_justify icon': async ({pass, fail}) => {
+		const { container, justify } = await createEditorWithControls();
+		await justify.updateComplete;
+		const icon = justify.shadowRoot.querySelector('k-icon');
+		if(icon?.getAttribute('name') !== 'format_align_justify'){
+			cleanup(container);
+			return fail(`Expected icon "format_align_justify", got "${icon?.getAttribute('name')}"`);
+		}
+		cleanup(container);
+		pass('AlignJustify renders correct icon');
+	},
+
+	'AlignJustify: click should call editor.alignJustify()': async ({pass, fail}) => {
+		const { container, editor, justify } = await createEditorWithControls();
+		await justify.updateComplete;
+		let called = false;
+		editor.alignJustify = () => { called = true; };
+		justify.shadowRoot.querySelector('button').click();
+		if(!called){
+			cleanup(container);
+			return fail('Click should call editor.alignJustify()');
+		}
+		cleanup(container);
+		pass('Click calls editor.alignJustify()');
+	},
+};

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

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

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

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

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

@@ -0,0 +1,106 @@
+import '../../../src/components/HtmlEditor.js';
+import CharacterCount from '../../../src/components/htmlEditorControls/CharacterCount.js';
+
+const createEditorWithControl = async () => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-html-editor>
+			<k-hec-character-count slot="toolbar-bottom-left"></k-hec-character-count>
+		</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-character-count');
+	return { container, editor, control };
+};
+
+const cleanup = container => {
+	if(container?.parentNode) container.parentNode.removeChild(container);
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create k-hec-character-count element': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!(control instanceof CharacterCount)){
+			cleanup(container);
+			return fail('Element should be instance of CharacterCount');
+		}
+		cleanup(container);
+		pass('CharacterCount element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(!control.shadowRoot){
+			cleanup(container);
+			return fail('CharacterCount should have shadow root');
+		}
+		cleanup(container);
+		pass('CharacterCount has shadow root');
+	},
+
+	/*
+		Editor Integration
+	*/
+	'should find parent editor': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		if(control.editor !== editor){
+			cleanup(container);
+			return fail('CharacterCount should find its parent k-html-editor');
+		}
+		cleanup(container);
+		pass('CharacterCount finds parent editor');
+	},
+
+	'should initialize count to 0': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		if(control.count !== 0){
+			cleanup(container);
+			return fail(`Expected initial count 0, got ${control.count}`);
+		}
+		cleanup(container);
+		pass('CharacterCount initializes count to 0');
+	},
+
+	'should update count when editor content changes': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		editor.setValue('<p>hello</p>');
+		await new Promise(r => setTimeout(r, 200));
+		await control.updateComplete;
+		if(control.count !== 5){
+			cleanup(container);
+			return fail(`Expected count 5, got ${control.count}`);
+		}
+		cleanup(container);
+		pass('CharacterCount updates on content change');
+	},
+
+	'should count empty content as 0 characters': async ({pass, fail}) => {
+		const { container, editor, control } = await createEditorWithControl();
+		editor.setValue('');
+		await new Promise(r => setTimeout(r, 200));
+		await control.updateComplete;
+		if(control.count !== 0){
+			cleanup(container);
+			return fail(`Expected count 0 for empty content, got ${control.count}`);
+		}
+		cleanup(container);
+		pass('CharacterCount counts empty content as 0');
+	},
+
+	'should render character count span': async ({pass, fail}) => {
+		const { container, control } = await createEditorWithControl();
+		await control.updateComplete;
+		const span = control.shadowRoot.querySelector('.character-count');
+		if(!span){
+			cleanup(container);
+			return fail('CharacterCount should render a .character-count span');
+		}
+		cleanup(container);
+		pass('CharacterCount renders character count span');
+	},
+};

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