@msalaam/xray-qe-toolkit 1.1.0

package/ui/editor/editor.js

@@ -0,0 +1,484 @@
+/**
+ * XQT — QE Review Gate Editor (Client-Side)
+ *
+ * Pure vanilla JS — no frameworks, no build step.
+ * Communicates with the Express server via REST API.
+ */
+
+// ─── State ──────────────────────────────────────────────────────────────────────
+
+let testsConfig = { testExecution: { summary: "", description: "" }, tests: [] };
+let mapping = {};
+let selectedIndex = -1;
+let isDirty = false;
+
+// ─── DOM refs ───────────────────────────────────────────────────────────────────
+
+const $testList = document.getElementById("test-list");
+const $testCount = document.getElementById("test-count");
+const $statusBadge = document.getElementById("status-badge");
+const $placeholder = document.getElementById("placeholder-msg");
+const $editor = document.getElementById("test-editor");
+const $searchInput = document.getElementById("search-input");
+const $filterTag = document.getElementById("filter-tag");
+const $stepsContainer = document.getElementById("steps-container");
+const $toast = document.getElementById("toast");
+
+// Exec fields
+const $execSummary = document.getElementById("exec-summary");
+const $execDescription = document.getElementById("exec-description");
+
+// Test fields
+const $testId = document.getElementById("test-id");
+const $testIdError = document.getElementById("test-id-error");
+const $testSummary = document.getElementById("test-summary");
+const $testDescription = document.getElementById("test-description");
+const $testPriority = document.getElementById("test-priority");
+const $testLabels = document.getElementById("test-labels");
+const $testSkip = document.getElementById("test-skip");
+const $mappingInfo = document.getElementById("mapping-info");
+const $mappingKey = document.getElementById("mapping-key");
+const $mappingId = document.getElementById("mapping-id");
+
+// ─── Init ───────────────────────────────────────────────────────────────────────
+
+document.addEventListener("DOMContentLoaded", async () => {
+  await loadData();
+  bindEvents();
+  renderTestList();
+});
+
+async function loadData() {
+  try {
+    const [testsRes, mappingRes] = await Promise.all([
+      fetch("/api/tests").then((r) => r.json()),
+      fetch("/api/mapping").then((r) => r.json()),
+    ]);
+    testsConfig = testsRes;
+    mapping = mappingRes;
+
+    // Ensure structure
+    if (!testsConfig.testExecution) {
+      testsConfig.testExecution = { summary: "", description: "" };
+    }
+    if (!testsConfig.tests) testsConfig.tests = [];
+
+    // Populate exec fields
+    $execSummary.value = testsConfig.testExecution.summary || "";
+    $execDescription.value = testsConfig.testExecution.description || "";
+
+    showToast("Tests loaded", "success");
+  } catch (err) {
+    showToast(`Failed to load: ${err.message}`, "error");
+  }
+}
+
+// ─── Event binding ──────────────────────────────────────────────────────────────
+
+function bindEvents() {
+  document.getElementById("btn-add-test").addEventListener("click", addNewTest);
+  document.getElementById("btn-save").addEventListener("click", saveAndExit);
+  document.getElementById("btn-delete-test").addEventListener("click", deleteCurrentTest);
+  document.getElementById("btn-add-step").addEventListener("click", addNewStep);
+
+  $searchInput.addEventListener("input", renderTestList);
+  $filterTag.addEventListener("change", renderTestList);
+
+  // Auto-save fields on change (to state, not disk)
+  const fieldInputs = [$testId, $testSummary, $testDescription, $testPriority, $testLabels, $testSkip];
+  fieldInputs.forEach((el) => {
+    el.addEventListener("input", syncEditorToState);
+    el.addEventListener("change", syncEditorToState);
+  });
+
+  // Exec fields
+  $execSummary.addEventListener("input", () => {
+    testsConfig.testExecution.summary = $execSummary.value;
+    markDirty();
+  });
+  $execDescription.addEventListener("input", () => {
+    testsConfig.testExecution.description = $execDescription.value;
+    markDirty();
+  });
+
+  // Tag checkboxes
+  document.querySelectorAll("#tag-selector input[type=checkbox]").forEach((cb) => {
+    cb.addEventListener("change", syncEditorToState);
+  });
+
+  // Warn about unsaved changes
+  window.addEventListener("beforeunload", (e) => {
+    if (isDirty) {
+      e.preventDefault();
+      e.returnValue = "You have unsaved changes.";
+    }
+  });
+}
+
+// ─── Test List Rendering ────────────────────────────────────────────────────────
+
+function renderTestList() {
+  const search = $searchInput.value.toLowerCase();
+  const tagFilter = $filterTag.value;
+
+  $testList.innerHTML = "";
+
+  testsConfig.tests.forEach((test, idx) => {
+    // Filter by search
+    const searchable = `${test.test_id} ${test.xray.summary} ${test.xray.description || ""}`.toLowerCase();
+    if (search && !searchable.includes(search)) return;
+
+    // Filter by tag
+    if (tagFilter && !(test.tags || []).includes(tagFilter)) return;
+
+    const li = document.createElement("li");
+    li.className = idx === selectedIndex ? "active" : "";
+    li.addEventListener("click", () => selectTest(idx));
+
+    // Test ID
+    const idSpan = document.createElement("span");
+    idSpan.className = "test-list-id";
+    idSpan.textContent = test.test_id;
+    li.appendChild(idSpan);
+
+    // Summary
+    const summarySpan = document.createElement("span");
+    summarySpan.className = "test-list-summary";
+    summarySpan.textContent = test.xray.summary;
+    li.appendChild(summarySpan);
+
+    // Meta row
+    const metaDiv = document.createElement("div");
+    metaDiv.className = "test-list-meta";
+
+    // Tags
+    (test.tags || []).slice(0, 3).forEach((tag) => {
+      const tagSpan = document.createElement("span");
+      tagSpan.className = `test-list-tag tag-${tag}`;
+      tagSpan.textContent = tag;
+      metaDiv.appendChild(tagSpan);
+    });
+
+    // Skip indicator
+    if (test.skip) {
+      const skipSpan = document.createElement("span");
+      skipSpan.className = "test-list-skip";
+      skipSpan.textContent = "(skipped)";
+      metaDiv.appendChild(skipSpan);
+    }
+
+    // Xray mapping indicator
+    const m = mapping[test.test_id];
+    if (m && m.key) {
+      const xraySpan = document.createElement("span");
+      xraySpan.className = "test-list-xray";
+      xraySpan.textContent = m.key;
+      metaDiv.appendChild(xraySpan);
+    }
+
+    li.appendChild(metaDiv);
+    $testList.appendChild(li);
+  });
+
+  // Update count
+  $testCount.textContent = `${testsConfig.tests.length} test${testsConfig.tests.length !== 1 ? "s" : ""}`;
+}
+
+// ─── Test Selection ─────────────────────────────────────────────────────────────
+
+function selectTest(idx) {
+  selectedIndex = idx;
+  const test = testsConfig.tests[idx];
+  if (!test) return;
+
+  $placeholder.classList.add("hidden");
+  $editor.classList.remove("hidden");
+
+  // Populate fields
+  $testId.value = test.test_id || "";
+  $testSummary.value = test.xray.summary || "";
+  $testDescription.value = test.xray.description || "";
+  $testPriority.value = test.xray.priority || "";
+  $testLabels.value = (test.xray.labels || []).join(", ");
+  $testSkip.checked = !!test.skip;
+
+  // Update title
+  document.getElementById("editor-title").textContent = test.test_id || "New Test";
+
+  // Tags
+  const tags = test.tags || [];
+  document.querySelectorAll("#tag-selector input[type=checkbox]").forEach((cb) => {
+    cb.checked = tags.includes(cb.value);
+  });
+
+  // Mapping info
+  const m = mapping[test.test_id];
+  if (m && m.key) {
+    $mappingInfo.classList.remove("hidden");
+    $mappingKey.textContent = m.key;
+    $mappingId.textContent = `(ID: ${m.id})`;
+  } else {
+    $mappingInfo.classList.add("hidden");
+  }
+
+  // Clear ID error
+  $testIdError.classList.add("hidden");
+  $testId.classList.remove("error");
+
+  // Render steps
+  renderSteps(test.xray.steps || []);
+
+  // Re-render list to update active state
+  renderTestList();
+}
+
+// ─── Steps Rendering ────────────────────────────────────────────────────────────
+
+function renderSteps(steps) {
+  $stepsContainer.innerHTML = "";
+
+  steps.forEach((step, idx) => {
+    const card = document.createElement("div");
+    card.className = "step-card";
+    card.innerHTML = `
+      <div class="step-card-header">
+        <span class="step-number">Step ${idx + 1}</span>
+        <button class="btn-remove" data-idx="${idx}" title="Remove step">✕</button>
+      </div>
+      <div class="form-row">
+        <label>Action</label>
+        <input type="text" class="step-action" data-idx="${idx}" value="${escapeHtml(step.action || "")}" placeholder="What action to perform..." />
+      </div>
+      <div class="form-row">
+        <label>Data</label>
+        <input type="text" class="step-data" data-idx="${idx}" value="${escapeHtml(step.data || "")}" placeholder="Input data or parameters..." />
+      </div>
+      <div class="form-row">
+        <label>Expected Result</label>
+        <input type="text" class="step-expected" data-idx="${idx}" value="${escapeHtml(step.expected_result || "")}" placeholder="Expected outcome..." />
+      </div>
+    `;
+    $stepsContainer.appendChild(card);
+  });
+
+  // Bind step events
+  $stepsContainer.querySelectorAll(".btn-remove").forEach((btn) => {
+    btn.addEventListener("click", (e) => {
+      const idx = parseInt(e.target.dataset.idx);
+      removeStep(idx);
+    });
+  });
+
+  $stepsContainer.querySelectorAll(".step-action, .step-data, .step-expected").forEach((input) => {
+    input.addEventListener("input", syncStepsToState);
+  });
+}
+
+// ─── Sync Editor → State ────────────────────────────────────────────────────────
+
+function syncEditorToState() {
+  if (selectedIndex < 0) return;
+  const test = testsConfig.tests[selectedIndex];
+  if (!test) return;
+
+  // Validate test_id uniqueness
+  const newId = $testId.value.trim();
+  const duplicate = testsConfig.tests.some((t, i) => i !== selectedIndex && t.test_id === newId);
+  if (duplicate) {
+    $testIdError.textContent = "Duplicate test_id";
+    $testIdError.classList.remove("hidden");
+    $testId.classList.add("error");
+  } else {
+    $testIdError.classList.add("hidden");
+    $testId.classList.remove("error");
+  }
+
+  test.test_id = newId;
+  test.xray.summary = $testSummary.value;
+  test.xray.description = $testDescription.value;
+  test.xray.priority = $testPriority.value || undefined;
+  test.xray.labels = $testLabels.value
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean);
+  test.skip = $testSkip.checked || undefined;
+
+  // Tags
+  const tags = [];
+  document.querySelectorAll("#tag-selector input[type=checkbox]:checked").forEach((cb) => {
+    tags.push(cb.value);
+  });
+  test.tags = tags.length > 0 ? tags : undefined;
+
+  // Update editor title
+  document.getElementById("editor-title").textContent = test.test_id || "New Test";
+
+  markDirty();
+  renderTestList();
+}
+
+function syncStepsToState() {
+  if (selectedIndex < 0) return;
+  const test = testsConfig.tests[selectedIndex];
+  if (!test) return;
+
+  const steps = [];
+  const cards = $stepsContainer.querySelectorAll(".step-card");
+  cards.forEach((card) => {
+    steps.push({
+      action: card.querySelector(".step-action").value,
+      data: card.querySelector(".step-data").value,
+      expected_result: card.querySelector(".step-expected").value,
+    });
+  });
+
+  test.xray.steps = steps;
+  markDirty();
+}
+
+// ─── CRUD actions ───────────────────────────────────────────────────────────────
+
+function addNewTest() {
+  const newTest = {
+    test_id: `TC-NEW-${String(testsConfig.tests.length + 1).padStart(3, "0")}`,
+    tags: ["regression"],
+    xray: {
+      summary: "New test case — edit me",
+      description: "",
+      priority: "Medium",
+      labels: [],
+      steps: [
+        { action: "", data: "", expected_result: "" },
+      ],
+    },
+  };
+
+  testsConfig.tests.push(newTest);
+  markDirty();
+  renderTestList();
+  selectTest(testsConfig.tests.length - 1);
+  showToast("New test added", "info");
+
+  // Focus on the test_id field
+  setTimeout(() => {
+    $testId.focus();
+    $testId.select();
+  }, 100);
+}
+
+function deleteCurrentTest() {
+  if (selectedIndex < 0) return;
+
+  const test = testsConfig.tests[selectedIndex];
+  if (!confirm(`Delete test "${test.test_id}"?`)) return;
+
+  testsConfig.tests.splice(selectedIndex, 1);
+  selectedIndex = -1;
+  markDirty();
+  renderTestList();
+
+  $editor.classList.add("hidden");
+  $placeholder.classList.remove("hidden");
+  showToast("Test deleted", "info");
+}
+
+function addNewStep() {
+  if (selectedIndex < 0) return;
+  const test = testsConfig.tests[selectedIndex];
+  if (!test.xray.steps) test.xray.steps = [];
+
+  test.xray.steps.push({ action: "", data: "", expected_result: "" });
+  markDirty();
+  renderSteps(test.xray.steps);
+
+  // Focus the new step's action field
+  const lastAction = $stepsContainer.querySelector(".step-card:last-child .step-action");
+  if (lastAction) setTimeout(() => lastAction.focus(), 100);
+}
+
+function removeStep(idx) {
+  if (selectedIndex < 0) return;
+  const test = testsConfig.tests[selectedIndex];
+  test.xray.steps.splice(idx, 1);
+  markDirty();
+  renderSteps(test.xray.steps);
+}
+
+// ─── Save & Exit ────────────────────────────────────────────────────────────────
+
+async function saveAndExit() {
+  // Sync exec fields
+  testsConfig.testExecution = {
+    summary: $execSummary.value,
+    description: $execDescription.value,
+  };
+
+  // Clean up undefined/empty fields
+  testsConfig.tests.forEach((test) => {
+    if (!test.skip) delete test.skip;
+    if (!test.tags || test.tags.length === 0) delete test.tags;
+    if (!test.xray.priority) delete test.xray.priority;
+    if (!test.xray.labels || test.xray.labels.length === 0) delete test.xray.labels;
+    if (!test.xray.description) delete test.xray.description;
+  });
+
+  try {
+    const res = await fetch("/api/tests", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(testsConfig),
+    });
+
+    const data = await res.json();
+
+    if (!res.ok) {
+      showToast(`Save failed: ${data.error}`, "error");
+      return;
+    }
+
+    isDirty = false;
+    $statusBadge.textContent = "Saved";
+    $statusBadge.className = "badge badge-loaded";
+    showToast(`Saved ${data.count} test(s) — shutting down...`, "success");
+
+    // Trigger server shutdown after a brief delay
+    setTimeout(async () => {
+      try {
+        await fetch("/api/shutdown", { method: "POST" });
+      } catch {
+        // Expected — server shutting down
+      }
+      document.body.innerHTML = `
+        <div style="display:flex;align-items:center;justify-content:center;height:100vh;background:#0d1117;color:#e6edf3;font-family:sans-serif;">
+          <div style="text-align:center;">
+            <div style="font-size:48px;margin-bottom:16px;">✅</div>
+            <h2>Tests Saved</h2>
+            <p style="color:#8b949e;margin-top:8px;">You can close this tab. Run <code style="color:#58a6ff;">npx xray-qe push-tests</code> to push to Xray.</p>
+          </div>
+        </div>
+      `;
+    }, 1000);
+  } catch (err) {
+    showToast(`Save error: ${err.message}`, "error");
+  }
+}
+
+// ─── Helpers ────────────────────────────────────────────────────────────────────
+
+function markDirty() {
+  isDirty = true;
+  $statusBadge.textContent = "Unsaved";
+  $statusBadge.className = "badge badge-unsaved";
+}
+
+function showToast(message, type = "info") {
+  $toast.textContent = message;
+  $toast.className = `toast toast-${type}`;
+  setTimeout(() => $toast.classList.add("hidden"), 3000);
+}
+
+function escapeHtml(str) {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML.replace(/"/g, "&quot;");
+}

package/ui/editor/index.html

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>XQT — QE Review Gate</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <header>
+    <div class="header-left">
+      <h1>🧪 XQT — QE Review Gate</h1>
+      <span class="subtitle">@msalaam/xray-qe-toolkit</span>
+    </div>
+    <div class="header-right">
+      <span id="status-badge" class="badge badge-loaded">Loaded</span>
+      <span id="test-count" class="test-count">0 tests</span>
+      <button id="btn-add-test" class="btn btn-primary" title="Add new test">+ Add Test</button>
+      <button id="btn-save" class="btn btn-success" title="Save and exit editor">💾 Save &amp; Exit</button>
+    </div>
+  </header>
+
+  <div class="container">
+    <!-- ── Left Panel: Test List ──────────────────────────────────────────── -->
+    <aside id="test-list-panel">
+      <div class="panel-header">
+        <input type="text" id="search-input" placeholder="Search tests..." />
+        <select id="filter-tag">
+          <option value="">All tags</option>
+          <option value="regression">regression</option>
+          <option value="smoke">smoke</option>
+          <option value="edge">edge</option>
+          <option value="critical">critical</option>
+          <option value="integration">integration</option>
+          <option value="e2e">e2e</option>
+          <option value="security">security</option>
+          <option value="performance">performance</option>
+        </select>
+      </div>
+      <ul id="test-list"></ul>
+    </aside>
+
+    <!-- ── Right Panel: Test Detail Editor ─────────────────────────────── -->
+    <main id="editor-panel">
+      <div id="placeholder-msg" class="placeholder">
+        <div class="placeholder-icon">📋</div>
+        <h2>Select a test to edit</h2>
+        <p>Choose a test from the left panel, or click <strong>+ Add Test</strong> to create a new one.</p>
+      </div>
+
+      <div id="test-editor" class="hidden">
+        <!-- Test Execution Config (shown at top when editing) -->
+        <section id="exec-section" class="editor-section">
+          <h3>📌 Test Execution</h3>
+          <div class="form-row">
+            <label for="exec-summary">Summary</label>
+            <input type="text" id="exec-summary" placeholder="Sprint XX - Automated Regression Suite" />
+          </div>
+          <div class="form-row">
+            <label for="exec-description">Description</label>
+            <textarea id="exec-description" rows="2" placeholder="Test execution description..."></textarea>
+          </div>
+        </section>
+
+        <!-- Test Fields -->
+        <section class="editor-section">
+          <div class="section-header">
+            <h3 id="editor-title">Test Details</h3>
+            <div class="section-actions">
+              <label class="toggle-label">
+                <input type="checkbox" id="test-skip" /> Skip this test
+              </label>
+              <button id="btn-delete-test" class="btn btn-danger btn-sm" title="Delete this test">🗑 Delete</button>
+            </div>
+          </div>
+
+          <div class="form-row">
+            <label for="test-id">Test ID</label>
+            <input type="text" id="test-id" placeholder="TC-API-GET-001" />
+            <span id="test-id-error" class="field-error hidden"></span>
+          </div>
+
+          <div class="form-row">
+            <label for="test-summary">Summary</label>
+            <input type="text" id="test-summary" placeholder="Verify GET /api/resource returns 200" />
+          </div>
+
+          <div class="form-row">
+            <label for="test-description">Description</label>
+            <textarea id="test-description" rows="3" placeholder="Test description..."></textarea>
+          </div>
+
+          <div class="form-row form-row-inline">
+            <div>
+              <label for="test-priority">Priority</label>
+              <select id="test-priority">
+                <option value="">— Select —</option>
+                <option value="Highest">Highest</option>
+                <option value="High">High</option>
+                <option value="Medium">Medium</option>
+                <option value="Low">Low</option>
+                <option value="Lowest">Lowest</option>
+              </select>
+            </div>
+            <div>
+              <label for="test-labels">Labels <small>(comma-separated)</small></label>
+              <input type="text" id="test-labels" placeholder="API, GET, Regression" />
+            </div>
+          </div>
+
+          <div class="form-row">
+            <label>Tags</label>
+            <div id="tag-selector" class="tag-selector">
+              <label class="tag-chip"><input type="checkbox" value="regression" /> regression</label>
+              <label class="tag-chip"><input type="checkbox" value="smoke" /> smoke</label>
+              <label class="tag-chip"><input type="checkbox" value="edge" /> edge</label>
+              <label class="tag-chip"><input type="checkbox" value="critical" /> critical</label>
+              <label class="tag-chip"><input type="checkbox" value="integration" /> integration</label>
+              <label class="tag-chip"><input type="checkbox" value="e2e" /> e2e</label>
+              <label class="tag-chip"><input type="checkbox" value="security" /> security</label>
+              <label class="tag-chip"><input type="checkbox" value="performance" /> performance</label>
+            </div>
+          </div>
+
+          <!-- Xray Mapping Info (read-only) -->
+          <div id="mapping-info" class="mapping-info hidden">
+            <span class="mapping-label">Xray:</span>
+            <span id="mapping-key" class="mapping-key"></span>
+            <span id="mapping-id" class="mapping-id"></span>
+          </div>
+        </section>
+
+        <!-- Steps Editor -->
+        <section class="editor-section">
+          <div class="section-header">
+            <h3>🔢 Test Steps</h3>
+            <button id="btn-add-step" class="btn btn-primary btn-sm">+ Add Step</button>
+          </div>
+          <div id="steps-container"></div>
+        </section>
+      </div>
+    </main>
+  </div>
+
+  <!-- Toast Notification -->
+  <div id="toast" class="toast hidden"></div>
+
+  <script src="editor.js"></script>
+</body>
+</html>