From 400ddcde87ab1fae3249710b4a269a2cad86a128 Mon Sep 17 00:00:00 2001 From: Brian Cully Date: Mon, 28 Jul 2025 10:06:33 -0400 Subject: start adding test infrastructure lets make the link public, too, just for fun. --- index.html | 2 + test-harness.mjs | 22 +++++++++ tests.html | 29 +++++------- tests.mjs | 141 ++----------------------------------------------------- 4 files changed, 40 insertions(+), 154 deletions(-) create mode 100644 test-harness.mjs diff --git a/index.html b/index.html index 3c02fa2..95569a9 100644 --- a/index.html +++ b/index.html @@ -98,6 +98,8 @@
+ tests + src diff --git a/test-harness.mjs b/test-harness.mjs new file mode 100644 index 0000000..3af026c --- /dev/null +++ b/test-harness.mjs @@ -0,0 +1,22 @@ +export default class extends HTMLElement { + static name = 'x-test-harness'; + static register() { + console.debug('Registering Element', this.name, this); + customElements.define(this.name, this); + } + + connectedCallback() { + console.debug('TestHarness#connectedCallback', this); + const passedCount = this.querySelector('.passed-count'); + const failedCount = this.querySelector('.failed-count'); + const skippedCount = this.querySelector('.skipped-count'); + + [passedCount, failedCount, skippedCount].forEach(e => e.innerHTML = '0'); + + const runLink = this.querySelector('a'); + runLink.onclick = e => { + e.preventDefault(); + console.debug('runlink clicked', e); + }; + } +} diff --git a/tests.html b/tests.html index 5aa6aed..4b81d32 100644 --- a/tests.html +++ b/tests.html @@ -7,24 +7,17 @@ tests - - - - E - -
-
    -
  1. E
    2. -
-
- - - - + + run +
+
passed
+
0
+
failed
+
0
+
skipped
+
0
+
+ diff --git a/tests.mjs b/tests.mjs index 1dc4c09..a364e8e 100644 --- a/tests.mjs +++ b/tests.mjs @@ -1,137 +1,6 @@ -import { chromaticScale } from "./scale.mjs"; +import TestHarness from './test-harness.mjs'; -customElements.define('x-string', class extends HTMLElement { - static observedAttributes = ['tonic', 'value', 'frets']; - constructor() { - super(); - console.debug('x-string#constructor', this); - - this.muted.onclick = this.muteClicked.bind(this); - this.tonic.onclick = this.fretClicked.bind(this); - this.attachShadow({mode: 'open'}); - } - - connectedCallback() { - const template = this.querySelector('template').content; - this.shadowRoot.appendChild(template.cloneNode(true)); - console.debug('attached', template, 'to shadow root', shadowRoot); - } - - get tonic() { - return this.fretList.querySelector('.tonic'); - } - - get fretList() { - return this.querySelector('.fretlist'); - } - - get fretInputs() { - return this.querySelectorAll('.fretlist input[name="string"]'); - } - - get muted() { - return this.querySelector('input[name="muted"]'); - } - - get selected() { - return this.querySelector('[slot="selected"]'); - } - - get chromIndex() { - return chromaticScale.indexOf(this.getAttribute('tonic')); - } - - muteClicked(e) { - e.preventDefault(); - console.debug('x-string#muteClicked', this, e.target.checked); - if (e.target.checked) { - this.setAttribute('value', 'x'); - } else { - this.setAttribute('value', this.getAttribute('tonic')); - } - } - - fretClicked(e) { - e.preventDefault(); - console.debug('x-string#fretClicked', this, e.target.getAttribute('value')); - this.setAttribute('value', e.target.getAttribute('value')); - } - - attributeChangedCallback(name, old, v) { - console.debug('x-string#attributeChangedCallback', this, name, old, v); - switch (name) { - case 'tonic': - return this.updateTonic(v); - case 'value': - return this.updateValue(v); - case 'frets': - return this.updateFrets(Number(old || '0'), Number(v)); - } - } - - updateTonic(tonic) { - console.debug('x-string#updateTonic', this, tonic); - - // for compat with the radio inputs. - this.tonic.setAttribute('value', tonic); - this.tonic.textContent = tonic; - - // update all fret values - this.fretInputs - .forEach((fret, i) => { - console.debug(' -- fret', i, fret); - fret.setAttribute('value', i.toString()); - }); - } - - updateValue(value) { - console.debug('x-string#updateValue', this, value); - this.selected.textContent = value; - if (value === 'x') { - this.classList.add('muted'); - this.muted.checked = true; - return; - } else { - this.classList.remove('muted'); - this.muted.checked = false; - } - - this.fretInputs - .forEach(fret => { - fret.checked = this.getAttribute('value') === fret.getAttribute('value'); - if (fret.checked) { - fret.classList.add('checked'); - } else { - fret.classList.remove('checked'); - } - console.debug(' -- fret', fret, fret.checked); - }); - } - - updateFrets(old, frets) { - console.debug('x-string#updateFrets', this, old, frets); - if (old < frets) { - const tonic = this.getAttribute('tonic'); - if (!tonic) { - return; - } - - const chromIndex = this.chromIndex; - const fretList = this.fretList; - for (let i = old+1; i <= frets; i++) { - const note = chromaticScale[chromIndex + i]; - console.debug(' -- appending fret', i, 'from', note, fretList); - - const input = document.createElement('input'); - input.setAttribute('type', 'radio'); - input.setAttribute('name', 'string'); - input.setAttribute('value', note); - input.onclick = this.fretClicked.bind(this); - - const li = document.createElement('li'); - li.appendChild(input); - fretList.appendChild(li); - } - } - } -}); +function init() { + TestHarness.register(); +} +document.addEventListener('DOMContentLoaded', init); -- cgit v1.3