diff --git a/src/ApiTestRunner.App/wwwroot/app.js b/src/ApiTestRunner.App/wwwroot/app.js index 5d800d8..b7cedb6 100644 --- a/src/ApiTestRunner.App/wwwroot/app.js +++ b/src/ApiTestRunner.App/wwwroot/app.js @@ -424,8 +424,10 @@ function renderState(state) { endpointBadge.textContent = endpointIsPassing ? "Pass" : "Fail"; endpointBadge.className = `endpoint-badge ${endpointIsPassing ? "passing" : "failing"}`; - endpointNode.querySelector(".response-body").textContent = - endpoint.responseBody || endpoint.errorMessage || "(empty response)"; + initializeResponsePreview( + endpointNode, + endpoint.responseBody || endpoint.errorMessage || "(empty response)" + ); const testList = endpointNode.querySelector(".test-list"); @@ -469,6 +471,33 @@ function renderState(state) { } } +function initializeResponsePreview(endpointNode, responseText) { + const responseBody = endpointNode.querySelector(".response-body"); + const formatButton = endpointNode.querySelector(".format-response-button"); + const toggleWrapButton = endpointNode.querySelector(".toggle-response-wrap-button"); + + responseBody.value = formatJsonText(responseText); + responseBody.dataset.rawValue = responseText; + responseBody.wrap = "soft"; + responseBody.classList.add("is-wrapped"); + responseBody.classList.remove("is-unwrapped"); + + toggleWrapButton.innerHTML = "Disable Wrap"; + toggleWrapButton.addEventListener("click", () => { + const isWrapped = responseBody.classList.contains("is-wrapped"); + responseBody.wrap = isWrapped ? "off" : "soft"; + responseBody.classList.toggle("is-wrapped", !isWrapped); + responseBody.classList.toggle("is-unwrapped", isWrapped); + toggleWrapButton.innerHTML = isWrapped + ? "Enable Wrap" + : "Disable Wrap"; + }); + + formatButton.addEventListener("click", () => { + responseBody.value = formatJsonText(responseBody.dataset.rawValue || responseBody.value); + }); +} + function filterRunEnvironments(run, searchTerm) { if (!searchTerm) { return run.environments.map((environment) => ({ @@ -615,6 +644,18 @@ function formatDate(value) { return new Date(value).toLocaleString(); } +function formatJsonText(value) { + if (typeof value !== "string") { + return String(value ?? ""); + } + + try { + return JSON.stringify(JSON.parse(value), null, 2); + } catch { + return value; + } +} + async function buildErrorMessage(response, fallbackMessage) { try { const payload = await response.json(); diff --git a/src/ApiTestRunner.App/wwwroot/curl-import.html b/src/ApiTestRunner.App/wwwroot/curl-import.html index 2e1a2dc..b41374e 100644 --- a/src/ApiTestRunner.App/wwwroot/curl-import.html +++ b/src/ApiTestRunner.App/wwwroot/curl-import.html @@ -100,7 +100,11 @@
No response body parsed yet.