kempo-testing-framework 1.2.4 → 1.3.4

package/.github/copilot-instructions.md

@@ -1,105 +1,105 @@
-# Code Contribution Guidelines
-
-## Project Structure
-
- - All code should be in the `src/` directory, with the exception of index.js.
- - All utility function module files should be in the `src/utils/` directory.
-
-### GUI
-
-All files served by the GUI should be in the `gui/` directory, with the exception of scripts shared with the CLI, custom endpoints, and node_modules like kempo.css (which should have custom endpoints).
-
-## Coding Style Guidelines
-
-### Code Organization
-Use multi-line comments to separate code into logical sections. Group related functionality together.
-  - Example: In Lit components, group lifecycle callbacks, event handlers, public methods, utility functions, and rendering logic separately.
-
-```javascript
-/*
-  Lifecycle Callbacks
-*/
-```
-
-### Avoid single-use variables/functions
-Avoid defining a variable or function to only use it once; inline the logic where needed. Some exceptions include:
-  - recursion
-  - scope encapsulation (IIFE)
-  - context changes
-
-### Minimal Comments, Empty Lines, and Spacing
-
-Use minimal comments. Assume readers understand the language. Some exceptions include:
-  - complex logic
-  - anti-patterns
-  - code organization
-
-Do not put random empty lines within code; put them where they make sense for readability, for example:
-  - above and below definitions for functions and classes.
-  - to help break up large sections of logic to be more readable. If there are 100 lines of code with no breaks, it gets hard to read.
-  - above multi-line comments to indicate the comment belongs to the code below
-
-No  empty lines in css.
-
-End each file with an empty line.
-
-End each line with a `;` when possible, even if it is optional.
-
-Avoid unnecessary spacing, for example:
-  - after the word `if`
-  - within parentheses for conditional statements
-
-```javascript
-let count = 1;
-
-const incrementOdd = (n) => {
-  if(n % 2 !== 0){
-    return n++;
-  }
-  return n;
-};
-
-count = incrementOdd(count);
-```
-
-### Prefer Arrow Functions
-Prefer the use of arrow functions when possible, especially for class methods to avoid binding. Use normal functions if needed for preserving the proper context.
- - For very basic logic, use implicit returns
- - If there is a single parameter, omit the parentheses.
-```javascript
-const addOne = n => n + 1;
-```
-
-### Module Exports
-  - If a module has only one export, use the "default" export, not a named export.
-    - Do not declare the default export as a const or give it a name; just export the value.
-
-```javascript
-export default (n) => n + 1;
-```
-  - If a module has multiple exports, use named exports and do not use a "default" export.
-
-### Code Reuse
-Create utility functions for shared logic.
-  - If the shared logic is used in a single file, define a utility function in that file.
-  - If the shared logic is used in multiple files, create a utility function module file in `src/utils/`.
-
-### Naming
-Do not prefix identifiers with underscores.
-  - Never use leading underscores (`_`) for variable, property, method, or function names.
-  - Use clear, descriptive names without prefixes.
-  - When true privacy is needed inside classes, prefer native JavaScript private fields (e.g., `#myField`) instead of simulated privacy via underscores.
-
-## Lit Components
-
-### Component Architecture and Communication
-
-- Use methods to cause actions; do not emit events to trigger logic. Events are for notifying that something already happened.
-  - Prefer `el.closest('ktf-test-framework')?.enqueueSuite({...})` over firing an `enqueue` event.
-
-- Wrap dependent GUI components inside a parent `ktf-test-framework` element. Children find it via `closest('ktf-test-framework')` and call its methods. The framework can query its subtree to orchestrate children.
-
-- Avoid `window` globals and global custom events for coordination. If broadcast is needed, scope events to the framework element; reserve window events for global, non-visual concerns (e.g., settings changes).
-
-- Queued status must show the `scheduled` icon. Running may apply `animation="spin"`.
-
+# Code Contribution Guidelines
+
+## Project Structure
+
+ - All code should be in the `src/` directory, with the exception of index.js.
+ - All utility function module files should be in the `src/utils/` directory.
+
+### GUI
+
+All files served by the GUI should be in the `gui/` directory, with the exception of scripts shared with the CLI, custom endpoints, and node_modules like kempo.css (which should have custom endpoints).
+
+## Coding Style Guidelines
+
+### Code Organization
+Use multi-line comments to separate code into logical sections. Group related functionality together.
+  - Example: In Lit components, group lifecycle callbacks, event handlers, public methods, utility functions, and rendering logic separately.
+
+```javascript
+/*
+  Lifecycle Callbacks
+*/
+```
+
+### Avoid single-use variables/functions
+Avoid defining a variable or function to only use it once; inline the logic where needed. Some exceptions include:
+  - recursion
+  - scope encapsulation (IIFE)
+  - context changes
+
+### Minimal Comments, Empty Lines, and Spacing
+
+Use minimal comments. Assume readers understand the language. Some exceptions include:
+  - complex logic
+  - anti-patterns
+  - code organization
+
+Do not put random empty lines within code; put them where they make sense for readability, for example:
+  - above and below definitions for functions and classes.
+  - to help break up large sections of logic to be more readable. If there are 100 lines of code with no breaks, it gets hard to read.
+  - above multi-line comments to indicate the comment belongs to the code below
+
+No  empty lines in css.
+
+End each file with an empty line.
+
+End each line with a `;` when possible, even if it is optional.
+
+Avoid unnecessary spacing, for example:
+  - after the word `if`
+  - within parentheses for conditional statements
+
+```javascript
+let count = 1;
+
+const incrementOdd = (n) => {
+  if(n % 2 !== 0){
+    return n++;
+  }
+  return n;
+};
+
+count = incrementOdd(count);
+```
+
+### Prefer Arrow Functions
+Prefer the use of arrow functions when possible, especially for class methods to avoid binding. Use normal functions if needed for preserving the proper context.
+ - For very basic logic, use implicit returns
+ - If there is a single parameter, omit the parentheses.
+```javascript
+const addOne = n => n + 1;
+```
+
+### Module Exports
+  - If a module has only one export, use the "default" export, not a named export.
+    - Do not declare the default export as a const or give it a name; just export the value.
+
+```javascript
+export default (n) => n + 1;
+```
+  - If a module has multiple exports, use named exports and do not use a "default" export.
+
+### Code Reuse
+Create utility functions for shared logic.
+  - If the shared logic is used in a single file, define a utility function in that file.
+  - If the shared logic is used in multiple files, create a utility function module file in `src/utils/`.
+
+### Naming
+Do not prefix identifiers with underscores.
+  - Never use leading underscores (`_`) for variable, property, method, or function names.
+  - Use clear, descriptive names without prefixes.
+  - When true privacy is needed inside classes, prefer native JavaScript private fields (e.g., `#myField`) instead of simulated privacy via underscores.
+
+## Lit Components
+
+### Component Architecture and Communication
+
+- Use methods to cause actions; do not emit events to trigger logic. Events are for notifying that something already happened.
+  - Prefer `el.closest('ktf-test-framework')?.enqueueSuite({...})` over firing an `enqueue` event.
+
+- Wrap dependent GUI components inside a parent `ktf-test-framework` element. Children find it via `closest('ktf-test-framework')` and call its methods. The framework can query its subtree to orchestrate children.
+
+- Avoid `window` globals and global custom events for coordination. If broadcast is needed, scope events to the framework element; reserve window events for global, non-visual concerns (e.g., settings changes).
+
+- Queued status must show the `scheduled` icon. Running may apply `animation="spin"`.
+

