kempo-ui 0.4.20 → 0.4.21

package/tests/components/{htmlEditorControls → controls}/Bold.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import Bold from '../../../src/components/htmlEditorControls/Bold.js';
+import Bold from '../../../src/components/controls/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>
+			<kc-bold slot="toolbar-top-left"></kc-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');
+	const control = container.querySelector('kc-bold');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-bold element': async ({pass, fail}) => {
+	'should create kc-bold element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof Bold)){
 			cleanup(container);
@@ -46,7 +46,7 @@ export default {
 	'should render a button': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		await control.updateComplete;
-		const button = control.shadowRoot.querySelector('button');
+		const button = control;
 		if(!button){
 			cleanup(container);
 			return fail('Bold should render a button');
@@ -76,7 +76,7 @@ export default {
 	*/
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('Bold should find its parent k-html-editor');
 		}
@@ -89,7 +89,7 @@ export default {
 		await control.updateComplete;
 		let called = false;
 		editor.bold = () => { called = true; };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		if(!called){
 			cleanup(container);
 			return fail('Click should call editor.bold()');

package/tests/components/{htmlEditorControls → controls}/BulletList.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import BulletList from '../../../src/components/htmlEditorControls/BulletList.js';
+import BulletList from '../../../src/components/controls/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>
+			<kc-bullet-list slot="toolbar-top-left"></kc-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');
+	const control = container.querySelector('kc-bullet-list');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-bullet-list element': async ({pass, fail}) => {
+	'should create kc-bullet-list element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof BulletList)){
 			cleanup(container);
@@ -46,7 +46,7 @@ export default {
 	'should render a button': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		await control.updateComplete;
-		const button = control.shadowRoot.querySelector('button');
+		const button = control;
 		if(!button){
 			cleanup(container);
 			return fail('BulletList should render a button');
@@ -76,7 +76,7 @@ export default {
 	*/
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('BulletList should find its parent k-html-editor');
 		}
@@ -89,7 +89,7 @@ export default {
 		await control.updateComplete;
 		let called = false;
 		editor.unorderedList = () => { called = true; };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		if(!called){
 			cleanup(container);
 			return fail('Click should call editor.unorderedList()');

package/tests/components/{htmlEditorControls → controls}/CharacterCount.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import CharacterCount from '../../../src/components/htmlEditorControls/CharacterCount.js';
+import CharacterCount from '../../../src/components/controls/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>
+			<kc-character-count slot="toolbar-bottom-left"></kc-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');
+	const control = container.querySelector('kc-character-count');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-character-count element': async ({pass, fail}) => {
+	'should create kc-character-count element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof CharacterCount)){
 			cleanup(container);
@@ -48,7 +48,7 @@ export default {
 	*/
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('CharacterCount should find its parent k-html-editor');
 		}

package/tests/components/{htmlEditorControls → controls}/ClearFormatting.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import ClearFormatting from '../../../src/components/htmlEditorControls/ClearFormatting.js';
+import ClearFormatting from '../../../src/components/controls/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>
+			<kc-clear-formatting slot="toolbar-top-left"></kc-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');
+	const control = container.querySelector('kc-clear-formatting');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-clear-formatting element': async ({pass, fail}) => {
+	'should create kc-clear-formatting element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof ClearFormatting)){
 			cleanup(container);
@@ -46,7 +46,7 @@ export default {
 	'should render a button': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		await control.updateComplete;
-		const button = control.shadowRoot.querySelector('button');
+		const button = control;
 		if(!button){
 			cleanup(container);
 			return fail('ClearFormatting should render a button');
@@ -76,7 +76,7 @@ export default {
 	*/
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('ClearFormatting should find its parent k-html-editor');
 		}
@@ -89,7 +89,7 @@ export default {
 		await control.updateComplete;
 		let called = false;
 		editor.removeFormat = () => { called = true; };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		if(!called){
 			cleanup(container);
 			return fail('Click should call editor.removeFormat()');

package/tests/components/{htmlEditorControls → controls}/CodeBlock.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import CodeBlock from '../../../src/components/htmlEditorControls/CodeBlock.js';
+import CodeBlock from '../../../src/components/controls/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>
+			<kc-code-block slot="toolbar-top-left"></kc-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');
+	const control = container.querySelector('kc-code-block');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-code-block element': async ({pass, fail}) => {
+	'should create kc-code-block element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof CodeBlock)){
 			cleanup(container);
@@ -46,7 +46,7 @@ export default {
 	'should render a button': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		await control.updateComplete;
-		const button = control.shadowRoot.querySelector('button');
+		const button = control;
 		if(!button){
 			cleanup(container);
 			return fail('CodeBlock should render a button');
@@ -76,7 +76,7 @@ export default {
 	*/
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('CodeBlock should find its parent k-html-editor');
 		}
@@ -90,7 +90,7 @@ export default {
 		let calledWith = null;
 		editor.isSelectionInCodeBlock = () => false;
 		editor.formatBlock = tag => { calledWith = tag; };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		if(calledWith !== 'pre'){
 			cleanup(container);
 			return fail(`Expected formatBlock("pre"), got formatBlock("${calledWith}")`);
@@ -105,7 +105,7 @@ export default {
 		let calledWith = null;
 		editor.isSelectionInCodeBlock = () => true;
 		editor.formatBlock = tag => { calledWith = tag; };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		if(calledWith !== 'p'){
 			cleanup(container);
 			return fail(`Expected formatBlock("p"), got formatBlock("${calledWith}")`);

package/tests/components/controls/Control.browser-test.js

@@ -0,0 +1,147 @@
+import Control from '../../../src/components/controls/Control.js';
+import '../../../src/components/Table.js';
+import { html } from '../../../src/lit-all.min.js';
+
+class TestControl extends Control {
+	static requires = ['setRecords'];
+	render() {
+		return html`<button class="test-btn">Test Control</button>`;
+	}
+}
+
+if(!customElements.get('test-control-base')){
+	customElements.define('test-control-base', TestControl);
+}
+
+const sampleRecords = [
+	{ id: 1, name: 'Alice', age: 30 },
+	{ id: 2, name: 'Bob', age: 25 },
+	{ id: 3, name: 'Charlie', age: 35 }
+];
+
+const createTableWithControl = async (controlHtml = '<test-control-base></test-control-base>') => {
+	const container = document.createElement('div');
+	container.innerHTML = `
+		<k-table>
+			<div slot="controls">${controlHtml}</div>
+		</k-table>
+	`;
+	document.body.appendChild(container);
+	const table = container.querySelector('k-table');
+	table.setRecords([...sampleRecords]);
+	await table.updateComplete;
+	const control = container.querySelector('test-control-base');
+	if(control) await control.updateComplete;
+	return { container, table, control };
+};
+
+const cleanup = (container) => {
+	if(container && container.parentNode){
+		container.parentNode.removeChild(container);
+	}
+};
+
+export default {
+	/*
+		Host Discovery Tests
+	*/
+	'should find parent host via controlled attribute': async ({pass, fail}) => {
+		const { container, table, control } = await createTableWithControl();
+		if(!control.host){
+			cleanup(container);
+			return fail('Control should find parent host');
+		}
+		if(control.host !== table){
+			cleanup(container);
+			return fail('Control should reference correct host');
+		}
+		cleanup(container);
+		pass('host getter finds parent k-table');
+	},
+
+	'should return null when no parent host': async ({pass, fail}) => {
+		const control = document.createElement('test-control-base');
+		document.body.appendChild(control);
+		await control.updateComplete;
+		if(control.host !== null){
+			document.body.removeChild(control);
+			return fail('host getter should return null when no parent host');
+		}
+		document.body.removeChild(control);
+		pass('host getter returns null when no parent host');
+	},
+
+	/*
+		Requires / Host Support Tests
+	*/
+	'should not be disabled when host has required methods': async ({pass, fail}) => {
+		const { container, control } = await createTableWithControl();
+		await control.updateComplete;
+		if(control.disabled){
+			cleanup(container);
+			return fail('Control should not be disabled when host has required methods');
+		}
+		cleanup(container);
+		pass('Control enabled when host supports required methods');
+	},
+
+	'should be disabled when host missing required methods': async ({pass, fail}) => {
+		class StrictControl extends Control {
+			static requires = ['nonExistentMethod'];
+			render() { return html`<span>test</span>`; }
+		}
+		if(!customElements.get('test-strict-control')){
+			customElements.define('test-strict-control', StrictControl);
+		}
+		const container = document.createElement('div');
+		container.innerHTML = `
+			<k-table>
+				<div slot="controls"><test-strict-control></test-strict-control></div>
+			</k-table>
+		`;
+		document.body.appendChild(container);
+		const table = container.querySelector('k-table');
+		table.setRecords([...sampleRecords]);
+		await table.updateComplete;
+		const control = container.querySelector('test-strict-control');
+		await control.updateComplete;
+		if(!control.disabled){
+			cleanup(container);
+			return fail('Control should be disabled when host lacks required methods');
+		}
+		cleanup(container);
+		pass('Control disabled when host missing required methods');
+	},
+
+	/*
+		invokeHost Tests
+	*/
+	'should invoke host method via invokeHost': async ({pass, fail}) => {
+		const { container, table, control } = await createTableWithControl();
+		const newRecords = [{ id: 99, name: 'Zara', age: 22 }];
+		control.invokeHost('setRecords', newRecords);
+		await table.updateComplete;
+		if(table.records.length !== 1 || table.records[0].name !== 'Zara'){
+			cleanup(container);
+			return fail('invokeHost should call host method');
+		}
+		cleanup(container);
+		pass('invokeHost calls host method correctly');
+	},
+
+	/*
+		Rendering Tests
+	*/
+	'should render content in shadow root': async ({pass, fail}) => {
+		const control = document.createElement('test-control-base');
+		document.body.appendChild(control);
+		await control.updateComplete;
+		const btn = control.shadowRoot.querySelector('.test-btn');
+		if(!btn){
+			document.body.removeChild(control);
+			return fail('Should render test button');
+		}
+		document.body.removeChild(control);
+		pass('Control renders content in shadow root');
+	}
+};

package/tests/components/{htmlEditorControls → controls}/ControlGroup.browser-test.js

@@ -1,22 +1,22 @@
 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';
+import ControlGroup from '../../../src/components/ControlGroup.js';
+import '../../../src/components/controls/Bold.js';
+import '../../../src/components/controls/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-control-group slot="toolbar-top-left">
+				<kc-bold></kc-bold>
+				<kc-italic></kc-italic>
+			</k-control-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');
+	const group = container.querySelector('k-control-group');
 	return { container, editor, group };
 };
 
@@ -28,7 +28,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-group element': async ({pass, fail}) => {
+	'should create k-control-group element': async ({pass, fail}) => {
 		const { container, group } = await createEditorWithGroup();
 		if(!(group instanceof ControlGroup)){
 			cleanup(container);

package/tests/components/{htmlEditorControls → controls}/ControlSpacer.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import ControlSpacer from '../../../src/components/htmlEditorControls/ControlSpacer.js';
+import ControlSpacer from '../../../src/components/controls/Spacer.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-html-editor>
-			<k-hec-spacer slot="toolbar-top-left"></k-hec-spacer>
+			<kc-spacer slot="toolbar-top-left"></kc-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');
+	const control = container.querySelector('kc-spacer');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-spacer element': async ({pass, fail}) => {
+	'should create kc-spacer element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof ControlSpacer)){
 			cleanup(container);

package/tests/components/{codeEditorControls → controls}/CopyCode.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/CodeEditor.js';
-import '../../../src/components/codeEditorControls/CopyCode.js';
+import '../../../src/components/controls/CopyCode.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-code-editor language="javascript" style="height:200px">
-			<k-cec-copy-code slot="toolbar-top-left"></k-cec-copy-code>
+			<kc-copy-code slot="toolbar-top-left"></kc-copy-code>
 		</k-code-editor>
 	`;
 	document.body.appendChild(container);
 	const editor = container.querySelector('k-code-editor');
 	await new Promise(r => editor.addEventListener('ready', r, { once: true }));
-	const control = container.querySelector('k-cec-copy-code');
+	const control = container.querySelector('kc-copy-code');
 	return { container, editor, control };
 };
 
@@ -20,12 +20,12 @@ const cleanup = container => {
 };
 
 export default {
-	'should create element with button': async ({pass, fail}) => {
+	'should have button role': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		await control.updateComplete;
-		if(!control.shadowRoot.querySelector('button')){
+		if(control.getAttribute('role') !== 'button'){
 			cleanup(container);
-			return fail('Should render a button');
+			return fail('Should have role="button"');
 		}
 		cleanup(container);
 		pass();
@@ -33,7 +33,7 @@ export default {
 
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('Should find parent k-code-editor');
 		}
@@ -46,7 +46,7 @@ export default {
 		await control.updateComplete;
 		let called = false;
 		editor.copyToClipboard = () => { called = true; return editor; };
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		if(!called){
 			cleanup(container);
 			return fail('Should call editor.copyToClipboard() on click');

package/tests/components/{htmlEditorControls → controls}/CreateLink.browser-test.js

@@ -1,17 +1,17 @@
 import '../../../src/components/HtmlEditor.js';
-import CreateLink from '../../../src/components/htmlEditorControls/CreateLink.js';
+import CreateLink from '../../../src/components/controls/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>
+			<kc-create-link slot="toolbar-top-left"></kc-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');
+	const control = container.querySelector('kc-create-link');
 	return { container, editor, control };
 };
 
@@ -23,7 +23,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-create-link element': async ({pass, fail}) => {
+	'should create kc-create-link element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof CreateLink)){
 			cleanup(container);
@@ -46,7 +46,7 @@ export default {
 	'should render a button': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		await control.updateComplete;
-		const button = control.shadowRoot.querySelector('button');
+		const button = control;
 		if(!button){
 			cleanup(container);
 			return fail('CreateLink should render a button');
@@ -76,7 +76,7 @@ export default {
 	*/
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('CreateLink should find its parent k-html-editor');
 		}
@@ -88,7 +88,7 @@ export default {
 		const { container, editor, control } = await createEditorWithControl();
 		await control.updateComplete;
 		editor.getSelectedText = () => '';
-		control.shadowRoot.querySelector('button').click();
+		control.click();
 		await new Promise(r => setTimeout(r, 100));
 		const dialog = document.querySelector('k-dialog');
 		if(!dialog){

package/tests/components/{htmlEditorControls → controls}/DropdownControl.browser-test.js

@@ -1,21 +1,21 @@
 import '../../../src/components/HtmlEditor.js';
-import DropdownControl from '../../../src/components/htmlEditorControls/DropdownControl.js';
-import '../../../src/components/htmlEditorControls/Bold.js';
+import DropdownControl from '../../../src/components/controls/Menu.js';
+import '../../../src/components/controls/Bold.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-html-editor>
-			<k-hec-dropdown slot="toolbar-top-left">
+			<kc-menu slot="toolbar-top-left">
 				<k-icon name="more_vert" slot="icon"></k-icon>
-				<k-hec-bold></k-hec-bold>
-			</k-hec-dropdown>
+				<kc-bold></kc-bold>
+			</kc-menu>
 		</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');
+	const control = container.querySelector('kc-menu');
 	return { container, editor, control };
 };
 
@@ -27,7 +27,7 @@ export default {
 	/*
 		Element Creation
 	*/
-	'should create k-hec-dropdown element': async ({pass, fail}) => {
+	'should create kc-menu element': async ({pass, fail}) => {
 		const { container, control } = await createEditorWithControl();
 		if(!(control instanceof DropdownControl)){
 			cleanup(container);
@@ -76,7 +76,7 @@ export default {
 	*/
 	'should find parent editor': async ({pass, fail}) => {
 		const { container, editor, control } = await createEditorWithControl();
-		if(control.editor !== editor){
+		if(control.host !== editor){
 			cleanup(container);
 			return fail('DropdownControl should find its parent k-html-editor');
 		}