code-crispies/tests/unit/validator.test.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() }
		};
	});

	// 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" };

			const result = validateUserCode(userCode, lesson);

			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: []
			};

			const result = validateUserCode(userCode, lesson);

			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" }]
			};

			const result = validateUserCode(userCode, lesson);
			expect(result.isValid).toBe(true);

			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");
		});

		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 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");
		});

		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 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");
		});

		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 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");
		});

		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);

			// 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");
		});

		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 result = validateUserCode(userCode, lesson);
			expect(result.isValid).toBe(true);

			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 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 }
					}
				]
			};

			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 }
					}
				]
			};

			const failExactResult = validateUserCode("div { color: RED; }", exactLesson);
			expect(failExactResult.isValid).toBe(false);
		});
	});
});