kempo-testing-framework 1.1.0

package/gui/components/Logs.js

@@ -0,0 +1,73 @@
+import { LitElement, html, css } from '../lit-all.min.js';
+import './Icon.js';
+import './Collapsible.js';
+import { getSettings, subscribe } from './settingsStore.js';
+
+window.customElements.define('ktf-logs', class extends LitElement {
+  /*
+    Properties
+  */
+  static properties = {
+    level: { type: Number }
+  };
+  #logs = [];
+  #unsubscribe = null;
+  constructor(){
+    super();
+    const initial = Number(getSettings().logLevel ?? 3);
+    this.level = Number.isFinite(initial) ? initial : 3;
+  }
+  connectedCallback(){
+    super.connectedCallback();
+    this.#unsubscribe = subscribe(s => {
+      const parsed = Number(s.logLevel ?? 3);
+      this.level = Number.isFinite(parsed) ? parsed : 3;
+    });
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    if (this.#unsubscribe) this.#unsubscribe();
+  }
+  get logs(){
+    return this.#logs;
+  }
+
+  /*
+    Methods
+  */
+  addLog = (...logs) => {
+    this.#logs.push(...logs);
+    this.requestUpdate();
+  };
+  clear = () => {
+    this.#logs.length = 0;
+    this.requestUpdate();
+  };
+
+  /*
+    Rendering
+  */
+  render(){
+    const filtered = this.#logs.filter(l => {
+      const lvl = Number.isFinite(l?.level) ? l.level : 3;
+      return lvl <= this.level;
+    });
+    if (!filtered.length) return html``;
+    return html`
+      <link rel="stylesheet" href="/essential.css">
+      <ktf-collapsible opened>
+        <span slot="title"><ktf-icon name="logs"></ktf-icon> Logs</span>
+        <pre class="bg-alt -mx -mt p mb0 rb">${filtered.map(l => html`<div class="${l?.type || 'log'}">${l?.message ?? ''}</div>`)}</pre>
+      </ktf-collapsible>
+    `;
+  }
+
+  static styles = css`
+    :host { display:block; }
+    .error,.fail { color: var(--tc_danger, rgb(255, 0, 51)); }
+    .warning { color: var(--tc_warning, #b58900); }
+    .pass { color: var(--tc_success, rgb(0, 136, 0)); }
+    .progress { color: var(--tc_muted, #6b7280); }
+    .summary { color: var(--tc_primary, #3366ff); }
+  `;
+});

package/gui/components/SettingCheckbox.js

@@ -0,0 +1,42 @@
+import { LitElement, html } from '../lit-all.min.js';
+import { getSettings, setSettings, subscribe } from './settingsStore.js';
+
+window.customElements.define('ktf-setting-checkbox', class extends LitElement {
+  static properties = {
+    name: { type: String },
+    label: { type: String },
+    checked: { state: true },
+  };
+
+  createRenderRoot() { return this; }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.apply(getSettings());
+    this.unsub = subscribe((s) => this.apply(s));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.unsub) this.unsub();
+  }
+
+  apply(s) {
+    const v = this.name ? s?.[this.name] : undefined;
+    this.checked = !!v;
+  }
+
+  onChange(e) {
+    const v = !!e.target.checked;
+    if (this.name) setSettings({ [this.name]: v });
+  }
+
+  render() {
+    const id = `setting-${this.name || 'checkbox'}`;
+    return html`
+      <div class="d-f mb" style="align-items: center">
+        <input id="${id}" type="checkbox" style="font-size: 1.35rem" .checked=${!!this.checked} @change=${(e) => this.onChange(e)} />
+        <label for="${id}" style="line-height: 1.35rem">${this.label || ''}</label>
+      </div>
+    `;
+  }
+});

package/gui/components/SettingNumber.js

