hyprcrd/public/plugins/tests/canvas.test.js

import { describe, it, beforeEach, afterEach, expect, $, click, sleep, closeAll } from './runner.js?v=3';

// ── Helpers ──

async function openEditor() {
    click('#add-btn');
    await sleep(200);
}

async function openCanvas() {
    await openEditor();
    const btn = document.querySelector('[data-md="asciiart"]');
    if (!btn) throw new Error('canvas toolbar button not found');
    btn.click();
    // openCanvas does layout in rAF
    await sleep(100);
}

function closeCanvasIfOpen() {
    const overlay = $('#ascii-canvas-overlay');
    if (overlay?.classList.contains('open')) {
        const cancel = $('#ascii-canvas-cancel');
        cancel?.click();
    }
}

function getGridText() {
    return $('#ascii-canvas-grid')?.textContent || '';
}

function getGridLines() {
    return getGridText().split('\n');
}

// Dispatch a mousedown at a logical (col, row) cell on the grid
function clickCell(col, row) {
    const grid = $('#ascii-canvas-grid');
    const rect = grid.getBoundingClientRect();
    const cols = parseInt($('#ascii-canvas-width').value);
    const rows = parseInt($('#ascii-canvas-height').value);
    const cellW = rect.width / cols;
    const cellH = rect.height / rows;
    const x = rect.left + cellW * col + cellW / 2;
    const y = rect.top + cellH * row + cellH / 2;
    grid.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, button: 0, clientX: x, clientY: y }));
    window.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, button: 0, clientX: x, clientY: y }));
}

// ── Plugin Registration ──

describe('Canvas Plugin: Registration', () => {
    it('plugin is registered with hyprcrd', () => {
        expect(window.hyprcrd).toExist();
        const meta = window.hyprcrd.plugins.find(p => p.name === 'canvas');
        expect(meta).toExist();
    });

    it('asciiart editor command is registered', () => {
        expect(window.hyprcrd.editor.getCommand('asciiart')).toExist();
    });

    it('ascii fenced block handler is registered', () => {
        const handlers = window.hyprcrd.markdown.getFencedBlocks();
        const ascii = handlers.find(h => h.lang === 'ascii');
        expect(ascii).toExist();
    });

    it('toolbar button is injected into md-toolbar', () => {
        const btn = document.querySelector('#md-toolbar [data-md="asciiart"]');
        expect(btn).toExist();
    });
});

// ── Overlay Structure ──

describe('Canvas Plugin: Overlay Structure', () => {
    it('overlay element exists in DOM', () => {
        expect($('#ascii-canvas-overlay')).toExist();
    });

    it('grid, toolbar, and inputs exist', () => {
        expect($('#ascii-canvas-grid')).toExist();
        expect($('#ascii-canvas-toolbar')).toExist();
        expect($('#ascii-char-input')).toExist();
        expect($('#ascii-canvas-width')).toExist();
        expect($('#ascii-canvas-height')).toExist();
    });

    it('all 7 tool buttons exist', () => {
        const tools = ['brush', 'eraser', 'line', 'rect', 'circle', 'fill', 'text'];
        for (const t of tools) {
            const btn = document.querySelector(`[data-tool="${t}"]`);
            expect(btn).toExist();
        }
    });

    it('action buttons exist (ok, cancel, clear, resize)', () => {
        expect($('#ascii-canvas-ok')).toExist();
        expect($('#ascii-canvas-cancel')).toExist();
        expect($('#ascii-canvas-clear')).toExist();
        expect($('#ascii-canvas-resize')).toExist();
    });
});

// ── Open / Close ──

