432 lines
14 KiB
JavaScript
432 lines
14 KiB
JavaScript
import { describe, test, expect, vi, beforeEach } from "vitest";
|
|
import { renderModuleList, renderLesson, renderLevelIndicator, showFeedback, clearFeedback } from "../../src/helpers/renderer.js";
|
|
|
|
describe("Renderer Module", () => {
|
|
beforeEach(() => {
|
|
// Reset the DOM between tests
|
|
document.body.innerHTML = `
|
|
<div id="module-list"></div>
|
|
<h2 id="title"></h2>
|
|
<div id="description"></div>
|
|
<div id="task"></div>
|
|
<div id="preview"></div>
|
|
<div id="prefix"></div>
|
|
<textarea id="input"></textarea>
|
|
<div id="suffix"></div>
|
|
<div id="level-indicator"></div>
|
|
<div id="code-editor"></div>
|
|
`;
|
|
});
|
|
|
|
describe("renderModuleList", () => {
|
|
test("should render a list of modules", () => {
|
|
const container = document.getElementById("module-list");
|
|
const modules = [
|
|
{ id: "mod1", title: "Module 1", lessons: [{ title: "Lesson 1" }] },
|
|
{ id: "mod2", title: "Module 2", lessons: [{ title: "Lesson 2" }] }
|
|
];
|
|
const onSelectModule = vi.fn();
|
|
const onSelectLesson = vi.fn();
|
|
|
|
renderModuleList(container, modules, onSelectModule, onSelectLesson);
|
|
|
|
// Check if module headers are created (heading is now in HTML, not added by renderer)
|
|
const moduleHeaders = container.querySelectorAll(".module-header");
|
|
expect(moduleHeaders.length).toBe(2);
|
|
|
|
// Module titles should be in the headers
|
|
expect(moduleHeaders[0].textContent).toContain("Module 1");
|
|
expect(moduleHeaders[1].textContent).toContain("Module 2");
|
|
});
|
|
|
|
test("should handle empty module list", () => {
|
|
const container = document.getElementById("module-list");
|
|
renderModuleList(container, [], vi.fn(), vi.fn());
|
|
|
|
// Container should be empty (heading is now in HTML, not added by renderer)
|
|
expect(container.innerHTML).toBe("");
|
|
expect(container.querySelectorAll(".module-header").length).toBe(0);
|
|
});
|
|
|
|
test("should expand module and show lessons on click", () => {
|
|
const container = document.getElementById("module-list");
|
|
const modules = [{ id: "mod1", title: "Module 1", lessons: [{ title: "Lesson A" }, { title: "Lesson B" }] }];
|
|
const onSelectLesson = vi.fn();
|
|
|
|
renderModuleList(container, modules, vi.fn(), onSelectLesson);
|
|
|
|
// Lessons should be hidden initially
|
|
const lessonsContainer = container.querySelector(".lessons-container");
|
|
expect(lessonsContainer.style.display).toBe("none");
|
|
|
|
// Click module header to expand
|
|
const moduleHeader = container.querySelector(".module-header");
|
|
moduleHeader.click();
|
|
|
|
// Lessons should now be visible
|
|
expect(lessonsContainer.style.display).toBe("block");
|
|
|
|
// Click a lesson
|
|
const lessonItems = container.querySelectorAll(".lesson-list-item");
|
|
expect(lessonItems.length).toBe(2);
|
|
lessonItems[0].click();
|
|
expect(onSelectLesson).toHaveBeenCalledWith("mod1", 0);
|
|
});
|
|
});
|
|
|
|
describe("renderLesson", () => {
|
|
test("should render lesson content correctly", () => {
|
|
const titleEl = document.getElementById("title");
|
|
const descriptionEl = document.getElementById("description");
|
|
const taskEl = document.getElementById("task");
|
|
const previewEl = document.getElementById("preview");
|
|
const prefixEl = document.getElementById("prefix");
|
|
const inputEl = document.getElementById("input");
|
|
const suffixEl = document.getElementById("suffix");
|
|
|
|
const lesson = {
|
|
title: "Test Lesson",
|
|
description: "<p>Description text</p>",
|
|
task: "<p>Task instructions</p>",
|
|
codePrefix: "body {",
|
|
initialCode: " color: red;",
|
|
codeSuffix: "}"
|
|
};
|
|
|
|
renderLesson(titleEl, descriptionEl, taskEl, previewEl, prefixEl, inputEl, suffixEl, lesson);
|
|
|
|
expect(titleEl.textContent).toBe("Test Lesson");
|
|
expect(descriptionEl.innerHTML).toBe("<p>Description text</p>");
|
|
expect(taskEl.innerHTML).toBe("<p>Task instructions</p>");
|
|
// Note: prefix/suffix elements are no longer populated by renderLesson (handled by LessonEngine)
|
|
expect(inputEl.value).toBe(" color: red;");
|
|
});
|
|
|
|
test("should handle missing lesson data with defaults", () => {
|
|
const titleEl = document.getElementById("title");
|
|
const descriptionEl = document.getElementById("description");
|
|
const taskEl = document.getElementById("task");
|
|
const prefixEl = document.getElementById("prefix");
|
|
const inputEl = document.getElementById("input");
|
|
const suffixEl = document.getElementById("suffix");
|
|
|
|
// Empty lesson object
|
|
const lesson = {};
|
|
|
|
renderLesson(titleEl, descriptionEl, taskEl, document.getElementById("preview"), prefixEl, inputEl, suffixEl, lesson);
|
|
|
|
expect(titleEl.textContent).toBe("Untitled Lesson");
|
|
expect(descriptionEl.innerHTML).toBe("");
|
|
expect(taskEl.innerHTML).toBe("");
|
|
expect(inputEl.value).toBe("");
|
|
});
|
|
});
|
|
|
|
describe("renderLesson - Concept Section", () => {
|
|
beforeEach(() => {
|
|
// Add concept section elements to the DOM
|
|
document.body.innerHTML += `
|
|
<details id="concept-section" style="display: none;">
|
|
<summary data-i18n="whyThisWorks">Why This Works</summary>
|
|
<div id="concept-explanation"></div>
|
|
<div id="concept-diagram"></div>
|
|
<div id="concept-container-vs-item"></div>
|
|
</details>
|
|
`;
|
|
});
|
|
|
|
test("should render concept section with all fields", () => {
|
|
const lesson = {
|
|
title: "Test Lesson with Concept",
|
|
description: "Description",
|
|
task: "Task",
|
|
concept: {
|
|
explanation: "This is why flexbox works the way it does.",
|
|
diagram: "<pre>Container -> Items</pre>",
|
|
containerVsItem: "display: flex is a container property"
|
|
}
|
|
};
|
|
|
|
renderLesson(
|
|
document.getElementById("title"),
|
|
document.getElementById("description"),
|
|
document.getElementById("task"),
|
|
document.getElementById("preview"),
|
|
document.getElementById("prefix"),
|
|
document.getElementById("input"),
|
|
document.getElementById("suffix"),
|
|
lesson
|
|
);
|
|
|
|
const conceptSection = document.getElementById("concept-section");
|
|
const conceptExplanation = document.getElementById("concept-explanation");
|
|
const conceptDiagram = document.getElementById("concept-diagram");
|
|
const conceptContainerVsItem = document.getElementById("concept-container-vs-item");
|
|
|
|
// Concept section should be visible
|
|
expect(conceptSection.style.display).toBe("");
|
|
|
|
// All fields should be populated
|
|
expect(conceptExplanation.textContent).toBe("This is why flexbox works the way it does.");
|
|
expect(conceptDiagram.innerHTML).toBe("<pre>Container -> Items</pre>");
|
|
expect(conceptContainerVsItem.textContent).toBe("display: flex is a container property");
|
|
});
|
|
|
|
test("should render concept section with only required explanation field", () => {
|
|
const lesson = {
|
|
title: "Test Lesson",
|
|
concept: {
|
|
explanation: "This explains the concept."
|
|
}
|
|
};
|
|
|
|
renderLesson(
|
|
document.getElementById("title"),
|
|
document.getElementById("description"),
|
|
document.getElementById("task"),
|
|
document.getElementById("preview"),
|
|
document.getElementById("prefix"),
|
|
document.getElementById("input"),
|
|
document.getElementById("suffix"),
|
|
lesson
|
|
);
|
|
|
|
const conceptSection = document.getElementById("concept-section");
|
|
const conceptExplanation = document.getElementById("concept-explanation");
|
|
const conceptDiagram = document.getElementById("concept-diagram");
|
|
const conceptContainerVsItem = document.getElementById("concept-container-vs-item");
|
|
|
|
// Concept section should be visible
|
|
expect(conceptSection.style.display).toBe("");
|
|
|
|
// Explanation should be populated
|
|
expect(conceptExplanation.textContent).toBe("This explains the concept.");
|
|
|
|
// Optional fields should be empty
|
|
expect(conceptDiagram.innerHTML).toBe("");
|
|
expect(conceptContainerVsItem.textContent).toBe("");
|
|
});
|
|
|
|
test("should hide concept section when lesson has no concept", () => {
|
|
const lesson = {
|
|
title: "Test Lesson Without Concept",
|
|
description: "Description",
|
|
task: "Task"
|
|
};
|
|
|
|
renderLesson(
|
|
document.getElementById("title"),
|
|
document.getElementById("description"),
|
|
document.getElementById("task"),
|
|
document.getElementById("preview"),
|
|
document.getElementById("prefix"),
|
|
document.getElementById("input"),
|
|
document.getElementById("suffix"),
|
|
lesson
|
|
);
|
|
|
|
const conceptSection = document.getElementById("concept-section");
|
|
|
|
// Concept section should be hidden
|
|
expect(conceptSection.style.display).toBe("none");
|
|
});
|
|
|
|
test("should hide concept section when concept has no explanation", () => {
|
|
const lesson = {
|
|
title: "Test Lesson",
|
|
concept: {
|
|
diagram: "<pre>Diagram only</pre>"
|
|
}
|
|
};
|
|
|
|
renderLesson(
|
|
document.getElementById("title"),
|
|
document.getElementById("description"),
|
|
document.getElementById("task"),
|
|
document.getElementById("preview"),
|
|
document.getElementById("prefix"),
|
|
document.getElementById("input"),
|
|
document.getElementById("suffix"),
|
|
lesson
|
|
);
|
|
|
|
const conceptSection = document.getElementById("concept-section");
|
|
|
|
// Concept section should be hidden when explanation is missing
|
|
expect(conceptSection.style.display).toBe("none");
|
|
});
|
|
|
|
test("should clear optional fields when switching to lesson without them", () => {
|
|
// First lesson with all concept fields
|
|
const lessonWithFullConcept = {
|
|
title: "Lesson 1",
|
|
concept: {
|
|
explanation: "First explanation",
|
|
diagram: "<pre>First diagram</pre>",
|
|
containerVsItem: "First container vs item"
|
|
}
|
|
};
|
|
|
|
renderLesson(
|
|
document.getElementById("title"),
|
|
document.getElementById("description"),
|
|
document.getElementById("task"),
|
|
document.getElementById("preview"),
|
|
document.getElementById("prefix"),
|
|
document.getElementById("input"),
|
|
document.getElementById("suffix"),
|
|
lessonWithFullConcept
|
|
);
|
|
|
|
const conceptDiagram = document.getElementById("concept-diagram");
|
|
const conceptContainerVsItem = document.getElementById("concept-container-vs-item");
|
|
|
|
expect(conceptDiagram.innerHTML).toBe("<pre>First diagram</pre>");
|
|
expect(conceptContainerVsItem.textContent).toBe("First container vs item");
|
|
|
|
// Second lesson with only explanation
|
|
const lessonWithMinimalConcept = {
|
|
title: "Lesson 2",
|
|
concept: {
|
|
explanation: "Second explanation"
|
|
}
|
|
};
|
|
|
|
renderLesson(
|
|
document.getElementById("title"),
|
|
document.getElementById("description"),
|
|
document.getElementById("task"),
|
|
document.getElementById("preview"),
|
|
document.getElementById("prefix"),
|
|
document.getElementById("input"),
|
|
document.getElementById("suffix"),
|
|
lessonWithMinimalConcept
|
|
);
|
|
|
|
// Optional fields should be cleared
|
|
expect(conceptDiagram.innerHTML).toBe("");
|
|
expect(conceptContainerVsItem.textContent).toBe("");
|
|
});
|
|
|
|
test("should handle concept section collapse/expand", () => {
|
|
const lesson = {
|
|
title: "Test Lesson",
|
|
concept: {
|
|
explanation: "Test explanation"
|
|
}
|
|
};
|
|
|
|
renderLesson(
|
|
document.getElementById("title"),
|
|
document.getElementById("description"),
|
|
document.getElementById("task"),
|
|
document.getElementById("preview"),
|
|
document.getElementById("prefix"),
|
|
document.getElementById("input"),
|
|
document.getElementById("suffix"),
|
|
lesson
|
|
);
|
|
|
|
const conceptSection = document.getElementById("concept-section");
|
|
|
|
// Details element should use native collapse/expand behavior
|
|
expect(conceptSection.tagName).toBe("DETAILS");
|
|
|
|
// Initially closed (default browser behavior)
|
|
expect(conceptSection.open).toBeFalsy();
|
|
|
|
// Simulate user opening the details element
|
|
conceptSection.open = true;
|
|
expect(conceptSection.open).toBeTruthy();
|
|
|
|
// Simulate user closing the details element
|
|
conceptSection.open = false;
|
|
expect(conceptSection.open).toBeFalsy();
|
|
});
|
|
|
|
test("should handle missing concept section elements gracefully", () => {
|
|
// Remove concept section from DOM
|
|
const conceptSection = document.getElementById("concept-section");
|
|
if (conceptSection) {
|
|
conceptSection.remove();
|
|
}
|
|
|
|
const lesson = {
|
|
title: "Test Lesson",
|
|
concept: {
|
|
explanation: "Test explanation"
|
|
}
|
|
};
|
|
|
|
// Should not throw error when elements are missing
|
|
expect(() => {
|
|
renderLesson(
|
|
document.getElementById("title"),
|
|
document.getElementById("description"),
|
|
document.getElementById("task"),
|
|
document.getElementById("preview"),
|
|
document.getElementById("prefix"),
|
|
document.getElementById("input"),
|
|
document.getElementById("suffix"),
|
|
lesson
|
|
);
|
|
}).not.toThrow();
|
|
});
|
|
});
|
|
|
|
describe("renderLevelIndicator", () => {
|
|
test("should update level indicator text", () => {
|
|
const element = document.getElementById("level-indicator");
|
|
|
|
renderLevelIndicator(element, 3, 10);
|
|
expect(element.textContent).toBe("Lesson 3 / 10");
|
|
|
|
renderLevelIndicator(element, 1, 5);
|
|
expect(element.textContent).toBe("Lesson 1 / 5");
|
|
});
|
|
});
|
|
|
|
describe.skip("showFeedback and clearFeedback", () => {
|
|
test("should create success feedback element", () => {
|
|
const editor = document.getElementById("code-editor");
|
|
showFeedback(true, "Great job!");
|
|
|
|
const feedback = document.querySelector(".feedback-success");
|
|
expect(feedback).not.toBeNull();
|
|
expect(feedback.textContent).toBe("Great job!");
|
|
|
|
// Test auto clearing with setTimeout
|
|
vi.useFakeTimers();
|
|
showFeedback(true, "Auto clear test");
|
|
vi.advanceTimersByTime(5001);
|
|
expect(document.querySelector(".feedback-success")).toBeNull();
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test("should create error feedback element", () => {
|
|
showFeedback(false, "Try again");
|
|
|
|
const feedback = document.querySelector(".feedback-error");
|
|
expect(feedback).not.toBeNull();
|
|
expect(feedback.textContent).toBe("Try again");
|
|
|
|
// Error feedback should not auto-clear
|
|
vi.useFakeTimers();
|
|
vi.advanceTimersByTime(5001);
|
|
expect(document.querySelector(".feedback-error")).not.toBeNull();
|
|
vi.useRealTimers();
|
|
});
|
|
|
|
test("should clear existing feedback", () => {
|
|
showFeedback(false, "Error message");
|
|
expect(document.querySelector(".feedback-error")).not.toBeNull();
|
|
|
|
clearFeedback();
|
|
expect(document.querySelector(".feedback-error")).toBeNull();
|
|
|
|
// Should work when called multiple times
|
|
clearFeedback();
|
|
});
|
|
});
|
|
});
|