auto-claude: 6.1 - Add tests to verify concept section renders correc

tests/unit/renderer.test.js

@@ -122,6 +122,258 @@ describe("Renderer Module", () => {
 		});
 	});
 
+	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");