kempo-testing-framework 1.1.0

package/gui/components/TestSuite.js

@@ -0,0 +1,181 @@
+import { LitElement, html, css, render } from '../lit-all.min.js';
+import './Icon.js';
+import './Test.js';
+import './Logs.js';
+import './Collapsible.js';
+import { subscribe } from './settingsStore.js';
+
+export const statusMap = {
+  notran: 'Not Ran',
+  queued: 'Queued',
+  running: 'Running',
+  pass: 'Pass',
+  fail: 'Fail'
+};
+
+class TestSuiteEl extends LitElement {
+  /*
+    Properties
+  */
+  static properties = {
+    file: { type: String, reflect: true },
+    testNames: { type: Array },
+  status: { type: String, reflect: true }
+  };
+  #unsubscribe = null;
+  #testsContainer = null;
+  constructor(){
+    super();
+    this.file = '';
+    this.testNames = [];
+    this.status = 'notran';
+  }
+
+  /*
+    LifecycleCallbacks
+  */
+  connectedCallback(){
+    super.connectedCallback();
+  }
+  firstUpdated(){
+    // Listen on host so light-DOM children bubble here
+    this.addEventListener('test_status_change', this.testStatusChangeHandler);
+    this.#unsubscribe = subscribe(() => this.requestUpdate());
+    // Ensure a light-DOM container exists for tests and render them there
+    const existing = this.querySelector('[slot="tests"]');
+    this.#testsContainer = existing || (() => {
+      const c = document.createElement('div');
+      c.setAttribute('slot', 'tests');
+      this.appendChild(c);
+      return c;
+    })();
+    this.renderTests();
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    this.removeEventListener('test_status_change', this.testStatusChangeHandler);
+    if(this.#unsubscribe) this.#unsubscribe();
+  }
+  updated(changedProps){
+    if(changedProps.has('status')){
+      this.dispatchEvent(new CustomEvent('testfile_status_change', {
+        detail: { file: this.file, status: this.status },
+        bubbles: true,
+        composed: true
+      }));
+    }
+    if(changedProps.has('file') || changedProps.has('testNames')){
+      this.renderTests();
+    }
+  }
+
+  /*
+    Methods
+  */
+  runAllTests = () => {
+    const getFrameworkEl = () => {
+      let node = this;
+      while(node){
+        if(node && node.closest){
+          const fw = node.closest('ktf-test-framework');
+          if(fw) return fw;
+        }
+        const root = node?.getRootNode?.();
+        const host = root && root.host ? root.host : null;
+        if(!host) break;
+        node = host;
+      }
+      return document.querySelector('ktf-test-framework');
+    };
+    const fw = getFrameworkEl();
+    if(fw && typeof fw.enqueueSuite==='function') fw.enqueueSuite({ file: this.file, testNames: this.testNames, el: this });
+  };
+  testStatusChangeHandler = () => { this.status = this.calcStatus(); };
+
+  /*
+    Utility Methods
+  */
+  getFrameworkEl = () => {
+    let node = this;
+    while(node){
+      if(node && node.closest){
+        const fw = node.closest('ktf-test-framework');
+        if(fw) return fw;
+      }
+      const root = node?.getRootNode?.();
+      const host = root && root.host ? root.host : null;
+      if(!host) break;
+      node = host;
+    }
+    return document.querySelector('ktf-test-framework');
+  };
+  calcStatus = () => {
+  const root = this.#testsContainer || this;
+  const testElements = root.querySelectorAll('ktf-test');
+    const statuses = Array.from(testElements).map(el => el.status);
+    if(statuses.includes('running')) return 'running';
+    if(statuses.includes('fail')) return 'fail';
+    if(statuses.length && statuses.every(s => s==='pass')) return 'pass';
+    return 'notran';
+  };
+
+  /*
+    Light DOM rendering for tests
+  */
+  renderTests(){
+    if(!this.#testsContainer) return;
+    const list = Array.isArray(this.testNames) ? this.testNames : [];
+    const tpl = html`${list.map(name => html`<ktf-test .file=${this.file} .name=${name}></ktf-test>`)}`;
+    render(tpl, this.#testsContainer);
+  }
+
+  /*
+    Rendering
+  */
+  render(){
+    if(!this.file || !this.testNames.length) return html``;
+    const titleText = this.file.replace('tests/', '').replace('.node-test.js', '').replace('.browser-test.js', '').replace('.test.js', '');
+    return html`
+      <link rel="stylesheet" href="/essential.css">
+      <ktf-collapsible>
+        <span slot="title" id="title" class="-ml">${titleText}</span>
+        <div slot="actions">
+          ${this.status==='notran' || this.status==='queued' ? html`
+            <button class="no-btn d-ib ph" @click=${this.runAllTests} aria-label="Run Test Suite" ?disabled=${this.status==='queued'}>
+              <ktf-icon name="${this.status==='queued'?'scheduled':'play'}"></ktf-icon>
+            </button>
+          ` : html`
+            <span class="d-ib ph status-color" aria-hidden="true">
+              <ktf-icon name="${this.status}" animation="${this.status==='running'?'spin':'none'}"></ktf-icon>
+            </span>
+          `}
+        </div>
+        <div id="details">
+          <div id="status">
+            <h6>${statusMap[this.status]}</h6>
+            ${this.status!=='running'?html`
+              <button class="primary mb" @click=${this.runAllTests} ?disabled=${this.status==='queued'}>Run Test Suite</button>
+            `:html``}
+          </div>
+          <ktf-logs id="fileLogs"></ktf-logs>
+          <slot name="tests"></slot>
+        </div>
+      </ktf-collapsible>
+    `;
+  }
+
+  static styles = css`
+    :host{ --tf_status: var(--tc_default, inherit); }
+    :host([status="running"]){ --tf_status: var(--tc_primary, #3366ff); }
+    :host([status="pass"]){ --tf_status: var(--tc_success, rgb(0, 136, 0)); }
+    :host([status="fail"]){ --tf_status: var(--tc_danger, rgb(255, 0, 51)); }
+    #title{ font-size: 1.25rem; font-weight: 600; }
+    div[slot="actions"]{ font-size: 1.25rem; }
+    #title,
+    #status{ color: var(--tf_status); }
+    .status-color{ color: var(--tf_status); }
+  `;
+}
+
+window.customElements.define('ktf-test-suite', TestSuiteEl);
+

package/gui/components/TestSummary.js

@@ -0,0 +1,189 @@
+import { LitElement, html, css } from '../lit-all.min.js';
+import './Collapsible.js';
+import './Icon.js';
+
+window.customElements.define('ktf-test-summary', class extends LitElement {
+  /*
+    Properties
+  */
+  static properties = {
+    status: { type: String, reflect: true },
+    fileCounts: { state: true },
+  testCounts: { state: true },
+  queueLength: { state: true }
+  };
+
+  constructor(){
+    super();
+    this.status = 'notran';
+    this.testsMap = new Map();
+    this.fileCounts = { total: 0, pass: 0, fail: 0, running: 0, notran: 0 };
+    this.testCounts = { total: 0, pass: 0, fail: 0, running: 0, notran: 0 };
+  this.queueLength = 0;
+  }
+
+  /*
+    Lifecycle Callbacks
+  */
+  connectedCallback(){
+    super.connectedCallback();
+  const fw = this.getFrameworkEl();
+  (fw||window).addEventListener('testfile_status_change', this.onFileStatusChange);
+  (fw||window).addEventListener('test_status_change', this.onTestStatusChange);
+  if(fw) fw.addEventListener('ktf:queue-updated', this.onQueueUpdated);
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+  const fw = this.getFrameworkEl();
+  (fw||window).removeEventListener('testfile_status_change', this.onFileStatusChange);
+  (fw||window).removeEventListener('test_status_change', this.onTestStatusChange);
+  if(fw) fw.removeEventListener('ktf:queue-updated', this.onQueueUpdated);
+  }
+  firstUpdated(){
+  this.initializeFromChildren();
+  const fw = this.getFrameworkEl();
+  if(fw){ this.onQueueUpdated({ detail: { length: fw.queue?.length || 0 } }); }
+  }
+
+  /*
+    Event Handlers
+  */
+  onSlotChange = () => { this.initializeFromChildren(); };
+  onFileStatusChange = () => { this.recountFiles(); this.updateSuiteStatus(); };
+  onTestStatusChange = (e) => {
+    const d = e?.detail || {};
+    if(d && d.file && d.name && d.status){
+      const key = `${d.file}::${d.name}`;
+      this.testsMap.set(key, d.status);
+      this.recountTests();
+      this.updateSuiteStatus();
+    }
+  };
+  onQueueUpdated = (e) => { this.queueLength = Number(e?.detail?.length||0); };
+  getFrameworkEl(){ return this.closest('ktf-test-framework'); }
+  runAllSuites = () => {
+  const fw = this.getFrameworkEl();
+  if(fw && typeof fw.runAllSuites==='function') fw.runAllSuites();
+  };
+
+  /*
+    Utility Methods
+  */
+  initializeFromChildren(){
+  const root = this.getFrameworkEl() || document;
+  const fileEls = Array.from(root.querySelectorAll('ktf-test-suite'));
+    for(const el of fileEls){
+      const file = el.file || el.getAttribute('file') || '';
+      const names = Array.isArray(el.testNames) ? el.testNames : [];
+      for(const name of names){
+        const key = `${file}::${name}`;
+        if(!this.testsMap.has(key)) this.testsMap.set(key, 'notran');
+      }
+    }
+    this.recountFiles();
+    this.recountTests();
+    this.updateSuiteStatus();
+  }
+  recountFiles(){
+  const root = this.getFrameworkEl() || document;
+  const fileEls = Array.from(root.querySelectorAll('ktf-test-suite'));
+    const counts = { total: fileEls.length, pass: 0, fail: 0, running: 0, notran: 0 };
+    for(const el of fileEls){
+      const s = el.getAttribute('status') || 'notran';
+      if(s==='pass') counts.pass++;
+      else if(s==='fail') counts.fail++;
+      else if(s==='running') counts.running++;
+      else counts.notran++;
+    }
+    this.fileCounts = counts;
+  }
+  recountTests(){
+    const counts = { total: 0, pass: 0, fail: 0, running: 0, notran: 0 };
+    for(const s of this.testsMap.values()){
+      counts.total++;
+      if(s==='pass') counts.pass++;
+      else if(s==='fail') counts.fail++;
+      else if(s==='running') counts.running++;
+      else counts.notran++;
+    }
+    this.testCounts = counts;
+  }
+  updateSuiteStatus(){
+    const f = this.fileCounts;
+    const t = this.testCounts;
+    let next = 'notran';
+    if(f.running>0 || t.running>0) next = 'running';
+    else if(f.fail>0 || t.fail>0) next = 'fail';
+    else if((f.total>0 || t.total>0) && f.fail===0 && t.fail===0 && f.running===0 && t.running===0 && f.notran===0 && t.notran===0) next = 'pass';
+    else next = 'notran';
+    if(this.status!==next) this.status = next;
+  }
+
+  /*
+    Rendering
+  */
+  render(){
+    const f = this.fileCounts;
+    const t = this.testCounts;
+    return html`
+      <link rel="stylesheet" href="/essential.css">
+  <ktf-collapsible opened>
+        <span slot="title" class="-ml"><b>Test Summary</b></span>
+  <div slot="actions">
+          ${this.status==='notran' ? html`
+            <button class="no-btn d-ib ph" @click=${this.runAllSuites} aria-label="Run All Tests">
+              <ktf-icon name="play"></ktf-icon>
+            </button>
+          ` : html`
+            <span class="d-ib ph status-color" aria-hidden="true">
+              <ktf-icon name="${this.status}" animation="${this.status==='running'?'spin':'none'}"></ktf-icon>
+            </span>
+          `}
+        </div>
+        <div class="summary mb">
+          <button class="primary mb" @click=${this.runAllSuites} ?disabled=${this.status==='running'}>Run All Tests</button>
+          <div class="counts mt">
+            <span class="muted">Queue: ${this.queueLength}</span>
+          </div>
+          <div class="row">
+            <div class="col">
+              <h6>Files</h6>
+              <div class="counts">
+                <span>Total: ${f.total}</span>
+                <span class="pass">Pass: ${f.pass}</span>
+                <span class="fail">Fail: ${f.fail}</span>
+                <span class="running">Running: ${f.running}</span>
+                <span class="notran">Not Ran: ${f.notran}</span>
+              </div>
+            </div>
+            <div class="col">
+              <h6>Tests</h6>
+              <div class="counts">
+                <span>Total: ${t.total}</span>
+                <span class="pass">Pass: ${t.pass}</span>
+                <span class="fail">Fail: ${t.fail}</span>
+                <span class="running">Running: ${t.running}</span>
+                <span class="notran">Not Ran: ${t.notran}</span>
+              </div>
+            </div>
+          </div>
+          <slot></slot>
+        </div>
+      </ktf-collapsible>
+    `;
+  }
+
+  static styles = css`
+    :host{ --suite_status: var(--tc_default, inherit); }
+    :host([status="running"]){ --suite_status: var(--tc_primary,#3366ff); }
+    :host([status="pass"]){ --suite_status: var(--tc_success, rgb(0,136,0)); }
+    :host([status="fail"]){ --suite_status: var(--tc_danger, rgb(255,0,51)); }
+    .summary h6{ color: var(--suite_status); }
+    div[slot="actions"]{ font-size: 1.25rem; }
+    .counts{ display:flex; gap: var(--spacer_h); flex-wrap: wrap; }
+    .counts .pass{ color: var(--tc_success, rgb(0,136,0)); }
+    .counts .fail{ color: var(--tc_danger, rgb(255,0,51)); }
+    .counts .running{ color: var(--tc_primary,#3366ff); }
+    .counts .notran{ color: var(--tc_muted); }
+  `;
+});

package/gui/components/Theme.js

@@ -0,0 +1,40 @@
+import { LitElement, html, css } from '../lit-all.min.js';
+import { getSettings, subscribe } from './settingsStore.js';
+
+window.customElements.define('ktf-theme', class extends LitElement {
+  static properties = {
+    theme: { type: String, reflect: true }
+  }
+  #unsubscribe = null;
+  constructor(){
+    super();
+    this.theme = (getSettings().theme) || 'auto';
+  }
+  connectedCallback(){
+    super.connectedCallback();
+    this.applyTheme(this.theme);
+    this.#unsubscribe = subscribe(s => {
+      if (s.theme !== this.theme) {
+        this.theme = s.theme || 'auto';
+        this.applyTheme(this.theme);
+      }
+    });
+  }
+  disconnectedCallback(){
+    super.disconnectedCallback();
+    if (this.#unsubscribe) this.#unsubscribe();
+  }
+
+  applyTheme(theme){
+    document.documentElement.setAttribute('theme', theme || 'auto');
+  }
+
+  render(){
+    // No UI; control is in Settings accordion. Keep a subtle indicator if needed.
+    return html``;
+  }
+
+  static styles = css`
+    :host { display:none; }
+  `;
+});

