@xylentis/testgen 0.0.0-stage → 1.1.0

package/ui/app.js

@@ -0,0 +1,259 @@
+// testgen UI: drives the local server (src/ui/server.ts) and shows the generated code live.
+const $ = id => document.getElementById(id);
+
+const browsers = {
+  chrome: { browser: 'chromium', channel: 'chrome' },
+  chromium: { browser: 'chromium' },
+  msedge: { browser: 'chromium', channel: 'msedge' },
+  firefox: { browser: 'firefox' },
+  webkit: { browser: 'webkit' },
+};
+
+let targets = [];
+let snapshot = { status: 'idle', steps: [], outputs: {}, settings: {} };
+let activeTarget = remember('target') || 'playwright-ts';
+let activeFile = 0;
+
+function remember(key, value) {
+  try {
+    if (value === undefined)
+      return localStorage.getItem(`testgen.${key}`);
+    localStorage.setItem(`testgen.${key}`, value);
+  } catch {
+    // Storage can be unavailable (private mode); the UI works without it.
+  }
+}
+
+async function post(path, body = {}) {
+  const response = await fetch(path, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) });
+  const result = await response.json();
+  if (!response.ok || result.error)
+    throw new Error(result.error || response.statusText);
+  return result;
+}
+
+function showError(message) {
+  $('error').hidden = !message;
+  $('error').textContent = message || '';
+}
+
+// ---- Rendering --------------------------------------------------------------------------------
+
+function render() {
+  const recording = snapshot.status === 'recording';
+  const count = snapshot.steps.length;
+  document.body.classList.toggle('recording', recording);
+  $('record').hidden = recording;
+  $('stop').hidden = !recording;
+  $('status').textContent = recording
+    ? `Recording… ${count} step${count === 1 ? '' : 's'}. Close the browser window or press Stop to finish.`
+    : snapshot.status === 'stopped' ? `${count} step${count === 1 ? '' : 's'} recorded` : 'Ready';
+  showError(snapshot.error || snapshot.parseError);
+  $('download-recording').toggleAttribute('hidden', !snapshot.recording);
+
+  $('step-count').textContent = String(count);
+  $('steps-empty').hidden = count > 0;
+  $('steps').replaceChildren(...snapshot.steps.map(step => {
+    const item = document.createElement('li');
+    const page = document.createElement('span');
+    page.className = 'page';
+    page.textContent = step.page;
+    const text = document.createElement('span');
+    text.className = 'text';
+    text.textContent = step.text;
+    item.append(page, text);
+    return item;
+  }));
+  $('steps').lastElementChild?.scrollIntoView({ block: 'nearest' });
+
+  for (const [key, id] of [['name', 'name'], ['packageName', 'package'], ['testIdAttribute', 'test-id']]) {
+    const input = $(id);
+    if (document.activeElement !== input && snapshot.settings[key] !== undefined)
+      input.value = snapshot.settings[key];
+  }
+  renderTargets();
+  renderCode();
+}
+
+function renderTargets() {
+  $('targets').replaceChildren(...targets.map(target => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.setAttribute('role', 'tab');
+    button.setAttribute('aria-selected', String(target.id === activeTarget));
+    button.innerHTML = `${escapeHtml(target.framework.split(' ')[0])} · ${escapeHtml(target.language)}<small>${escapeHtml(target.id)}</small>`;
+    button.addEventListener('click', () => {
+      activeTarget = target.id;
+      activeFile = 0;
+      remember('target', target.id);
+      render();
+    });
+    return button;
+  }));
+  $('out-dir').value = remember(`outDir.${activeTarget}`) || `generated/${activeTarget}`;
+}
+
+function currentFiles() {
+  return snapshot.outputs[activeTarget]?.files ?? [];
+}
+
+function renderCode() {
+  const files = currentFiles();
+  if (activeFile >= files.length)
+    activeFile = 0;
+  $('files').replaceChildren(...files.map((file, index) => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.setAttribute('role', 'tab');
+    button.setAttribute('aria-selected', String(index === activeFile));
+    button.innerHTML = `${escapeHtml(file.path)}${file.support ? '<span class="tag">support</span>' : ''}`;
+    button.addEventListener('click', () => {
+      activeFile = index;
+      renderCode();
+    });
+    return button;
+  }));
+  const file = files[activeFile];
+  const error = snapshot.outputs[activeTarget]?.error;
+  const pre = $('code');
+  const atBottom = pre.scrollTop + pre.clientHeight >= pre.scrollHeight - 4;
+  pre.querySelector('code').innerHTML = file ? highlight(file.content) : `<span class="line">${escapeHtml(error ? `// ${error}` : '// The generated test appears here while you record.')}</span>`;
+  if (snapshot.status === 'recording' && atBottom)
+    pre.scrollTop = pre.scrollHeight;
+  for (const id of ['copy', 'download'])
+    $(id).disabled = !file;
+  $('save-form').querySelector('button').disabled = !files.length;
+}
+
+// ---- Syntax highlighting (strings, comments, numbers, keywords, calls) ----------------------
+
+const keywords = new Set(('abstract async await boolean break case catch class const continue default defer do else enum export ' +
+  'extends false final finally for func function go if implements import in instanceof int interface let long map new nil ' +
+  'null package private protected public range return static struct super switch this throw throws true try type typeof ' +
+  'undefined var void while').split(' '));
+
+const tokenizer = /(\/\/[^\n]*|\/\*[\s\S]*?\*\/)|("""[\s\S]*?"""|`[^`]*`|"(?:\\.|[^"\\\n])*"|'(?:\\.|[^'\\\n])*')|(\b\d+(?:\.\d+)?\b)|([A-Za-z_$][\w$]*)(?=\s*\()|([A-Za-z_$][\w$]*)/g;
+
+function highlight(code) {
+  const lines = [''];
+  const push = (className, text) => {
+    text.split('\n').forEach((part, index) => {
+      if (index > 0)
+        lines.push('');
+      if (part)
+        lines[lines.length - 1] += className ? `<span class="tok-${className}">${escapeHtml(part)}</span>` : escapeHtml(part);
+    });
+  };
+  let last = 0;
+  for (const match of code.matchAll(tokenizer)) {
+    push('', code.slice(last, match.index));
+    const [text, comment, string, number, call, word] = match;
+    if (comment)
+      push('comment', text);
+    else if (string)
+      push('string', text);
+    else if (number)
+      push('number', text);
+    else if (call)
+      push(keywords.has(call) ? 'keyword' : 'call', text);
+    else
+      push(keywords.has(word) ? 'keyword' : '', text);
+    last = match.index + text.length;
+  }
+  push('', code.slice(last));
+  if (lines.length > 1 && lines[lines.length - 1] === '')
+    lines.pop();
+  return lines.map(line => `<span class="line">${line}</span>`).join('');
+}
+
+function escapeHtml(text) {
+  return String(text).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', '\'': '&#39;' })[c]);
+}
+
+// ---- Actions -------------------------------------------------------------------------------
+
+$('url').value = remember('url') || '';
+$('browser').value = remember('browser') || 'chrome';
+
+$('record-form').addEventListener('submit', async event => {
+  event.preventDefault();
+  remember('url', $('url').value);
+  remember('browser', $('browser').value);
+  try {
+    await post('/api/record', { url: $('url').value, ...browsers[$('browser').value], testIdAttribute: $('test-id').value });
+  } catch (error) {
+    showError(error.message);
+  }
+});
+
+$('stop').addEventListener('click', () => post('/api/stop').catch(error => showError(error.message)));
+
+let settingsTimer;
+for (const id of ['name', 'package', 'test-id']) {
+  $(id).addEventListener('input', () => {
+    clearTimeout(settingsTimer);
+    settingsTimer = setTimeout(() => {
+      post('/api/settings', { name: $('name').value, packageName: $('package').value, testIdAttribute: $('test-id').value })
+          .catch(error => showError(error.message));
+    }, 300);
+  });
+}
+
+$('open').addEventListener('change', async () => {
+  const file = $('open').files[0];
+  if (!file)
+    return;
+  try {
+    await post('/api/load', { recording: await file.text() });
+  } catch (error) {
+    showError(error.message);
+  }
+  $('open').value = '';
+});
+
+$('copy').addEventListener('click', async () => {
+  const file = currentFiles()[activeFile];
+  if (!file)
+    return;
+  await navigator.clipboard.writeText(file.content);
+  $('copy').textContent = 'Copied';
+  setTimeout(() => $('copy').textContent = 'Copy', 1200);
+});
+
+$('download').addEventListener('click', () => {
+  const file = currentFiles()[activeFile];
+  if (!file)
+    return;
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(new Blob([file.content], { type: 'text/plain' }));
+  link.download = file.path;
+  link.click();
+  URL.revokeObjectURL(link.href);
+});
+
+$('out-dir').addEventListener('change', () => remember(`outDir.${activeTarget}`, $('out-dir').value));
+
+$('save-form').addEventListener('submit', async event => {
+  event.preventDefault();
+  $('save-result').textContent = 'Saving…';
+  try {
+    const { written } = await post('/api/save', { target: activeTarget, outDir: $('out-dir').value });
+    $('save-result').textContent = `Saved ${written.join(', ')}`;
+  } catch (error) {
+    $('save-result').textContent = '';
+    showError(error.message);
+  }
+});
+
+// ---- Start ---------------------------------------------------------------------------------
+
+targets = await (await fetch('/api/targets')).json();
+if (!targets.some(t => t.id === activeTarget))
+  activeTarget = targets[0].id;
+render();
+const events = new EventSource('/api/events');
+events.addEventListener('message', event => {
+  snapshot = JSON.parse(event.data);
+  render();
+});
+events.addEventListener('error', () => $('status').textContent = 'Disconnected from testgen; is `testgen ui` still running?');

package/ui/index.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>testgen</title>
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+  <header class="toolbar">
+    <div class="brand"><span class="dot"></span>testgen</div>
+    <form id="record-form" class="record">
+      <input id="url" type="url" placeholder="https://your-app.example" aria-label="URL to record" autocomplete="url">
+      <select id="browser" aria-label="Browser">
+        <option value="chrome">Google Chrome</option>
+        <option value="chromium">Chromium (Playwright)</option>
+        <option value="msedge">Microsoft Edge</option>
+        <option value="firefox">Firefox (Playwright)</option>
+        <option value="webkit">WebKit (Playwright)</option>
+      </select>
+      <button id="record" type="submit" class="primary">Record</button>
+      <button id="stop" type="button" class="danger" hidden>Stop</button>
+    </form>
+    <div id="status" class="status" role="status">Ready</div>
+  </header>
+
+  <section class="options" aria-label="Generation options">
+    <label>Test name <input id="name" value="recorded" spellcheck="false"></label>
+    <label>Package <input id="package" placeholder="e.g. com.acme.e2e" spellcheck="false"></label>
+    <label>Test id attribute <input id="test-id" value="data-testid" spellcheck="false"></label>
+    <span class="spacer"></span>
+    <label class="file-button">Open recording… <input id="open" type="file" accept=".jsonl,.json,.txt"></label>
+    <a id="download-recording" class="button" href="/api/recording" download="recording.jsonl">Download recording</a>
+  </section>
+
+  <div id="error" class="error" hidden></div>
+
+  <main class="workspace">
+    <aside class="steps">
+      <h2>Steps <span id="step-count" class="count">0</span></h2>
+      <ol id="steps"></ol>
+      <p id="steps-empty" class="empty">Enter a URL and press <strong>Record</strong>. A browser opens; click and type as a user would.
+        Use the recorder toolbar in the page to add assertions. Close the browser or press <strong>Stop</strong> when done.</p>
+    </aside>
+
+    <section class="code" aria-label="Generated code">
+      <nav id="targets" class="tabs" role="tablist"></nav>
+      <div class="file-bar">
+        <nav id="files" class="file-tabs" role="tablist"></nav>
+        <span class="spacer"></span>
+        <button id="copy" type="button">Copy</button>
+        <button id="download" type="button">Download</button>
+      </div>
+      <pre id="code" class="source" tabindex="0"><code></code></pre>
+      <form id="save-form" class="save">
+        <label>Save to <input id="out-dir" spellcheck="false"></label>
+        <button type="submit">Save files</button>
+        <span id="save-result" class="save-result" role="status"></span>
+      </form>
+    </section>
+  </main>
+
+  <script src="/app.js" type="module"></script>
+</body>
+</html>

package/ui/style.css

@@ -0,0 +1,189 @@
+:root {
+  color-scheme: light dark;
+  --bg: #f6f7f9;
+  --panel: #ffffff;
+  --border: #dde1e6;
+  --text: #1f2328;
+  --muted: #5f6b7a;
+  --accent: #2d6ae3;
+  --accent-text: #ffffff;
+  --danger: #c93c37;
+  --recording: #d93025;
+  --code-bg: #fbfbfc;
+  --tok-keyword: #8a3ffc;
+  --tok-string: #0b7a3b;
+  --tok-comment: #7b8794;
+  --tok-number: #b35c00;
+  --tok-call: #1d5fc2;
+  --selection: #dbe7ff;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #15181d;
+    --panel: #1c2027;
+    --border: #2f3540;
+    --text: #e6e9ee;
+    --muted: #98a2b3;
+    --accent: #6b9cff;
+    --accent-text: #0d1117;
+    --danger: #f07167;
+    --recording: #ff6b5f;
+    --code-bg: #171a20;
+    --tok-keyword: #c792ea;
+    --tok-string: #8bd49c;
+    --tok-comment: #7f8a99;
+    --tok-number: #f0a35e;
+    --tok-call: #82aaff;
+    --selection: #26385a;
+  }
+}
+
+* { box-sizing: border-box; }
+
+html, body { height: 100%; }
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  color: var(--text);
+  font: 14px/1.45 var(--font);
+}
+
+input, select, button, .button {
+  font: inherit;
+  color: inherit;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--panel);
+  padding: 6px 10px;
+}
+
+input:focus-visible, select:focus-visible, button:focus-visible, .button:focus-visible, pre:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+button, .button { cursor: pointer; text-decoration: none; white-space: nowrap; }
+button:hover, .button:hover { border-color: var(--muted); }
+button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
+button.danger { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }
+button:disabled { opacity: .5; cursor: default; }
+
+.toolbar, .options {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 16px;
+  background: var(--panel);
+  border-bottom: 1px solid var(--border);
+  flex-wrap: wrap;
+}
+
+.brand { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
+.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
+body.recording .brand .dot { background: var(--recording); animation: pulse 1.2s infinite; }
+@keyframes pulse { 50% { opacity: .3; } }
+
+.record { display: flex; gap: 8px; flex: 1; min-width: 280px; }
+.record input { flex: 1; min-width: 0; }
+
+.status { color: var(--muted); font-size: 13px; }
+body.recording .status { color: var(--recording); font-weight: 600; }
+
+.options { font-size: 13px; color: var(--muted); padding-top: 8px; padding-bottom: 8px; }
+.options label { display: flex; align-items: center; gap: 6px; }
+.options input { width: 160px; padding: 4px 8px; }
+.spacer { flex: 1; }
+.file-button { border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; color: var(--text); }
+.file-button input { display: none; }
+.options .button { padding: 4px 10px; }
+
+.error {
+  margin: 12px 16px 0;
+  padding: 10px 12px;
+  border: 1px solid var(--danger);
+  border-radius: 6px;
+  color: var(--danger);
+  white-space: pre-wrap;
+  font-family: var(--mono);
+  font-size: 12px;
+  max-height: 160px;
+  overflow: auto;
+}
+
+.workspace {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(240px, 32%) 1fr;
+  gap: 12px;
+  padding: 12px 16px 16px;
+}
+
+.steps, .code {
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.steps h2 { margin: 0; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: center; }
+.count { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0 8px; font-size: 12px; color: var(--muted); }
+.steps ol { margin: 0; padding: 6px 0; overflow: auto; flex: 1; list-style: none; counter-reset: step; }
+.steps li { counter-increment: step; display: grid; grid-template-columns: 2.2em 3.6em 1fr; gap: 8px; padding: 4px 12px; font-family: var(--mono); font-size: 12px; }
+.steps li::before { content: counter(step); color: var(--muted); text-align: right; }
+.steps li .page { color: var(--muted); }
+.steps li .text { overflow-wrap: anywhere; }
+.steps li:last-child { background: var(--selection); }
+.empty { color: var(--muted); padding: 0 12px; }
+
+.tabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
+.tabs button { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 8px 12px; color: var(--muted); }
+.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
+.tabs button small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
+
+.file-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
+.file-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
+.file-tabs button { font-family: var(--mono); font-size: 12px; padding: 3px 8px; }
+.file-tabs button[aria-selected="true"] { border-color: var(--accent); color: var(--accent); }
+.file-tabs button .tag { color: var(--muted); font-family: var(--font); margin-left: 6px; }
+.file-bar > button { padding: 3px 10px; font-size: 13px; }
+
+.source {
+  flex: 1;
+  margin: 0;
+  overflow: auto;
+  background: var(--code-bg);
+  font: 12.5px/1.55 var(--mono);
+  padding: 10px 0;
+  tab-size: 4;
+}
+.source code { display: block; counter-reset: line; }
+.source .line { display: block; padding-right: 16px; white-space: pre; }
+.source .line::before { counter-increment: line; content: counter(line); display: inline-block; width: 3.5em; padding-right: 1em; text-align: right; color: var(--muted); opacity: .6; user-select: none; }
+.tok-keyword { color: var(--tok-keyword); }
+.tok-string { color: var(--tok-string); }
+.tok-comment { color: var(--tok-comment); font-style: italic; }
+.tok-number { color: var(--tok-number); }
+.tok-call { color: var(--tok-call); }
+
+.save { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); font-size: 13px; flex-wrap: wrap; }
+.save label { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 220px; color: var(--muted); }
+.save input { flex: 1; font-family: var(--mono); font-size: 12px; }
+.save-result { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
+
+@media (max-width: 760px) {
+  .workspace { grid-template-columns: 1fr; grid-template-rows: minmax(160px, 30%) 1fr; }
+  .record { flex-wrap: wrap; }
+  .record input { flex-basis: 100%; }
+  .record select { flex: 1; }
+  .options input { width: 120px; }
+}