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:
+6
-2
@@ -118,11 +118,15 @@ class WCEnd extends WCBlock {
|
|||||||
this._selectedCode = code;
|
this._selectedCode = code;
|
||||||
const item = this._errnoItems.find(i => i.code === code);
|
const item = this._errnoItems.find(i => i.code === code);
|
||||||
if (item) {
|
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._el.desc.textContent = item.desc;
|
||||||
this.dataset.exitError = code !== 0 ? "true" : "";
|
this.dataset.exitError = code !== 0 ? "true" : "";
|
||||||
} else {
|
} 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._el.desc.textContent = "unknown error";
|
||||||
this.dataset.exitError = "true";
|
this.dataset.exitError = "true";
|
||||||
}
|
}
|
||||||
|
|||||||
+1
-1
@@ -382,7 +382,7 @@ function showBlockEditor(block) {
|
|||||||
body.innerHTML = "";
|
body.innerHTML = "";
|
||||||
|
|
||||||
/* Colour picker row; error blocks default to red, others to blue */
|
/* 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");
|
const colorRow = document.createElement("div");
|
||||||
colorRow.className = "block-editor-color-row";
|
colorRow.className = "block-editor-color-row";
|
||||||
colorRow.innerHTML =
|
colorRow.innerHTML =
|
||||||
|
|||||||
@@ -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._group("Regression tests", () => {
|
||||||
this._test("WCEnd click-outside uses contains() not closest(this)", () => {
|
this._test("WCEnd click-outside uses contains() not closest(this)", () => {
|
||||||
const end = $id("main-end");
|
const end = $id("main-end");
|
||||||
|
|||||||
Reference in New Issue
Block a user