package/gui/components/settingsStore.js

@@ -0,0 +1,46 @@
+// Simple global settings store with localStorage persistence and event dispatch
+const STORAGE_KEY = 'ktf_settings';
+const DEFAULTS = {
+  showBrowser: false,
+  logLevel: 3,
+  theme: 'auto',
+  delayMs: 0,
+};
+
+let state = (() => {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return { ...DEFAULTS };
+    const parsed = JSON.parse(raw);
+    return { ...DEFAULTS, ...parsed };
+  } catch {
+    return { ...DEFAULTS };
+  }
+})();
+
+const save = () => {
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch {}
+};
+
+export const getSettings = () => ({ ...state });
+
+export const setSettings = (partial) => {
+  state = { ...state, ...partial };
+  save();
+  const evt = new CustomEvent('ktf-settings-change', { detail: { ...state } });
+  window.dispatchEvent(evt);
+};
+
+export const subscribe = (handler) => {
+  const wrapped = (e) => handler(e.detail);
+  window.addEventListener('ktf-settings-change', wrapped);
+  return () => window.removeEventListener('ktf-settings-change', wrapped);
+};
+
+// Expose on window for debugging if needed
+if (!window.KTF_SETTINGS) {
+  window.KTF_SETTINGS = {
+    get: getSettings,
+    set: setSettings,
+  };
+}

