plugin infrastruktur
This commit is contained in:
th committed
1 parent
1545b90f39
commit
3f4ba3c0f4
35 files changed
+1303
-195
No files matched your search
@@ -0,0 +1,377 @@
|
||||
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('***');
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user