diff options
| -rw-r--r-- | index.html | 2 | ||||
| -rw-r--r-- | test-harness.mjs | 22 | ||||
| -rw-r--r-- | tests.html | 29 | ||||
| -rw-r--r-- | tests.mjs | 141 |
4 files changed, 40 insertions, 154 deletions
@@ -98,6 +98,8 @@ <hr> + <a href='tests.html'>tests</a> + <a href='https://git.spork.org/chords.git'>src</a> <script type='module' src='main.mjs'></script> 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); + }; + } +} @@ -7,24 +7,17 @@ <title>tests</title> </head> <body> - <x-string tonic='E' frets='3' value='x'> - <template> - <slot name='muted'></slot> - <slot name='fretlist'></slot> - <slot name='selected'></slot> - </template> - - <span slot='selected'>E</span> - - <form slot='fretlist'> - <ol class='fretlist'> - <li class='tonic'>E</li> - </ol> - </form> - - <input slot='muted' name='muted' type='checkbox'> - </x-string> - + <x-test-harness> + <a href='tests.html'>run</a> + <dl> + <dt class='passed'>passed</dt> + <dd class='passed-count'>0</dd> + <dt class='failed'>failed</dt> + <dd class='failed-count'>0</dd> + <dt class='skipped'>skipped</dt> + <dd class='skipped-count'>0</dd> + </dl> + </x-test-harness> <script type='module' src='tests.mjs'></script> </body> </html> @@ -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); |