package/.github/workflows/publish-npm.yml

@@ -0,0 +1,41 @@
+
+name: Publish Package to npmjs
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write  # enables npm provenance
+    steps:
+      - uses: actions/checkout@v4
+
+      # Setup Node and create an .npmrc that uses the token from NODE_AUTH_TOKEN
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+
+      - run: npm ci
+
+      # Auto-increment patch version, commit, and push
+      - name: Bump patch version
+        run: |
+          git config --global user.name "github-actions"
+          git config --global user.email "github-actions@github.com"
+          npm version patch --no-git-tag-version
+          git add package.json package-lock.json || true
+          git commit -m "ci: bump patch version [skip ci]" || echo "No changes to commit"
+          git push origin HEAD:main || echo "No changes to push"
+
+      # If your package is public and scoped (e.g., @scope/name), keep --access public.
+      # For unscoped public packages, you can omit --access.
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/CONTRIBUTING.md

@@ -1,107 +1,107 @@
-# Code Contribution Guidelines
-
-## Project Structure
-
- - All code should be in the `src/` directory, with the exception of index.js.
- - All utility function module files should be in the `src/utils/` directory.
-
-### GUI
-
-All files served by the GUI should be in the `gui/` directory, with the exception of scripts shared with the CLI, custom endpoints, and node_modules like kempo.css (which should have custom endpoints).
-
-## Coding Style Guidelines
-
-### Code Organization
-Use multi-line comments to separate code into logical sections. Group related functionality together.
-  - Example: In Lit components, group lifecycle callbacks, event handlers, public methods, utility functions, and rendering logic separately.
-
-```javascript
-/*
-  Lifecycle Callbacks
-*/
-```
-
-### Avoid single-use variables/functions
-Avoid defining a variable or function to only use it once; inline the logic where needed. Some exceptions include:
-  - recursion
-  - scope encapsulation (IIFE)
-  - context changes
-
-### Minimal Comments, Empty Lines, and Spacing
-
-Use minimal comments. Assume readers understand the language. Some exceptions include:
-  - complex logic
-  - anti-patterns
-  - code organization
-
-Do not put random empty lines within code; put them where they make sense for readability, for example:
-  - above and below definitions for functions and classes.
-  - to help break up large sections of logic to be more readable. If there are 100 lines of code with no breaks, it gets hard to read.
-  - above multi-line comments to indicate the comment belongs to the code below
-
-No  empty lines in css.
-
-End each file with an empty line.
-
-End each line with a `;` when possible, even if it is optional.
-
-Avoid unnecessary spacing, for example:
-  - after the word `if`
-  - within parentheses for conditional statements
-
-```javascript
-let count = 1;
-
-const incrementOdd = (n) => {
-  if(n % 2 !== 0){
-    return n++;
-  }
-  return n;
-};
-
-count = incrementOdd(count);
-```
-
-### Prefer Arrow Functions
-Prefer the use of arrow functions when possible, especially for class methods to avoid binding. Use normal functions if needed for preserving the proper context.
- - For very basic logic, use implicit returns
- - If there is a single parameter, omit the parentheses.
-```javascript
-const addOne = n => n + 1;
-```
-
-### Module Exports
-  - If a module has only one export, use the "default" export, not a named export.
-    - Do not declare the default export as a const or give it a name; just export the value.
-
-```javascript
-export default (n) => n + 1;
-```
-  - If a module has multiple exports, use named exports and do not use a "default" export.
-
-### Code Reuse
-Create utility functions for shared logic.
-  - If the shared logic is used in a single file, define a utility function in that file.
-  - If the shared logic is used in multiple files, create a utility function module file in `src/utils/`.
-
-### Naming
-Do not prefix identifiers with underscores.
-  - Never use leading underscores (`_`) for variable, property, method, or function names.
-  - Use clear, descriptive names without prefixes.
-  - When true privacy is needed inside classes, prefer native JavaScript private fields (e.g., `#myField`) instead of simulated privacy via underscores.
-
-## Lit Components
-
-### Component Architecture and Communication
-
-- Prefer direct method calls to trigger behavior. Do not dispatch custom events to make something happen. Use events only to inform that something already happened.
-  - Do: `this.closest('ktf-test-framework').enqueueTest({...});`
-  - Don’t: `this.closest('ktf-test-framework').dispatchEvent(new CustomEvent('enqueue', {...}))` to trigger logic.
-
-- Containment-first design: place orchestrators (e.g., `ktf-test-framework`) as a parent that wraps all dependent components (summary, suites, tests). Children should locate the parent with `closest('ktf-test-framework')` and call its methods.
-  - Parents may query their own subtree (`this.querySelectorAll(...)`) to find children.
-
-- Avoid window globals and window-scoped events for app logic. Scope cross-component events to the containing framework element when possible. Window events are reserved for process-wide concerns (e.g., settings store changes).
-
-- Status and UI mapping: queued status should render the `scheduled` icon; running may use spin animation.
-
+# Code Contribution Guidelines
+
+## Project Structure
+
+ - All code should be in the `src/` directory, with the exception of index.js.
+ - All utility function module files should be in the `src/utils/` directory.
+
+### GUI
+
+All files served by the GUI should be in the `gui/` directory, with the exception of scripts shared with the CLI, custom endpoints, and node_modules like kempo.css (which should have custom endpoints).
+
+## Coding Style Guidelines
+
+### Code Organization
+Use multi-line comments to separate code into logical sections. Group related functionality together.
+  - Example: In Lit components, group lifecycle callbacks, event handlers, public methods, utility functions, and rendering logic separately.
+
+```javascript
+/*
+  Lifecycle Callbacks
+*/
+```
+
+### Avoid single-use variables/functions
+Avoid defining a variable or function to only use it once; inline the logic where needed. Some exceptions include:
+  - recursion
+  - scope encapsulation (IIFE)
+  - context changes
+
+### Minimal Comments, Empty Lines, and Spacing
+
+Use minimal comments. Assume readers understand the language. Some exceptions include:
+  - complex logic
+  - anti-patterns
+  - code organization
+
+Do not put random empty lines within code; put them where they make sense for readability, for example:
+  - above and below definitions for functions and classes.
+  - to help break up large sections of logic to be more readable. If there are 100 lines of code with no breaks, it gets hard to read.
+  - above multi-line comments to indicate the comment belongs to the code below
+
+No  empty lines in css.
+
+End each file with an empty line.
+
+End each line with a `;` when possible, even if it is optional.
+
+Avoid unnecessary spacing, for example:
+  - after the word `if`
+  - within parentheses for conditional statements
+
+```javascript
+let count = 1;
+
+const incrementOdd = (n) => {
+  if(n % 2 !== 0){
+    return n++;
+  }
+  return n;
+};
+
+count = incrementOdd(count);
+```
+
+### Prefer Arrow Functions
+Prefer the use of arrow functions when possible, especially for class methods to avoid binding. Use normal functions if needed for preserving the proper context.
+ - For very basic logic, use implicit returns
+ - If there is a single parameter, omit the parentheses.
+```javascript
+const addOne = n => n + 1;
+```
+
+### Module Exports
+  - If a module has only one export, use the "default" export, not a named export.
+    - Do not declare the default export as a const or give it a name; just export the value.
+
+```javascript
+export default (n) => n + 1;
+```
+  - If a module has multiple exports, use named exports and do not use a "default" export.
+
+### Code Reuse
+Create utility functions for shared logic.
+  - If the shared logic is used in a single file, define a utility function in that file.
+  - If the shared logic is used in multiple files, create a utility function module file in `src/utils/`.
+
+### Naming
+Do not prefix identifiers with underscores.
+  - Never use leading underscores (`_`) for variable, property, method, or function names.
+  - Use clear, descriptive names without prefixes.
+  - When true privacy is needed inside classes, prefer native JavaScript private fields (e.g., `#myField`) instead of simulated privacy via underscores.
+
+## Lit Components
+
+### Component Architecture and Communication
+
+- Prefer direct method calls to trigger behavior. Do not dispatch custom events to make something happen. Use events only to inform that something already happened.
+  - Do: `this.closest('ktf-test-framework').enqueueTest({...});`
+  - Don’t: `this.closest('ktf-test-framework').dispatchEvent(new CustomEvent('enqueue', {...}))` to trigger logic.
+
+- Containment-first design: place orchestrators (e.g., `ktf-test-framework`) as a parent that wraps all dependent components (summary, suites, tests). Children should locate the parent with `closest('ktf-test-framework')` and call its methods.
+  - Parents may query their own subtree (`this.querySelectorAll(...)`) to find children.
+
+- Avoid window globals and window-scoped events for app logic. Scope cross-component events to the containing framework element when possible. Window events are reserved for process-wide concerns (e.g., settings store changes).
+
+- Status and UI mapping: queued status should render the `scheduled` icon; running may use spin animation.
+

