tests: rebind runner to Ctrl+Shift+Alt+T and cover recent fixes
Plugin loader + runner shortcut moves to Ctrl+Shift+Alt+T (the old Ctrl+Shift+T conflicts with the browser "reopen closed tab"). Loader now imports runner.js *without* the cache-busting query so it picks up the same module instance the test files register their suites into — previously the shortcut opened a fresh runner with an empty suites array and reported 0/0 passed. New / fixed coverage: - card-interactions: favorite toggle assertion is now case-insensitive (context menu was capitalized to "Unfavorite"/"Favorite" earlier); done-badge test guards against state.hideDone / hideTagged that would filter the test card off the board; new test for the always-on Mark done / Unmark done toggle on a card without due_date. - context-menu: copy-text action exists; copy-text strips fenced code blocks, image markdown and inline #tags. Mocks navigator.clipboard via Object.defineProperty so the assertion works without a focused / secure-context clipboard. - export: round-trip preserves a custom bucket color (covers the import handler regression that was wiping bucket colors on every test run). - theme: design preset selection persists in localStorage across settings open/close, refreshPresetSelect ignores unknown keys. afterEach restores both hyprcrd-design-active-preset and hyprcrd-design so a test run can't permanently swap the user's design. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
ccd0477841
commit
43c15b81a3
8 files changed
+241
-13
No files matched your search
@@ -70,6 +70,7 @@ describe('Card: Due Date & Done', () => {
|
||||
|
||||
it('card with #done tag shows done badge', async () => {
|
||||
if (localStorage.getItem('hyprcrd-show-done-badge') === '0') return;
|
||||
if (state.hideDone || state.hideTagged) return;
|
||||
const res = await fetch('api/cards', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
||||
body: JSON.stringify({ title: '__test_done_badge__', body: '#done', color: '#38bdf8' }),
|
||||
@@ -110,7 +111,7 @@ describe('Card: Context Menu Actions', () => {
|
||||
rightClick(card);
|
||||
await sleep(150);
|
||||
const favBtn = $$('#ctx-items [data-action="favorite"]')[0];
|
||||
const wasFav = favBtn?.textContent.includes('unfavorite');
|
||||
const wasFav = favBtn?.textContent.toLowerCase().includes('unfavorite');
|
||||
click(favBtn);
|
||||
await sleep(200);
|
||||
|
||||
@@ -118,13 +119,53 @@ describe('Card: Context Menu Actions', () => {
|
||||
rightClick(card);
|
||||
await sleep(150);
|
||||
const favBtn2 = $$('#ctx-items [data-action="favorite"]')[0];
|
||||
const isFav = favBtn2?.textContent.includes('unfavorite');
|
||||
const isFav = favBtn2?.textContent.toLowerCase().includes('unfavorite');
|
||||
expect(isFav).toBe(!wasFav);
|
||||
// Toggle back
|
||||
click(favBtn2);
|
||||
await sleep(100);
|
||||
});
|
||||
|
||||
it('mark done toggles #done on cards without due_date', async () => {
|
||||
// After clicking, the card has #done — if either filter is on it would
|
||||
// disappear from the board before the second right-click can find it.
|
||||
if (state.hideDone || state.hideTagged) return;
|
||||
// Create a card with no due_date — Mark done used to be hidden in this case
|
||||
const res = await fetch('api/cards', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
||||
body: JSON.stringify({ title: '__test_mark_done__', body: 'plain text', color: '#38bdf8' }),
|
||||
}).then(r => r.json());
|
||||
await window._reloadAll?.();
|
||||
await sleep(200);
|
||||
|
||||
const cardEl = document.querySelector(`[data-id="${res.id}"]`);
|
||||
if (!cardEl) return;
|
||||
rightClick(cardEl);
|
||||
await sleep(150);
|
||||
|
||||
// The action must always be present, even with no due_date
|
||||
const doneBtn = $$('#ctx-items [data-action="due-done"]')[0];
|
||||
expect(doneBtn).toExist();
|
||||
expect(doneBtn.textContent.toLowerCase()).toContain('mark done');
|
||||
|
||||
click(doneBtn);
|
||||
await sleep(300);
|
||||
let updated = await fetch(`api/cards?ids=${res.id}`).then(r => r.json());
|
||||
expect((updated[0].body || '').toLowerCase()).toContain('#done');
|
||||
expect(updated[0].tags || '').toContain('done');
|
||||
|
||||
// Re-open menu — the entry should now flip to "Unmark done"
|
||||
rightClick(document.querySelector(`[data-id="${res.id}"]`));
|
||||
await sleep(150);
|
||||
const doneBtn2 = $$('#ctx-items [data-action="due-done"]')[0];
|
||||
expect(doneBtn2.textContent.toLowerCase()).toContain('unmark');
|
||||
|
||||
click(doneBtn2);
|
||||
await sleep(300);
|
||||
updated = await fetch(`api/cards?ids=${res.id}`).then(r => r.json());
|
||||
expect((updated[0].body || '').toLowerCase().includes('#done')).toBe(false);
|
||||
});
|
||||
|
||||
it('color submenu changes card color', async () => {
|
||||
const res = await fetch('api/cards', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { describe, it, afterEach, expect, $, $$, rightClick, sleep } from './runner.js';
|
||||
import { describe, it, afterEach, expect, $, $$, click, rightClick, sleep, csrf } from './runner.js';
|
||||
|
||||
describe('Context Menu', () => {
|
||||
afterEach(async () => {
|
||||
@@ -52,4 +52,81 @@ describe('Context Menu', () => {
|
||||
await sleep(50);
|
||||
expect($('#ctx-menu').classList.contains('hidden')).toBe(true);
|
||||
});
|
||||
|
||||
it('has copy-text action', async () => {
|
||||
const card = $('#board [data-id]');
|
||||
if (!card) return;
|
||||
rightClick(card);
|
||||
await sleep(150);
|
||||
const actions = $$('#ctx-items [data-action]').map(b => b.dataset.action);
|
||||
expect(actions).toContain('copy-text');
|
||||
});
|
||||
|
||||
it('copy-text strips tags, code blocks and image markdown', async () => {
|
||||
// Stub navigator.clipboard.writeText so we can capture what would be copied
|
||||
// without depending on a focused/secure-context clipboard.
|
||||
const origWrite = navigator.clipboard?.writeText?.bind(navigator.clipboard);
|
||||
let captured = null;
|
||||
try {
|
||||
Object.defineProperty(navigator, 'clipboard', {
|
||||
value: { writeText: async (t) => { captured = t; } },
|
||||
configurable: true,
|
||||
});
|
||||
} catch {
|
||||
// some browsers don't allow re-defining `clipboard` — bail out cleanly
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const body = [
|
||||
'first line',
|
||||
'',
|
||||
'',
|
||||
'```js',
|
||||
'console.log("nope")',
|
||||
'```',
|
||||
'second line #tagone with #tagtwo inline',
|
||||
].join('\n');
|
||||
|
||||
const res = await fetch('api/cards', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
||||
body: JSON.stringify({ title: '__test_copy_text__', body, color: '#38bdf8' }),
|
||||
}).then(r => r.json());
|
||||
await window._reloadAll?.();
|
||||
await sleep(200);
|
||||
|
||||
const cardEl = document.querySelector(`[data-id="${res.id}"]`);
|
||||
if (!cardEl) return;
|
||||
rightClick(cardEl);
|
||||
await sleep(150);
|
||||
|
||||
const copyBtn = $$('#ctx-items [data-action="copy-text"]')[0];
|
||||
expect(copyBtn).toExist();
|
||||
click(copyBtn);
|
||||
await sleep(100);
|
||||
|
||||
expect(captured).toExist();
|
||||
// Title goes first, separated by a blank line
|
||||
expect(captured.startsWith('__test_copy_text__\n\n')).toBe(true);
|
||||
expect(captured).toContain('first line');
|
||||
expect(captured).toContain('second line');
|
||||
// Tags removed (chip + suffix), but the surrounding word "with" stays
|
||||
expect(captured).toContain('with');
|
||||
expect(captured.includes('#tagone')).toBe(false);
|
||||
expect(captured.includes('#tagtwo')).toBe(false);
|
||||
// Fenced code block dropped entirely
|
||||
expect(captured.includes('console.log')).toBe(false);
|
||||
expect(captured.includes('```')).toBe(false);
|
||||
// Image markdown dropped
|
||||
expect(captured.includes('uploads/foo.png')).toBe(false);
|
||||
expect(captured.includes('![')).toBe(false);
|
||||
} finally {
|
||||
try {
|
||||
Object.defineProperty(navigator, 'clipboard', {
|
||||
value: { writeText: origWrite || (async () => {}) },
|
||||
configurable: true,
|
||||
});
|
||||
} catch {}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -114,4 +114,28 @@ describe('Export: Backup Integrity', () => {
|
||||
expect(found.tags).toContain('beta');
|
||||
expect(found.due_date).toBe('2099-12-31');
|
||||
});
|
||||
|
||||
it('export→import preserves bucket color', async () => {
|
||||
// Create a bucket with a recognizable name and patch a custom color onto it
|
||||
const b = await fetch('api/buckets', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
||||
body: JSON.stringify({ name: '__test_bucket_color__' }),
|
||||
}).then(r => r.json());
|
||||
await fetch(`api/buckets/${b.id}`, {
|
||||
method: 'PATCH', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
||||
body: JSON.stringify({ color: '#fb7185' }),
|
||||
});
|
||||
|
||||
// Round-trip through export → replace-import
|
||||
const blob = await fetch('api/export').then(r => r.blob());
|
||||
const form = new FormData();
|
||||
form.append('file', blob, 'roundtrip.zip');
|
||||
await fetch('api/import', { method: 'POST', body: form, headers: { 'X-CSRF-Token': csrf() } });
|
||||
|
||||
// The bucket must reappear with the same custom color (not the schema default)
|
||||
const buckets = await fetch('api/buckets').then(r => r.json());
|
||||
const found = buckets.find(x => x.name === '__test_bucket_color__');
|
||||
expect(found).toExist();
|
||||
expect(found.color).toBe('#fb7185');
|
||||
});
|
||||
});
|
||||
@@ -2,7 +2,7 @@
|
||||
//
|
||||
// The test runner is heavy (40+ test files), so we only load it when:
|
||||
// - URL contains ?test query param → auto-run
|
||||
// - Ctrl+Shift+T pressed → manual open
|
||||
// - Ctrl+Shift+Alt+T pressed → manual open
|
||||
//
|
||||
// Tests are completely optional — without this plugin the app has no
|
||||
// test runner code loaded at all.
|
||||
@@ -19,12 +19,16 @@ if (new URLSearchParams(location.search).has('test')) {
|
||||
import('./tests.js' + V);
|
||||
}
|
||||
|
||||
// Keyboard shortcut: Ctrl+Shift+T → open runner
|
||||
// Keyboard shortcut: Ctrl+Shift+Alt+T → open runner.
|
||||
// Import runner.js *without* the cache-busting query so we get the same
|
||||
// module instance that the test files register their suites into. With a
|
||||
// `?v=` suffix the browser treats it as a distinct module and we'd open
|
||||
// a fresh runner whose `suites` array is empty (→ "0/0 passed").
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.ctrlKey && e.shiftKey && e.key === 'T') {
|
||||
if (e.ctrlKey && e.shiftKey && e.altKey && (e.key === 'T' || e.key === 't')) {
|
||||
e.preventDefault();
|
||||
import('./tests.js' + V).then(() =>
|
||||
import('./runner.js' + V).then(m => m.open?.())
|
||||
import('./runner.js').then(m => m.open?.())
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "tests",
|
||||
"version": "1.0.0",
|
||||
"description": "UI + state test runner. Loads only when ?test query param is present or Ctrl+Shift+T is pressed.",
|
||||
"description": "UI + state test runner. Loads only when ?test query param is present or Ctrl+Shift+Alt+T is pressed.",
|
||||
"frontend": {
|
||||
"js": ["loader.js"],
|
||||
"css": [],
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// ── hyprcrd GUI Test Runner ──
|
||||
// Self-contained in-app test framework. No external dependencies.
|
||||
// Activate: ?test=1 in URL or Ctrl+Shift+T
|
||||
// Activate: ?test=1 in URL or Ctrl+Shift+Alt+T
|
||||
// Panel is hidden during test run so interactions are visible.
|
||||
// Backup is created before and auto-restored after every run.
|
||||
|
||||
@@ -351,7 +351,7 @@ if (new URLSearchParams(location.search).has('test')) {
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.ctrlKey && e.shiftKey && e.key === 'T') {
|
||||
if (e.ctrlKey && e.shiftKey && e.altKey && (e.key === 'T' || e.key === 't')) {
|
||||
e.preventDefault();
|
||||
panel ? close() : open();
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ Self-contained in-app test suite. No external dependencies.
|
||||
## Activation
|
||||
|
||||
- **URL**: append `?test=1`
|
||||
- **Keyboard**: `Ctrl+Shift+T`
|
||||
- **Keyboard**: `Ctrl+Shift+Alt+T`
|
||||
- **Safety**: automatic backup before run, auto-restore after
|
||||
- **Visibility**: panel hides during tests so you can watch interactions, shows results after
|
||||
- **Sync paused**: background sync and autoSync disabled during tests
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { describe, it, expect } from './runner.js';
|
||||
import { describe, it, afterEach, expect, $, $$, click, closeAll, sleep } from './runner.js';
|
||||
|
||||
describe('Theme', () => {
|
||||
it('CSS custom properties set', () => {
|
||||
@@ -28,8 +28,90 @@ describe('Theme', () => {
|
||||
});
|
||||
|
||||
describe('Keyboard Shortcuts', () => {
|
||||
it('Ctrl+Shift+T bound (test runner)', () => {
|
||||
it('Ctrl+Shift+Alt+T bound (test runner)', () => {
|
||||
// Just verify we got here — the test runner itself proves this works
|
||||
expect(true).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Theme: Design preset persistence', () => {
|
||||
const STORAGE_KEY = 'hyprcrd-design-active-preset';
|
||||
const DESIGN_KEY = 'hyprcrd-design';
|
||||
let savedActive = null;
|
||||
let savedDesign = null;
|
||||
|
||||
afterEach(async () => {
|
||||
// Restore the user's actual preset selection AND committed design.
|
||||
// loadSelectedPreset() in the test fires commitDesign() which writes
|
||||
// to hyprcrd-design — without this restore, running the test would
|
||||
// permanently swap the user's design.
|
||||
if (savedActive === null) localStorage.removeItem(STORAGE_KEY);
|
||||
else localStorage.setItem(STORAGE_KEY, savedActive);
|
||||
if (savedDesign === null) localStorage.removeItem(DESIGN_KEY);
|
||||
else localStorage.setItem(DESIGN_KEY, savedDesign);
|
||||
await closeAll();
|
||||
});
|
||||
|
||||
function snapshot() {
|
||||
savedActive = localStorage.getItem(STORAGE_KEY);
|
||||
savedDesign = localStorage.getItem(DESIGN_KEY);
|
||||
}
|
||||
|
||||
async function openThemeTab() {
|
||||
click('#settings-btn');
|
||||
await sleep(150);
|
||||
const tab = $$('.settings-tab').find(t => t.dataset.tab === 'theme');
|
||||
if (tab) click(tab);
|
||||
await sleep(150);
|
||||
}
|
||||
|
||||
it('preset select exists in theme tab', async () => {
|
||||
snapshot();
|
||||
await openThemeTab();
|
||||
expect($('#design-preset-select')).toExist();
|
||||
});
|
||||
|
||||
it('changing preset writes active key to localStorage', async () => {
|
||||
snapshot();
|
||||
await openThemeTab();
|
||||
const sel = $('#design-preset-select');
|
||||
if (!sel) return;
|
||||
const opt = sel.querySelector('option[value^="builtin:"]');
|
||||
if (!opt) return;
|
||||
sel.value = opt.value;
|
||||
sel.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
await sleep(100);
|
||||
expect(localStorage.getItem(STORAGE_KEY)).toBe(opt.value);
|
||||
});
|
||||
|
||||
it('reopening settings restores the previously selected preset', async () => {
|
||||
snapshot();
|
||||
// Pre-seed an active preset before settings is ever opened in this test
|
||||
await openThemeTab();
|
||||
const sel = $('#design-preset-select');
|
||||
if (!sel) return;
|
||||
const opts = [...sel.querySelectorAll('option[value^="builtin:"]')];
|
||||
if (opts.length < 2) return;
|
||||
const target = opts[1].value;
|
||||
localStorage.setItem(STORAGE_KEY, target);
|
||||
|
||||
// Close + reopen settings to trigger initDesignSettings → refreshPresetSelect
|
||||
click('#settings-close');
|
||||
await sleep(150);
|
||||
await openThemeTab();
|
||||
|
||||
const sel2 = $('#design-preset-select');
|
||||
expect(sel2.value).toBe(target);
|
||||
});
|
||||
|
||||
it('refreshPresetSelect ignores unknown preset keys', async () => {
|
||||
snapshot();
|
||||
localStorage.setItem(STORAGE_KEY, 'user:__definitely_not_a_real_preset__');
|
||||
await openThemeTab();
|
||||
const sel = $('#design-preset-select');
|
||||
if (!sel) return;
|
||||
// Must not throw and must not assign the bogus value to the select
|
||||
expect(sel.value).toBe(sel.value); // sanity: didn't crash above
|
||||
expect(sel.value === 'user:__definitely_not_a_real_preset__').toBe(false);
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user