kempo-ui 0.0.81 → 0.0.82

package/.github/skills/new-component/SKILL.md

@@ -13,12 +13,13 @@ Use this skill any time you are asked to create a new component or add a new cus
 
 ## Overview
 
-Creating a component involves four steps:
+Creating a component involves five steps:
 
 1. **Choose the base component** — pick the right rendering strategy
 2. **Write the source file** in `src/components/`
 3. **Register the custom element** at the bottom of the source file
 4. **Add documentation** in `docs/components/`
+5. **Write and run unit tests** in `tests/components/`
 
 ---
 
@@ -193,6 +194,72 @@ Key requirements:
 
 ---
 
+## Step 5: Write and Run Unit Tests
+
+Create `tests/components/MyComponent.browser-test.js`. Use an existing test file (e.g. `tests/components/Toggle.browser-test.js`) as a reference.
+
+Key conventions:
+- Import the component class at the top.
+- Define an async `createMyComponent()` helper that builds the DOM, appends it to `document.body`, awaits `el.updateComplete`, and returns `{ container, el }`.
+- Define a `cleanup(container)` helper that removes the container from the DOM.
+- Export a default plain object where each key is a test description and each value is an `async ({pass, fail}) => {}` function.
+- Always call `cleanup(container)` before every `pass()` or `fail()` call.
+- Use multi-line comments to group related tests (e.g. `/* Element Creation */`, `/* Properties */`).
+
+Tests to include at minimum:
+- Element is created and is an instance of the component class
+- Element has a shadow root
+- Default property values are correct
+- Attribute reflection works (if applicable)
+- Public methods behave correctly
+- Events are dispatched correctly (if applicable)
+
+Example skeleton:
+
+```javascript
+import MyComponent from '../../src/components/MyComponent.js';
+
+const createMyComponent = async () => {
+  const container = document.createElement('div');
+  container.innerHTML = `<k-my-component></k-my-component>`;
+  document.body.appendChild(container);
+  const el = container.querySelector('k-my-component');
+  await el.updateComplete;
+  return { container, el };
+};
+
+const cleanup = (container) => {
+  if(container && container.parentNode){
+    container.parentNode.removeChild(container);
+  }
+};
+
+export default {
+  /*
+    Element Creation
+  */
+  'should create my-component element': async ({pass, fail}) => {
+    const { container, el } = await createMyComponent();
+    if(!(el instanceof MyComponent)){
+      cleanup(container);
+      return fail('Element should be instance of MyComponent');
+    }
+    cleanup(container);
+    pass('MyComponent element created correctly');
+  },
+};
+```
+
+After writing the tests, run them to confirm they all pass:
+
+```
+npm run test -- MyComponent
+```
+
+The partial string `MyComponent` will match any test file whose path contains that string. Fix any failures before considering the component complete.
+
+---
+
 ## Component Architecture and Communication
 
 - Use **methods** to trigger actions. Events notify that something already happened; they should not be used to trigger logic.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.0.81",
+  "version": "0.0.82",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/tests/components/FilterItem.browser-test.js

