fix: WCEnd editor modal pre-loads correct colour and errno value

- Default colour now checks dataset.exitError instead of tagName === 'WC-END',
  so success (exit 0) END blocks default to blue, error END blocks to red
- _selectByCode now also sets the HTML value attribute via setAttribute(),
  ensuring cloneNode(true) preserves the formatted display value
- Add 4 regression tests for colour defaults, attribute sync, and clone value
This commit is contained in:
2026-06-23 00:52:56 +02:00
parent 68da5592ef
commit 3657a22125
3 changed files with 61 additions and 3 deletions
+6 -2
View File
@@ -118,11 +118,15 @@ class WCEnd extends WCBlock {
this._selectedCode = code;
const item = this._errnoItems.find(i => i.code === code);
if (item) {
this._el.input.value = code + " " + item.name;
const display = code + " " + item.name;
this._el.input.value = display;
this._el.input.setAttribute("value", display);
this._el.desc.textContent = item.desc;
this.dataset.exitError = code !== 0 ? "true" : "";
} else {
this._el.input.value = code + " error";
const display = code + " error";
this._el.input.value = display;
this._el.input.setAttribute("value", display);
this._el.desc.textContent = "unknown error";
this.dataset.exitError = "true";
}
+1 -1
View File
@@ -382,7 +382,7 @@ function showBlockEditor(block) {
body.innerHTML = "";
/* Colour picker row; error blocks default to red, others to blue */
const defaultColor = block.classList.contains("error-path") || block.tagName === "WC-END" ? "#ef5350" : "#4a90d9";
const defaultColor = block.classList.contains("error-path") || block.dataset.exitError ? "#ef5350" : "#4a90d9";
const colorRow = document.createElement("div");
colorRow.className = "block-editor-color-row";
colorRow.innerHTML =
+54
View File
@@ -421,6 +421,60 @@ const APP_TEST_SUITE = {
});
});
this._group("WCEnd editor modal", () => {
this._test("selectByCode sets value attribute for clone", () => {
const end = $id("main-end");
end._selectByCode(42);
const input = end.querySelector(".end-errno-input");
const attr = input.getAttribute("value");
if (attr !== "42 error") throw Error("expected '42 error', got: '" + attr + "'");
end._selectByCode(0);
const attr0 = input.getAttribute("value");
if (attr0 !== "0 success") throw Error("expected '0 success', got: '" + attr0 + "'");
});
this._test("editor modal defaults to blue for success end", () => {
const end = $id("main-end");
end._selectByCode(0);
showBlockEditor(end);
const overlay = $id("block-editor-overlay");
if (!overlay) throw Error("no overlay");
const picker = overlay.querySelector(".block-editor-color-picker");
if (!picker) throw Error("no picker");
if (picker.value !== "#4a90d9") throw Error("expected blue (#4a90d9), got: " + picker.value);
const cancel = overlay.querySelector(".block-editor-cancel");
if (cancel) cancel.click();
});
this._test("editor modal defaults to red for error end", () => {
const end = $id("main-end");
end._selectByCode(42);
showBlockEditor(end);
const overlay = $id("block-editor-overlay");
if (!overlay) throw Error("no overlay");
const picker = overlay.querySelector(".block-editor-color-picker");
if (!picker) throw Error("no picker");
if (picker.value !== "#ef5350") throw Error("expected red (#ef5350), got: " + picker.value);
const cancel = overlay.querySelector(".block-editor-cancel");
if (cancel) cancel.click();
end._selectByCode(0);
});
this._test("editor modal clone shows correct errno value", () => {
const end = $id("main-end");
end._selectByCode(9);
showBlockEditor(end);
const overlay = $id("block-editor-overlay");
if (!overlay) throw Error("no overlay");
const cloneInput = overlay.querySelector(".end-errno-input");
if (!cloneInput) throw Error("no clone input");
if (cloneInput.value !== "9 error") throw Error("expected '9 error', got: '" + cloneInput.value + "'");
const cancel = overlay.querySelector(".block-editor-cancel");
if (cancel) cancel.click();
end._selectByCode(0);
});
});
this._group("Regression tests", () => {
this._test("WCEnd click-outside uses contains() not closest(this)", () => {
const end = $id("main-end");