package/gui/icons/fail.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

package/gui/icons/logs.svg

@@ -0,0 +1 @@
+<svg eight="24px" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m 840,-240 v -80 H 320 v 80 z m -664,-40 200,-200 -200,-200 -56,56 144,144 -144,144 z m 664,-160 v -80 H 440 v 80 z m 0,-200 v -80 H 320 v 80 z"/></svg>

package/gui/icons/pass.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

package/gui/icons/play.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m380-300 280-180-280-180v360ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

package/gui/icons/running.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q17 0 28.5 11.5T520-840q0 17-11.5 28.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-17 11.5-28.5T840-520q17 0 28.5 11.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Z"></path></svg>

package/gui/icons/scheduled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>

package/gui/icons/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm112-260q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Z"/></svg>

package/gui/icons/theme-auto.svg

@@ -0,0 +1 @@
+<svg viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 440 -920 L 440 -760 L 520 -760 L 520 -920 L 440 -920 z M 818.67969 -885.5332 L 583.66602 -651.38281 C 553.04363 -670.31258 518.55019 -680 480 -680 C 424.66678 -680 377.49992 -660.49992 338.5 -621.5 C 299.50008 -582.50008 280 -535.33322 280 -480 C 280 -441.71314 289.5643 -407.43184 308.23633 -376.96484 L 97.058594 -166.5625 L 168.59375 -92.332031 L 263.80078 -187.18945 C 267.09506 -183.63709 270.46257 -180.11555 273.9375 -176.64062 C 343.93736 -106.64077 428.9377 -71.640625 528.9375 -71.640625 C 628.9373 -71.640625 713.93764 -106.64077 783.9375 -176.64062 C 853.93736 -246.64049 888.9375 -331.64082 888.9375 -431.64062 C 888.9375 -440.97395 888.60417 -450.14064 887.9375 -459.14062 C 887.27083 -468.14062 886.27083 -476.97398 884.9375 -485.64062 C 865.60421 -458.30735 840.60411 -436.47393 809.9375 -420.14062 C 779.27089 -403.80733 745.60409 -395.64062 708.9375 -395.64062 C 648.93762 -395.64062 597.93742 -416.64072 555.9375 -458.64062 C 552.62172 -461.95641 549.47084 -465.3433 546.42188 -468.77344 L 890.21484 -811.30273 L 818.67969 -885.5332 z M 212 -806 L 155 -747 L 256 -650 L 308 -706 L 212 -806 z M 480 -600 C 495.83397 -600 510.50253 -597.28065 524.08008 -592.01562 L 367.83594 -436.34375 C 362.67843 -449.80488 360 -464.32853 360 -480 C 360 -513.33327 371.66671 -541.66671 395 -565 C 418.33329 -588.33329 446.66673 -600 480 -600 z M 40 -520 L 40 -440 L 200 -440 L 200 -520 L 40 -520 z M 489.73047 -412.28906 C 492.87534 -408.86757 496.09809 -405.48004 499.4375 -402.14062 C 557.10405 -344.47408 626.93766 -315.64062 708.9375 -315.64062 C 722.27081 -315.64062 735.60419 -316.64064 748.9375 -318.64062 C 762.27081 -320.64062 775.60419 -323.3073 788.9375 -326.64062 C 767.60421 -274.64074 733.60407 -232.4739 686.9375 -200.14062 C 640.27093 -167.80736 587.60405 -151.64062 528.9375 -151.64062 C 451.60432 -151.64062 385.60406 -178.97407 330.9375 -233.64062 C 327.48999 -237.08813 324.17746 -240.59082 320.95312 -244.13086 L 489.73047 -412.28906 z " /></svg>