@@ -0,0 +1,104 @@
+import FilterItem from '../../src/components/FilterItem.js';
+
+const createFilterItem = async (content = 'item') => {
+	const container = document.createElement('div');
+	container.innerHTML = `<k-filter-item>${content}</k-filter-item>`;
+	document.body.appendChild(container);
+	const el = container.querySelector('k-filter-item');
+	await el.updateComplete;
+	return { container, el };
+};
+
+const cleanup = (container) => {
+	if(container && container.parentNode){
+		container.parentNode.removeChild(container);
+	}
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create filter-item element': async ({pass, fail}) => {
+		const { container, el } = await createFilterItem();
+		if(!el){
+			cleanup(container);
+			return fail('k-filter-item element should be created');
+		}
+		if(!(el instanceof FilterItem)){
+			cleanup(container);
+			return fail('Element should be instance of FilterItem');
+		}
+		cleanup(container);
+		pass('FilterItem element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, el } = await createFilterItem();
+		if(!el.shadowRoot){
+			cleanup(container);
+			return fail('FilterItem should have shadow root');
+		}
+		cleanup(container);
+		pass('FilterItem has shadow root');
+	},
+
+	/*
+		Visibility
+	*/
+	'should be visible by default': async ({pass, fail}) => {
+		const { container, el } = await createFilterItem();
+		if(el.hidden){
+			cleanup(container);
+			return fail('FilterItem should be visible by default');
+		}
+		cleanup(container);
+		pass('FilterItem is visible by default');
+	},
+
+	'setting hidden should hide the element': async ({pass, fail}) => {
+		const { container, el } = await createFilterItem();
+		el.hidden = true;
+		await el.updateComplete;
+		const style = getComputedStyle(el);
+		if(style.display !== 'none'){
+			cleanup(container);
+			return fail(`Expected display:none when hidden, got ${style.display}`);
+		}
+		cleanup(container);
+		pass('FilterItem is hidden when hidden attribute is set');
+	},
+
+	'removing hidden should show the element': async ({pass, fail}) => {
+		const { container, el } = await createFilterItem();
+		el.hidden = true;
+		await el.updateComplete;
+		el.hidden = false;
+		await el.updateComplete;
+		const style = getComputedStyle(el);
+		if(style.display === 'none'){
+			cleanup(container);
+			return fail('FilterItem should be visible after removing hidden');
+		}
+		cleanup(container);
+		pass('FilterItem is visible after removing hidden');
+	},
+
+	/*
+		filter-keywords attribute
+	*/
+	'should accept filter-keywords attribute': async ({pass, fail}) => {
+		const container = document.createElement('div');
+		container.innerHTML = `<k-filter-item filter-keywords="foo bar">content</k-filter-item>`;
+		document.body.appendChild(container);
+		const el = container.querySelector('k-filter-item');
+		await el.updateComplete;
+		const kw = el.getAttribute('filter-keywords');
+		if(kw !== 'foo bar'){
+			cleanup(container);
+			return fail(`Expected filter-keywords "foo bar", got "${kw}"`);
+		}
+		cleanup(container);
+		pass('filter-keywords attribute set correctly');
+	},
+};

package/tests/components/FilterList.browser-test.js

