style: run format first time
This commit is contained in:
Michael Czechowski
@@ -1,184 +1,172 @@
|
||||
import { describe, test, expect, vi, beforeEach } from 'vitest';
|
||||
import { loadModules, getModuleById, loadModuleFromUrl, addCustomModule } from '../../src/config/lessons.js';
|
||||
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/basics.json', () => ({ default: { id: 'basics', title: 'CSS Basics', lessons: [] }}));
|
||||
vi.mock('../../lessons/tailwindcss.json', () => ({ default: { id: 'tailwind', title: 'Tailwind CSS', lessons: [] }}));
|
||||
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/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();
|
||||
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(Array.isArray(modules)).toBe(true);
|
||||
expect(modules.length).toBe(4);
|
||||
|
||||
// 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');
|
||||
});
|
||||
});
|
||||
// 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");
|
||||
});
|
||||
});
|
||||
|
||||
describe('getModuleById', () => {
|
||||
test('should return a module by ID', async () => {
|
||||
// Load modules first to populate the module store
|
||||
await loadModules();
|
||||
describe("getModuleById", () => {
|
||||
test("should return a module by ID", async () => {
|
||||
// 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 flexboxModule = getModuleById("flexbox");
|
||||
expect(flexboxModule).not.toBeNull();
|
||||
expect(flexboxModule.id).toBe("flexbox");
|
||||
expect(flexboxModule.title).toBe("Flexbox");
|
||||
});
|
||||
|
||||
test('should return null for non-existent module ID', async () => {
|
||||
// Load modules first
|
||||
await loadModules();
|
||||
test("should return null for non-existent module ID", async () => {
|
||||
// Load modules first
|
||||
await loadModules();
|
||||
|
||||
const nonExistentModule = getModuleById('non-existent');
|
||||
expect(nonExistentModule).toBeNull();
|
||||
});
|
||||
});
|
||||
const nonExistentModule = getModuleById("non-existent");
|
||||
expect(nonExistentModule).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('loadModuleFromUrl', () => {
|
||||
beforeEach(() => {
|
||||
// Reset fetch mock
|
||||
fetch.mockReset();
|
||||
});
|
||||
describe("loadModuleFromUrl", () => {
|
||||
beforeEach(() => {
|
||||
// Reset fetch mock
|
||||
fetch.mockReset();
|
||||
});
|
||||
|
||||
test('should load a module from a URL', async () => {
|
||||
const mockModule = {
|
||||
id: 'remote-module',
|
||||
title: 'Remote Module',
|
||||
lessons: [
|
||||
{ title: 'Lesson 1', previewHTML: '<div>Preview</div>' }
|
||||
]
|
||||
};
|
||||
test("should load a module from a URL", async () => {
|
||||
const mockModule = {
|
||||
id: "remote-module",
|
||||
title: "Remote Module",
|
||||
lessons: [{ title: "Lesson 1", previewHTML: "<div>Preview</div>" }]
|
||||
};
|
||||
|
||||
// Mock the fetch response
|
||||
fetch.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => mockModule
|
||||
});
|
||||
// Mock the fetch response
|
||||
fetch.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => mockModule
|
||||
});
|
||||
|
||||
const result = await loadModuleFromUrl('https://example.com/module.json');
|
||||
const result = await loadModuleFromUrl("https://example.com/module.json");
|
||||
|
||||
expect(fetch).toHaveBeenCalledWith('https://example.com/module.json');
|
||||
expect(result).toEqual(mockModule);
|
||||
});
|
||||
expect(fetch).toHaveBeenCalledWith("https://example.com/module.json");
|
||||
expect(result).toEqual(mockModule);
|
||||
});
|
||||
|
||||
test('should throw an error for failed fetch', async () => {
|
||||
fetch.mockResolvedValueOnce({
|
||||
ok: false,
|
||||
status: 404,
|
||||
statusText: 'Not Found'
|
||||
});
|
||||
test("should throw an error for failed fetch", async () => {
|
||||
fetch.mockResolvedValueOnce({
|
||||
ok: false,
|
||||
status: 404,
|
||||
statusText: "Not Found"
|
||||
});
|
||||
|
||||
await expect(loadModuleFromUrl('https://example.com/not-found.json'))
|
||||
.rejects
|
||||
.toThrow('Failed to load module: 404 Not Found');
|
||||
});
|
||||
await expect(loadModuleFromUrl("https://example.com/not-found.json")).rejects.toThrow("Failed to load module: 404 Not Found");
|
||||
});
|
||||
|
||||
test('should validate module structure', async () => {
|
||||
// Missing required fields
|
||||
const invalidModule = {
|
||||
// Missing id
|
||||
title: 'Invalid Module'
|
||||
// Missing lessons array
|
||||
};
|
||||
test("should validate module structure", async () => {
|
||||
// Missing required fields
|
||||
const invalidModule = {
|
||||
// Missing id
|
||||
title: "Invalid Module"
|
||||
// Missing lessons array
|
||||
};
|
||||
|
||||
fetch.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => invalidModule
|
||||
});
|
||||
fetch.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => invalidModule
|
||||
});
|
||||
|
||||
await expect(loadModuleFromUrl('https://example.com/invalid.json'))
|
||||
.rejects
|
||||
.toThrow('Module config missing "id"');
|
||||
await expect(loadModuleFromUrl("https://example.com/invalid.json")).rejects.toThrow('Module config missing "id"');
|
||||
|
||||
// Invalid lessons structure
|
||||
const moduleWithInvalidLessons = {
|
||||
id: 'invalid-lessons',
|
||||
title: 'Invalid Lessons',
|
||||
lessons: [
|
||||
{ /* Missing title */ previewHTML: '<div>Preview</div>' }
|
||||
]
|
||||
};
|
||||
// Invalid lessons structure
|
||||
const moduleWithInvalidLessons = {
|
||||
id: "invalid-lessons",
|
||||
title: "Invalid Lessons",
|
||||
lessons: [{ /* Missing title */ previewHTML: "<div>Preview</div>" }]
|
||||
};
|
||||
|
||||
fetch.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => moduleWithInvalidLessons
|
||||
});
|
||||
fetch.mockResolvedValueOnce({
|
||||
ok: true,
|
||||
json: async () => moduleWithInvalidLessons
|
||||
});
|
||||
|
||||
await expect(loadModuleFromUrl('https://example.com/invalid-lessons.json'))
|
||||
.rejects
|
||||
.toThrow('Lesson 0 missing "title"');
|
||||
});
|
||||
});
|
||||
await expect(loadModuleFromUrl("https://example.com/invalid-lessons.json")).rejects.toThrow('Lesson 0 missing "title"');
|
||||
});
|
||||
});
|
||||
|
||||
describe('addCustomModule', () => {
|
||||
test('should add a new module to the store', async () => {
|
||||
// Load modules first to get current count
|
||||
const initialModules = await loadModules();
|
||||
const initialCount = initialModules.length;
|
||||
describe("addCustomModule", () => {
|
||||
test("should add a new module to the store", async () => {
|
||||
// Load modules first to get current count
|
||||
const initialModules = await loadModules();
|
||||
const initialCount = initialModules.length;
|
||||
|
||||
const customModule = {
|
||||
id: 'custom-module',
|
||||
title: 'Custom Module',
|
||||
lessons: [
|
||||
{ title: 'Custom Lesson', previewHTML: '<div>Preview</div>' }
|
||||
]
|
||||
};
|
||||
const customModule = {
|
||||
id: "custom-module",
|
||||
title: "Custom Module",
|
||||
lessons: [{ title: "Custom Lesson", previewHTML: "<div>Preview</div>" }]
|
||||
};
|
||||
|
||||
const result = addCustomModule(customModule);
|
||||
expect(result).toBe(true);
|
||||
const result = addCustomModule(customModule);
|
||||
expect(result).toBe(true);
|
||||
|
||||
// Check if module was added
|
||||
const updatedModules = await loadModules();
|
||||
expect(updatedModules.length).toBe(initialCount + 1);
|
||||
// Check if module was added
|
||||
const updatedModules = await loadModules();
|
||||
expect(updatedModules.length).toBe(initialCount + 1);
|
||||
|
||||
const addedModule = getModuleById('custom-module');
|
||||
expect(addedModule).not.toBeNull();
|
||||
expect(addedModule.title).toBe('Custom Module');
|
||||
});
|
||||
const addedModule = getModuleById("custom-module");
|
||||
expect(addedModule).not.toBeNull();
|
||||
expect(addedModule.title).toBe("Custom Module");
|
||||
});
|
||||
|
||||
test('should replace existing module with same ID', async () => {
|
||||
// Add a module first
|
||||
const customModule = {
|
||||
id: 'replace-test',
|
||||
title: 'Original Module',
|
||||
lessons: [{ title: 'Original Lesson', previewHTML: '<div>Preview</div>' }]
|
||||
};
|
||||
test("should replace existing module with same ID", async () => {
|
||||
// Add a module first
|
||||
const customModule = {
|
||||
id: "replace-test",
|
||||
title: "Original Module",
|
||||
lessons: [{ title: "Original Lesson", previewHTML: "<div>Preview</div>" }]
|
||||
};
|
||||
|
||||
addCustomModule(customModule);
|
||||
addCustomModule(customModule);
|
||||
|
||||
// Now replace it
|
||||
const replacementModule = {
|
||||
id: 'replace-test',
|
||||
title: 'Replacement Module',
|
||||
lessons: [{ title: 'New Lesson', previewHTML: '<div>New Preview</div>' }]
|
||||
};
|
||||
// Now replace it
|
||||
const replacementModule = {
|
||||
id: "replace-test",
|
||||
title: "Replacement Module",
|
||||
lessons: [{ title: "New Lesson", previewHTML: "<div>New Preview</div>" }]
|
||||
};
|
||||
|
||||
const result = addCustomModule(replacementModule);
|
||||
expect(result).toBe(true);
|
||||
const result = addCustomModule(replacementModule);
|
||||
expect(result).toBe(true);
|
||||
|
||||
// Check if module was replaced
|
||||
const updatedModule = getModuleById('replace-test');
|
||||
expect(updatedModule.title).toBe('Replacement Module');
|
||||
});
|
||||
// Check if module was replaced
|
||||
const updatedModule = getModuleById("replace-test");
|
||||
expect(updatedModule.title).toBe("Replacement Module");
|
||||
});
|
||||
|
||||
test('should validate module before adding', () => {
|
||||
const invalidModule = {
|
||||
// Missing required fields
|
||||
title: 'Invalid Module'
|
||||
};
|
||||
test("should validate module before adding", () => {
|
||||
const invalidModule = {
|
||||
// Missing required fields
|
||||
title: "Invalid Module"
|
||||
};
|
||||
|
||||
const result = addCustomModule(invalidModule);
|
||||
expect(result).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
const result = addCustomModule(invalidModule);
|
||||
expect(result).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { describe, test, expect, vi, beforeEach } from 'vitest';
|
||||
import { renderModuleList, renderLesson, renderLevelIndicator, showFeedback, clearFeedback } from '../../src/helpers/renderer.js';
|
||||
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 = `
|
||||
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>
|
||||
@@ -16,163 +16,145 @@ describe('Renderer Module', () => {
|
||||
<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' },
|
||||
{ id: 'mod2', title: 'Module 2' }
|
||||
];
|
||||
const onSelectModule = vi.fn();
|
||||
describe("renderModuleList", () => {
|
||||
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" }
|
||||
];
|
||||
const onSelectModule = vi.fn();
|
||||
|
||||
renderModuleList(container, modules, onSelectModule);
|
||||
renderModuleList(container, modules, onSelectModule);
|
||||
|
||||
// Check if heading is created
|
||||
expect(container.innerHTML).toContain('<h3>Modules</h3>');
|
||||
// Check if heading is created
|
||||
expect(container.innerHTML).toContain("<h3>Modules</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 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");
|
||||
|
||||
// Test click event
|
||||
moduleItems[0].click();
|
||||
expect(onSelectModule).toHaveBeenCalledWith('mod1');
|
||||
});
|
||||
// Test click event
|
||||
moduleItems[0].click();
|
||||
expect(onSelectModule).toHaveBeenCalledWith("mod1");
|
||||
});
|
||||
|
||||
test('should handle empty module list', () => {
|
||||
const container = document.getElementById('module-list');
|
||||
renderModuleList(container, [], vi.fn());
|
||||
test("should handle empty module list", () => {
|
||||
const container = document.getElementById("module-list");
|
||||
renderModuleList(container, [], vi.fn());
|
||||
|
||||
expect(container.innerHTML).toContain('<h3>Modules</h3>');
|
||||
expect(container.querySelectorAll('.module-list-item').length).toBe(0);
|
||||
});
|
||||
});
|
||||
expect(container.innerHTML).toContain("<h3>Modules</h3>");
|
||||
expect(container.querySelectorAll(".module-list-item").length).toBe(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');
|
||||
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: '}'
|
||||
};
|
||||
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
|
||||
);
|
||||
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>');
|
||||
expect(prefixEl.textContent).toBe('body {');
|
||||
expect(inputEl.value).toBe(' color: red;');
|
||||
expect(suffixEl.textContent).toBe('}');
|
||||
});
|
||||
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 {");
|
||||
expect(inputEl.value).toBe(" color: red;");
|
||||
expect(suffixEl.textContent).toBe("}");
|
||||
});
|
||||
|
||||
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');
|
||||
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 = {};
|
||||
// Empty lesson object
|
||||
const lesson = {};
|
||||
|
||||
renderLesson(
|
||||
titleEl,
|
||||
descriptionEl,
|
||||
taskEl,
|
||||
document.getElementById('preview'),
|
||||
prefixEl,
|
||||
inputEl,
|
||||
suffixEl,
|
||||
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(prefixEl.textContent).toBe('');
|
||||
expect(inputEl.value).toBe('');
|
||||
expect(suffixEl.textContent).toBe('');
|
||||
});
|
||||
});
|
||||
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("");
|
||||
});
|
||||
});
|
||||
|
||||
describe('renderLevelIndicator', () => {
|
||||
test('should update level indicator text', () => {
|
||||
const element = document.getElementById('level-indicator');
|
||||
describe("renderLevelIndicator", () => {
|
||||
test("should update level indicator text", () => {
|
||||
const element = document.getElementById("level-indicator");
|
||||
|
||||
renderLevelIndicator(element, 3, 10);
|
||||
expect(element.textContent).toBe('Lesson 3 of 10');
|
||||
renderLevelIndicator(element, 3, 10);
|
||||
expect(element.textContent).toBe("Lesson 3 of 10");
|
||||
|
||||
renderLevelIndicator(element, 1, 5);
|
||||
expect(element.textContent).toBe('Lesson 1 of 5');
|
||||
});
|
||||
});
|
||||
renderLevelIndicator(element, 1, 5);
|
||||
expect(element.textContent).toBe("Lesson 1 of 5");
|
||||
});
|
||||
});
|
||||
|
||||
describe.skip('showFeedback and clearFeedback', () => {
|
||||
test('should create success feedback element', () => {
|
||||
const editor = document.getElementById('code-editor');
|
||||
showFeedback(true, 'Great job!');
|
||||
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!');
|
||||
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 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');
|
||||
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');
|
||||
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();
|
||||
});
|
||||
// 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();
|
||||
test("should clear existing feedback", () => {
|
||||
showFeedback(false, "Error message");
|
||||
expect(document.querySelector(".feedback-error")).not.toBeNull();
|
||||
|
||||
clearFeedback();
|
||||
expect(document.querySelector('.feedback-error')).toBeNull();
|
||||
clearFeedback();
|
||||
expect(document.querySelector(".feedback-error")).toBeNull();
|
||||
|
||||
// Should work when called multiple times
|
||||
clearFeedback();
|
||||
});
|
||||
});
|
||||
});
|
||||
// Should work when called multiple times
|
||||
clearFeedback();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,239 +1,227 @@
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { validateUserCode } from '../../src/helpers/validator.js';
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { validateUserCode } from "../../src/helpers/validator.js";
|
||||
|
||||
describe('CSS Validator', () => {
|
||||
// Mock document functions since we're not in a browser
|
||||
document.createElement = vi.fn().mockImplementation(() => {
|
||||
return {
|
||||
textContent: '',
|
||||
parentNode: { removeChild: vi.fn() }
|
||||
};
|
||||
});
|
||||
describe("CSS Validator", () => {
|
||||
// Mock document functions since we're not in a browser
|
||||
document.createElement = vi.fn().mockImplementation(() => {
|
||||
return {
|
||||
textContent: "",
|
||||
parentNode: { removeChild: vi.fn() }
|
||||
};
|
||||
});
|
||||
|
||||
// document.head = {
|
||||
// appendChild: vi.fn(),
|
||||
// removeChild: vi.fn()
|
||||
// };
|
||||
// document.head = {
|
||||
// appendChild: vi.fn(),
|
||||
// removeChild: vi.fn()
|
||||
// };
|
||||
|
||||
describe('validateUserCode', () => {
|
||||
it('should pass when no validations are specified', () => {
|
||||
const userCode = 'div { color: red; }';
|
||||
const lesson = { title: 'Test Lesson' };
|
||||
describe("validateUserCode", () => {
|
||||
it("should pass when no validations are specified", () => {
|
||||
const userCode = "div { color: red; }";
|
||||
const lesson = { title: "Test Lesson" };
|
||||
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
|
||||
expect(result.isValid).toBe(true);
|
||||
expect(result.message).toContain('No validations specified');
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
expect(result.message).toContain("No validations specified");
|
||||
});
|
||||
|
||||
it('should pass with empty validations array', () => {
|
||||
const userCode = 'div { color: red; }';
|
||||
const lesson = {
|
||||
title: 'Test Lesson',
|
||||
validations: []
|
||||
};
|
||||
it("should pass with empty validations array", () => {
|
||||
const userCode = "div { color: red; }";
|
||||
const lesson = {
|
||||
title: "Test Lesson",
|
||||
validations: []
|
||||
};
|
||||
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
|
||||
expect(result.isValid).toBe(true);
|
||||
expect(result.message).toBe('Your code looks good!');
|
||||
});
|
||||
expect(result.isValid).toBe(true);
|
||||
expect(result.message).toBe("Your code looks good!");
|
||||
});
|
||||
|
||||
it('should validate "contains" rule correctly', () => {
|
||||
const userCode = 'div { color: red; }';
|
||||
const lesson = {
|
||||
validations: [
|
||||
{ type: 'contains', value: 'color: red', message: 'Should use red color' }
|
||||
]
|
||||
};
|
||||
it('should validate "contains" rule correctly', () => {
|
||||
const userCode = "div { color: red; }";
|
||||
const lesson = {
|
||||
validations: [{ type: "contains", value: "color: red", message: "Should use red color" }]
|
||||
};
|
||||
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
expect(result.isValid).toBe(true);
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
expect(result.isValid).toBe(true);
|
||||
|
||||
const failLesson = {
|
||||
validations: [
|
||||
{ type: 'contains', value: 'color: blue', message: 'Should use blue color' }
|
||||
]
|
||||
};
|
||||
const failLesson = {
|
||||
validations: [{ type: "contains", value: "color: blue", message: "Should use blue color" }]
|
||||
};
|
||||
|
||||
const failResult = validateUserCode(userCode, failLesson);
|
||||
expect(failResult.isValid).toBe(false);
|
||||
expect(failResult.message).toBe('Should use blue color');
|
||||
});
|
||||
const failResult = validateUserCode(userCode, failLesson);
|
||||
expect(failResult.isValid).toBe(false);
|
||||
expect(failResult.message).toBe("Should use blue color");
|
||||
});
|
||||
|
||||
it('should validate "not_contains" rule correctly', () => {
|
||||
const userCode = 'div { color: red; }';
|
||||
const lesson = {
|
||||
validations: [
|
||||
{ type: 'not_contains', value: 'color: blue', message: 'Should not use blue color' }
|
||||
]
|
||||
};
|
||||
it('should validate "not_contains" rule correctly', () => {
|
||||
const userCode = "div { color: red; }";
|
||||
const lesson = {
|
||||
validations: [{ type: "not_contains", value: "color: blue", message: "Should not use blue color" }]
|
||||
};
|
||||
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
expect(result.isValid).toBe(true);
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
expect(result.isValid).toBe(true);
|
||||
|
||||
const failLesson = {
|
||||
validations: [
|
||||
{ type: 'not_contains', value: 'color: red', message: 'Should not use red color' }
|
||||
]
|
||||
};
|
||||
const failLesson = {
|
||||
validations: [{ type: "not_contains", value: "color: red", message: "Should not use red color" }]
|
||||
};
|
||||
|
||||
const failResult = validateUserCode(userCode, failLesson);
|
||||
expect(failResult.isValid).toBe(false);
|
||||
expect(failResult.message).toBe('Should not use red color');
|
||||
});
|
||||
const failResult = validateUserCode(userCode, failLesson);
|
||||
expect(failResult.isValid).toBe(false);
|
||||
expect(failResult.message).toBe("Should not use red color");
|
||||
});
|
||||
|
||||
it('should validate "regex" rule correctly', () => {
|
||||
const userCode = 'div { color: #ff0000; }';
|
||||
const lesson = {
|
||||
validations: [
|
||||
{ type: 'regex', value: '#[a-f0-9]{6}', message: 'Should use hex color' }
|
||||
]
|
||||
};
|
||||
it('should validate "regex" rule correctly', () => {
|
||||
const userCode = "div { color: #ff0000; }";
|
||||
const lesson = {
|
||||
validations: [{ type: "regex", value: "#[a-f0-9]{6}", message: "Should use hex color" }]
|
||||
};
|
||||
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
expect(result.isValid).toBe(true);
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
expect(result.isValid).toBe(true);
|
||||
|
||||
const failLesson = {
|
||||
validations: [
|
||||
{ type: 'regex', value: 'rgb\\(\\d+,\\s*\\d+,\\s*\\d+\\)', message: 'Should use RGB color' }
|
||||
]
|
||||
};
|
||||
const failLesson = {
|
||||
validations: [{ type: "regex", value: "rgb\\(\\d+,\\s*\\d+,\\s*\\d+\\)", message: "Should use RGB color" }]
|
||||
};
|
||||
|
||||
const failResult = validateUserCode(userCode, failLesson);
|
||||
expect(failResult.isValid).toBe(false);
|
||||
expect(failResult.message).toBe('Should use RGB color');
|
||||
});
|
||||
const failResult = validateUserCode(userCode, failLesson);
|
||||
expect(failResult.isValid).toBe(false);
|
||||
expect(failResult.message).toBe("Should use RGB color");
|
||||
});
|
||||
|
||||
it('should validate "property_value" rule correctly', () => {
|
||||
const userCode = 'div { display: flex; }';
|
||||
const lesson = {
|
||||
validations: [
|
||||
{
|
||||
type: 'property_value',
|
||||
value: { property: 'display', expected: 'flex' },
|
||||
message: 'Should use display: flex'
|
||||
}
|
||||
]
|
||||
};
|
||||
it('should validate "property_value" rule correctly', () => {
|
||||
const userCode = "div { display: flex; }";
|
||||
const lesson = {
|
||||
validations: [
|
||||
{
|
||||
type: "property_value",
|
||||
value: { property: "display", expected: "flex" },
|
||||
message: "Should use display: flex"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
expect(result.isValid).toBe(true);
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
expect(result.isValid).toBe(true);
|
||||
|
||||
const failLesson = {
|
||||
validations: [
|
||||
{
|
||||
type: 'property_value',
|
||||
value: { property: 'display', expected: 'grid' },
|
||||
message: 'Should use display: grid'
|
||||
}
|
||||
]
|
||||
};
|
||||
const failLesson = {
|
||||
validations: [
|
||||
{
|
||||
type: "property_value",
|
||||
value: { property: "display", expected: "grid" },
|
||||
message: "Should use display: grid"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const failResult = validateUserCode(userCode, failLesson);
|
||||
expect(failResult.isValid).toBe(false);
|
||||
expect(failResult.message).toBe('Should use display: grid');
|
||||
});
|
||||
const failResult = validateUserCode(userCode, failLesson);
|
||||
expect(failResult.isValid).toBe(false);
|
||||
expect(failResult.message).toBe("Should use display: grid");
|
||||
});
|
||||
|
||||
it('should handle complex validation chains', () => {
|
||||
const userCode = 'div { display: flex; color: red; }';
|
||||
const lesson = {
|
||||
validations: [
|
||||
{ type: 'contains', value: 'display: flex' },
|
||||
{ type: 'contains', value: 'color: red' },
|
||||
{ type: 'not_contains', value: 'float:' }
|
||||
]
|
||||
};
|
||||
it("should handle complex validation chains", () => {
|
||||
const userCode = "div { display: flex; color: red; }";
|
||||
const lesson = {
|
||||
validations: [
|
||||
{ type: "contains", value: "display: flex" },
|
||||
{ type: "contains", value: "color: red" },
|
||||
{ type: "not_contains", value: "float:" }
|
||||
]
|
||||
};
|
||||
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
expect(result.isValid).toBe(true);
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
expect(result.isValid).toBe(true);
|
||||
|
||||
// First failing validation should cause early return
|
||||
const failLesson = {
|
||||
validations: [
|
||||
{ type: 'contains', value: 'display: flex' },
|
||||
{ type: 'contains', value: 'border: 1px solid black', message: 'Missing border' },
|
||||
{ type: 'not_contains', value: 'color: green' }
|
||||
]
|
||||
};
|
||||
// First failing validation should cause early return
|
||||
const failLesson = {
|
||||
validations: [
|
||||
{ type: "contains", value: "display: flex" },
|
||||
{ type: "contains", value: "border: 1px solid black", message: "Missing border" },
|
||||
{ type: "not_contains", value: "color: green" }
|
||||
]
|
||||
};
|
||||
|
||||
const failResult = validateUserCode(userCode, failLesson);
|
||||
expect(failResult.isValid).toBe(false);
|
||||
expect(failResult.message).toBe('Missing border');
|
||||
});
|
||||
const failResult = validateUserCode(userCode, failLesson);
|
||||
expect(failResult.isValid).toBe(false);
|
||||
expect(failResult.message).toBe("Missing border");
|
||||
});
|
||||
|
||||
it('should validate "custom" rule correctly', () => {
|
||||
const userCode = 'div { margin: 10px; }';
|
||||
const customValidator = (code) => {
|
||||
return {
|
||||
isValid: code.includes('margin'),
|
||||
message: 'Should include margin property'
|
||||
};
|
||||
};
|
||||
it('should validate "custom" rule correctly', () => {
|
||||
const userCode = "div { margin: 10px; }";
|
||||
const customValidator = (code) => {
|
||||
return {
|
||||
isValid: code.includes("margin"),
|
||||
message: "Should include margin property"
|
||||
};
|
||||
};
|
||||
|
||||
const lesson = {
|
||||
validations: [
|
||||
{
|
||||
type: 'custom',
|
||||
validator: customValidator
|
||||
}
|
||||
]
|
||||
};
|
||||
const lesson = {
|
||||
validations: [
|
||||
{
|
||||
type: "custom",
|
||||
validator: customValidator
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
expect(result.isValid).toBe(true);
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
expect(result.isValid).toBe(true);
|
||||
|
||||
const failValidator = (code) => {
|
||||
return {
|
||||
isValid: code.includes('padding'),
|
||||
message: 'Should include padding property'
|
||||
};
|
||||
};
|
||||
const failValidator = (code) => {
|
||||
return {
|
||||
isValid: code.includes("padding"),
|
||||
message: "Should include padding property"
|
||||
};
|
||||
};
|
||||
|
||||
const failLesson = {
|
||||
validations: [
|
||||
{
|
||||
type: 'custom',
|
||||
validator: failValidator,
|
||||
message: 'Custom validation failed'
|
||||
}
|
||||
]
|
||||
};
|
||||
const failLesson = {
|
||||
validations: [
|
||||
{
|
||||
type: "custom",
|
||||
validator: failValidator,
|
||||
message: "Custom validation failed"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const failResult = validateUserCode(userCode, failLesson);
|
||||
expect(failResult.isValid).toBe(false);
|
||||
expect(failResult.message).toBe('Should include padding property');
|
||||
});
|
||||
const failResult = validateUserCode(userCode, failLesson);
|
||||
expect(failResult.isValid).toBe(false);
|
||||
expect(failResult.message).toBe("Should include padding property");
|
||||
});
|
||||
|
||||
it('should handle options in validations', () => {
|
||||
// Case insensitive test
|
||||
const userCode = 'div { COLOR: Red; }';
|
||||
const lesson = {
|
||||
validations: [
|
||||
{
|
||||
type: 'contains',
|
||||
value: 'color: red',
|
||||
options: { caseSensitive: false }
|
||||
}
|
||||
]
|
||||
};
|
||||
it("should handle options in validations", () => {
|
||||
// Case insensitive test
|
||||
const userCode = "div { COLOR: Red; }";
|
||||
const lesson = {
|
||||
validations: [
|
||||
{
|
||||
type: "contains",
|
||||
value: "color: red",
|
||||
options: { caseSensitive: false }
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
expect(result.isValid).toBe(true);
|
||||
const result = validateUserCode(userCode, lesson);
|
||||
expect(result.isValid).toBe(true);
|
||||
|
||||
// With exact match required
|
||||
const exactLesson = {
|
||||
validations: [
|
||||
{
|
||||
type: 'property_value',
|
||||
value: { property: 'color', expected: 'red' },
|
||||
options: { exact: true }
|
||||
}
|
||||
]
|
||||
};
|
||||
// With exact match required
|
||||
const exactLesson = {
|
||||
validations: [
|
||||
{
|
||||
type: "property_value",
|
||||
value: { property: "color", expected: "red" },
|
||||
options: { exact: true }
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const failExactResult = validateUserCode('div { color: RED; }', exactLesson);
|
||||
expect(failExactResult.isValid).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
const failExactResult = validateUserCode("div { color: RED; }", exactLesson);
|
||||
expect(failExactResult.isValid).toBe(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user