describe('Canvas Plugin: Open & Close', () => {
    afterEach(async () => {
        closeCanvasIfOpen();
        await closeAll();
    });

    it('overlay is hidden initially', () => {
        const overlay = $('#ascii-canvas-overlay');
        expect(overlay.classList.contains('open')).toBe(false);
    });

    it('opens via toolbar button', async () => {
        await openCanvas();
        expect($('#ascii-canvas-overlay').classList.contains('open')).toBe(true);
    });

    it('cancel button closes overlay', async () => {
        await openCanvas();
        click('#ascii-canvas-cancel');
        await sleep(50);
        expect($('#ascii-canvas-overlay').classList.contains('open')).toBe(false);
    });

    it('overlay is filled with character grid on open', async () => {
        await openCanvas();
        const lines = getGridLines();
        const cols = parseInt($('#ascii-canvas-width').value);
        const rows = parseInt($('#ascii-canvas-height').value);
        expect(lines.length).toBe(rows);
        expect(lines[0].length).toBe(cols);
    });

    it('palette is populated with character buttons', async () => {
        await openCanvas();
        const buttons = document.querySelectorAll('#ascii-char-palette .ascii-char-btn');
        expect(buttons.length).toBeGreaterThan(10);
    });
});

// ── Tool Selection ──

describe('Canvas Plugin: Tool Selection', () => {
    afterEach(async () => {
        closeCanvasIfOpen();
        await closeAll();
    });

    it('brush is the default active tool', async () => {
        await openCanvas();
        const brushBtn = document.querySelector('[data-tool="brush"]');
        expect(brushBtn.classList.contains('active')).toBe(true);
    });

    it('clicking a tool button activates it and deactivates others', async () => {
        await openCanvas();
        click(document.querySelector('[data-tool="line"]'));
        await sleep(20);
        expect(document.querySelector('[data-tool="line"]').classList.contains('active')).toBe(true);
        expect(document.querySelector('[data-tool="brush"]').classList.contains('active')).toBe(false);
    });

    it('keyboard shortcut switches tool', async () => {
        await openCanvas();
        const overlay = $('#ascii-canvas-overlay');
        overlay.dispatchEvent(new KeyboardEvent('keydown', { key: 'r', bubbles: true }));
        await sleep(20);
        expect(document.querySelector('[data-tool="rect"]').classList.contains('active')).toBe(true);
    });
});

// ── Drawing ──

describe('Canvas Plugin: Drawing', () => {
    afterEach(async () => {
        closeCanvasIfOpen();
        await closeAll();
    });

    it('brush click sets a character at the clicked cell', async () => {
        await openCanvas();
        // Use a known character
        const charInput = $('#ascii-char-input');
        charInput.value = 'X';
        charInput.dispatchEvent(new Event('input', { bubbles: true }));
        await sleep(20);

        clickCell(5, 3);
        await sleep(20);

        const lines = getGridLines();
        expect(lines[3][5]).toBe('X');
    });

    it('eraser replaces character with space', async () => {
        await openCanvas();
        // Draw first
        const charInput = $('#ascii-char-input');
        charInput.value = '#';
        charInput.dispatchEvent(new Event('input', { bubbles: true }));
        await sleep(20);
        clickCell(2, 2);
        await sleep(20);
        expect(getGridLines()[2][2]).toBe('#');

        // Switch to eraser and click same cell
        click(document.querySelector('[data-tool="eraser"]'));
        await sleep(20);
        clickCell(2, 2);
        await sleep(20);
        expect(getGridLines()[2][2]).toBe(' ');
    });

    it('clear button empties the grid', async () => {
        await openCanvas();
        const charInput = $('#ascii-char-input');
        charInput.value = '#';
        charInput.dispatchEvent(new Event('input', { bubbles: true }));
        await sleep(20);
        clickCell(1, 1);
        clickCell(2, 2);
        clickCell(3, 3);
        await sleep(20);

        click('#ascii-canvas-clear');
        await sleep(20);

        const lines = getGridLines();
        // All chars should be space
        const allSpace = lines.every(l => /^ *$/.test(l));
        expect(allSpace).toBe(true);
    });
});

// ── Character Selection ──

