ferdi2goandClaude Opus 4.8
189bcb6f38
- render.test.mjs drives the real UI under jsdom: employees tab renders and add works, planning tab renders the calendar grid (makeDayCell), generate fills slots, a manual slot change updates history, and a beforeunload flush persists state to localStorage; data tab renders the history view. - persistence.test.mjs seeds malformed persisted state (employee without constraints, out-of-range moderatorsPerDay) and asserts the startup load normalizes it without crashing. - jsdom added as the single devDependency; node_modules gitignored; both suites wired into npm test. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
73 lines
3.3 KiB
JavaScript
73 lines
3.3 KiB
JavaScript
import assert from 'node:assert/strict';
|
|
import { JSDOM } from 'jsdom';
|
|
|
|
// Minimal DOM matching index.html's tab contract
|
|
const HTML = `<!DOCTYPE html><html><body>
|
|
<button class="tab-btn active" data-tab="employees">Mitarbeiter</button>
|
|
<button class="tab-btn" data-tab="planning">Monatsplanung</button>
|
|
<button class="tab-btn" data-tab="data">Daten</button>
|
|
<section id="tab-employees" class="tab-content"></section>
|
|
<section id="tab-planning" class="tab-content hidden"></section>
|
|
<section id="tab-data" class="tab-content hidden"></section>
|
|
</body></html>`;
|
|
|
|
const dom = new JSDOM(HTML, { url: 'http://localhost/' });
|
|
global.window = dom.window;
|
|
global.document = dom.window.document;
|
|
global.localStorage = dom.window.localStorage;
|
|
dom.window.alert = () => {};
|
|
global.alert = () => {};
|
|
|
|
const $ = sel => document.querySelector(sel);
|
|
const tab = name => [...document.querySelectorAll('.tab-btn')].find(b => b.dataset.tab === name);
|
|
const btnByText = (root, text) => [...root.querySelectorAll('button')].find(b => b.textContent === text);
|
|
const fire = (el, type) => el.dispatchEvent(new dom.window.Event(type, { bubbles: true }));
|
|
|
|
// Importing app.js runs the startup load + renderEmployees()
|
|
const { state } = await import('../js/app.js');
|
|
|
|
// --- Employees tab renders its input ---
|
|
assert.ok($('#emp-name-input'), 'employee name input rendered');
|
|
|
|
// --- Adding an employee updates state and the list ---
|
|
const input = $('#emp-name-input');
|
|
input.value = 'Alice';
|
|
btnByText(document.getElementById('tab-employees'), 'Hinzufügen').click();
|
|
input.value = 'Bob';
|
|
btnByText(document.getElementById('tab-employees'), 'Hinzufügen').click();
|
|
assert.equal(state.employees.length, 2, 'two employees added to state');
|
|
assert.ok(document.getElementById('employee-list').textContent.includes('Alice'), 'Alice listed');
|
|
|
|
// --- Planning tab renders a calendar grid (exercises makeDayCell) ---
|
|
tab('planning').click();
|
|
const dayCells = document.querySelectorAll('#calendar-wrapper .cal-day');
|
|
assert.ok(dayCells.length > 0, 'calendar grid rendered day cells');
|
|
|
|
// --- Generating a plan fills slots ---
|
|
btnByText(document.getElementById('tab-planning'), 'Plan generieren').click();
|
|
const selects = [...document.querySelectorAll('#calendar-wrapper select')];
|
|
const filled = selects.filter(s => s.value !== '');
|
|
assert.ok(filled.length > 0, 'generate assigned moderators to slots');
|
|
assert.ok(state.history.length > 0, 'generated assignments stored in history');
|
|
|
|
// --- Manual slot change persists as a manual entry ---
|
|
const histBefore = state.history.length;
|
|
const firstFilled = filled[0];
|
|
const iso = state.history[0].date;
|
|
// change first filled slot to "— Leer —"
|
|
firstFilled.value = '';
|
|
fire(firstFilled, 'change');
|
|
assert.ok(state.history.length <= histBefore, 'clearing a slot removed its entry');
|
|
|
|
// --- Debounced save flushes on beforeunload and persists to localStorage ---
|
|
fire(window, 'beforeunload');
|
|
const saved = JSON.parse(localStorage.getItem('morning-planner-state'));
|
|
assert.equal(saved.employees.length, 2, 'employees persisted to localStorage');
|
|
assert.ok(saved.history.length > 0, 'history persisted to localStorage');
|
|
|
|
// --- Data tab renders the history table ---
|
|
tab('data').click();
|
|
assert.ok(document.getElementById('tab-data').textContent.includes('Verlauf'), 'data tab rendered');
|
|
|
|
console.log('All render tests passed.');
|