@@ -0,0 +1,77 @@
+import { LitElement, html } from '../lit-all.min.js';
+import { getSettings, setSettings, subscribe } from './settingsStore.js';
+
+window.customElements.define('ktf-setting-number', class extends LitElement {
+  static properties = {
+    name: { type: String },
+    label: { type: String },
+    min: { type: Number },
+    max: { type: Number },
+    step: { type: Number },
+    value: { state: true },
+    suffix: { type: String },
+  };
+
+  constructor(){
+    super();
+    this.min = 0;
+    this.step = 100;
+    this.max = 600000; // 10 minutes
+    this.suffix = '';
+  }
+
+  createRenderRoot() { return this; }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.apply(getSettings());
+    this.unsub = subscribe((s) => this.apply(s));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.unsub) this.unsub();
+  }
+
+  apply(s) {
+    const v = this.name ? s?.[this.name] : undefined;
+    this.value = (typeof v === 'number' && !Number.isNaN(v)) ? v : 0;
+  }
+
+  onChange(e) {
+    let v = e.target.value;
+    let n = parseInt(v, 10);
+    if (Number.isNaN(n)) n = 0;
+    if (this.min !== undefined && n < this.min) n = this.min;
+    if (this.max !== undefined && n > this.max) n = this.max;
+    if (this.name) setSettings({ [this.name]: n });
+  }
+
+  updated(changed) {
+    if (changed.has('value')) {
+      const id = `setting-${this.name || 'number'}`;
+      const el = this.querySelector(`#${id}`);
+      if (el && String(el.value) !== String(this.value ?? '')) el.value = String(this.value ?? '');
+    }
+  }
+
+  render() {
+    const id = `setting-${this.name || 'number'}`;
+    return html`
+      ${this.label ? html`<label for="${id}">${this.label}</label>` : ''}
+      <div class="mb">
+        <input
+					id="${id}"
+					type="number"
+					min="${this.min}"
+					max="${this.max}"
+					step="${this.step}"
+					.value=${String(this.value ?? '')}
+					@change=${(e) => this.onChange(e)}
+					style="width: 10rem;"
+					class="d-ib"
+				/>
+        ${this.suffix ? html`<span class="ml-xs">${this.suffix}</span>` : ''}
+      </div>
+    `;
+  }
+});

package/gui/components/SettingSelect.js

@@ -0,0 +1,67 @@
+import { LitElement, html } from '../lit-all.min.js';
+import { getSettings, setSettings, subscribe } from './settingsStore.js';
+
+const PRESETS = {
+  logLevel: [
+    { value: '0', label: 'Silent: Summary only' },
+    { value: '1', label: 'Minimal: Summary and test statuses' },
+    { value: '2', label: 'Normal: Summary, statuses, and logs for failures' },
+    { value: '3', label: 'Verbose: All test logs' },
+    { value: '4', label: 'Debug: All test logs and framework internal logs' },
+  ],
+  theme: [
+    { value: 'auto', label: 'Auto (system)' },
+    { value: 'light', label: 'Light' },
+    { value: 'dark', label: 'Dark' },
+  ],
+};
+
+window.customElements.define('ktf-setting-select', class extends LitElement {
+  static properties = {
+    name: { type: String },
+    label: { type: String },
+    value: { state: true },
+  };
+
+  createRenderRoot() { return this; }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.apply(getSettings());
+    this.unsub = subscribe((s) => this.apply(s));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.unsub) this.unsub();
+  }
+
+  apply(s) {
+    const v = this.name ? s?.[this.name] : undefined;
+    this.value = v !== undefined && v !== null ? String(v) : '';
+  }
+
+  onChange(e) {
+    let v = e.target.value;
+    if (/^-?\d+$/.test(v)) v = parseInt(v, 10);
+    if (this.name) setSettings({ [this.name]: v });
+  }
+
+  updated(changed) {
+    if (changed.has('value')) {
+      const id = `setting-${this.name || 'select'}`;
+      const el = this.querySelector(`#${id}`);
+      if (el && el.value !== String(this.value ?? '')) el.value = String(this.value ?? '');
+    }
+  }
+
+  render() {
+    const options = PRESETS[this.name] || [];
+    const id = `setting-${this.name || 'select'}`;
+    return html`
+      ${this.label ? html`<label for="${id}">${this.label}</label>` : ''}
+      <select id="${id}" class="mb" .value=${this.value ?? ''} @change=${(e) => this.onChange(e)}>
+        ${options.map(o => html`<option value="${o.value}">${o.label}</option>`)}
+      </select>
+    `;
+  }
+});

package/gui/components/Test.js