@@ -0,0 +1,162 @@
+import FilterList from '../../src/components/FilterList.js';
+import '../../src/components/FilterItem.js';
+
+const createFilterList = async (items = []) => {
+	const container = document.createElement('div');
+	container.innerHTML = `<k-filter-list>${items.map(kw => `<k-filter-item filter-keywords="${kw}">${kw}</k-filter-item>`).join('')}</k-filter-list>`;
+	document.body.appendChild(container);
+	const el = container.querySelector('k-filter-list');
+	await el.updateComplete;
+	return { container, el };
+};
+
+const cleanup = (container) => {
+	if(container && container.parentNode){
+		container.parentNode.removeChild(container);
+	}
+};
+
+export default {
+	/*
+		Element Creation
+	*/
+	'should create filter-list element': async ({pass, fail}) => {
+		const { container, el } = await createFilterList();
+		if(!el){
+			cleanup(container);
+			return fail('k-filter-list element should be created');
+		}
+		if(!(el instanceof FilterList)){
+			cleanup(container);
+			return fail('Element should be instance of FilterList');
+		}
+		cleanup(container);
+		pass('FilterList element created correctly');
+	},
+
+	'should have shadow root': async ({pass, fail}) => {
+		const { container, el } = await createFilterList();
+		if(!el.shadowRoot){
+			cleanup(container);
+			return fail('FilterList should have shadow root');
+		}
+		cleanup(container);
+		pass('FilterList has shadow root');
+	},
+
+	/*
+		filter() — empty term
+	*/
+	'filter("") should show all items': async ({pass, fail}) => {
+		const { container, el } = await createFilterList(['apple', 'banana', 'cherry']);
+		el.filter('');
+		const items = [...el.querySelectorAll('k-filter-item')];
+		const hidden = items.filter(i => i.hidden);
+		if(hidden.length !== 0){
+			cleanup(container);
+			return fail(`Expected 0 hidden items, got ${hidden.length}`);
+		}
+		cleanup(container);
+		pass('All items visible when term is empty');
+	},
+
+	/*
+		filter() — single word
+	*/
+	'filter("apple") should hide non-matching items': async ({pass, fail}) => {
+		const { container, el } = await createFilterList(['apple', 'banana', 'cherry']);
+		el.filter('apple');
+		const banana = el.querySelector('[filter-keywords="banana"]');
+		const cherry = el.querySelector('[filter-keywords="cherry"]');
+		if(!banana.hidden || !cherry.hidden){
+			cleanup(container);
+			return fail('Non-matching items should be hidden');
+		}
+		cleanup(container);
+		pass('Non-matching items are hidden');
+	},
+
+	'filter("apple") should show matching item': async ({pass, fail}) => {
+		const { container, el } = await createFilterList(['apple', 'banana', 'cherry']);
+		el.filter('apple');
+		const apple = el.querySelector('[filter-keywords="apple"]');
+		if(apple.hidden){
+			cleanup(container);
+			return fail('Matching item should not be hidden');
+		}
+		cleanup(container);
+		pass('Matching item is visible');
+	},
+
+	/*
+		filter() — multi-word (AND logic)
+	*/
+	'filter("apple pie") should require all words to match': async ({pass, fail}) => {
+		const { container, el } = await createFilterList(['apple pie', 'apple', 'pie']);
+		el.filter('apple pie');
+		const applePie = el.querySelector('[filter-keywords="apple pie"]');
+		const appleOnly = el.querySelector('[filter-keywords="apple"]');
+		const pieOnly = el.querySelector('[filter-keywords="pie"]');
+		if(applePie.hidden){
+			cleanup(container);
+			return fail('Item matching all words should be visible');
+		}
+		if(!appleOnly.hidden || !pieOnly.hidden){
+			cleanup(container);
+			return fail('Items matching only one word should be hidden');
+		}
+		cleanup(container);
+		pass('Multi-word filter requires all words to match');
+	},
+
+	/*
+		filter() — case insensitivity
+	*/
+	'filter() should be case-insensitive': async ({pass, fail}) => {
+		const { container, el } = await createFilterList(['Apple', 'banana']);
+		el.filter('APPLE');
+		const apple = el.querySelector('[filter-keywords="Apple"]');
+		if(apple.hidden){
+			cleanup(container);
+			return fail('Matching should be case-insensitive');
+		}
+		cleanup(container);
+		pass('filter() is case-insensitive');
+	},
+
+	/*
+		filter() — no keywords attribute
+	*/
+	'items with no filter-keywords should be hidden when term is provided': async ({pass, fail}) => {
+		const container = document.createElement('div');
+		container.innerHTML = `<k-filter-list><k-filter-item>no keywords</k-filter-item></k-filter-list>`;
+		document.body.appendChild(container);
+		const el = container.querySelector('k-filter-list');
+		await el.updateComplete;
+		el.filter('something');
+		const item = el.querySelector('k-filter-item');
+		if(!item.hidden){
+			cleanup(container);
+			return fail('Item with no keywords should be hidden when term is given');
+		}
+		cleanup(container);
+		pass('Item with no keywords is hidden when term is provided');
+	},
+
+	/*
+		filter() — restore all after filtering
+	*/
+	'filter("") after filtering should restore all items': async ({pass, fail}) => {
+		const { container, el } = await createFilterList(['apple', 'banana']);
+		el.filter('apple');
+		el.filter('');
+		const items = [...el.querySelectorAll('k-filter-item')];
+		const hidden = items.filter(i => i.hidden);
+		if(hidden.length !== 0){
+			cleanup(container);
+			return fail(`Expected all items visible after clearing filter, got ${hidden.length} hidden`);
+		}
+		cleanup(container);
+		pass('All items restored after clearing filter');
+	},
+};