thandClaude Opus 4.6
56c90225cb
context-menu: group delete (public/js/modules/context-menu.js):
* When the delete action targets a card that has children (a group
parent), the confirmation dialog is ALWAYS shown regardless of the
hyprcrd-confirm-delete setting — group deletion is destructive
enough that it should never happen accidentally. The dialog lists
every child card by title and the OK button reads
"Delete all N" (parent + children counted).
* Children are deleted first (avoids orphan flicker), then the parent.
* Undo: a single pushUndo entry recreates the parent via POST first,
then all children with parent_id pointing at the new parent id.
due_date is restored via a follow-up PATCH since POST doesn't
accept it. Ctrl+Z fully restores the group hierarchy.
* Non-group cards keep the existing behavior (simple confirm if the
setting is on, single delete, pushCardDelete for undo).
tests (public/plugins/tests/card-interactions.test.js):
* New describe "Card: Group Delete" with two tests:
- "deleting a group removes parent AND all children": creates a
parent + 2 children, right-clicks the parent, clicks delete,
asserts the dialog text contains both child titles, confirms,
verifies all 3 cards are gone from the API.
- "Ctrl+Z after group delete restores parent + children": creates
parent + 1 child, deletes the group, confirms both gone, fires
Ctrl+Z, finds the restored cards by title, asserts
child.parent_id === restoredParent.id.
Both tests save/restore the hyprcrd-confirm-delete localStorage
value and soft-skip if the parent isn't visible on the board.
runner: retry progress bar (public/plugins/tests/runner.js):
* hideProgress() was called inside runAll() at the end of the first
pass, which removed the #test-progress element before the retry
pass started. The retry ran invisibly — "retrying…" never showed.
Moved hideProgress() out of runAll() into run(), after both the
first pass and the retry pass are done. The bar now stays visible
for the whole sequence: first pass fills to 100%, retry resets the
fill to 0 (via updateProgress(0, total, 'retrying…', false)) and
fills again for just the failed tests.
chore: bump version to 0.9.10
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
394 lines
17 KiB
JavaScript
394 lines
17 KiB
JavaScript
import { describe, it, afterEach, expect, $, $$, click, rightClick, sleep, closeAll, csrf } from './runner.js?v=2';
|
|
import { state } from '../../js/modules/state.js';
|
|
|
|
describe('Card: Tag Operations', () => {
|
|
afterEach(() => closeAll());
|
|
|
|
it('tag chips visible on cards (if setting on)', () => {
|
|
if (localStorage.getItem('hyprcrd-show-tags') === '0') return;
|
|
const card = $('#board [data-id]');
|
|
if (!card) return;
|
|
const tags = card.querySelectorAll('.tag-chip');
|
|
// May or may not have tags, just verify no crash
|
|
expect(tags).toExist();
|
|
});
|
|
|
|
it('tag click filters board', async () => {
|
|
const seg = document.querySelector('#board .tag-seg[data-tag]');
|
|
if (!seg) return;
|
|
const tag = seg.dataset.tag;
|
|
seg.click();
|
|
await sleep(200);
|
|
expect(state.activeTags).toContain(tag);
|
|
// Reset
|
|
seg.click();
|
|
await sleep(100);
|
|
});
|
|
|
|
it('tag right-click removes tag from card', async () => {
|
|
// Create a card with a tag
|
|
const res = await fetch('api/cards', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ title: '__test_tag_rm__', body: 'text #testtag123', color: '#38bdf8' }),
|
|
}).then(r => r.json());
|
|
await window._reloadAll?.();
|
|
await sleep(200);
|
|
|
|
const cardEl = document.querySelector(`[data-id="${res.id}"]`);
|
|
const tagSeg = cardEl?.querySelector('.tag-seg[data-tag="testtag123"]');
|
|
if (tagSeg) {
|
|
tagSeg.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, preventDefault: true }));
|
|
await sleep(300);
|
|
// Verify tag removed
|
|
const updated = await fetch(`api/cards?ids=${res.id}`).then(r => r.json());
|
|
const card = updated.find(c => c.id == res.id);
|
|
expect(card.tags).toBeFalsy();
|
|
}
|
|
});
|
|
});
|
|
|
|
describe('Card: Due Date & Done', () => {
|
|
afterEach(() => closeAll());
|
|
|
|
it('card with due_date shows due pill', async () => {
|
|
const res = await fetch('api/cards', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ title: '__test_due_pill__', body: '', color: '#38bdf8' }),
|
|
}).then(r => r.json());
|
|
await fetch(`api/cards/${res.id}`, {
|
|
method: 'PATCH', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ due_date: '2099-12-31' }),
|
|
});
|
|
await window._reloadAll?.();
|
|
await sleep(200);
|
|
|
|
const cardEl = document.querySelector(`[data-id="${res.id}"]`);
|
|
const pill = cardEl?.querySelector('.due-pill');
|
|
expect(pill).toExist();
|
|
expect(pill.textContent).toContain('2099-12-31');
|
|
});
|
|
|
|
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' }),
|
|
}).then(r => r.json());
|
|
await window._reloadAll?.();
|
|
await sleep(200);
|
|
|
|
const cardEl = document.querySelector(`[data-id="${res.id}"]`);
|
|
const badge = cardEl?.querySelector('.card-done-badge');
|
|
expect(badge).toExist();
|
|
});
|
|
|
|
it('overdue card has danger border', async () => {
|
|
const res = await fetch('api/cards', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ title: '__test_overdue__', body: '', color: '#38bdf8' }),
|
|
}).then(r => r.json());
|
|
await fetch(`api/cards/${res.id}`, {
|
|
method: 'PATCH', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ due_date: '2020-01-01' }),
|
|
});
|
|
await window._reloadAll?.();
|
|
await sleep(200);
|
|
|
|
const cardEl = document.querySelector(`[data-id="${res.id}"]`);
|
|
expect(cardEl).toExist();
|
|
// Overdue cards get danger border via inline style
|
|
expect(cardEl.style.borderBottom).toContain('var(--t-danger)');
|
|
});
|
|
});
|
|
|
|
describe('Card: Context Menu Actions', () => {
|
|
afterEach(() => closeAll());
|
|
|
|
it('favorite toggles', async () => {
|
|
const card = $('#board [data-id]');
|
|
if (!card) return;
|
|
rightClick(card);
|
|
await sleep(150);
|
|
const favBtn = $$('#ctx-items [data-action="favorite"]')[0];
|
|
const wasFav = favBtn?.textContent.toLowerCase().includes('unfavorite');
|
|
click(favBtn);
|
|
await sleep(200);
|
|
|
|
// Open menu again to check toggled state
|
|
rightClick(card);
|
|
await sleep(150);
|
|
const favBtn2 = $$('#ctx-items [data-action="favorite"]')[0];
|
|
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() },
|
|
body: JSON.stringify({ title: '__test_color_ctx__', 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);
|
|
// Click color action to open submenu
|
|
click($$('#ctx-items [data-action="color"]')[0]);
|
|
await sleep(100);
|
|
// Pick a different color
|
|
const colorBtn = document.querySelector('#ctx-color-grid [data-ctx-color="#fb7185"]');
|
|
if (colorBtn) {
|
|
click(colorBtn);
|
|
await sleep(300);
|
|
const updated = await fetch(`api/cards?ids=${res.id}`).then(r => r.json());
|
|
expect(updated.find(c => c.id == res.id).color).toBe('#fb7185');
|
|
}
|
|
});
|
|
});
|
|
|
|
describe('Card: Bucket Assignment', () => {
|
|
afterEach(() => closeAll());
|
|
|
|
it('card moves to bucket via context menu', async () => {
|
|
// Create bucket and card
|
|
const bucket = await fetch('api/buckets', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ name: '__test_ctx_bucket__' }),
|
|
}).then(r => r.json());
|
|
|
|
const card = await fetch('api/cards', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ title: '__test_ctx_move__', body: '', color: '#38bdf8' }),
|
|
}).then(r => r.json());
|
|
await window._reloadAll?.();
|
|
await sleep(200);
|
|
|
|
const cardEl = document.querySelector(`[data-id="${card.id}"]`);
|
|
if (!cardEl) return;
|
|
rightClick(cardEl);
|
|
await sleep(150);
|
|
// Click bucket action
|
|
click($$('#ctx-items [data-action="bucket"]')[0]);
|
|
await sleep(100);
|
|
// Click the test bucket in submenu
|
|
const bucketBtn = $$('#ctx-buckets [data-ctx-bucket]').find(b => b.dataset.ctxBucket == bucket.id);
|
|
if (bucketBtn) {
|
|
click(bucketBtn);
|
|
await sleep(300);
|
|
const updated = await fetch(`api/cards?ids=${card.id}`).then(r => r.json());
|
|
expect(updated.find(c => c.id == card.id).bucket_id).toBe(bucket.id);
|
|
}
|
|
});
|
|
});
|
|
|
|
describe('Card: Grouping', () => {
|
|
afterEach(() => closeAll());
|
|
|
|
it('cards can be grouped via API', async () => {
|
|
const parent = await fetch('api/cards', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ title: '__test_parent__', body: '', color: '#38bdf8' }),
|
|
}).then(r => r.json());
|
|
const child = await fetch('api/cards', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ title: '__test_child__', body: '', color: '#38bdf8' }),
|
|
}).then(r => r.json());
|
|
|
|
await fetch(`api/cards/${child.id}`, {
|
|
method: 'PATCH', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ parent_id: parent.id }),
|
|
});
|
|
|
|
const all = await fetch(`api/cards?ids=${child.id}`).then(r => r.json());
|
|
expect(all.find(c => c.id == child.id).parent_id).toBe(parent.id);
|
|
});
|
|
|
|
it('child card hidden on board (shown under parent)', async () => {
|
|
const parent = await fetch('api/cards', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ title: '__test_grp_parent__', body: '', color: '#38bdf8' }),
|
|
}).then(r => r.json());
|
|
const child = await fetch('api/cards', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ title: '__test_grp_child__', body: '', color: '#38bdf8', parent_id: parent.id }),
|
|
}).then(r => r.json());
|
|
|
|
await window._reloadAll?.();
|
|
await sleep(200);
|
|
|
|
// Child should not be a standalone card on board
|
|
const childEl = document.querySelector(`[data-id="${child.id}"]`);
|
|
// It may or may not render depending on group view, but parent should exist
|
|
const parentEl = document.querySelector(`[data-id="${parent.id}"]`);
|
|
expect(parentEl).toExist();
|
|
});
|
|
});
|
|
|
|
describe('Card: Group Delete', () => {
|
|
afterEach(() => closeAll());
|
|
|
|
it('deleting a group removes parent AND all children', async () => {
|
|
// Disable confirm-delete so the non-group path doesn't block,
|
|
// but the group delete ALWAYS confirms regardless of this setting.
|
|
const prevConfirm = localStorage.getItem('hyprcrd-confirm-delete');
|
|
localStorage.setItem('hyprcrd-confirm-delete', '0');
|
|
|
|
const parent = await fetch('api/cards', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ title: '__test_grpdel_parent__', body: '', color: '#38bdf8' }),
|
|
}).then(r => r.json());
|
|
const child1 = await fetch('api/cards', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ title: '__test_grpdel_child1__', body: '', color: '#38bdf8', parent_id: parent.id }),
|
|
}).then(r => r.json());
|
|
const child2 = await fetch('api/cards', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ title: '__test_grpdel_child2__', body: '', color: '#38bdf8', parent_id: parent.id }),
|
|
}).then(r => r.json());
|
|
await window._reloadAll?.();
|
|
await sleep(200);
|
|
|
|
// The group parent should be on the board
|
|
const parentEl = document.querySelector(`[data-id="${parent.id}"]`);
|
|
if (!parentEl) {
|
|
// Restore and skip if parent not visible (e.g. filter state)
|
|
if (prevConfirm !== null) localStorage.setItem('hyprcrd-confirm-delete', prevConfirm);
|
|
else localStorage.removeItem('hyprcrd-confirm-delete');
|
|
return;
|
|
}
|
|
|
|
// Right-click → delete. The group delete dialog always shows
|
|
// regardless of the confirm-delete setting. We need to auto-
|
|
// confirm it. The showDialog function exposes the dialog element
|
|
// as #dialog; the OK button is .dialog-ok.
|
|
rightClick(parentEl);
|
|
await sleep(150);
|
|
click($$('#ctx-items [data-action="delete"]')[0]);
|
|
await sleep(200);
|
|
|
|
// The confirmation dialog should be showing the child list
|
|
const dialog = document.getElementById('dialog');
|
|
if (dialog?.classList.contains('open')) {
|
|
const msg = dialog.querySelector('#dialog-msg');
|
|
// Dialog should mention both children
|
|
expect(msg.textContent).toContain('__test_grpdel_child1__');
|
|
expect(msg.textContent).toContain('__test_grpdel_child2__');
|
|
// Confirm the delete
|
|
const okBtn = dialog.querySelector('.dialog-ok');
|
|
if (okBtn) click(okBtn);
|
|
await sleep(500);
|
|
}
|
|
|
|
// All three cards should be gone
|
|
const remaining = await fetch('api/cards').then(r => r.json());
|
|
expect(remaining.some(c => c.id === parent.id)).toBe(false);
|
|
expect(remaining.some(c => c.id === child1.id)).toBe(false);
|
|
expect(remaining.some(c => c.id === child2.id)).toBe(false);
|
|
|
|
if (prevConfirm !== null) localStorage.setItem('hyprcrd-confirm-delete', prevConfirm);
|
|
else localStorage.removeItem('hyprcrd-confirm-delete');
|
|
});
|
|
|
|
it('Ctrl+Z after group delete restores parent + children', async () => {
|
|
const prevConfirm = localStorage.getItem('hyprcrd-confirm-delete');
|
|
localStorage.setItem('hyprcrd-confirm-delete', '0');
|
|
|
|
const parent = await fetch('api/cards', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ title: '__test_grpundo_parent__', body: 'parent body', color: '#fb7185' }),
|
|
}).then(r => r.json());
|
|
const child = await fetch('api/cards', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf() },
|
|
body: JSON.stringify({ title: '__test_grpundo_child__', body: 'child body', color: '#38bdf8', parent_id: parent.id }),
|
|
}).then(r => r.json());
|
|
await window._reloadAll?.();
|
|
await sleep(200);
|
|
|
|
const parentEl = document.querySelector(`[data-id="${parent.id}"]`);
|
|
if (!parentEl) {
|
|
if (prevConfirm !== null) localStorage.setItem('hyprcrd-confirm-delete', prevConfirm);
|
|
else localStorage.removeItem('hyprcrd-confirm-delete');
|
|
return;
|
|
}
|
|
|
|
// Delete the group
|
|
rightClick(parentEl);
|
|
await sleep(150);
|
|
click($$('#ctx-items [data-action="delete"]')[0]);
|
|
await sleep(200);
|
|
const dialog = document.getElementById('dialog');
|
|
if (dialog?.classList.contains('open')) {
|
|
const okBtn = dialog.querySelector('.dialog-ok');
|
|
if (okBtn) click(okBtn);
|
|
await sleep(500);
|
|
}
|
|
|
|
// Confirm both are gone
|
|
let cards = await fetch('api/cards').then(r => r.json());
|
|
expect(cards.some(c => c.id === parent.id)).toBe(false);
|
|
expect(cards.some(c => c.id === child.id)).toBe(false);
|
|
|
|
// Undo
|
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'z', ctrlKey: true, bubbles: true }));
|
|
await sleep(600);
|
|
|
|
// Parent + child should be back (new ids, find by title)
|
|
cards = await fetch('api/cards').then(r => r.json());
|
|
const restoredParent = cards.find(c => c.title === '__test_grpundo_parent__');
|
|
const restoredChild = cards.find(c => c.title === '__test_grpundo_child__');
|
|
expect(restoredParent).toExist();
|
|
expect(restoredChild).toExist();
|
|
// Child should point at the restored parent
|
|
expect(restoredChild.parent_id).toBe(restoredParent.id);
|
|
|
|
if (prevConfirm !== null) localStorage.setItem('hyprcrd-confirm-delete', prevConfirm);
|
|
else localStorage.removeItem('hyprcrd-confirm-delete');
|
|
});
|
|
});
|