|
| 1 | +/*--------------------------------------------------------------------------------------------- |
| 2 | + * Behavioural tests for the ask_user card — run: node test/askWizard.test.js |
| 3 | + * |
| 4 | + * Several questions used to render stacked in one card with a single "Send answers" button. It |
| 5 | + * was easy to answer the first, not notice the rest, and send a half-filled form — the agent then |
| 6 | + * acted on defaults the user never chose. The card now shows ONE question at a time. |
| 7 | + * |
| 8 | + * The invariants worth protecting, all of them clicked through here against the real function |
| 9 | + * extracted from media/chat.html: |
| 10 | + * - nothing is posted until the LAST question — the button advances before that, |
| 11 | + * - passing over a question is deliberate: with nothing picked the button reads "Skip this one", |
| 12 | + * - Back returns to a previous question with its selection intact, |
| 13 | + * - the posted payload keeps every question in order, skipped ones included as empty, |
| 14 | + * - a single question keeps the plain card (no step chrome, sends straight away). |
| 15 | + *--------------------------------------------------------------------------------------------*/ |
| 16 | +// @ts-check |
| 17 | +'use strict'; |
| 18 | + |
| 19 | +const assert = require('assert'); |
| 20 | +const fs = require('fs'); |
| 21 | +const path = require('path'); |
| 22 | + |
| 23 | +const html = fs.readFileSync(path.join(__dirname, '..', 'media', 'chat.html'), 'utf8'); |
| 24 | + |
| 25 | +function extract(name) { |
| 26 | + const start = html.indexOf('function ' + name + '('); |
| 27 | + assert.ok(start >= 0, 'chat.html no longer defines ' + name + '()'); |
| 28 | + const end = html.indexOf('\n }', start); |
| 29 | + assert.ok(end >= 0, 'no closing brace found for ' + name + '()'); |
| 30 | + return html.slice(start, end + 4); |
| 31 | +} |
| 32 | + |
| 33 | +// ── a fake DOM with just enough attribute support to drive the card ──────────────────────────── |
| 34 | +// The card is built as one innerHTML string and then wired by class, so the parser records every |
| 35 | +// tag's classes and data-* attributes and serves them back through querySelector(All). |
| 36 | +class El { |
| 37 | + constructor(tag) { |
| 38 | + this.tagName = (tag || 'div').toUpperCase(); |
| 39 | + this.children = []; |
| 40 | + this._html = ''; |
| 41 | + this._nodes = []; |
| 42 | + this.dataset = {}; |
| 43 | + this.hidden = false; |
| 44 | + this.disabled = false; |
| 45 | + this.value = ''; |
| 46 | + this.textContent = ''; |
| 47 | + this.onclick = null; |
| 48 | + this.classList = { |
| 49 | + _s: new Set(), |
| 50 | + add: (...c) => c.forEach((x) => this.classList._s.add(x)), |
| 51 | + remove: (...c) => c.forEach((x) => this.classList._s.delete(x)), |
| 52 | + contains: (c) => this.classList._s.has(c), |
| 53 | + toggle: (c, force) => { |
| 54 | + const on = force === undefined ? !this.classList._s.has(c) : !!force; |
| 55 | + if (on) { this.classList._s.add(c); } else { this.classList._s.delete(c); } |
| 56 | + return on; |
| 57 | + } |
| 58 | + }; |
| 59 | + } |
| 60 | + set className(v) { this.classList._s = new Set(String(v).split(/\s+/).filter(Boolean)); } |
| 61 | + get className() { return [...this.classList._s].join(' '); } |
| 62 | + set innerHTML(v) { |
| 63 | + this._html = String(v); |
| 64 | + this._nodes = []; |
| 65 | + for (const t of this._html.matchAll(/<(\w+)([^>]*)>/g)) { |
| 66 | + const attrs = t[2]; |
| 67 | + if (!/class="/.test(attrs)) { continue; } |
| 68 | + const el = new El(t[1]); |
| 69 | + el.className = /class="([^"]*)"/.exec(attrs)[1]; |
| 70 | + for (const d of attrs.matchAll(/data-([\w-]+)="([^"]*)"/g)) { el.dataset[d[1]] = d[2]; } |
| 71 | + if (/\shidden(?=[\s>/])/.test(attrs + ' ')) { el.hidden = true; } |
| 72 | + // text up to the next tag — enough for the labels the card ships in its markup |
| 73 | + el.textContent = (/^([^<]*)/.exec(this._html.slice(t.index + t[0].length)) || ['', ''])[1].trim(); |
| 74 | + this._nodes.push(el); |
| 75 | + } |
| 76 | + } |
| 77 | + get innerHTML() { return this._html; } |
| 78 | + appendChild(c) { this.children.push(c); return c; } |
| 79 | + _match(sel) { |
| 80 | + const m = /^\.([\w-]+)(?:\[([\w-]+)="([^"]*)"\])?$/.exec(String(sel).trim()); |
| 81 | + assert.ok(m, 'fake DOM cannot parse selector: ' + sel); |
| 82 | + const [, cls, attr, val] = m; |
| 83 | + return this._nodes.filter((n) => n.classList.contains(cls) |
| 84 | + && (!attr || n.dataset[attr.replace(/^data-/, '')] === val)); |
| 85 | + } |
| 86 | + querySelector(sel) { return this._match(sel)[0] || null; } |
| 87 | + querySelectorAll(sel) { return this._match(sel); } |
| 88 | +} |
| 89 | + |
| 90 | +function newCard(questions) { |
| 91 | + const log = new El('div'); |
| 92 | + const posted = []; |
| 93 | + const sandbox = {}; |
| 94 | + const preamble = 'const codicon = (n) => "<i:" + n + ">";\n' |
| 95 | + + 'const esc = (s) => String(s == null ? "" : s);\n' |
| 96 | + + 'const clearEmpty = () => {}; const clearStatus = () => {}; const closeGroup = () => {};\n' |
| 97 | + + 'const scrollIfStuck = () => {}; let agentBubble = null;\n'; |
| 98 | + new Function('document', 'log', 'vscode', preamble + extract('addQuestions') + '\nthis.addQuestions = addQuestions;') |
| 99 | + .call(sandbox, { createElement: (t) => new El(t) }, log, { postMessage: (msg) => posted.push(msg) }); |
| 100 | + /** @type {any} */ (sandbox).addQuestions({ id: 'q1', questions }); |
| 101 | + const card = log.children[0]; |
| 102 | + return { |
| 103 | + card, posted, |
| 104 | + send: card.querySelector('.qsend'), |
| 105 | + back: card.querySelector('.qback'), |
| 106 | + step: card.querySelector('.qstep'), |
| 107 | + notes: card.querySelector('.qnotes'), |
| 108 | + pick: (qi, oi) => card.querySelectorAll('.qopt[data-q="' + qi + '"]')[oi].onclick(), |
| 109 | + curIndex: () => card.querySelectorAll('.qblock').findIndex((b) => b.classList.contains('cur')) |
| 110 | + }; |
| 111 | +} |
| 112 | + |
| 113 | +const Q = (header, ...labels) => ({ header, question: header + '?', options: labels.map((l) => ({ label: l })) }); |
| 114 | +const THREE = [Q('Target', 'A', 'B'), Q('Content', 'C', 'D'), Q('Style', 'E', 'F')]; |
| 115 | + |
| 116 | +let n = 0; |
| 117 | +function test(name, fn) { fn(); n++; console.log(' ok - ' + name); } |
| 118 | + |
| 119 | +// ── 1. one at a time ─────────────────────────────────────────────────────────────────────────── |
| 120 | +test('several questions open on the first one alone', () => { |
| 121 | + const c = newCard(THREE); |
| 122 | + assert.ok(c.card.classList.contains('wizard')); |
| 123 | + assert.strictEqual(c.curIndex(), 0, 'only the first block is current'); |
| 124 | + assert.strictEqual(c.step.textContent, '1 of 3'); |
| 125 | + assert.ok(c.back.hidden, 'nothing to go back to yet'); |
| 126 | +}); |
| 127 | + |
| 128 | +test('with nothing picked the button offers to SKIP, not to send', () => { |
| 129 | + const c = newCard(THREE); |
| 130 | + assert.strictEqual(c.send.textContent, 'Skip this one'); |
| 131 | + assert.ok(c.send.classList.contains('ghost'), 'and it steps down to a quiet style'); |
| 132 | +}); |
| 133 | + |
| 134 | +test('picking an option turns it into the advance button', () => { |
| 135 | + const c = newCard(THREE); |
| 136 | + c.pick(0, 1); |
| 137 | + assert.strictEqual(c.send.textContent, 'Next question'); |
| 138 | + assert.ok(!c.send.classList.contains('ghost')); |
| 139 | +}); |
| 140 | + |
| 141 | +// ── 2. nothing escapes early ─────────────────────────────────────────────────────────────────── |
| 142 | +test('the button ADVANCES on every question but the last — no early post', () => { |
| 143 | + const c = newCard(THREE); |
| 144 | + c.pick(0, 0); c.send.onclick(); |
| 145 | + assert.deepStrictEqual(c.posted, [], 'nothing sent after question 1'); |
| 146 | + assert.strictEqual(c.curIndex(), 1); |
| 147 | + assert.strictEqual(c.step.textContent, '2 of 3'); |
| 148 | + assert.ok(!c.back.hidden, 'Back appears once there is somewhere to go back to'); |
| 149 | + |
| 150 | + c.pick(1, 0); c.send.onclick(); |
| 151 | + assert.deepStrictEqual(c.posted, [], 'nothing sent after question 2'); |
| 152 | + assert.strictEqual(c.send.textContent, 'Send answers', 'only the last step sends'); |
| 153 | + assert.ok(c.card.classList.contains('laststep'), 'and the free-text box appears with it'); |
| 154 | +}); |
| 155 | + |
| 156 | +test('the final step posts every answer, in order', () => { |
| 157 | + const c = newCard(THREE); |
| 158 | + c.pick(0, 1); c.send.onclick(); |
| 159 | + c.pick(1, 0); c.send.onclick(); |
| 160 | + c.pick(2, 1); c.send.onclick(); |
| 161 | + assert.strictEqual(c.posted.length, 1); |
| 162 | + assert.strictEqual(c.posted[0].type, 'questionsResponse'); |
| 163 | + assert.deepStrictEqual(c.posted[0].answers.map((a) => a.selected), [['B'], ['C'], ['F']]); |
| 164 | + assert.deepStrictEqual(c.posted[0].answers.map((a) => a.header), ['Target', 'Content', 'Style']); |
| 165 | +}); |
| 166 | + |
| 167 | +test('a skipped question posts as empty — recorded, not silently defaulted', () => { |
| 168 | + const c = newCard(THREE); |
| 169 | + c.send.onclick(); // "Skip this one" |
| 170 | + c.pick(1, 1); c.send.onclick(); |
| 171 | + c.pick(2, 0); c.send.onclick(); |
| 172 | + assert.deepStrictEqual(c.posted[0].answers.map((a) => a.selected), [[], ['D'], ['E']]); |
| 173 | +}); |
| 174 | + |
| 175 | +// ── 3. going back ────────────────────────────────────────────────────────────────────────────── |
| 176 | +test('Back returns to the previous question with its answer still selected', () => { |
| 177 | + const c = newCard(THREE); |
| 178 | + c.pick(0, 1); c.send.onclick(); |
| 179 | + c.back.onclick(); |
| 180 | + assert.strictEqual(c.curIndex(), 0); |
| 181 | + assert.strictEqual(c.step.textContent, '1 of 3'); |
| 182 | + assert.strictEqual(c.send.textContent, 'Next question', 'the earlier pick is still held'); |
| 183 | + assert.ok(c.back.hidden, 'and Back retires at the start again'); |
| 184 | +}); |
| 185 | + |
| 186 | +test('changing a mind on the way back is what gets posted', () => { |
| 187 | + const c = newCard(THREE); |
| 188 | + c.pick(0, 0); c.send.onclick(); |
| 189 | + c.back.onclick(); c.pick(0, 1); // switch A → B |
| 190 | + c.send.onclick(); |
| 191 | + c.pick(1, 0); c.send.onclick(); |
| 192 | + c.pick(2, 0); c.send.onclick(); |
| 193 | + assert.deepStrictEqual(c.posted[0].answers[0].selected, ['B']); |
| 194 | +}); |
| 195 | + |
| 196 | +// ── 4. the shapes that must not gain step chrome ─────────────────────────────────────────────── |
| 197 | +test('a single question keeps the plain card and sends straight away', () => { |
| 198 | + const c = newCard([Q('Target', 'A', 'B')]); |
| 199 | + assert.ok(!c.card.classList.contains('wizard'), 'no step chrome for one question'); |
| 200 | + assert.strictEqual(c.send.textContent, 'Send answers'); |
| 201 | + c.pick(0, 0); c.send.onclick(); |
| 202 | + assert.strictEqual(c.posted.length, 1); |
| 203 | + assert.deepStrictEqual(c.posted[0].answers[0].selected, ['A']); |
| 204 | +}); |
| 205 | + |
| 206 | +test('multiSelect collects several picks before advancing', () => { |
| 207 | + const c = newCard([{ header: 'Pick', question: 'Which?', multiSelect: true, options: [{ label: 'A' }, { label: 'B' }, { label: 'C' }] }, |
| 208 | + Q('Then', 'X', 'Y')]); |
| 209 | + c.pick(0, 0); c.pick(0, 2); |
| 210 | + assert.strictEqual(c.send.textContent, 'Next question'); |
| 211 | + c.send.onclick(); |
| 212 | + c.pick(1, 0); c.send.onclick(); |
| 213 | + assert.deepStrictEqual(c.posted[0].answers[0].selected, ['A', 'C']); |
| 214 | +}); |
| 215 | + |
| 216 | +// ── 5. the record left behind ────────────────────────────────────────────────────────────────── |
| 217 | +test('once sent, the card folds itself away and says so', () => { |
| 218 | + const c = newCard(THREE); |
| 219 | + c.pick(0, 0); c.send.onclick(); |
| 220 | + c.pick(1, 0); c.send.onclick(); |
| 221 | + c.pick(2, 0); c.send.onclick(); |
| 222 | + assert.ok(c.card.classList.contains('collapsed'), 'the finished card gets out of the way'); |
| 223 | + assert.ok(c.card.classList.contains('answered')); |
| 224 | + assert.ok(/Answers recorded/.test(c.card.querySelector('.qtitle').innerHTML), |
| 225 | + 'and the header — the only thing still on screen — states the outcome'); |
| 226 | +}); |
| 227 | + |
| 228 | +test('unfolding it shows every question as a frozen record', () => { |
| 229 | + const c = newCard(THREE); |
| 230 | + c.pick(0, 0); c.send.onclick(); |
| 231 | + c.pick(1, 0); c.send.onclick(); |
| 232 | + c.pick(2, 0); c.send.onclick(); |
| 233 | + assert.ok(!c.card.classList.contains('wizard'), 'all questions revealed, not just the last one'); |
| 234 | + assert.ok(c.card.querySelectorAll('.qopt').every((b) => b.disabled), 'answers are no longer editable'); |
| 235 | + assert.ok(/Answers recorded/.test(c.card.querySelector('.qbtns').innerHTML)); |
| 236 | +}); |
| 237 | + |
| 238 | +console.log('askWizard: ' + n + ' tests passed'); |
0 commit comments