style: run format first time
This commit is contained in:
Michael Czechowski
@@ -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