test: add 182 new tests for router, sections, renderer, and validator
Generated by wave test-gen pipeline. Coverage: - router.js: 0% → ~85% (33 tests, all 7 exports) - sections.js: 0% → ~90% (29 tests, all 5 exports) - renderer.js: partial → extended (36 tests, difficulty, feedback, sidebar) - validator.js: partial → extended (84 tests, all types + edge cases) Total: 43 → 225 tests
This commit is contained in:
538
tests/unit/renderer-extended.test.js
Normal file
538
tests/unit/renderer-extended.test.js
Normal file
@@ -0,0 +1,538 @@
|
||||
import { describe, test, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import {
|
||||
renderModuleList,
|
||||
renderLesson,
|
||||
renderLevelIndicator,
|
||||
renderDifficultyBadge,
|
||||
showFeedback,
|
||||
clearFeedback,
|
||||
updateActiveLessonInSidebar,
|
||||
computeLessonDifficulty
|
||||
} from "../../src/helpers/renderer.js";
|
||||
|
||||
// Mock i18n
|
||||
vi.mock("../../src/i18n.js", () => ({
|
||||
t: (key, params = {}) => {
|
||||
const translations = {
|
||||
lessonLabel: "Lesson",
|
||||
untitledLesson: "Untitled Lesson",
|
||||
lessonFallback: `Lesson ${params.index || ""}`,
|
||||
difficulty_easy_label: "Easy difficulty",
|
||||
difficulty_medium_label: "Medium difficulty",
|
||||
difficulty_hard_label: "Hard difficulty",
|
||||
difficulty_easy: "Easy",
|
||||
difficulty_medium: "Medium",
|
||||
difficulty_hard: "Hard"
|
||||
};
|
||||
return translations[key] || key;
|
||||
}
|
||||
}));
|
||||
|
||||
describe("Renderer Extended Coverage", () => {
|
||||
beforeEach(() => {
|
||||
document.body.innerHTML = `
|
||||
<div id="module-list"></div>
|
||||
<div class="lesson-title-row">
|
||||
<h2 id="title"></h2>
|
||||
</div>
|
||||
<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 class="editor-content"></div>
|
||||
<input type="checkbox" id="disable-feedback-toggle" checked>
|
||||
`;
|
||||
localStorage.clear();
|
||||
});
|
||||
|
||||
describe("renderModuleList - progress tracking", () => {
|
||||
test("renderModuleList_CorruptedProgress_HandlesGracefully", () => {
|
||||
const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
|
||||
localStorage.setItem("codeCrispies.progress", "not-valid-json{{{");
|
||||
|
||||
const container = document.getElementById("module-list");
|
||||
const modules = [{ id: "mod1", title: "Module 1", lessons: [{ title: "L1" }] }];
|
||||
|
||||
renderModuleList(container, modules, vi.fn(), vi.fn());
|
||||
|
||||
expect(errorSpy).toHaveBeenCalledWith(expect.stringContaining("Error parsing progress"), expect.anything());
|
||||
// Should still render modules despite parse error
|
||||
expect(container.querySelectorAll(".module-header").length).toBe(1);
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
|
||||
test("renderModuleList_CompletedModule_AddedCompletedClass", () => {
|
||||
localStorage.setItem(
|
||||
"codeCrispies.progress",
|
||||
JSON.stringify({
|
||||
mod1: { completed: [0, 1], current: 1 }
|
||||
})
|
||||
);
|
||||
|
||||
const container = document.getElementById("module-list");
|
||||
const modules = [{ id: "mod1", title: "Module 1", lessons: [{ title: "L1" }, { title: "L2" }] }];
|
||||
|
||||
renderModuleList(container, modules, vi.fn(), vi.fn());
|
||||
|
||||
const header = container.querySelector(".module-header");
|
||||
expect(header.classList.contains("completed")).toBe(true);
|
||||
});
|
||||
|
||||
test("renderModuleList_PartiallyCompleted_NoCompletedClass", () => {
|
||||
localStorage.setItem(
|
||||
"codeCrispies.progress",
|
||||
JSON.stringify({
|
||||
mod1: { completed: [0], current: 1 }
|
||||
})
|
||||
);
|
||||
|
||||
const container = document.getElementById("module-list");
|
||||
const modules = [{ id: "mod1", title: "Module 1", lessons: [{ title: "L1" }, { title: "L2" }] }];
|
||||
|
||||
renderModuleList(container, modules, vi.fn(), vi.fn());
|
||||
|
||||
const header = container.querySelector(".module-header");
|
||||
expect(header.classList.contains("completed")).toBe(false);
|
||||
});
|
||||
|
||||
test("renderModuleList_CompletedLesson_HasCompletedClass", () => {
|
||||
localStorage.setItem(
|
||||
"codeCrispies.progress",
|
||||
JSON.stringify({
|
||||
mod1: { completed: [0], current: 1 }
|
||||
})
|
||||
);
|
||||
|
||||
const container = document.getElementById("module-list");
|
||||
const modules = [{ id: "mod1", title: "Module 1", lessons: [{ title: "L1" }, { title: "L2" }] }];
|
||||
|
||||
renderModuleList(container, modules, vi.fn(), vi.fn());
|
||||
|
||||
const lessonItems = container.querySelectorAll(".lesson-list-item");
|
||||
expect(lessonItems[0].classList.contains("completed")).toBe(true);
|
||||
expect(lessonItems[1].classList.contains("completed")).toBe(false);
|
||||
});
|
||||
|
||||
test("renderModuleList_CurrentLesson_HasCurrentClass", () => {
|
||||
localStorage.setItem(
|
||||
"codeCrispies.progress",
|
||||
JSON.stringify({
|
||||
mod1: { completed: [0], current: 1 }
|
||||
})
|
||||
);
|
||||
|
||||
const container = document.getElementById("module-list");
|
||||
const modules = [{ id: "mod1", title: "Module 1", lessons: [{ title: "L1" }, { title: "L2" }] }];
|
||||
|
||||
renderModuleList(container, modules, vi.fn(), vi.fn());
|
||||
|
||||
const lessonItems = container.querySelectorAll(".lesson-list-item");
|
||||
expect(lessonItems[1].classList.contains("current")).toBe(true);
|
||||
expect(lessonItems[0].classList.contains("current")).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("renderModuleList - welcome/playground always expanded", () => {
|
||||
test("renderModuleList_WelcomeModule_AlwaysExpanded", () => {
|
||||
const container = document.getElementById("module-list");
|
||||
const modules = [{ id: "welcome", title: "Welcome", lessons: [{ title: "Intro" }] }];
|
||||
|
||||
renderModuleList(container, modules, vi.fn(), vi.fn());
|
||||
|
||||
const details = container.querySelector("details.module-container");
|
||||
expect(details.open).toBe(true);
|
||||
});
|
||||
|
||||
test("renderModuleList_PlaygroundModule_AlwaysExpanded", () => {
|
||||
const container = document.getElementById("module-list");
|
||||
const modules = [{ id: "playground", title: "Playground", lessons: [{ title: "Play" }] }];
|
||||
|
||||
renderModuleList(container, modules, vi.fn(), vi.fn());
|
||||
|
||||
const details = container.querySelector("details.module-container");
|
||||
expect(details.open).toBe(true);
|
||||
});
|
||||
|
||||
test("renderModuleList_RegularModule_CollapsedByDefault", () => {
|
||||
const container = document.getElementById("module-list");
|
||||
const modules = [{ id: "flexbox", title: "Flexbox", lessons: [{ title: "L1" }] }];
|
||||
|
||||
renderModuleList(container, modules, vi.fn(), vi.fn());
|
||||
|
||||
const details = container.querySelector("details.module-container");
|
||||
expect(details.open).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("renderModuleList - lesson fallback title", () => {
|
||||
test("renderModuleList_NoLessonTitle_UsesFallback", () => {
|
||||
const container = document.getElementById("module-list");
|
||||
const modules = [{ id: "mod1", title: "Module 1", lessons: [{}] }];
|
||||
|
||||
renderModuleList(container, modules, vi.fn(), vi.fn());
|
||||
|
||||
const lessonItem = container.querySelector(".lesson-list-item");
|
||||
expect(lessonItem.textContent).toContain("Lesson");
|
||||
});
|
||||
});
|
||||
|
||||
describe("renderModuleList - click behavior", () => {
|
||||
test("renderModuleList_LessonClick_RemovesActiveFromOthers", () => {
|
||||
const container = document.getElementById("module-list");
|
||||
const modules = [
|
||||
{
|
||||
id: "mod1",
|
||||
title: "Module 1",
|
||||
lessons: [{ title: "L1" }, { title: "L2" }]
|
||||
}
|
||||
];
|
||||
const onSelectLesson = vi.fn();
|
||||
|
||||
renderModuleList(container, modules, vi.fn(), onSelectLesson);
|
||||
|
||||
const lessonItems = container.querySelectorAll(".lesson-list-item");
|
||||
|
||||
// Click first lesson
|
||||
lessonItems[0].click();
|
||||
expect(lessonItems[0].classList.contains("active")).toBe(true);
|
||||
expect(onSelectLesson).toHaveBeenCalledWith("mod1", 0);
|
||||
|
||||
// Click second lesson
|
||||
lessonItems[1].click();
|
||||
expect(lessonItems[0].classList.contains("active")).toBe(false);
|
||||
expect(lessonItems[1].classList.contains("active")).toBe(true);
|
||||
expect(onSelectLesson).toHaveBeenCalledWith("mod1", 1);
|
||||
});
|
||||
});
|
||||
|
||||
describe("renderModuleList - module dataset", () => {
|
||||
test("renderModuleList_DataAttributes_SetCorrectly", () => {
|
||||
const container = document.getElementById("module-list");
|
||||
const modules = [{ id: "flex-mod", title: "Flex Module", lessons: [{ title: "L1" }] }];
|
||||
|
||||
renderModuleList(container, modules, vi.fn(), vi.fn());
|
||||
|
||||
const details = container.querySelector("details.module-container");
|
||||
expect(details.dataset.moduleId).toBe("flex-mod");
|
||||
|
||||
const header = container.querySelector(".module-header");
|
||||
expect(header.dataset.moduleId).toBe("flex-mod");
|
||||
|
||||
const lesson = container.querySelector(".lesson-list-item");
|
||||
expect(lesson.dataset.moduleId).toBe("flex-mod");
|
||||
expect(lesson.dataset.lessonIndex).toBe("0");
|
||||
});
|
||||
});
|
||||
|
||||
describe("renderModuleList - empty lessons", () => {
|
||||
test("renderModuleList_EmptyLessonsArray_RendersModuleOnly", () => {
|
||||
const container = document.getElementById("module-list");
|
||||
const modules = [{ id: "mod1", title: "Module 1", lessons: [] }];
|
||||
|
||||
renderModuleList(container, modules, vi.fn(), vi.fn());
|
||||
|
||||
expect(container.querySelectorAll(".module-header").length).toBe(1);
|
||||
expect(container.querySelectorAll(".lesson-list-item").length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe("renderDifficultyBadge", () => {
|
||||
test("renderDifficultyBadge_EasyLesson_CreatesEasyBadge", () => {
|
||||
const container = document.querySelector(".lesson-title-row");
|
||||
const lesson = { codePrefix: ".box {\n ", solution: "color: red;" };
|
||||
|
||||
renderDifficultyBadge(container, lesson);
|
||||
|
||||
const badge = container.querySelector(".difficulty-badge");
|
||||
expect(badge).not.toBeNull();
|
||||
expect(badge.classList.contains("difficulty-easy")).toBe(true);
|
||||
expect(badge.querySelectorAll(".bar").length).toBe(3);
|
||||
});
|
||||
|
||||
test("renderDifficultyBadge_MediumLesson_CreatesMediumBadge", () => {
|
||||
const container = document.querySelector(".lesson-title-row");
|
||||
const lesson = { codePrefix: "", solution: "p {\n color: red;\n}" };
|
||||
|
||||
renderDifficultyBadge(container, lesson);
|
||||
|
||||
const badge = container.querySelector(".difficulty-badge");
|
||||
expect(badge.classList.contains("difficulty-medium")).toBe(true);
|
||||
});
|
||||
|
||||
test("renderDifficultyBadge_HardLesson_CreatesHardBadge", () => {
|
||||
const container = document.querySelector(".lesson-title-row");
|
||||
const lesson = { codePrefix: "", solution: ".nav a {\n color: white;\n}" };
|
||||
|
||||
renderDifficultyBadge(container, lesson);
|
||||
|
||||
const badge = container.querySelector(".difficulty-badge");
|
||||
expect(badge.classList.contains("difficulty-hard")).toBe(true);
|
||||
});
|
||||
|
||||
test("renderDifficultyBadge_CalledTwice_RemovesPreviousBadge", () => {
|
||||
const container = document.querySelector(".lesson-title-row");
|
||||
const lesson1 = { codePrefix: ".box {\n ", solution: "color: red;" };
|
||||
const lesson2 = { codePrefix: "", solution: ".nav a {\n color: white;\n}" };
|
||||
|
||||
renderDifficultyBadge(container, lesson1);
|
||||
expect(container.querySelectorAll(".difficulty-wrapper").length).toBe(1);
|
||||
|
||||
renderDifficultyBadge(container, lesson2);
|
||||
expect(container.querySelectorAll(".difficulty-wrapper").length).toBe(1);
|
||||
|
||||
const badge = container.querySelector(".difficulty-badge");
|
||||
expect(badge.classList.contains("difficulty-hard")).toBe(true);
|
||||
});
|
||||
|
||||
test("renderDifficultyBadge_HasAriaLabel", () => {
|
||||
const container = document.querySelector(".lesson-title-row");
|
||||
const lesson = { codePrefix: ".box {", solution: "color: red;" };
|
||||
|
||||
renderDifficultyBadge(container, lesson);
|
||||
|
||||
const badge = container.querySelector(".difficulty-badge");
|
||||
expect(badge.getAttribute("aria-label")).toBeTruthy();
|
||||
expect(badge.getAttribute("title")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe("showFeedback", () => {
|
||||
test("showFeedback_Success_CreatesSuccessElement", () => {
|
||||
showFeedback(true, "Great job!");
|
||||
|
||||
const feedback = document.querySelector(".feedback-success");
|
||||
expect(feedback).not.toBeNull();
|
||||
expect(feedback.innerHTML).toBe("Great job!");
|
||||
});
|
||||
|
||||
test("showFeedback_Success_InsertedAfterEditorContent", () => {
|
||||
showFeedback(true, "Good!");
|
||||
|
||||
const editorContent = document.querySelector(".editor-content");
|
||||
const feedback = editorContent.nextSibling;
|
||||
expect(feedback).not.toBeNull();
|
||||
expect(feedback.classList.contains("feedback-success")).toBe(true);
|
||||
});
|
||||
|
||||
test("showFeedback_Error_ToggleChecked_ShowsError", () => {
|
||||
const toggle = document.getElementById("disable-feedback-toggle");
|
||||
toggle.checked = true;
|
||||
|
||||
showFeedback(false, "Try again");
|
||||
|
||||
const feedback = document.querySelector(".feedback-error");
|
||||
expect(feedback).not.toBeNull();
|
||||
expect(feedback.innerHTML).toBe("Try again");
|
||||
});
|
||||
|
||||
test("showFeedback_Error_ToggleUnchecked_HidesError", () => {
|
||||
const toggle = document.getElementById("disable-feedback-toggle");
|
||||
toggle.checked = false;
|
||||
|
||||
showFeedback(false, "Try again");
|
||||
|
||||
const feedback = document.querySelector(".feedback-error");
|
||||
expect(feedback).toBeNull();
|
||||
});
|
||||
|
||||
test("showFeedback_Error_AutoClearsAfterTimeout", () => {
|
||||
vi.useFakeTimers();
|
||||
const toggle = document.getElementById("disable-feedback-toggle");
|
||||
toggle.checked = true;
|
||||
|
||||
showFeedback(false, "Error!");
|
||||
|
||||
expect(document.querySelector(".feedback-error")).not.toBeNull();
|
||||
|
||||
vi.advanceTimersByTime(3000);
|
||||
|
||||
expect(document.querySelector(".feedback-error")).toBeNull();
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
test("showFeedback_Success_DoesNotAutoCleanup", () => {
|
||||
vi.useFakeTimers();
|
||||
|
||||
showFeedback(true, "Good!");
|
||||
|
||||
vi.advanceTimersByTime(5000);
|
||||
|
||||
expect(document.querySelector(".feedback-success")).not.toBeNull();
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
test("showFeedback_CalledTwice_ClearsPrevious", () => {
|
||||
showFeedback(true, "First");
|
||||
showFeedback(true, "Second");
|
||||
|
||||
const feedbacks = document.querySelectorAll(".feedback-success");
|
||||
expect(feedbacks.length).toBe(1);
|
||||
expect(feedbacks[0].innerHTML).toBe("Second");
|
||||
});
|
||||
});
|
||||
|
||||
describe("clearFeedback", () => {
|
||||
test("clearFeedback_NoExistingFeedback_DoesNotThrow", () => {
|
||||
expect(() => clearFeedback()).not.toThrow();
|
||||
});
|
||||
|
||||
test("clearFeedback_ExistingFeedback_RemovesIt", () => {
|
||||
showFeedback(true, "Test");
|
||||
expect(document.querySelector(".feedback-success")).not.toBeNull();
|
||||
|
||||
clearFeedback();
|
||||
expect(document.querySelector(".feedback-success")).toBeNull();
|
||||
});
|
||||
|
||||
test("clearFeedback_CalledMultipleTimes_Safe", () => {
|
||||
showFeedback(true, "Test");
|
||||
clearFeedback();
|
||||
clearFeedback();
|
||||
clearFeedback();
|
||||
expect(document.querySelector(".feedback-success")).toBeNull();
|
||||
});
|
||||
|
||||
test("clearFeedback_ClearsTimeout", () => {
|
||||
vi.useFakeTimers();
|
||||
const toggle = document.getElementById("disable-feedback-toggle");
|
||||
toggle.checked = true;
|
||||
|
||||
showFeedback(false, "Error");
|
||||
clearFeedback();
|
||||
|
||||
// Advance past the timeout - should not throw
|
||||
vi.advanceTimersByTime(5000);
|
||||
|
||||
vi.useRealTimers();
|
||||
});
|
||||
});
|
||||
|
||||
describe("updateActiveLessonInSidebar", () => {
|
||||
beforeEach(() => {
|
||||
document.body.innerHTML = `
|
||||
<details class="module-container" data-module-id="mod1">
|
||||
<summary class="module-header">Module 1</summary>
|
||||
<div class="lessons-container">
|
||||
<button class="lesson-list-item active" data-module-id="mod1" data-lesson-index="0">L1</button>
|
||||
<button class="lesson-list-item" data-module-id="mod1" data-lesson-index="1">L2</button>
|
||||
</div>
|
||||
</details>
|
||||
<details class="module-container" data-module-id="mod2">
|
||||
<summary class="module-header">Module 2</summary>
|
||||
<div class="lessons-container">
|
||||
<button class="lesson-list-item" data-module-id="mod2" data-lesson-index="0">L1</button>
|
||||
</div>
|
||||
</details>
|
||||
`;
|
||||
// Mock scrollIntoView on all lesson items (not available in jsdom)
|
||||
document.querySelectorAll(".lesson-list-item").forEach((el) => {
|
||||
el.scrollIntoView = vi.fn();
|
||||
});
|
||||
});
|
||||
|
||||
test("updateActiveLessonInSidebar_ValidLesson_ActivatesCorrectItem", () => {
|
||||
updateActiveLessonInSidebar("mod1", 1);
|
||||
|
||||
const items = document.querySelectorAll(".lesson-list-item");
|
||||
expect(items[0].classList.contains("active")).toBe(false);
|
||||
expect(items[1].classList.contains("active")).toBe(true);
|
||||
});
|
||||
|
||||
test("updateActiveLessonInSidebar_DifferentModule_ExpandsParent", () => {
|
||||
const details = document.querySelector('details[data-module-id="mod2"]');
|
||||
expect(details.open).toBe(false);
|
||||
|
||||
updateActiveLessonInSidebar("mod2", 0);
|
||||
|
||||
expect(details.open).toBe(true);
|
||||
const mod2Lesson = document.querySelector('.lesson-list-item[data-module-id="mod2"]');
|
||||
expect(mod2Lesson.classList.contains("active")).toBe(true);
|
||||
});
|
||||
|
||||
test("updateActiveLessonInSidebar_RemovesPreviousActive", () => {
|
||||
const firstItem = document.querySelector('.lesson-list-item[data-module-id="mod1"][data-lesson-index="0"]');
|
||||
expect(firstItem.classList.contains("active")).toBe(true);
|
||||
|
||||
updateActiveLessonInSidebar("mod2", 0);
|
||||
|
||||
expect(firstItem.classList.contains("active")).toBe(false);
|
||||
});
|
||||
|
||||
test("updateActiveLessonInSidebar_NonExistentItem_DoesNotThrow", () => {
|
||||
expect(() => {
|
||||
updateActiveLessonInSidebar("nonexistent", 99);
|
||||
}).not.toThrow();
|
||||
|
||||
// All active classes should still be removed
|
||||
const activeItems = document.querySelectorAll(".lesson-list-item.active");
|
||||
expect(activeItems.length).toBe(0);
|
||||
});
|
||||
|
||||
test("updateActiveLessonInSidebar_ScrollsToLesson", () => {
|
||||
const targetItem = document.querySelector('.lesson-list-item[data-module-id="mod1"][data-lesson-index="1"]');
|
||||
|
||||
updateActiveLessonInSidebar("mod1", 1);
|
||||
|
||||
expect(targetItem.scrollIntoView).toHaveBeenCalledWith({ behavior: "smooth", block: "nearest" });
|
||||
});
|
||||
});
|
||||
|
||||
describe("computeLessonDifficulty - additional edge cases", () => {
|
||||
test("computeLessonDifficulty_NoSolution_ReturnsMedium", () => {
|
||||
expect(computeLessonDifficulty({ codePrefix: "" })).toBe("medium");
|
||||
});
|
||||
|
||||
test("computeLessonDifficulty_SolutionNoBrace_ReturnsMedium", () => {
|
||||
expect(
|
||||
computeLessonDifficulty({
|
||||
codePrefix: "",
|
||||
solution: "color: red;"
|
||||
})
|
||||
).toBe("medium");
|
||||
});
|
||||
|
||||
test("computeLessonDifficulty_CodePrefixWithBrace_IgnoresSolution", () => {
|
||||
expect(
|
||||
computeLessonDifficulty({
|
||||
codePrefix: ".nav a {",
|
||||
solution: ".nav a {\n color: white;\n}"
|
||||
})
|
||||
).toBe("easy");
|
||||
});
|
||||
|
||||
test("computeLessonDifficulty_NullCodePrefix_ReturnsMedium", () => {
|
||||
expect(computeLessonDifficulty({ codePrefix: null, solution: null })).toBe("medium");
|
||||
});
|
||||
});
|
||||
|
||||
describe("renderLesson - edge cases", () => {
|
||||
test("renderLesson_NullInputEl_DoesNotThrow", () => {
|
||||
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 suffixEl = document.getElementById("suffix");
|
||||
const lesson = { title: "Test", description: "Desc", task: "Task" };
|
||||
|
||||
expect(() => {
|
||||
renderLesson(titleEl, descriptionEl, taskEl, previewEl, prefixEl, null, suffixEl, lesson);
|
||||
}).not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe("renderLevelIndicator - formatting", () => {
|
||||
test("renderLevelIndicator_ContainsLabelSpan", () => {
|
||||
const element = document.getElementById("level-indicator");
|
||||
renderLevelIndicator(element, 5, 12);
|
||||
|
||||
const label = element.querySelector(".level-label");
|
||||
expect(label).not.toBeNull();
|
||||
expect(label.textContent).toBe("Lesson");
|
||||
expect(element.textContent).toContain("5 / 12");
|
||||
});
|
||||
});
|
||||
});
|
||||
232
tests/unit/router.test.js
Normal file
232
tests/unit/router.test.js
Normal file
@@ -0,0 +1,232 @@
|
||||
import { describe, test, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { parseHash, updateHash, navigateTo, replaceHash, replaceTo, getShareableUrl, getSectionIds, RouteType } from "../../src/helpers/router.js";
|
||||
|
||||
describe("Router", () => {
|
||||
let pushStateSpy;
|
||||
let replaceStateSpy;
|
||||
|
||||
beforeEach(() => {
|
||||
// Reset hash
|
||||
window.location.hash = "";
|
||||
pushStateSpy = vi.spyOn(history, "pushState").mockImplementation(() => {});
|
||||
replaceStateSpy = vi.spyOn(history, "replaceState").mockImplementation(() => {});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
pushStateSpy.mockRestore();
|
||||
replaceStateSpy.mockRestore();
|
||||
});
|
||||
|
||||
describe("RouteType", () => {
|
||||
test("RouteType_Constants_CorrectValues", () => {
|
||||
expect(RouteType.HOME).toBe("home");
|
||||
expect(RouteType.SECTION).toBe("section");
|
||||
expect(RouteType.REFERENCE).toBe("reference");
|
||||
expect(RouteType.LESSON).toBe("lesson");
|
||||
expect(RouteType.LANGUAGE).toBe("language");
|
||||
});
|
||||
});
|
||||
|
||||
describe("parseHash", () => {
|
||||
test("parseHash_EmptyHash_ReturnsHome", () => {
|
||||
window.location.hash = "";
|
||||
const result = parseHash();
|
||||
expect(result).toEqual({ type: RouteType.HOME });
|
||||
});
|
||||
|
||||
test("parseHash_HashOnly_ReturnsHome", () => {
|
||||
window.location.hash = "#";
|
||||
const result = parseHash();
|
||||
expect(result).toEqual({ type: RouteType.HOME });
|
||||
});
|
||||
|
||||
test.each([
|
||||
["de", "de"],
|
||||
["pl", "pl"],
|
||||
["ar", "ar"],
|
||||
["es", "es"],
|
||||
["en", "en"],
|
||||
["uk", "uk"]
|
||||
])("parseHash_LanguageCode_%s_ReturnsLanguageRoute", (code, expectedLang) => {
|
||||
window.location.hash = `#${code}`;
|
||||
const result = parseHash();
|
||||
expect(result).toEqual({ type: RouteType.LANGUAGE, lang: expectedLang });
|
||||
});
|
||||
|
||||
test.each([
|
||||
["css", "css"],
|
||||
["html", "html"],
|
||||
["markdown", "markdown"]
|
||||
])("parseHash_SectionId_%s_ReturnsSectionRoute", (sectionId, expectedId) => {
|
||||
window.location.hash = `#${sectionId}`;
|
||||
const result = parseHash();
|
||||
expect(result).toEqual({ type: RouteType.SECTION, sectionId: expectedId });
|
||||
});
|
||||
|
||||
test("parseHash_ReferenceWithoutSubpage_ReturnsReferenceRouteNullRefId", () => {
|
||||
window.location.hash = "#reference";
|
||||
const result = parseHash();
|
||||
expect(result).toEqual({ type: RouteType.REFERENCE, refId: null });
|
||||
});
|
||||
|
||||
test("parseHash_ReferenceWithSubpage_ReturnsReferenceRouteWithRefId", () => {
|
||||
window.location.hash = "#reference/css";
|
||||
const result = parseHash();
|
||||
expect(result).toEqual({ type: RouteType.REFERENCE, refId: "css" });
|
||||
});
|
||||
|
||||
test("parseHash_ReferenceWithFlexboxSubpage_ReturnsCorrectRefId", () => {
|
||||
window.location.hash = "#reference/flexbox";
|
||||
const result = parseHash();
|
||||
expect(result).toEqual({ type: RouteType.REFERENCE, refId: "flexbox" });
|
||||
});
|
||||
|
||||
test("parseHash_SingleUnknownSegment_ReturnsLessonWithIndex0", () => {
|
||||
window.location.hash = "#flexbox";
|
||||
const result = parseHash();
|
||||
expect(result).toEqual({ type: RouteType.LESSON, moduleId: "flexbox", lessonIndex: 0 });
|
||||
});
|
||||
|
||||
test("parseHash_ModuleWithLessonIndex_ReturnsLessonRoute", () => {
|
||||
window.location.hash = "#flexbox/2";
|
||||
const result = parseHash();
|
||||
expect(result).toEqual({ type: RouteType.LESSON, moduleId: "flexbox", lessonIndex: 2 });
|
||||
});
|
||||
|
||||
test("parseHash_ModuleWithIndex0_ReturnsLessonRoute", () => {
|
||||
window.location.hash = "#box-model/0";
|
||||
const result = parseHash();
|
||||
expect(result).toEqual({ type: RouteType.LESSON, moduleId: "box-model", lessonIndex: 0 });
|
||||
});
|
||||
|
||||
test("parseHash_NegativeLessonIndex_ReturnsNull", () => {
|
||||
window.location.hash = "#module/-1";
|
||||
const result = parseHash();
|
||||
expect(result).toBeNull();
|
||||
});
|
||||
|
||||
test("parseHash_NonNumericLessonIndex_ReturnsNull", () => {
|
||||
window.location.hash = "#module/abc";
|
||||
const result = parseHash();
|
||||
expect(result).toBeNull();
|
||||
});
|
||||
|
||||
test("parseHash_ThreeOrMoreSegments_ReturnsNull", () => {
|
||||
window.location.hash = "#a/b/c";
|
||||
const result = parseHash();
|
||||
expect(result).toBeNull();
|
||||
});
|
||||
|
||||
test("parseHash_EmptyModuleIdWithIndex_ReturnsNull", () => {
|
||||
// #/0 → parts = ["", "0"], moduleId is empty string (falsy)
|
||||
window.location.hash = "#/0";
|
||||
const result = parseHash();
|
||||
expect(result).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("updateHash", () => {
|
||||
test("updateHash_NewHash_CallsPushState", () => {
|
||||
window.location.hash = "";
|
||||
updateHash("flexbox", 2);
|
||||
expect(pushStateSpy).toHaveBeenCalledWith(null, "", "#flexbox/2");
|
||||
});
|
||||
|
||||
test("updateHash_SameHash_DoesNotCallPushState", () => {
|
||||
window.location.hash = "#flexbox/2";
|
||||
updateHash("flexbox", 2);
|
||||
expect(pushStateSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test("updateHash_DifferentModule_CallsPushState", () => {
|
||||
window.location.hash = "#flexbox/0";
|
||||
updateHash("box-model", 0);
|
||||
expect(pushStateSpy).toHaveBeenCalledWith(null, "", "#box-model/0");
|
||||
});
|
||||
});
|
||||
|
||||
describe("navigateTo", () => {
|
||||
test("navigateTo_SectionRoute_CallsPushState", () => {
|
||||
window.location.hash = "";
|
||||
navigateTo("css");
|
||||
expect(pushStateSpy).toHaveBeenCalledWith(null, "", "#css");
|
||||
});
|
||||
|
||||
test("navigateTo_EmptyRoute_NavigatesToHash", () => {
|
||||
window.location.hash = "#something";
|
||||
navigateTo("");
|
||||
expect(pushStateSpy).toHaveBeenCalledWith(null, "", "#");
|
||||
});
|
||||
|
||||
test("navigateTo_SameHash_DoesNotCallPushState", () => {
|
||||
window.location.hash = "#css";
|
||||
navigateTo("css");
|
||||
expect(pushStateSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe("replaceHash", () => {
|
||||
test("replaceHash_ValidArgs_CallsReplaceState", () => {
|
||||
replaceHash("flexbox", 3);
|
||||
expect(replaceStateSpy).toHaveBeenCalledWith(null, "", "#flexbox/3");
|
||||
});
|
||||
|
||||
test("replaceHash_Index0_FormatsCorrectly", () => {
|
||||
replaceHash("box-model", 0);
|
||||
expect(replaceStateSpy).toHaveBeenCalledWith(null, "", "#box-model/0");
|
||||
});
|
||||
});
|
||||
|
||||
describe("replaceTo", () => {
|
||||
test("replaceTo_Route_CallsReplaceState", () => {
|
||||
replaceTo("css");
|
||||
expect(replaceStateSpy).toHaveBeenCalledWith(null, "", "#css");
|
||||
});
|
||||
|
||||
test("replaceTo_EmptyRoute_ReplacesToHash", () => {
|
||||
replaceTo("");
|
||||
expect(replaceStateSpy).toHaveBeenCalledWith(null, "", "#");
|
||||
});
|
||||
|
||||
test("replaceTo_ReferenceRoute_FormatsCorrectly", () => {
|
||||
replaceTo("reference/flexbox");
|
||||
expect(replaceStateSpy).toHaveBeenCalledWith(null, "", "#reference/flexbox");
|
||||
});
|
||||
});
|
||||
|
||||
describe("getShareableUrl", () => {
|
||||
test("getShareableUrl_ValidArgs_ReturnsFullUrl", () => {
|
||||
const url = getShareableUrl("flexbox", 2);
|
||||
expect(url).toContain("#flexbox/2");
|
||||
expect(url).toMatch(/^https?:\/\/.+#flexbox\/2$/);
|
||||
});
|
||||
|
||||
test("getShareableUrl_Index0_IncludesIndex", () => {
|
||||
const url = getShareableUrl("box-model", 0);
|
||||
expect(url).toContain("#box-model/0");
|
||||
});
|
||||
});
|
||||
|
||||
describe("getSectionIds", () => {
|
||||
test("getSectionIds_ReturnsCopy_NotOriginalArray", () => {
|
||||
const ids1 = getSectionIds();
|
||||
const ids2 = getSectionIds();
|
||||
expect(ids1).toEqual(ids2);
|
||||
expect(ids1).not.toBe(ids2); // Different references
|
||||
});
|
||||
|
||||
test("getSectionIds_ContainsExpectedSections", () => {
|
||||
const ids = getSectionIds();
|
||||
expect(ids).toContain("css");
|
||||
expect(ids).toContain("html");
|
||||
expect(ids).toContain("markdown");
|
||||
});
|
||||
|
||||
test("getSectionIds_MutatingCopy_DoesNotAffectOriginal", () => {
|
||||
const ids = getSectionIds();
|
||||
ids.push("custom");
|
||||
const freshIds = getSectionIds();
|
||||
expect(freshIds).not.toContain("custom");
|
||||
});
|
||||
});
|
||||
});
|
||||
172
tests/unit/sections.test.js
Normal file
172
tests/unit/sections.test.js
Normal file
@@ -0,0 +1,172 @@
|
||||
import { describe, test, expect } from "vitest";
|
||||
import { sections, getSection, getSectionList, getModuleSection, getModulesBySection } from "../../src/config/sections.js";
|
||||
|
||||
describe("Sections Config", () => {
|
||||
describe("sections constant", () => {
|
||||
test("sections_AllDefined_HasFourSections", () => {
|
||||
expect(Object.keys(sections)).toHaveLength(4);
|
||||
expect(sections).toHaveProperty("css");
|
||||
expect(sections).toHaveProperty("html");
|
||||
expect(sections).toHaveProperty("tailwind");
|
||||
expect(sections).toHaveProperty("markdown");
|
||||
});
|
||||
|
||||
test("sections_EachSection_HasRequiredFields", () => {
|
||||
for (const [key, section] of Object.entries(sections)) {
|
||||
expect(section.id).toBe(key);
|
||||
expect(section.title).toBeTruthy();
|
||||
expect(section.description).toBeTruthy();
|
||||
expect(section.color).toMatch(/^#[0-9a-f]{6}$/);
|
||||
expect(typeof section.order).toBe("number");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe("getSection", () => {
|
||||
test.each([
|
||||
["css", "CSS"],
|
||||
["html", "HTML"],
|
||||
["tailwind", "Tailwind CSS"],
|
||||
["markdown", "Markdown"]
|
||||
])("getSection_%s_ReturnsCorrectSection", (id, expectedTitle) => {
|
||||
const section = getSection(id);
|
||||
expect(section).not.toBeNull();
|
||||
expect(section.id).toBe(id);
|
||||
expect(section.title).toBe(expectedTitle);
|
||||
});
|
||||
|
||||
test("getSection_NonExistentId_ReturnsNull", () => {
|
||||
expect(getSection("nonexistent")).toBeNull();
|
||||
});
|
||||
|
||||
test("getSection_Undefined_ReturnsNull", () => {
|
||||
expect(getSection(undefined)).toBeNull();
|
||||
});
|
||||
|
||||
test("getSection_EmptyString_ReturnsNull", () => {
|
||||
expect(getSection("")).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("getSectionList", () => {
|
||||
test("getSectionList_Default_ReturnsSortedByOrder", () => {
|
||||
const list = getSectionList();
|
||||
expect(list).toHaveLength(4);
|
||||
|
||||
// Verify sorted by order
|
||||
for (let i = 1; i < list.length; i++) {
|
||||
expect(list[i].order).toBeGreaterThan(list[i - 1].order);
|
||||
}
|
||||
});
|
||||
|
||||
test("getSectionList_Default_CSSIsFirst", () => {
|
||||
const list = getSectionList();
|
||||
expect(list[0].id).toBe("css");
|
||||
});
|
||||
|
||||
test("getSectionList_Default_MarkdownIsLast", () => {
|
||||
const list = getSectionList();
|
||||
expect(list[list.length - 1].id).toBe("markdown");
|
||||
});
|
||||
|
||||
test("getSectionList_Default_ContainsAllSections", () => {
|
||||
const list = getSectionList();
|
||||
const ids = list.map((s) => s.id);
|
||||
expect(ids).toContain("css");
|
||||
expect(ids).toContain("html");
|
||||
expect(ids).toContain("tailwind");
|
||||
expect(ids).toContain("markdown");
|
||||
});
|
||||
});
|
||||
|
||||
describe("getModuleSection", () => {
|
||||
test("getModuleSection_ExplicitSection_UsesExplicitValue", () => {
|
||||
const module = { mode: "css", section: "html" };
|
||||
expect(getModuleSection(module)).toBe("html");
|
||||
});
|
||||
|
||||
test.each([
|
||||
["css", "css"],
|
||||
["html", "html"],
|
||||
["tailwind", "tailwind"],
|
||||
["markdown", "markdown"]
|
||||
])("getModuleSection_Mode%s_InfersCorrectSection", (mode, expectedSection) => {
|
||||
const module = { mode };
|
||||
expect(getModuleSection(module)).toBe(expectedSection);
|
||||
});
|
||||
|
||||
test("getModuleSection_NoMode_DefaultsToCss", () => {
|
||||
expect(getModuleSection({})).toBe("css");
|
||||
});
|
||||
|
||||
test("getModuleSection_UndefinedMode_DefaultsToCss", () => {
|
||||
expect(getModuleSection({ mode: undefined })).toBe("css");
|
||||
});
|
||||
|
||||
test("getModuleSection_UnknownMode_DefaultsToCss", () => {
|
||||
expect(getModuleSection({ mode: "javascript" })).toBe("css");
|
||||
});
|
||||
|
||||
test("getModuleSection_ExplicitSectionOverridesMode_UsesSection", () => {
|
||||
const module = { mode: "html", section: "tailwind" };
|
||||
expect(getModuleSection(module)).toBe("tailwind");
|
||||
});
|
||||
});
|
||||
|
||||
describe("getModulesBySection", () => {
|
||||
const testModules = [
|
||||
{ id: "css-basics", mode: "css" },
|
||||
{ id: "flexbox", mode: "css" },
|
||||
{ id: "html-elements", mode: "html" },
|
||||
{ id: "tailwind-intro", mode: "tailwind" },
|
||||
{ id: "markdown-basics", mode: "markdown" },
|
||||
{ id: "welcome", mode: "css", excludeFromProgress: true },
|
||||
{ id: "playground", mode: "css", excludeFromProgress: true }
|
||||
];
|
||||
|
||||
test("getModulesBySection_Css_ReturnsCssModules", () => {
|
||||
const result = getModulesBySection(testModules, "css");
|
||||
expect(result).toHaveLength(2);
|
||||
expect(result.map((m) => m.id)).toEqual(["css-basics", "flexbox"]);
|
||||
});
|
||||
|
||||
test("getModulesBySection_Html_ReturnsHtmlModules", () => {
|
||||
const result = getModulesBySection(testModules, "html");
|
||||
expect(result).toHaveLength(1);
|
||||
expect(result[0].id).toBe("html-elements");
|
||||
});
|
||||
|
||||
test("getModulesBySection_Tailwind_ReturnsTailwindModules", () => {
|
||||
const result = getModulesBySection(testModules, "tailwind");
|
||||
expect(result).toHaveLength(1);
|
||||
expect(result[0].id).toBe("tailwind-intro");
|
||||
});
|
||||
|
||||
test("getModulesBySection_ExcludesFromProgress_FiltersOut", () => {
|
||||
const result = getModulesBySection(testModules, "css");
|
||||
const ids = result.map((m) => m.id);
|
||||
expect(ids).not.toContain("welcome");
|
||||
expect(ids).not.toContain("playground");
|
||||
});
|
||||
|
||||
test("getModulesBySection_EmptyModules_ReturnsEmptyArray", () => {
|
||||
const result = getModulesBySection([], "css");
|
||||
expect(result).toEqual([]);
|
||||
});
|
||||
|
||||
test("getModulesBySection_NonExistentSection_ReturnsEmptyArray", () => {
|
||||
const result = getModulesBySection(testModules, "nonexistent");
|
||||
expect(result).toEqual([]);
|
||||
});
|
||||
|
||||
test("getModulesBySection_ExplicitSectionOverride_IncludesModule", () => {
|
||||
const modules = [
|
||||
{ id: "special", mode: "css", section: "html" },
|
||||
{ id: "normal-html", mode: "html" }
|
||||
];
|
||||
const result = getModulesBySection(modules, "html");
|
||||
expect(result).toHaveLength(2);
|
||||
expect(result.map((m) => m.id)).toContain("special");
|
||||
});
|
||||
});
|
||||
});
|
||||
735
tests/unit/validator-extended.test.js
Normal file
735
tests/unit/validator-extended.test.js
Normal file
@@ -0,0 +1,735 @@
|
||||
import { describe, test, expect, vi, beforeEach } from "vitest";
|
||||
import { validateUserCode, validateCssCode } from "../../src/helpers/validator.js";
|
||||
|
||||
describe("Validator Extended Coverage", () => {
|
||||
describe("validateUserCode mode dispatch", () => {
|
||||
test("validateUserCode_NoMode_DefaultsToCss", () => {
|
||||
const result = validateUserCode("color: red;", {
|
||||
validations: [{ type: "contains", value: "color: red" }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("validateUserCode_CssMode_UsesCssValidator", () => {
|
||||
const result = validateUserCode("display: flex;", {
|
||||
mode: "css",
|
||||
validations: [{ type: "contains", value: "display: flex" }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("validateUserCode_TailwindMode_UsesTailwindValidator", () => {
|
||||
const result = validateUserCode("flex items-center", {
|
||||
mode: "tailwind",
|
||||
validations: [{ type: "contains_class", value: "flex" }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("validateUserCode_HtmlMode_UsesHtmlValidator", () => {
|
||||
const result = validateUserCode("<div>Hello</div>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "element_exists", value: "div" }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("validateUserCode_UnknownMode_DefaultsToCss", () => {
|
||||
const result = validateUserCode("color: red;", {
|
||||
mode: "javascript",
|
||||
validations: [{ type: "contains", value: "color: red" }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("validateUserCode_NullLesson_Throws", () => {
|
||||
expect(() => validateUserCode("anything", null)).toThrow();
|
||||
});
|
||||
|
||||
test("validateUserCode_UndefinedLesson_Throws", () => {
|
||||
expect(() => validateUserCode("anything", undefined)).toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Tailwind validation", () => {
|
||||
test("tailwind_ContainsClass_Pass", () => {
|
||||
const result = validateUserCode("flex items-center justify-between", {
|
||||
mode: "tailwind",
|
||||
validations: [{ type: "contains_class", value: "flex" }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
expect(result.validCases).toBe(1);
|
||||
});
|
||||
|
||||
test("tailwind_ContainsClass_Fail_ReturnsMessage", () => {
|
||||
const result = validateUserCode("items-center", {
|
||||
mode: "tailwind",
|
||||
validations: [{ type: "contains_class", value: "flex", message: "Add flex class" }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.message).toBe("Add flex class");
|
||||
});
|
||||
|
||||
test("tailwind_ContainsClass_Fail_DefaultMessage", () => {
|
||||
const result = validateUserCode("items-center", {
|
||||
mode: "tailwind",
|
||||
validations: [{ type: "contains_class", value: "flex" }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.message).toContain("flex");
|
||||
});
|
||||
|
||||
test("tailwind_ContainsClass_PartialMatch_Fails", () => {
|
||||
// "flex-1" contains "flex" as substring but split should not match
|
||||
const result = validateUserCode("flex-1 items-center", {
|
||||
mode: "tailwind",
|
||||
validations: [{ type: "contains_class", value: "flex" }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
|
||||
test("tailwind_ContainsPattern_Pass", () => {
|
||||
const result = validateUserCode("text-lg font-bold", {
|
||||
mode: "tailwind",
|
||||
validations: [{ type: "contains_pattern", value: "text-\\w+" }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("tailwind_ContainsPattern_Fail_ReturnsMessage", () => {
|
||||
const result = validateUserCode("font-bold", {
|
||||
mode: "tailwind",
|
||||
validations: [{ type: "contains_pattern", value: "text-\\w+", message: "Add text size" }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.message).toBe("Add text size");
|
||||
});
|
||||
|
||||
test("tailwind_ContainsPattern_Fail_DefaultMessage", () => {
|
||||
const result = validateUserCode("font-bold", {
|
||||
mode: "tailwind",
|
||||
validations: [{ type: "contains_pattern", value: "text-\\w+" }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.message).toContain("pattern");
|
||||
});
|
||||
|
||||
test("tailwind_DefaultType_FallsBackToContains", () => {
|
||||
const result = validateUserCode("flex items-center", {
|
||||
mode: "tailwind",
|
||||
validations: [{ type: "contains", value: "items-center" }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("tailwind_NoValidations_ReturnsValid", () => {
|
||||
const result = validateUserCode("flex", { mode: "tailwind" });
|
||||
expect(result.isValid).toBe(true);
|
||||
expect(result.message).toContain("No validations specified");
|
||||
});
|
||||
|
||||
test("tailwind_NullLesson_ReturnsValid", () => {
|
||||
const result = validateUserCode("flex", { mode: "tailwind", validations: null });
|
||||
// validateTailwindClasses checks !lesson.validations
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("tailwind_MultipleValidations_AllPass", () => {
|
||||
const result = validateUserCode("flex items-center gap-4", {
|
||||
mode: "tailwind",
|
||||
validations: [
|
||||
{ type: "contains_class", value: "flex" },
|
||||
{ type: "contains_class", value: "items-center" },
|
||||
{ type: "contains_class", value: "gap-4" }
|
||||
]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
expect(result.validCases).toBe(3);
|
||||
});
|
||||
|
||||
test("tailwind_MultipleValidations_EarlyReturn", () => {
|
||||
const result = validateUserCode("flex", {
|
||||
mode: "tailwind",
|
||||
validations: [
|
||||
{ type: "contains_class", value: "flex" },
|
||||
{ type: "contains_class", value: "items-center", message: "Missing items-center" },
|
||||
{ type: "contains_class", value: "gap-4" }
|
||||
]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.message).toBe("Missing items-center");
|
||||
expect(result.validCases).toBe(1);
|
||||
});
|
||||
|
||||
test("tailwind_WhitespaceHandling_LeadingTrailing", () => {
|
||||
const result = validateUserCode(" flex items-center ", {
|
||||
mode: "tailwind",
|
||||
validations: [{ type: "contains_class", value: "flex" }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("tailwind_EmptyUserClasses_Fails", () => {
|
||||
const result = validateUserCode("", {
|
||||
mode: "tailwind",
|
||||
validations: [{ type: "contains_class", value: "flex" }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("HTML validation - sibling type", () => {
|
||||
test("sibling_ValidOrder_Passes", () => {
|
||||
const result = validateUserCode("<h1>Title</h1><p>Content</p>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("sibling_NonAdjacentButAfter_Passes", () => {
|
||||
const result = validateUserCode("<h1>Title</h1><span>Middle</span><p>Content</p>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("sibling_WrongOrder_Fails", () => {
|
||||
const result = validateUserCode("<p>Content</p><h1>Title</h1>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
|
||||
});
|
||||
// h1 is after p, so p is not a sibling after h1 - but wait, h1 exists and p is before h1...
|
||||
// Actually h1 exists. nextElementSibling of h1 is nothing. So it fails.
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
|
||||
test("sibling_FirstNotFound_Fails", () => {
|
||||
const result = validateUserCode("<p>Content</p>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "sibling", value: { first: "h1", then: "p" }, message: "h1 not found" }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.message).toBe("h1 not found");
|
||||
});
|
||||
|
||||
test("sibling_ThenNotFound_Fails", () => {
|
||||
const result = validateUserCode("<h1>Title</h1><span>Only span</span>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
|
||||
test("sibling_DefaultMessage_ContainsBothSelectors", () => {
|
||||
const result = validateUserCode("<div>Only div</div>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.message).toContain("p");
|
||||
expect(result.message).toContain("h1");
|
||||
});
|
||||
|
||||
test("sibling_NoFollowingSiblings_Fails", () => {
|
||||
const result = validateUserCode("<div><h1>Title</h1></div>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "sibling", value: { first: "h1", then: "p" } }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("HTML validation - not_contains type", () => {
|
||||
test("htmlNotContains_AbsentText_Passes", () => {
|
||||
const result = validateUserCode("<p>Hello</p>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "not_contains", value: "class=" }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("htmlNotContains_PresentText_Fails", () => {
|
||||
const result = validateUserCode('<p class="red">Hello</p>', {
|
||||
mode: "html",
|
||||
validations: [{ type: "not_contains", value: "class=", message: "Remove classes" }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.message).toBe("Remove classes");
|
||||
});
|
||||
|
||||
test("htmlNotContains_DefaultMessage", () => {
|
||||
const result = validateUserCode('<p class="red">Hello</p>', {
|
||||
mode: "html",
|
||||
validations: [{ type: "not_contains", value: "class=" }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.message).toContain("should not include");
|
||||
});
|
||||
});
|
||||
|
||||
describe("HTML validation - regex type", () => {
|
||||
test("htmlRegex_MatchingPattern_Passes", () => {
|
||||
const result = validateUserCode('<img src="photo.jpg" alt="A photo">', {
|
||||
mode: "html",
|
||||
validations: [{ type: "regex", value: 'alt="[^"]+"' }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("htmlRegex_NonMatchingPattern_Fails", () => {
|
||||
const result = validateUserCode('<img src="photo.jpg">', {
|
||||
mode: "html",
|
||||
validations: [{ type: "regex", value: 'alt="[^"]+"', message: "Add alt text" }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.message).toBe("Add alt text");
|
||||
});
|
||||
|
||||
test("htmlRegex_DefaultMessage", () => {
|
||||
const result = validateUserCode("<p>Hello</p>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "regex", value: "<h1>" }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.message).toContain("pattern");
|
||||
});
|
||||
});
|
||||
|
||||
describe("HTML validation - unknown type", () => {
|
||||
test("htmlUnknownType_SkipsAndPasses", () => {
|
||||
const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
|
||||
const result = validateUserCode("<p>Hello</p>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "unknown_type", value: "anything" }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("Unknown HTML validation type"));
|
||||
warnSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
describe("HTML validation - element_count fallback (>0)", () => {
|
||||
test("elementCount_NoCountNoMin_ChecksGreaterThanZero_Pass", () => {
|
||||
const result = validateUserCode("<ul><li>Item</li></ul>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "element_count", value: { selector: "li" } }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("elementCount_NoCountNoMin_NoElements_Fails", () => {
|
||||
const result = validateUserCode("<ul></ul>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "element_count", value: { selector: "li" } }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("HTML validation - attribute_value edge cases", () => {
|
||||
test("attributeValue_ElementNotFound_Fails", () => {
|
||||
const result = validateUserCode("<p>Hello</p>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "attribute_value", value: { selector: "input", attr: "type", value: "email" } }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
|
||||
test("attributeValue_NullValue_ChecksExists", () => {
|
||||
const result = validateUserCode('<input data-test="anything">', {
|
||||
mode: "html",
|
||||
validations: [{ type: "attribute_value", value: { selector: "input", attr: "data-test", value: null } }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("attributeValue_NullValue_AttributeMissing_Fails", () => {
|
||||
const result = validateUserCode("<input>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "attribute_value", value: { selector: "input", attr: "data-test", value: null } }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("HTML validation - element_text edge cases", () => {
|
||||
test("elementText_ElementNotFound_Fails", () => {
|
||||
const result = validateUserCode("<p>Hello</p>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "element_text", value: { selector: "button", text: "Submit" } }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
|
||||
test("elementText_EmptyTextContent_FailsForNonEmptyExpected", () => {
|
||||
const result = validateUserCode("<button></button>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "element_text", value: { selector: "button", text: "Submit" } }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
|
||||
test("elementText_EmptyExpectedText_MatchesEmptyElement", () => {
|
||||
const result = validateUserCode("<button></button>", {
|
||||
mode: "html",
|
||||
validations: [{ type: "element_text", value: { selector: "button", text: "" } }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("CSS validation - containsValidation wholeWord option", () => {
|
||||
test("contains_WholeWord_ExactMatch_Passes", () => {
|
||||
const result = validateUserCode("color: red;", {
|
||||
validations: [{ type: "contains", value: "red", options: { wholeWord: true } }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("contains_WholeWord_PartialMatch_Fails", () => {
|
||||
const result = validateUserCode("color: darkred;", {
|
||||
validations: [{ type: "contains", value: "red", options: { wholeWord: true } }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
|
||||
test("contains_WholeWord_CaseInsensitive_Passes", () => {
|
||||
const result = validateUserCode("COLOR: RED;", {
|
||||
validations: [{ type: "contains", value: "red", options: { wholeWord: true, caseSensitive: false } }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("contains_WholeWord_SpecialChars_Escaped", () => {
|
||||
// \b doesn't match at non-word chars like ".", so use a word value with special chars around it
|
||||
const result = validateUserCode("value: calc(100% - 20px);", {
|
||||
validations: [{ type: "contains", value: "calc", options: { wholeWord: true } }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
|
||||
// "calc" should not match "recalculate"
|
||||
const failResult = validateUserCode("/* recalculate */", {
|
||||
validations: [{ type: "contains", value: "calc", options: { wholeWord: true } }]
|
||||
});
|
||||
expect(failResult.isValid).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("CSS validation - regexValidation options", () => {
|
||||
test("regex_CaseInsensitive_Passes", () => {
|
||||
const result = validateUserCode("COLOR: RED;", {
|
||||
validations: [{ type: "regex", value: "color:\\s*red", options: { caseSensitive: false } }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("regex_CaseSensitive_Default_FailsOnCaseMismatch", () => {
|
||||
const result = validateUserCode("COLOR: RED;", {
|
||||
validations: [{ type: "regex", value: "color:\\s*red" }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
|
||||
test("regex_MultilineFalse_DoesNotMatchAcrossLines", () => {
|
||||
const code = "body {\n color: red;\n}";
|
||||
// With multiline=false, ^ should not match beginning of each line
|
||||
const result = validateUserCode(code, {
|
||||
validations: [{ type: "regex", value: "^\\s*color", options: { multiline: false } }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
|
||||
test("regex_MultilineTrue_Default_MatchesEachLine", () => {
|
||||
const code = "body {\n color: red;\n}";
|
||||
const result = validateUserCode(code, {
|
||||
validations: [{ type: "regex", value: "^\\s*color", options: { multiline: true } }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("regex_InvalidPattern_ReturnsFalse", () => {
|
||||
const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
|
||||
const result = validateUserCode("color: red;", {
|
||||
validations: [{ type: "regex", value: "[invalid(regex" }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(errorSpy).toHaveBeenCalled();
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
|
||||
test("regex_EmptyPattern_MatchesEverything", () => {
|
||||
const result = validateUserCode("color: red;", {
|
||||
validations: [{ type: "regex", value: "" }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("CSS validation - propertyValueValidation edge cases", () => {
|
||||
test("propertyValue_PropertyNotFound_Fails", () => {
|
||||
const result = validateUserCode("color: red;", {
|
||||
validations: [
|
||||
{
|
||||
type: "property_value",
|
||||
value: { property: "display", expected: "flex" }
|
||||
}
|
||||
]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
|
||||
test("propertyValue_ExactMatch_Passes", () => {
|
||||
const result = validateUserCode("display: flex;", {
|
||||
validations: [
|
||||
{
|
||||
type: "property_value",
|
||||
value: { property: "display", expected: "flex" },
|
||||
options: { exact: true }
|
||||
}
|
||||
]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("propertyValue_ExactMatch_CaseMismatch_Fails", () => {
|
||||
const result = validateUserCode("display: FLEX;", {
|
||||
validations: [
|
||||
{
|
||||
type: "property_value",
|
||||
value: { property: "display", expected: "flex" },
|
||||
options: { exact: true }
|
||||
}
|
||||
]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
|
||||
test("propertyValue_FlexibleMatch_CaseInsensitive", () => {
|
||||
const result = validateUserCode("display: FLEX;", {
|
||||
validations: [
|
||||
{
|
||||
type: "property_value",
|
||||
value: { property: "display", expected: "flex" }
|
||||
}
|
||||
]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("propertyValue_ShorthandProperty_Passes", () => {
|
||||
const result = validateUserCode("margin: 10px 20px;", {
|
||||
validations: [
|
||||
{
|
||||
type: "property_value",
|
||||
value: { property: "margin", expected: "10px 20px" }
|
||||
}
|
||||
]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("propertyValue_DefaultMessage_IncludesPropertyAndExpected", () => {
|
||||
const result = validateUserCode("color: red;", {
|
||||
validations: [
|
||||
{
|
||||
type: "property_value",
|
||||
value: { property: "display", expected: "flex" }
|
||||
}
|
||||
]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.message).toContain("display");
|
||||
expect(result.message).toContain("flex");
|
||||
});
|
||||
});
|
||||
|
||||
describe("CSS validation - syntaxValidation", () => {
|
||||
test("syntax_ValidCss_Passes", () => {
|
||||
const result = validateUserCode("div { color: red; }", {
|
||||
validations: [{ type: "syntax" }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("CSS validation - custom edge cases", () => {
|
||||
test("custom_NoValidatorFunction_ReturnsEarlyWithOriginalResult", () => {
|
||||
const result = validateUserCode("color: red;", {
|
||||
validations: [{ type: "custom" }]
|
||||
});
|
||||
// When validator is falsy, validationPassed stays false, but result.isValid was never set to false
|
||||
// The function returns early with the unmodified result (isValid: true)
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("custom_NonFunctionValidator_ReturnsEarlyWithOriginalResult", () => {
|
||||
const result = validateUserCode("color: red;", {
|
||||
validations: [{ type: "custom", validator: "not-a-function" }]
|
||||
});
|
||||
// Same behavior: validator check fails, validationPassed stays false, returns unmodified result
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("custom_ValidatorReturnsNoMessage_UsesMessage", () => {
|
||||
const result = validateUserCode("color: red;", {
|
||||
validations: [
|
||||
{
|
||||
type: "custom",
|
||||
validator: () => ({ isValid: false }),
|
||||
message: "Fallback message"
|
||||
}
|
||||
]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.message).toBe("Fallback message");
|
||||
});
|
||||
|
||||
test("custom_ValidatorReturnsNoMessage_NoLessonMessage_DefaultMessage", () => {
|
||||
const result = validateUserCode("color: red;", {
|
||||
validations: [
|
||||
{
|
||||
type: "custom",
|
||||
validator: () => ({ isValid: false })
|
||||
}
|
||||
]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.message).toContain("does not meet the requirements");
|
||||
});
|
||||
});
|
||||
|
||||
describe("CSS validation - unknown type", () => {
|
||||
test("unknownType_WarnsAndContinues", () => {
|
||||
const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
|
||||
const result = validateUserCode("color: red;", {
|
||||
validations: [
|
||||
{ type: "invented_type", value: "anything" },
|
||||
{ type: "contains", value: "color: red" }
|
||||
]
|
||||
});
|
||||
expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("Unknown validation type"));
|
||||
// The unknown type is skipped (continue), then the next validation passes
|
||||
expect(result.isValid).toBe(true);
|
||||
warnSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
describe("CSS validation - empty and whitespace input", () => {
|
||||
test("emptyString_ContainsValidation_Fails", () => {
|
||||
const result = validateUserCode("", {
|
||||
validations: [{ type: "contains", value: "color" }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
|
||||
test("whitespaceOnly_ContainsValidation_Fails", () => {
|
||||
const result = validateUserCode(" \n\t ", {
|
||||
validations: [{ type: "contains", value: "color" }]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
});
|
||||
|
||||
test("emptyString_NotContains_Passes", () => {
|
||||
const result = validateUserCode("", {
|
||||
validations: [{ type: "not_contains", value: "color" }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("CSS validation - validCases and totalCases tracking", () => {
|
||||
test("allPassingValidations_ValidCasesEqualsTotalCases", () => {
|
||||
const result = validateUserCode("display: flex; color: red;", {
|
||||
validations: [
|
||||
{ type: "contains", value: "display: flex" },
|
||||
{ type: "contains", value: "color: red" }
|
||||
]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
expect(result.validCases).toBe(2);
|
||||
expect(result.totalCases).toBe(2);
|
||||
});
|
||||
|
||||
test("firstValidationFails_ValidCasesIs0", () => {
|
||||
const result = validateUserCode("color: red;", {
|
||||
validations: [
|
||||
{ type: "contains", value: "display: flex" },
|
||||
{ type: "contains", value: "color: red" }
|
||||
]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.validCases).toBe(0);
|
||||
expect(result.totalCases).toBe(2);
|
||||
});
|
||||
|
||||
test("secondValidationFails_ValidCasesIs1", () => {
|
||||
const result = validateUserCode("display: flex;", {
|
||||
validations: [
|
||||
{ type: "contains", value: "display: flex" },
|
||||
{ type: "contains", value: "color: red" }
|
||||
]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.validCases).toBe(1);
|
||||
expect(result.totalCases).toBe(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe("CSS validation - special regex metacharacters in contains", () => {
|
||||
test("contains_DotInValue_TreatedAsLiteral", () => {
|
||||
// ".class" should match literally, not any char + "class"
|
||||
const result = validateUserCode(".card { color: red; }", {
|
||||
validations: [{ type: "contains", value: ".card" }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
|
||||
test("contains_BracketsInValue_TreatedAsLiteral", () => {
|
||||
const result = validateUserCode("content: '[test]';", {
|
||||
validations: [{ type: "contains", value: "[test]" }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("HTML validation - deeply nested parent_child", () => {
|
||||
test("parentChild_DeeplyNested_Passes", () => {
|
||||
const html = "<div><section><article><p>Deep</p></article></section></div>";
|
||||
const result = validateUserCode(html, {
|
||||
mode: "html",
|
||||
validations: [{ type: "parent_child", value: { parent: "div", child: "p" } }]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("HTML validation - validCases tracking", () => {
|
||||
test("htmlAllPass_ValidCasesEqualsTotal", () => {
|
||||
const result = validateUserCode("<h1>Title</h1><p>Content</p>", {
|
||||
mode: "html",
|
||||
validations: [
|
||||
{ type: "element_exists", value: "h1" },
|
||||
{ type: "element_exists", value: "p" }
|
||||
]
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
expect(result.validCases).toBe(2);
|
||||
expect(result.totalCases).toBe(2);
|
||||
});
|
||||
|
||||
test("htmlPartialPass_EarlyReturn", () => {
|
||||
const result = validateUserCode("<h1>Title</h1>", {
|
||||
mode: "html",
|
||||
validations: [
|
||||
{ type: "element_exists", value: "h1" },
|
||||
{ type: "element_exists", value: "p", message: "Need paragraph" }
|
||||
]
|
||||
});
|
||||
expect(result.isValid).toBe(false);
|
||||
expect(result.validCases).toBe(1);
|
||||
expect(result.message).toBe("Need paragraph");
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user