tests/summary-progress-chart-type.node-test.js - master - Starolat/DeepDive

tests/summary-progress-chart-type.node-test.js
109 строк4 KB
Starolat Sergei
feat: переключатель типа диаграммы (S-кривая/понедельная) в SummaryProgressWidget с сохранением в пресет
30 июл 2026, 10:03
30 июл 2026, 10:0371afb3a
// @ts-check
/**
 * Тест переключателя типа диаграммы SummaryProgressWidget:
 * - накопительный режим (S-кривая) суммирует недельные значения;
 * - клик по шарику диспатчит widget-setting-change с props.chartType.
 * Запуск: node tests/summary-progress-chart-type.node-test.js
 */
import { JSDOM } from "./node_modules/jsdom/lib/api.js";

const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
  url: "http://localhost/",
  pretendToBeVisual: true,
});

globalThis.window = dom.window;
globalThis.document = dom.window.document;
globalThis.HTMLElement = dom.window.HTMLElement;
globalThis.customElements = dom.window.customElements;
globalThis.CustomEvent = dom.window.CustomEvent;
globalThis.ResizeObserver = class {
  observe() {}
  unobserve() {}
  disconnect() {}
};

const { SummaryProgressWidget } = await import(
  "../js/components/summary/SummaryProgressWidget.js"
);

let passed = 0;
let failed = 0;
function assert(cond, msg) {
  if (cond) {
    passed++;
    console.log(`  ✅ ${msg}`);
  } else {
    failed++;
    console.error(`  ❌ ${msg}`);
  }
}

const weekly = [
  { weekStartDate: "2025-01-13", planUnits: 100, actualUnits: 50 },
  { weekStartDate: "2025-01-20", planUnits: 200, actualUnits: 150 },
  { weekStartDate: "2025-01-27", planUnits: 300, actualUnits: 250 },
];

// --- weekly mode (default) ---
const w1 = new SummaryProgressWidget();
w1.setAttribute("title", "Тест");
w1.setAttribute("weekly-data", JSON.stringify(weekly));
document.body.appendChild(w1);

let data = w1._getChartData();
assert(data.plan.join(",") === "100,200,300", "weekly: план без накопления");
assert(data.fact.join(",") === "50,150,250", "weekly: факт без накопления");
assert(w1.chartType === "weekly", "weekly: chartType по умолчанию");

// --- cumulative mode ---
w1.chartType = "cumulative";
data = w1._getChartData();
assert(data.plan.join(",") === "100,300,600", "cumulative: план накапливается");
assert(data.fact.join(",") === "50,200,450", "cumulative: факт накапливается");
assert(
  data.diffRed.join(",") === "50,100,150",
  "cumulative: красная зона (план>факт) пересчитана",
);

// --- attribute ---
const w2 = new SummaryProgressWidget();
w2.setAttribute("chart-type", "cumulative");
w2.setAttribute("weekly-data", JSON.stringify(weekly));
document.body.appendChild(w2);
assert(w2.chartType === "cumulative", "attribute chart-type=cumulative");

// --- toggle dots + event ---
w1.chartType = "weekly";
w1.render();
const dots = w1.shadowRoot.querySelectorAll(".chart-dot");
assert(dots.length === 2, "render: два шарика-переключателя");
assert(
  dots[0].getAttribute("data-chart-type") === "cumulative" &&
    dots[1].getAttribute("data-chart-type") === "weekly",
  "render: левый — накопительная, правый — понедельная",
);
assert(
  !dots[0].classList.contains("active") && dots[1].classList.contains("active"),
  "render: активен правый шарик (weekly)",
);

/** @type {any} */
let evt = null;
w1.addEventListener("widget-setting-change", (e) => (evt = e));
dots[0].dispatchEvent(
  new dom.window.MouseEvent("click", { bubbles: true, composed: true }),
);
assert(w1.chartType === "cumulative", "клик: переключение на cumulative");
assert(
  evt && evt.detail?.props?.chartType === "cumulative",
  "клик: событие widget-setting-change с props.chartType",
);
assert(
  dots[0].classList.contains("active") &&
    !dots[1].classList.contains("active"),
  "клик: активный шарик обновлён без полного render",
);

console.log(`\n${passed} passed, ${failed} failed`);
process.exit(failed ? 1 : 0);