package/gui/components/Collapsible.js

@@ -1,54 +1,54 @@
-import { LitElement, html, css } from '../lit-all.min.js';
-
-window.customElements.define('ktf-collapsible', class extends LitElement {
-	/*
-		Properties
-	*/
-	static properties = {
-		opened: { type: Boolean, reflect: true }
-	}
-	constructor(){
-		super();
-		this.opened = false;
-	}
-	connectedCallback(){
-		super.connectedCallback();
-		if (this.hasAttribute('opened')) this.opened = true;
-	}
-
-	/*
-		Event Handling
-	*/
-	toggle = () => {
-		this.opened = !this.opened;
-	}
-
-	/*
-		Rendering
-	*/
-	render(){
-		return html`
-			<link rel="stylesheet" href="/kempo.css">
-			<div class="header">
-				<div class="actions">
-					<slot name="actions"></slot>
-				</div>
-				<button class="no-btn p r title" @click=${this.toggle}>
-					<slot name="title">Show ${this.opened?'Less':'More'}</slot>
-				</button>
-			</div>
-			${this.opened?html`<div class="bt p pb0"><slot></slot></div>`:''}
-		`;
-	}
-	static styles = css`
-		:host {
-			display: block;
-			border: 1px solid var(--c_border, #cccccc);
-			border-radius: var(--radius, 0.25rem);
-			margin-bottom: var(--spacer, 1rem);
-		}
-		.header { display: flex; align-items: center; }
-		.title { flex: 1; text-align: left; }
-		.actions { display: inline-flex; align-items: center; gap: .5rem; }
-	`;
-});
+import { LitElement, html, css } from '../lit-all.min.js';
+
+window.customElements.define('ktf-collapsible', class extends LitElement {
+	/*
+		Properties
+	*/
+	static properties = {
+		opened: { type: Boolean, reflect: true }
+	}
+	constructor(){
+		super();
+		this.opened = false;
+	}
+	connectedCallback(){
+		super.connectedCallback();
+		if (this.hasAttribute('opened')) this.opened = true;
+	}
+
+	/*
+		Event Handling
+	*/
+	toggle = () => {
+		this.opened = !this.opened;
+	}
+
+	/*
+		Rendering
+	*/
+	render(){
+		return html`
+			<link rel="stylesheet" href="/kempo.css">
+			<div class="header">
+				<div class="actions">
+					<slot name="actions"></slot>
+				</div>
+				<button class="no-btn p r title" @click=${this.toggle}>
+					<slot name="title">Show ${this.opened?'Less':'More'}</slot>
+				</button>
+			</div>
+			${this.opened?html`<div class="bt p pb0"><slot></slot></div>`:''}
+		`;
+	}
+	static styles = css`
+		:host {
+			display: block;
+			border: 1px solid var(--c_border, #cccccc);
+			border-radius: var(--radius, 0.25rem);
+			margin-bottom: var(--spacer, 1rem);
+		}
+		.header { display: flex; align-items: center; }
+		.title { flex: 1; text-align: left; }
+		.actions { display: inline-flex; align-items: center; gap: .5rem; }
+	`;
+});