code-crispies/tests/unit/renderer.test.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 = `
      <div id="module-list"></div>
      <h2 id="title"></h2>
      <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 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();

            renderModuleList(container, modules, onSelectModule);

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

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

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

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

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

            // Empty lesson object
            const 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('');
        });
    });

    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, 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!');

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

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

            clearFeedback();
            expect(document.querySelector('.feedback-error')).toBeNull();

            // Should work when called multiple times
            clearFeedback();
        });
    });
});