kempo-ui 0.4.20 → 0.4.22

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');
+	},
+
+	/*
+		Host Method Invocation Tests
+	*/
+	'should invoke host method directly via host getter': async ({pass, fail}) => {
+		const { container, table, control } = await createTableWithControl();
+		const newRecords = [{ id: 99, name: 'Zara', age: 22 }];
+		control.host?.setRecords(newRecords);
+		await table.updateComplete;
+		if(table.records.length !== 1 || table.records[0].name !== 'Zara'){
+			cleanup(container);
+			return fail('Host method should be callable via control.host');
+		}
+		cleanup(container);
+		pass('Host method invoked correctly via control.host');
+	},
+
+	/*
+		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');
 		}

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

@@ -1,17 +1,17 @@
 import '../../../src/components/CodeEditor.js';
-import '../../../src/components/codeEditorControls/EditorTheme.js';
+import '../../../src/components/controls/EditorTheme.js';
 
 const createEditorWithControl = async () => {
 	const container = document.createElement('div');
 	container.innerHTML = `
 		<k-code-editor language="javascript" style="height:200px">
-			<k-cec-editor-theme slot="toolbar-top-right"></k-cec-editor-theme>
+			<kc-editor-theme slot="toolbar-top-right"></kc-editor-theme>
 		</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-editor-theme');
+	const control = container.querySelector('kc-editor-theme');
 	return { container, editor, control };
 };
 
@@ -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');
 		}

package/tests/components/{tableControls → controls}/ExportControls.browser-test.js

@@ -1,5 +1,5 @@
-import '../../../src/components/tableControls/ExportCSV.js';
-import '../../../src/components/tableControls/ExportJson.js';
+import '../../../src/components/controls/TcExportCSV.js';
+import '../../../src/components/controls/TcExportJson.js';
 import '../../../src/components/Table.js';
 
 const sampleRecords = [
@@ -50,9 +50,9 @@ export default {
 		ExportCSV Tests
 	*/
 	'ExportCSV: should render export button': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
+		const { container, control } = await createTableWithControl('kc-tc-export-csv');
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn){
 			cleanup(container);
 			fail('ExportCSV should render button');
@@ -70,21 +70,9 @@ export default {
 		pass('ExportCSV renders correctly');
 	},
 
-	'ExportCSV: should have default maxWidth of 136': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
-		
-		if(control.maxWidth !== 136){
-			cleanup(container);
-			fail(`Expected maxWidth 136, got ${control.maxWidth}`);
-			return;
-		}
-		
-		cleanup(container);
-		pass('ExportCSV has default maxWidth of 136');
-	},
 
 	'ExportCSV: should have getCSV method': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
+		const { container, control } = await createTableWithControl('kc-tc-export-csv');
 		
 		if(typeof control.getCSV !== 'function'){
 			cleanup(container);
@@ -97,7 +85,7 @@ export default {
 	},
 
 	'ExportCSV: should have export method': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
+		const { container, control } = await createTableWithControl('kc-tc-export-csv');
 		
 		if(typeof control.export !== 'function'){
 			cleanup(container);
@@ -110,7 +98,7 @@ export default {
 	},
 
 	'ExportCSV: getCSV should return CSV string': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
+		const { container, control } = await createTableWithControl('kc-tc-export-csv');
 		
 		const csv = control.getCSV();
 		
@@ -125,7 +113,7 @@ export default {
 	},
 
 	'ExportCSV: CSV should have header row': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
+		const { container, control } = await createTableWithControl('kc-tc-export-csv');
 		
 		const csv = control.getCSV();
 		const lines = csv.split('\n');
@@ -142,7 +130,7 @@ export default {
 	},
 
 	'ExportCSV: CSV should have data rows': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
+		const { container, control } = await createTableWithControl('kc-tc-export-csv');
 		
 		const csv = control.getCSV();
 		const lines = csv.split('\n').filter(l => l.trim());
@@ -159,7 +147,7 @@ export default {
 	},
 
 	'ExportCSV: CSV should contain record data': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
+		const { container, control } = await createTableWithControl('kc-tc-export-csv');
 		
 		const csv = control.getCSV();
 		
@@ -178,7 +166,7 @@ export default {
 		container.innerHTML = `
 			<k-table>
 				<div slot="controls">
-					<k-tc-export-csv></k-tc-export-csv>
+					<kc-tc-export-csv></kc-tc-export-csv>
 				</div>
 			</k-table>
 		`;
@@ -194,7 +182,7 @@ export default {
 		});
 		await table.updateComplete;
 		
-		const control = container.querySelector('k-tc-export-csv');
+		const control = container.querySelector('kc-tc-export-csv');
 		await control.updateComplete;
 		
 		const csv = control.getCSV();
@@ -211,7 +199,7 @@ export default {
 	},
 
 	'ExportCSV: should return empty string without table': async ({pass, fail}) => {
-		const control = document.createElement('k-tc-export-csv');
+		const control = document.createElement('kc-tc-export-csv');
 		document.body.appendChild(control);
 		await control.updateComplete;
 		
@@ -231,9 +219,9 @@ export default {
 		ExportJson Tests
 	*/
 	'ExportJson: should render export button': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-json');
+		const { container, control } = await createTableWithControl('kc-tc-export-json');
 		
-		const btn = control.shadowRoot.querySelector('button');
+		const btn = control;
 		if(!btn){
 			cleanup(container);
 			fail('ExportJson should render button');
@@ -251,21 +239,9 @@ export default {
 		pass('ExportJson renders correctly');
 	},
 
-	'ExportJson: should have default maxWidth of 136': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-json');
-		
-		if(control.maxWidth !== 136){
-			cleanup(container);
-			fail(`Expected maxWidth 136, got ${control.maxWidth}`);
-			return;
-		}
-		
-		cleanup(container);
-		pass('ExportJson has default maxWidth of 136');
-	},
 
 	'ExportJson: should have export method': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-json');
+		const { container, control } = await createTableWithControl('kc-tc-export-json');
 		
 		if(typeof control.export !== 'function'){
 			cleanup(container);
@@ -278,10 +254,10 @@ export default {
 	},
 
 	'ExportJson: should display Export JSON text': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-json');
+		const { container, control } = await createTableWithControl('kc-tc-export-json');
 		
-		const btn = control.shadowRoot.querySelector('button');
-		if(!btn.textContent.includes('Export JSON')){
+		const btn = control;
+		if(!btn.shadowRoot.textContent.includes('Export JSON')){
 			cleanup(container);
 			fail('Button should display "Export JSON" text');
 			return;
@@ -292,10 +268,10 @@ export default {
 	},
 
 	'ExportCSV: should display Export CSV text': async ({pass, fail}) => {
-		const { container, control } = await createTableWithControl('k-tc-export-csv');
+		const { container, control } = await createTableWithControl('kc-tc-export-csv');
 		
-		const btn = control.shadowRoot.querySelector('button');
-		if(!btn.textContent.includes('Export CSV')){
+		const btn = control;
+		if(!btn.shadowRoot.textContent.includes('Export CSV')){
 			cleanup(container);
 			fail('Button should display "Export CSV" text');
 			return;