package/gui/icons/theme-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>

package/gui/icons/theme-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>

package/gui/index.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kempo Testing Library GUI</title>
+  <link rel="stylesheet" href="/essential.css" />
+</head>
+<body>
+<main>
+  <h1 class="ta-center">Kempo Testing Framework GUI</h1>
+
+  <ktf-collapsible id="settings">
+    <span slot="title"><ktf-icon name="settings"></ktf-icon> &nbsp; <b>Settings</b></span>
+
+      <ktf-setting-checkbox name="showBrowser" label="Show Browser"></ktf-setting-checkbox>
+      <div id="delaySettingRow">
+        <ktf-setting-number name="delayMs" label="Delay (ms) between tests and around browser runs" step="100" min="0" max="600000" suffix="ms"></ktf-setting-number>
+      </div>
+
+      <ktf-setting-select name="logLevel" label="Log Level"></ktf-setting-select>
+
+      <ktf-setting-select name="theme" label="Theme"></ktf-setting-select>
+      
+  </ktf-collapsible>
+
+  <ktf-test-framework id="framework">
+  <ktf-test-summary id="globalSummary"></ktf-test-summary>
+  <div id="nodeTestsContainer">
+    <h2>Node Tests</h2>
+    <div id="nodeTests"></div>
+  </div>
+  <div id="browserTestsContainer">
+    <h2>Browser Tests</h2>
+    <div id="browserTests"></div>
+  </div>
+  </ktf-test-framework>
+</main>
+<script type="module">
+  import '/components/TestSuite.js';
+  import '/components/Icon.js';
+  import '/components/Theme.js';
+  import '/components/Collapsible.js';
+  import '/components/SettingSelect.js';
+  import '/components/SettingCheckbox.js';
+  import '/components/SettingNumber.js';
+  import '/components/TestSummary.js';
+  import '/components/TestFramework.js';
+  import { getSettings, setSettings, subscribe } from '/components/settingsStore.js';
+  
+  // Apply theme to document on load and when settings change
+  const applyTheme = (s) => {
+    const theme = s.theme || 'auto';
+    document.documentElement.setAttribute('theme', theme);
+  };
+  applyTheme(getSettings());
+  subscribe(applyTheme);
+  
+  // Toggle delay setting visibility with showBrowser
+  const syncDelayVisibility = (s) => {
+    const row = document.getElementById('delaySettingRow');
+    if (row) row.style.display = s.showBrowser ? '' : 'none';
+  };
+  syncDelayVisibility(getSettings());
+  subscribe(syncDelayVisibility);
+  
+  // Settings UI init (reserved for future)
+  const els = { };
+  const applyToControls = () => {};
+  applyToControls(getSettings());
+  subscribe(applyToControls);
+
+  const testFiles = await(await fetch('/testFiles')).json();
+  for (const browserTest of testFiles.browserTests) {
+    try {
+      const moduleUrl = `/test/${browserTest.file}`;
+      const testModule = await import(moduleUrl);
+      browserTest.testNames = testModule.default ? Object.keys(testModule.default) : [];
+    } catch (error) {
+      console.error(`Error importing test file ${browserTest.file}:`, error);
+      browserTest.testNames = [];
+    }
+  }
+  if(!testFiles?.browserTests?.length){
+    document.getElementById('browserTestsContainer').style.display = 'none';
+  } else {
+    const browserTestsContainer = document.getElementById('browserTests');
+    testFiles.browserTests.forEach(browserTest => {
+      const testFileElement = document.createElement('ktf-test-suite');
+      testFileElement.file = browserTest.file;
+      testFileElement.testNames = browserTest.testNames;
+      browserTestsContainer.appendChild(testFileElement);
+    });
+  }
+  if(!testFiles?.nodeTests?.length){
+    document.getElementById('nodeTestsContainer').style.display = 'none';
+  } else {
+    const nodeTestsContainer = document.getElementById('nodeTests');
+    testFiles.nodeTests.forEach(nodeTest => {
+      const testFileElement = document.createElement('ktf-test-suite');
+      testFileElement.file = nodeTest.file;
+      testFileElement.testNames = nodeTest.testNames || [];
+      nodeTestsContainer.appendChild(testFileElement);
+    });
+  }
+</script>
+</body>
+</html>