fix: preserve search input and add choseong lookup
This commit is contained in:
283
tests/LegacyParityWeb/text-input-render-stability.test.cjs
Normal file
283
tests/LegacyParityWeb/text-input-render-stability.test.cjs
Normal file
@@ -0,0 +1,283 @@
|
||||
"use strict";
|
||||
|
||||
const assert = require("node:assert/strict");
|
||||
const fs = require("node:fs");
|
||||
const path = require("node:path");
|
||||
const test = require("node:test");
|
||||
|
||||
const repositoryRoot = path.resolve(__dirname, "..", "..");
|
||||
const app = fs.readFileSync(path.join(repositoryRoot, "src",
|
||||
"MBN_STOCK_WEBVIEW.LegacyParityApp", "Web", "app.js"), "utf8");
|
||||
|
||||
function section(startMarker, endMarker) {
|
||||
const start = app.indexOf(startMarker);
|
||||
const end = app.indexOf(endMarker, start + startMarker.length);
|
||||
assert.ok(start >= 0 && end > start,
|
||||
`Unable to extract ${startMarker} through ${endMarker}`);
|
||||
return app.slice(start, end);
|
||||
}
|
||||
|
||||
function workspaceHarness(source, keyVariable, renderFunction, workspaceSelector,
|
||||
inputs) {
|
||||
let replacements = 0;
|
||||
const workspace = {
|
||||
querySelector(selector) { return inputs[selector] || null; }
|
||||
};
|
||||
const categoryTree = {
|
||||
querySelector(selector) {
|
||||
return selector === workspaceSelector ? workspace : null;
|
||||
},
|
||||
replaceChildren() { replacements += 1; }
|
||||
};
|
||||
const documentObject = { activeElement: null };
|
||||
const harness = new Function("categoryTree", "document", `
|
||||
let ${keyVariable} = "";
|
||||
${source}
|
||||
return {
|
||||
render: ${renderFunction},
|
||||
prime: function (value) { ${keyVariable} = value; }
|
||||
};
|
||||
`)(categoryTree, documentObject);
|
||||
return {
|
||||
...harness,
|
||||
workspace,
|
||||
document: documentObject,
|
||||
replacements: () => replacements
|
||||
};
|
||||
}
|
||||
|
||||
test("expert search keeps the same focused input across equivalent native states", () => {
|
||||
const input = { value: "ㄱㅈ" };
|
||||
const harness = workspaceHarness(
|
||||
section("function updateExpertWorkspace", "function updateTradingHaltWorkspace"),
|
||||
"expertRenderStructureKey",
|
||||
"renderExpert",
|
||||
".expert-workspace",
|
||||
{ "#expert-search": input });
|
||||
const state = {
|
||||
expert: {
|
||||
search: { query: "", results: [], isTruncated: false },
|
||||
selectedExpert: null,
|
||||
preview: { items: [] },
|
||||
actions: []
|
||||
}
|
||||
};
|
||||
const key = JSON.stringify({
|
||||
results: state.expert.search.results,
|
||||
isTruncated: state.expert.search.isTruncated,
|
||||
selectedExpert: state.expert.selectedExpert,
|
||||
preview: state.expert.preview,
|
||||
actions: state.expert.actions
|
||||
});
|
||||
harness.prime(key);
|
||||
harness.document.activeElement = input;
|
||||
|
||||
harness.render(state);
|
||||
|
||||
assert.equal(input.value, "ㄱㅈ");
|
||||
assert.equal(harness.replacements(), 0);
|
||||
|
||||
harness.document.activeElement = null;
|
||||
state.expert.search.query = "김전문";
|
||||
harness.render(state);
|
||||
assert.equal(input.value, "김전문");
|
||||
assert.equal(harness.replacements(), 0);
|
||||
});
|
||||
|
||||
test("comparison searches keep both focused editor identities across status polls", () => {
|
||||
const domestic = { value: "ㅅㅅ" };
|
||||
const world = { value: "apple" };
|
||||
const harness = workspaceHarness(
|
||||
section("function updateComparisonWorkspace", "function themeActionIsClickable"),
|
||||
"comparisonRenderStructureKey",
|
||||
"renderComparison",
|
||||
".comparison-workspace",
|
||||
{
|
||||
"#comparison-domestic-search": domestic,
|
||||
"#comparison-world-search": world
|
||||
});
|
||||
const state = {
|
||||
comparison: {
|
||||
domesticSearch: { query: "", results: [], selectedResultId: null,
|
||||
isTruncated: false },
|
||||
worldSearch: { query: "", results: [], selectedResultId: null,
|
||||
isTruncated: false },
|
||||
fixedTargets: [],
|
||||
selectedFixedTargetId: null,
|
||||
firstTarget: null,
|
||||
secondTarget: null,
|
||||
savedPairs: [],
|
||||
actions: []
|
||||
}
|
||||
};
|
||||
const key = JSON.stringify({
|
||||
domestic: { results: [], selectedResultId: null, isTruncated: false },
|
||||
world: { results: [], selectedResultId: null, isTruncated: false },
|
||||
fixedTargets: [],
|
||||
selectedFixedTargetId: null,
|
||||
firstTarget: null,
|
||||
secondTarget: null,
|
||||
savedPairs: [],
|
||||
actions: []
|
||||
});
|
||||
harness.prime(key);
|
||||
harness.document.activeElement = domestic;
|
||||
|
||||
harness.render(state);
|
||||
|
||||
assert.equal(domestic.value, "ㅅㅅ");
|
||||
assert.equal(world.value, "");
|
||||
assert.equal(harness.replacements(), 0);
|
||||
});
|
||||
|
||||
test("trading-halt search keeps its focused draft across equivalent status polls", () => {
|
||||
const input = { value: "ㅎㄱ" };
|
||||
const harness = workspaceHarness(
|
||||
section("function updateTradingHaltWorkspace", "function blankManualRecord"),
|
||||
"tradingHaltRenderStructureKey",
|
||||
"renderTradingHalt",
|
||||
".halt-workspace",
|
||||
{ "#halt-search": input });
|
||||
const state = {
|
||||
tradingHalt: { query: "", results: [], nameSort: "ascending", actions: [] }
|
||||
};
|
||||
harness.prime(JSON.stringify({
|
||||
results: [], nameSort: "ascending", actions: []
|
||||
}));
|
||||
harness.document.activeElement = input;
|
||||
|
||||
harness.render(state);
|
||||
|
||||
assert.equal(input.value, "ㅎㄱ");
|
||||
assert.equal(harness.replacements(), 0);
|
||||
});
|
||||
|
||||
test("all recreated editors use stable state keys and transient busy locking", () => {
|
||||
const fixedCatalog = section("function renderFixedCatalog", "function markIndustryRowSelected");
|
||||
const manualFinancial = section("function renderManualFinancial", "function isCanonicalNamedPlaylistTitle");
|
||||
const manualLists = section("function renderManualLists", "function openNamedPlaylist");
|
||||
const operatorCatalog = section("function renderOperatorCatalog", "operatorCatalogClose.addEventListener");
|
||||
const treeFinish = section("function finishTreeRender", "function send(");
|
||||
|
||||
assert.doesNotMatch(fixedCatalog,
|
||||
/if \(!catalog[^]*?categoryTree\.replaceChildren\(\)/);
|
||||
assert.match(manualFinancial,
|
||||
/renderStateKey = JSON\.stringify\(manual\)/);
|
||||
assert.match(manualFinancial,
|
||||
/setTransientControlsBusy\(manualDialog, state\.isBusy === true\)/);
|
||||
const manualStableReturn = manualFinancial.indexOf(
|
||||
"if (!manualModal.hidden && renderStateKey === manualFinancialRenderStateKey)");
|
||||
const manualDraftCapture = manualFinancial.indexOf(
|
||||
"captureManualDraftForChangedModel();",
|
||||
manualStableReturn);
|
||||
const manualWorkspaceReplace = manualFinancial.indexOf(
|
||||
"manualWorkspace.replaceChildren(toolbar, body);",
|
||||
manualStableReturn);
|
||||
assert.ok(manualStableReturn >= 0 && manualDraftCapture > manualStableReturn &&
|
||||
manualWorkspaceReplace > manualDraftCapture,
|
||||
"a changed GraphE model must capture the current editor before replacing it");
|
||||
assert.match(manualLists,
|
||||
/setTransientControlsBusy\(manualListDialog, state\.isBusy === true\)/);
|
||||
assert.match(operatorCatalog,
|
||||
/renderStateKey = JSON\.stringify\(catalog\)/);
|
||||
assert.match(operatorCatalog,
|
||||
/setTransientControlsBusy\(operatorCatalogDialog, busy\)/);
|
||||
assert.doesNotMatch(manualLists, /disabled\s*=\s*busy\s*\|\|/);
|
||||
assert.doesNotMatch(operatorCatalog, /disabled\s*=\s*busy\s*\|\|/);
|
||||
assert.doesNotMatch(manualLists,
|
||||
/querySelectorAll\("button, input"\)[^]*?control\.disabled = true/);
|
||||
assert.match(manualLists,
|
||||
/setTransientControlsBusy\(manualListDialog, true\)[^]*?set-manual-net-sell-cell/);
|
||||
const operatorStableReturn = operatorCatalog.indexOf(
|
||||
"if (!operatorCatalogModal.hidden && renderStateKey === operatorCatalogRenderStateKey)");
|
||||
const operatorModelReset = operatorCatalog.indexOf(
|
||||
"setTransientControlsBusy(operatorCatalogDialog, false);",
|
||||
operatorStableReturn);
|
||||
const operatorSemanticRender = operatorCatalog.indexOf(
|
||||
"operatorCatalogThemeTab.disabled = editing;",
|
||||
operatorStableReturn);
|
||||
assert.ok(operatorStableReturn >= 0 && operatorModelReset > operatorStableReturn &&
|
||||
operatorSemanticRender > operatorModelReset,
|
||||
"changed operator models must clear transient busy state before semantic rendering");
|
||||
assert.match(treeFinish, /!canRestoreControl && focused/);
|
||||
assert.match(treeFinish, /document\.activeElement !== control/);
|
||||
});
|
||||
|
||||
test("transient busy snapshots can be cleared before a changed model is rendered", () => {
|
||||
const source = section("function setTransientControlsBusy", "function isOperatorMutationLocked");
|
||||
const setBusy = new Function(`${source}; return setTransientControlsBusy;`)();
|
||||
const control = { disabled: true, dataset: {} };
|
||||
const root = { querySelectorAll() { return [control]; } };
|
||||
|
||||
setBusy(root, true);
|
||||
assert.equal(control.dataset.busyDisabled, "true");
|
||||
|
||||
setBusy(root, false);
|
||||
assert.equal(control.disabled, true);
|
||||
assert.equal(control.dataset.busyDisabled, undefined);
|
||||
|
||||
control.disabled = false;
|
||||
setBusy(root, true);
|
||||
setBusy(root, false);
|
||||
|
||||
assert.equal(control.disabled, false);
|
||||
assert.equal(control.dataset.busyDisabled, undefined);
|
||||
});
|
||||
|
||||
test("GraphE captures the current editor values before a changed model rebuild", () => {
|
||||
const source = section("function blankManualRecord", "function renderManualFinancial");
|
||||
const inputs = new Map([
|
||||
["#manual-financial-stock-name", { value: " 삼성전자 " }],
|
||||
["[data-manual-quarter-label=\"0\"]", { value: "2026Q1" }],
|
||||
["[data-manual-quarter-value=\"0\"]", { value: "123" }]
|
||||
]);
|
||||
const workspace = {
|
||||
querySelector(selector) { return inputs.get(selector) || null; }
|
||||
};
|
||||
const harness = new Function("manualWorkspace", `
|
||||
let manualDraft = {
|
||||
screen: "sales",
|
||||
stockName: "기존값",
|
||||
quarters: Array.from({ length: 6 }, function () {
|
||||
return { quarter: "", value: 0 };
|
||||
})
|
||||
};
|
||||
${source}
|
||||
return {
|
||||
capture: rememberManualDraft,
|
||||
draft: function () { return manualDraft; }
|
||||
};
|
||||
`)(workspace);
|
||||
|
||||
harness.capture();
|
||||
|
||||
assert.equal(harness.draft().stockName, "삼성전자");
|
||||
assert.deepEqual(harness.draft().quarters[0], { quarter: "2026Q1", value: 123 });
|
||||
});
|
||||
|
||||
test("GraphE preserves edits on model refresh but protects an intentional new-form reset", () => {
|
||||
const source = section(
|
||||
"function captureManualDraftForChangedModel",
|
||||
"function renderManualFinancial");
|
||||
let captures = 0;
|
||||
const harness = new Function("manualModal", "rememberManualDraft", `
|
||||
let manualDraftResetPending = false;
|
||||
${source}
|
||||
return {
|
||||
capture: captureManualDraftForChangedModel,
|
||||
reset: function () { manualDraftResetPending = true; },
|
||||
pending: function () { return manualDraftResetPending; }
|
||||
};
|
||||
`)({ hidden: false }, function () { captures += 1; });
|
||||
|
||||
harness.capture();
|
||||
assert.equal(captures, 1);
|
||||
|
||||
harness.reset();
|
||||
harness.capture();
|
||||
assert.equal(captures, 1);
|
||||
assert.equal(harness.pending(), false);
|
||||
|
||||
harness.capture();
|
||||
assert.equal(captures, 2);
|
||||
});
|
||||
Reference in New Issue
Block a user