describe('Canvas Plugin: Character Selection', () => {
    afterEach(async () => {
        closeCanvasIfOpen();
        await closeAll();
    });

    it('clicking palette button updates active char', async () => {
        await openCanvas();
        const targetBtn = document.querySelector('#ascii-char-palette .ascii-char-btn');
        const ch = targetBtn.textContent;
        click(targetBtn);
        await sleep(20);

        // Draw with that char
        clickCell(0, 0);
        await sleep(20);

        const lines = getGridLines();
        expect(lines[0][0]).toBe(ch);
    });

    it('typing in char input changes active character', async () => {
        await openCanvas();
        const charInput = $('#ascii-char-input');
        charInput.value = '@';
        charInput.dispatchEvent(new Event('input', { bubbles: true }));
        await sleep(20);

        clickCell(4, 4);
        await sleep(20);

        const lines = getGridLines();
        expect(lines[4][4]).toBe('@');
    });
});

// ── Insert into Editor ──

describe('Canvas Plugin: Insert', () => {
    afterEach(async () => {
        closeCanvasIfOpen();
        await closeAll();
    });

    it('OK button inserts ```ascii block into editor body', async () => {
        await openCanvas();
        const charInput = $('#ascii-char-input');
        charInput.value = 'Z';
        charInput.dispatchEvent(new Event('input', { bubbles: true }));
        await sleep(20);

        clickCell(0, 0);
        clickCell(1, 0);
        clickCell(2, 0);
        await sleep(20);

        click('#ascii-canvas-ok');
        await sleep(50);

        const body = $('#editor-body');
        expect(body.value).toContain('```ascii');
        expect(body.value).toContain('ZZZ');
        expect(body.value).toContain('```\n');
    });

    it('cancel does NOT insert anything', async () => {
        await openEditor();
        const body = $('#editor-body');
        const beforeLen = body.value.length;

        const btn = document.querySelector('[data-md="asciiart"]');
        btn.click();
        await sleep(100);

        const charInput = $('#ascii-char-input');
        charInput.value = 'Q';
        charInput.dispatchEvent(new Event('input', { bubbles: true }));
        await sleep(20);
        clickCell(0, 0);
        await sleep(20);

        click('#ascii-canvas-cancel');
        await sleep(50);

        expect(body.value.length).toBe(beforeLen);
    });
});

// ── Edit existing block ──

describe('Canvas Plugin: Edit Existing Block', () => {
    afterEach(async () => {
        closeCanvasIfOpen();
        await closeAll();
    });

    it('cursor inside ```ascii block loads existing content', async () => {
        await openEditor();
        const body = $('#editor-body');
        body.value = '```ascii\n###\n###\n```';
        body.dispatchEvent(new Event('input', { bubbles: true }));
        // Place cursor inside the block content
        const insidePos = body.value.indexOf('###') + 1;
        body.selectionStart = body.selectionEnd = insidePos;

        const btn = document.querySelector('[data-md="asciiart"]');
        btn.click();
        await sleep(150);

        const lines = getGridLines();
        // First two lines should contain the existing # chars
        expect(lines[0].startsWith('###')).toBe(true);
        expect(lines[1].startsWith('###')).toBe(true);
    });
});

// ── Markdown Rendering ──

describe('Canvas Plugin: Markdown Rendering', () => {
    it('```ascii fenced block renders as <pre class="ascii-art">', async () => {
        // Use the registered handler directly via the registry
        const handlers = window.hyprcrd.markdown.getFencedBlocks();
        const ascii = handlers.find(h => h.lang === 'ascii');
        expect(ascii).toExist();
        const html = ascii.handler('###\n###\n###', { esc: window.hyprcrd.util.esc });
        expect(html).toContain('<pre class="ascii-art">');
        expect(html).toContain('###');
    });

    it('renderMd produces ascii-art pre when given an ```ascii block', async () => {
        const { renderMd } = await import('../../js/modules/markdown.js');
        const html = renderMd('```ascii\n***\n***\n```');
        expect(html).toContain('ascii-art');
        expect(html).toContain('***');
    });
});