@@ -0,0 +1,99 @@
+import { LitElement, html, css } from '../lit-all.min.js';
+import { statusMap } from './TestSuite.js';
+import './Icon.js';
+import './Logs.js';
+import './Collapsible.js';
+import { subscribe } from './settingsStore.js';
+
+window.customElements.define('ktf-test', class extends LitElement {
+	static properties = {
+		file: { type: String, reflect: true },
+		name: { type: String, reflect: true },
+		status: { type: String, reflect: true }
+	}
+	#unsubscribe = null;
+	constructor(){
+		super();
+		this.file = '';
+		this.name = '';
+		this.status = 'notran';
+	}
+
+	connectedCallback(){
+		super.connectedCallback();
+		this.#unsubscribe = subscribe(() => this.requestUpdate());
+	}
+	disconnectedCallback(){
+		super.disconnectedCallback();
+		if (this.#unsubscribe) this.#unsubscribe();
+	}
+
+	updated(changedProps){
+		if(changedProps.has('status')){
+			this.dispatchEvent(new CustomEvent('test_status_change', {
+				detail: { status: this.status, file: this.file, name: this.name },
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+
+	runTest = () => {
+		const fw = this.closest('ktf-test-framework') || document.querySelector('ktf-test-framework');
+		if(fw && typeof fw.enqueueTest==='function') fw.enqueueTest({ file: this.file, name: this.name, el: this });
+	};
+
+	render(){
+		if(!this.file || !this.name) return html``;
+		return html`
+			<link rel="stylesheet" href="/essential.css">
+			<ktf-collapsible>
+				<span slot="title" id="title" class="-ml">
+					${this.name}
+				</span>
+				<div slot="actions">
+						${this.status==='notran' ? html`
+						<button class="no-btn d-ib ph" @click=${this.runTest} aria-label="Run Test" ?disabled=${this.status==='queued' || this.status==='running'}>
+								<ktf-icon name="play"></ktf-icon>
+						</button>
+					` : html`
+						<span class="d-ib ph status-color" aria-hidden="true">
+								<ktf-icon name="${this.status==='queued' ? 'scheduled' : this.status}" animation="${this.status === 'running' ? 'spin' : 'none'}"></ktf-icon>
+						</span>
+					`}
+				</div>
+				<div id="details">
+					<div id="status">
+						<h6>${statusMap[this.status]}</h6>
+					</div>
+					${this.status!=='running'?html`
+						<button class="primary mb" @click=${this.runTest} ?disabled=${this.status==='queued'}>Run Test</button>
+					`:html``}
+					<ktf-logs id="logs"></ktf-logs>
+				</div>
+			</ktf-collapsible>
+		`;
+	}
+
+	static styles = css`
+		:host {
+			--tc_status: var(--tc_default, inherit);
+		}
+		:host([status="running"]) {
+			--tc_status: var(--tc_primary, #3366ff);
+		}
+		:host([status="pass"]) {
+			--tc_status: var(--tc_success, rgb(0, 136, 0));
+		}
+		:host([status="fail"]) {
+			--tc_status: var(--tc_danger, rgb(255, 0, 51));
+		}
+		#title { font-size: 1rem; font-weight: 600; }
+		div[slot="actions"] { font-size: 1rem; }
+		#title,
+		#status {
+			color: var(--tc_status);
+		}
+		.status-color { color: var(--tc_status); }
+	`;
+});

package/gui/components/TestFramework.js

@@ -0,0 +1,236 @@
+import { LitElement, html } from '../lit-all.min.js';
+import { getSettings } from './settingsStore.js';
+
+class TestFrameworkEl extends LitElement {
+  /*
+    Properties
+  */
+  static properties = { };
+  constructor(){
+    super();
+    this.queue = [];
+    this.queueKeys = new Set();
+    this.running = false;
+    this.runningKey = null;
+  }
+
+  /*
+    Lifecycle
+  */
+  connectedCallback(){
+    super.connectedCallback();
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+  }
+
+  /*
+    Utility
+  */
+  keyFor = (task) => task.type==='test' ? `test:${task.file}::${task.name}` : `suite:${task.file}`;
+
+  /*
+    Public Methods
+  */
+  enqueueTest({ file, name, el }){
+    if(!file || !name || !el) return;
+    const task = { type: 'test', file, name, el };
+    const key = this.keyFor(task);
+    if(this.runningKey===key || this.queueKeys.has(key)) return;
+    this.queue.push(task);
+    this.queueKeys.add(key);
+    try { el.status = 'queued'; } catch {}
+    this.dispatchEvent(new CustomEvent('ktf:queue-updated', { detail: { length: this.queue.length } }));
+    this.runNext();
+  }
+
+  enqueueSuite({ file, testNames, el }){
+    if(!file || !el) return;
+    const names = Array.isArray(testNames)?testNames:[];
+    const task = { type: 'suite', file, testNames: names, el };
+    const key = this.keyFor(task);
+    if(this.runningKey===key || this.queueKeys.has(key)) return;
+    this.queue.push(task);
+    this.queueKeys.add(key);
+    try {
+      el.status = 'queued';
+  const tests = Array.from(el.querySelectorAll('ktf-test'));
+      for(const t of tests){ t.status = 'queued'; }
+    } catch {}
+    this.dispatchEvent(new CustomEvent('ktf:queue-updated', { detail: { length: this.queue.length } }));
+    this.runNext();
+  }
+
+  runAllSuites(){
+    const suites = Array.from(this.querySelectorAll('ktf-test-suite'));
+    for(const s of suites){ this.enqueueSuite({ file: s.file, testNames: s.testNames, el: s }); }
+  };
+
+  /*
+    Internal Queue Runner
+  */
+  runNext = async () => {
+    if(this.running) return;
+    const task = this.queue.shift();
+    if(!task) return;
+    this.running = true;
+    const key = this.keyFor(task);
+    this.queueKeys.delete(key);
+    this.runningKey = key;
+    this.dispatchEvent(new CustomEvent('ktf:queue-updated', { detail: { length: this.queue.length } }));
+    try {
+      if(task.type==='test') await this.runTest(task);
+      else await this.runSuite(task);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      this.running = false;
+      this.runningKey = null;
+      this.dispatchEvent(new CustomEvent('ktf:queue-updated', { detail: { length: this.queue.length } }));
+      if(this.queue.length) this.runNext();
+    }
+  };
+
+  /*
+    Runners
+  */
+  runTest = async ({ file, name, el }) => {
+    try {
+      el.status = 'running';
+      const logsEl = el.renderRoot?.getElementById('logs');
+      if (logsEl) logsEl.clear();
+    } catch {}
+    const { showBrowser, delayMs } = getSettings();
+    const resp = await fetch(`/runTest?testFile=${encodeURIComponent(file)}&testNames=${encodeURIComponent(name)}&showBrowser=${!!showBrowser}&delayMs=${Number(delayMs||0)}`);
+    let data = null;
+    try { data = await resp.json(); } catch {}
+    if(!resp.ok || (data && data.error)){
+      const msg = data?.details || data?.error || `${resp.status} ${resp.statusText}`;
+      try {
+        const logsEl = el.renderRoot?.getElementById('logs');
+        if (logsEl) logsEl.addLog({ message: `Error running test: ${msg}`, type: 'error', level: 3 });
+        el.status = 'fail';
+      } catch {}
+      return;
+    }
+    const fileResults = data?.results || {};
+    const beforeAllLogs = Array.isArray(fileResults.beforeAllLogs) ? fileResults.beforeAllLogs : [];
+    const afterAllLogs = Array.isArray(fileResults.afterAllLogs) ? fileResults.afterAllLogs : [];
+    const testInfo = fileResults.tests?.[name] || null;
+    const testLogs = Array.isArray(testInfo?.logs) ? testInfo.logs : [];
+    try {
+      el.status = testInfo?.passed ? 'pass' : 'fail';
+      const logsEl = el.renderRoot?.getElementById('logs');
+      if (logsEl) {
+        const heading = msg => ({ message: msg, type: 'progress', level: 3 });
+        const batch = [];
+        if (beforeAllLogs.length) batch.push(heading('== Before All Logs =='), ...beforeAllLogs);
+        batch.push(...testLogs);
+        if (afterAllLogs.length) batch.push(heading('== After All Logs =='), ...afterAllLogs);
+        const testsMap = fileResults.tests || {};
+        const names = Object.keys(testsMap);
+        const total = names.length;
+        const passed = names.reduce((acc, n) => acc + (testsMap[n]?.passed ? 1 : 0), 0);
+        const failed = total - passed;
+        if (total > 0) {
+          batch.push(
+            { message: '=== Test Summary ====', type: 'summary', level: 1 },
+            { message: `Total Tests: ${total}`, type: 'summary', level: 1 },
+            { message: `Passed: ${passed}`, type: passed > 0 ? 'pass' : 'log', level: 1 },
+            { message: `Failed: ${failed}`, type: failed > 0 ? 'fail' : 'log', level: 1 }
+          );
+          batch.push(
+            failed === 0
+              ? { message: 'All tests passed!', type: 'pass', level: 1 }
+              : { message: 'Some tests failed. See details above.', type: 'fail', level: 1 }
+          );
+        }
+        logsEl.addLog(...batch);
+      }
+    } catch {}
+  };
+
+  runSuite = async ({ file, testNames, el }) => {
+    try {
+      el.status = 'running';
+  const tests = Array.from(el.querySelectorAll('ktf-test'));
+      for(const t of tests){
+        t.status = 'running';
+        const logsEl = t.renderRoot?.getElementById('logs');
+        if(logsEl) logsEl.clear();
+      }
+      const fileLogsEl = el.renderRoot?.getElementById('fileLogs');
+      if(fileLogsEl) fileLogsEl.clear();
+    } catch {}
+    const { showBrowser, delayMs } = getSettings();
+    const resp = await fetch(`/runTest?testFile=${encodeURIComponent(file)}&showBrowser=${!!showBrowser}&delayMs=${Number(delayMs||0)}`);
+    let data = null;
+    try { data = await resp.json(); } catch {}
+    if(!resp.ok || (data && data.error)){
+      const msg = data?.details || data?.error || `${resp.status} ${resp.statusText}`;
+      try {
+        const fileLogsEl = el.renderRoot?.getElementById('fileLogs');
+        if(fileLogsEl) fileLogsEl.addLog({ message: `Error running tests: ${msg}`, type: 'error', level: 3 });
+  const tests = Array.from(el.querySelectorAll('ktf-test'));
+        for(const t of tests){ t.status = 'fail'; }
+        el.status = 'fail';
+      } catch {}
+      return;
+    }
+    const results = data?.results || {};
+    const beforeAllLogs = Array.isArray(results.beforeAllLogs) ? results.beforeAllLogs : [];
+    const afterAllLogs = Array.isArray(results.afterAllLogs) ? results.afterAllLogs : [];
+    const testsMap = results.tests || {};
+    try {
+      const fileLogsEl = el.renderRoot?.getElementById('fileLogs');
+      const heading = msg => ({ message: msg, type: 'progress', level: 3 });
+      if(fileLogsEl && beforeAllLogs.length){ fileLogsEl.addLog(heading('== Before All Logs =='), ...beforeAllLogs); }
+  const tests = Array.from(el.querySelectorAll('ktf-test'));
+      for(const t of tests){
+        const name = t.name;
+        const info = testsMap[name];
+        const logsEl = t.renderRoot?.getElementById('logs');
+        if(logsEl){
+          const batch = [];
+          if(Array.isArray(info?.logs)) batch.push(...info.logs);
+          logsEl.addLog(...batch);
+        }
+        t.status = info?.passed ? 'pass' : 'fail';
+      }
+      if(fileLogsEl){
+        if(afterAllLogs.length) fileLogsEl.addLog(heading('== After All Logs =='), ...afterAllLogs);
+        const names = Object.keys(testsMap);
+        const total = names.length;
+        const passed = names.reduce((acc, n) => acc + (testsMap[n]?.passed ? 1 : 0), 0);
+        const failed = total - passed;
+        if(total>0){
+          fileLogsEl.addLog(
+            { message: '=== Test Summary ====', type: 'summary', level: 1 },
+            { message: `Total Tests: ${total}`, type: 'summary', level: 1 },
+            { message: `Passed: ${passed}`, type: passed>0 ? 'pass' : 'log', level: 1 },
+            { message: `Failed: ${failed}`, type: failed>0 ? 'fail' : 'log', level: 1 },
+            failed===0
+              ? { message: 'All tests passed!', type: 'pass', level: 1 }
+              : { message: 'Some tests failed. See details above.', type: 'fail', level: 1 }
+          );
+        }
+      }
+      // Recalculate suite status
+  const testEls = el.querySelectorAll('ktf-test');
+      const statuses = Array.from(testEls).map(x=>x.status);
+      let suiteStatus = 'notran';
+      if(statuses.includes('running')) suiteStatus = 'running';
+      else if(statuses.includes('fail')) suiteStatus = 'fail';
+      else if(statuses.length && statuses.every(s => s==='pass')) suiteStatus = 'pass';
+      el.status = suiteStatus;
+    } catch {}
+  };
+
+  /*
+    Rendering
+  */
+  render(){ return html`<slot></slot>`; }
+}
+
+customElements.define('ktf-test-framework', TestFrameworkEl);
+export default TestFrameworkEl;