378 lines
12 KiB
JavaScript
378 lines
12 KiB
JavaScript
import { describe, it, beforeEach, afterEach, expect, $, click, sleep, closeAll } from './runner.js';
|
|
|
|
// ── 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('***');
|
|
});
|
|
});
|