feat: add HTML lessons mode and side-by-side comparison UI

- Add HTML mode support with new validation types (element_exists, element_count, attribute_value, element_text, parent_child, sibling) - Create 3 HTML lesson modules: Elements, Forms Basic, Forms Validation - Implement side-by-side preview comparison (Your Output vs Expected) - Add merge animation with "Perfect Match!" overlay on validation success - Render expected output from solutionCode field in lesson JSON - Update schema to support HTML mode and solutionCode - Reorder modules: HTML first, then CSS, then Tailwind - Update tests for new functionality
2025-12-21 22:12:00 +01:00
parent 394490c003
commit 50c4d51523
15 changed files with 1136 additions and 66 deletions
--- a/tests/unit/lessons.test.js
+++ b/tests/unit/lessons.test.js
@@ -1,26 +1,36 @@
 import { describe, test, expect, vi, beforeEach } from "vitest";
 import { loadModules, getModuleById, loadModuleFromUrl, addCustomModule } from "../../src/config/lessons.js";

-// Mock the module store for testing
-vi.mock("../../lessons/flexbox.json", () => ({ default: { id: "flexbox", title: "Flexbox", lessons: [] } }));
-vi.mock("../../lessons/grid.json", () => ({ default: { id: "grid", title: "CSS Grid", lessons: [] } }));
-vi.mock("../../lessons/00-basics.json", () => ({ default: { id: "basics", title: "CSS Basics", lessons: [] } }));
-vi.mock("../../lessons/tailwindcss.json", () => ({ default: { id: "tailwind", title: "Tailwind CSS", lessons: [] } }));
-
 describe("Lessons Config Module", () => {
 	describe("loadModules", () => {
 		test("should return an array of modules", async () => {
 			const modules = await loadModules();

 			expect(Array.isArray(modules)).toBe(true);
-			expect(modules.length).toBe(4);
+			expect(modules.length).toBe(6);

 			// Check if modules have the right structure
 			const moduleIds = modules.map((m) => m.id);
-			expect(moduleIds).toContain("basics");
-			expect(moduleIds).toContain("flexbox");
-			expect(moduleIds).toContain("grid");
-			expect(moduleIds).toContain("tailwind");
+			// HTML modules (first)
+			expect(moduleIds).toContain("html-elements");
+			expect(moduleIds).toContain("html-forms-basic");
+			expect(moduleIds).toContain("html-forms-validation");
+			// CSS modules
+			expect(moduleIds).toContain("css-basic-selectors");
+			expect(moduleIds).toContain("css-advanced-selectors");
+			// Tailwind
+			expect(moduleIds).toContain("tailwind-basics");
+		});
+
+		test("should have mode set on each lesson", async () => {
+			const modules = await loadModules();
+
+			modules.forEach((module) => {
+				module.lessons.forEach((lesson) => {
+					expect(lesson.mode).toBeDefined();
+					expect(["html", "css", "tailwind"]).toContain(lesson.mode);
+				});
+			});
 		});
 	});

@@ -29,10 +39,10 @@ describe("Lessons Config Module", () => {
 			// Load modules first to populate the module store
 			await loadModules();

-			const flexboxModule = getModuleById("flexbox");
-			expect(flexboxModule).not.toBeNull();
-			expect(flexboxModule.id).toBe("flexbox");
-			expect(flexboxModule.title).toBe("Flexbox");
+			const htmlModule = getModuleById("html-elements");
+			expect(htmlModule).not.toBeNull();
+			expect(htmlModule.id).toBe("html-elements");
+			expect(htmlModule.mode).toBe("html");
 		});

 		test("should return null for non-existent module ID", async () => {
--- a/tests/unit/renderer.test.js
+++ b/tests/unit/renderer.test.js
@@ -22,33 +22,59 @@ describe("Renderer Module", () => {
 		test("should render a list of modules", () => {
 			const container = document.getElementById("module-list");
 			const modules = [
-				{ id: "mod1", title: "Module 1" },
-				{ id: "mod2", title: "Module 2" }
+				{ 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);
+			renderModuleList(container, modules, onSelectModule, onSelectLesson);

 			// Check if heading is created
-			expect(container.innerHTML).toContain("<h3>Modules</h3>");
+			expect(container.innerHTML).toContain("<h3>Lessons</h3>");

-			// Check if module items are created
-			const moduleItems = container.querySelectorAll(".module-list-item");
-			expect(moduleItems.length).toBe(2);
-			expect(moduleItems[0].textContent).toBe("Module 1");
-			expect(moduleItems[1].textContent).toBe("Module 2");
+			// Check if module headers are created
+			const moduleHeaders = container.querySelectorAll(".module-header");
+			expect(moduleHeaders.length).toBe(2);

-			// Test click event
-			moduleItems[0].click();
-			expect(onSelectModule).toHaveBeenCalledWith("mod1");
+			// 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());
+			renderModuleList(container, [], vi.fn(), vi.fn());

-			expect(container.innerHTML).toContain("<h3>Modules</h3>");
-			expect(container.querySelectorAll(".module-list-item").length).toBe(0);
+			expect(container.innerHTML).toContain("<h3>Lessons</h3>");
+			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);
 		});
 	});

@@ -76,9 +102,8 @@ describe("Renderer Module", () => {
 			expect(titleEl.textContent).toBe("Test Lesson");
 			expect(descriptionEl.innerHTML).toBe("<p>Description text</p>");
 			expect(taskEl.innerHTML).toBe("<p>Task instructions</p>");
-			expect(prefixEl.textContent).toBe("body {");
+			// Note: prefix/suffix elements are no longer populated by renderLesson (handled by LessonEngine)
 			expect(inputEl.value).toBe("  color: red;");
-			expect(suffixEl.textContent).toBe("}");
 		});

 		test("should handle missing lesson data with defaults", () => {
@@ -97,9 +122,7 @@ describe("Renderer Module", () => {
 			expect(titleEl.textContent).toBe("Untitled Lesson");
 			expect(descriptionEl.innerHTML).toBe("");
 			expect(taskEl.innerHTML).toBe("");
-			expect(prefixEl.textContent).toBe("");
 			expect(inputEl.value).toBe("");
-			expect(suffixEl.textContent).toBe("");
 		});
 	});

--- a/tests/unit/validator.test.js
+++ b/tests/unit/validator.test.js
@@ -36,7 +36,7 @@ describe("CSS Validator", () => {
 			const result = validateUserCode(userCode, lesson);

 			expect(result.isValid).toBe(true);
-			expect(result.message).toBe("Your code looks good!");
+			expect(result.message).toBe("Your CODE looks CRISPY!");
 		});

 		it('should validate "contains" rule correctly', () => {
@@ -225,3 +225,148 @@ describe("CSS Validator", () => {
 		});
 	});
 });
+
+describe("HTML Validator", () => {
+	describe("validateUserCode with mode: html", () => {
+		it("should validate element_exists correctly", () => {
+			const userHtml = "<p>Hello world</p>";
+			const lesson = {
+				mode: "html",
+				validations: [
+					{ type: "element_exists", value: "p", message: "Add a paragraph" }
+				]
+			};
+
+			const result = validateUserCode(userHtml, lesson);
+			expect(result.isValid).toBe(true);
+
+			const failResult = validateUserCode(userHtml, {
+				mode: "html",
+				validations: [
+					{ type: "element_exists", value: "div", message: "Add a div" }
+				]
+			});
+			expect(failResult.isValid).toBe(false);
+			expect(failResult.message).toBe("Add a div");
+		});
+
+		it("should validate element_count correctly", () => {
+			const userHtml = "<ul><li>One</li><li>Two</li><li>Three</li></ul>";
+			const lesson = {
+				mode: "html",
+				validations: [
+					{ type: "element_count", value: { selector: "li", count: 3 }, message: "Need 3 items" }
+				]
+			};
+
+			const result = validateUserCode(userHtml, lesson);
+			expect(result.isValid).toBe(true);
+
+			const failLesson = {
+				mode: "html",
+				validations: [
+					{ type: "element_count", value: { selector: "li", count: 5 }, message: "Need 5 items" }
+				]
+			};
+			const failResult = validateUserCode(userHtml, failLesson);
+			expect(failResult.isValid).toBe(false);
+		});
+
+		it("should validate element_count with min correctly", () => {
+			const userHtml = "<div><span>A</span><span>B</span></div>";
+			const lesson = {
+				mode: "html",
+				validations: [
+					{ type: "element_count", value: { selector: "span", min: 2 }, message: "Need at least 2 spans" }
+				]
+			};
+
+			const result = validateUserCode(userHtml, lesson);
+			expect(result.isValid).toBe(true);
+		});
+
+		it("should validate attribute_value correctly", () => {
+			const userHtml = '<input type="email" required>';
+			const lesson = {
+				mode: "html",
+				validations: [
+					{ type: "attribute_value", value: { selector: "input", attr: "type", value: "email" } }
+				]
+			};
+
+			const result = validateUserCode(userHtml, lesson);
+			expect(result.isValid).toBe(true);
+
+			// Test boolean attribute (required)
+			const boolLesson = {
+				mode: "html",
+				validations: [
+					{ type: "attribute_value", value: { selector: "input", attr: "required", value: true } }
+				]
+			};
+			const boolResult = validateUserCode(userHtml, boolLesson);
+			expect(boolResult.isValid).toBe(true);
+		});
+
+		it("should validate parent_child correctly", () => {
+			const userHtml = "<form><label>Name</label><input></form>";
+			const lesson = {
+				mode: "html",
+				validations: [
+					{ type: "parent_child", value: { parent: "form", child: "input" }, message: "Input should be inside form" }
+				]
+			};
+
+			const result = validateUserCode(userHtml, lesson);
+			expect(result.isValid).toBe(true);
+
+			const failHtml = "<label>Name</label><input>";
+			const failResult = validateUserCode(failHtml, lesson);
+			expect(failResult.isValid).toBe(false);
+		});
+
+		it("should validate element_text correctly", () => {
+			const userHtml = "<button>Submit</button>";
+			const lesson = {
+				mode: "html",
+				validations: [
+					{ type: "element_text", value: { selector: "button", text: "Submit" } }
+				]
+			};
+
+			const result = validateUserCode(userHtml, lesson);
+			expect(result.isValid).toBe(true);
+
+			const failLesson = {
+				mode: "html",
+				validations: [
+					{ type: "element_text", value: { selector: "button", text: "Cancel" }, message: "Button should say Cancel" }
+				]
+			};
+			const failResult = validateUserCode(userHtml, failLesson);
+			expect(failResult.isValid).toBe(false);
+		});
+
+		it("should validate contains for HTML mode", () => {
+			const userHtml = '<div class="container">Content</div>';
+			const lesson = {
+				mode: "html",
+				validations: [
+					{ type: "contains", value: "container" }
+				]
+			};
+
+			const result = validateUserCode(userHtml, lesson);
+			expect(result.isValid).toBe(true);
+		});
+
+		it("should pass with no validations in HTML mode", () => {
+			const userHtml = "<p>Hello</p>";
+			const lesson = { mode: "html" };
+
+			const result = validateUserCode(userHtml, lesson);
+			expect(result.isValid).toBe(true);
+			expect(result.message).toContain("No validations specified");
+		});
+	});
+});