marcel/familienarchiv
1
0
Fork 0
Code Issues 119 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

test(discussion): rewrite CommentThread test with behavioral assertions

Browse Source 
Replaces 8 setTimeout sleeps with vi.waitFor on the actual signal
(textarea value, fetch URL recorded, onCountChange call) and converts
3 .not.toThrow smoke tests into behavioural assertions:

- "no onCountChange wired" → asserts initial comment text still renders
- "network error during reload" → asserts empty-hint state is shown
- "non-OK reload" → asserts empty-hint state is shown

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-11 17:16:55 +02:00
committed by marcel
parent 251891fbed
commit f3915c4878
1 changed files with 71 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
frontend/src/lib/shared/discussion/CommentThread.svelte.test.ts
View File

@@ -58,7 +58,6 @@ describe('CommentThread', () => {
});
await expect.element(page.getByText('First comment')).toBeVisible();
// 1 comment singular — header text contains "1" and "Kommentar"
const header = document.querySelector('.font-sans.font-semibold');
expect(header?.textContent).toMatch(/1\s+Kommentar(?!e)/);
});
@@ -149,9 +148,10 @@ describe('CommentThread', () => {
}
});
await new Promise((r) => setTimeout(r, 50));
const ta = document.querySelector('textarea') as HTMLTextAreaElement;
expect(ta.value).toContain('die wichtige Stelle');
await vi.waitFor(() => {
const ta = document.querySelector('textarea') as HTMLTextAreaElement;
expect(ta?.value).toContain('die wichtige Stelle');
});
});
it('calls onCountChange on mount with the initial total when loadOnMount=false', async () => {
@@ -175,8 +175,8 @@ describe('CommentThread', () => {
}
});
await new Promise((r) => setTimeout(r, 30));
expect(onCountChange).toHaveBeenCalledWith(3); // 1 thread + 2 replies
// 1 thread + 2 replies = 3.
await vi.waitFor(() => expect(onCountChange).toHaveBeenCalledWith(3));
});
it('uses the annotation comments URL when annotationId is provided', async () => {
@@ -191,11 +191,12 @@ describe('CommentThread', () => {
}
});
await new Promise((r) => setTimeout(r, 30));
const calls = fetchSpy.mock.calls.map((c) => c[0].toString());
expect(calls.some((c) => c.includes('/api/documents/doc-X/annotations/ann-Y/comments'))).toBe(
true
);
await vi.waitFor(() => {
const calls = fetchSpy.mock.calls.map((c) => c[0].toString());
expect(calls.some((c) => c.includes('/api/documents/doc-X/annotations/ann-Y/comments'))).toBe(
true
);
});
});
it('uses the block comments URL when blockId is provided', async () => {
@@ -210,11 +211,12 @@ describe('CommentThread', () => {
}
});
await new Promise((r) => setTimeout(r, 30));
const calls = fetchSpy.mock.calls.map((c) => c[0].toString());
expect(
calls.some((c) => c.includes('/api/documents/doc-X/transcription-blocks/block-Z/comments'))
).toBe(true);
await vi.waitFor(() => {
const calls = fetchSpy.mock.calls.map((c) => c[0].toString());
expect(
calls.some((c) => c.includes('/api/documents/doc-X/transcription-blocks/block-Z/comments'))
).toBe(true);
});
});
it('uses the document comments URL when neither annotationId nor blockId is provided', async () => {
@@ -228,14 +230,14 @@ describe('CommentThread', () => {
}
});
await new Promise((r) => setTimeout(r, 30));
const calls = fetchSpy.mock.calls.map((c) => c[0].toString());
expect(calls.some((c) => c.endsWith('/api/documents/doc-X/comments'))).toBe(true);
await vi.waitFor(() => {
const calls = fetchSpy.mock.calls.map((c) => c[0].toString());
expect(calls.some((c) => c.endsWith('/api/documents/doc-X/comments'))).toBe(true);
});
});
it('does not call onCountChange when loadOnMount=true (initial render path)', async () => {
it('fires onCountChange with the loaded comment count after a successful reload', async () => {
const onCountChange = vi.fn();
// Mock the reload fetch to return one comment so onCountChange fires from reload, not from mount-effect
fetchSpy.mockResolvedValueOnce(
new Response(
JSON.stringify([
@@ -265,8 +267,7 @@ describe('CommentThread', () => {
}
});
await new Promise((r) => setTimeout(r, 50));
expect(onCountChange).toHaveBeenCalledWith(1);
await vi.waitFor(() => expect(onCountChange).toHaveBeenCalledWith(1));
});
it('treats currentUserId=null as never owning a comment', async () => {
@@ -279,15 +280,14 @@ describe('CommentThread', () => {
}
});
await new Promise((r) => setTimeout(r, 30));
// No edit/delete buttons because none is "own"
// No edit/delete buttons because no comment is "own".
const editBtns = Array.from(document.querySelectorAll('button')).filter((b) =>
/bearbeiten/i.test(b.textContent ?? '')
);
expect(editBtns.length).toBe(0);
});
it('flat-messages flattens replies', async () => {
it('flat-messages flattens replies into the rendered list', async () => {
render(CommentThread, {
props: {
documentId: 'doc-1',
@@ -310,7 +310,7 @@ describe('CommentThread', () => {
expect(document.body.textContent).toContain('Reply 2');
});
it('does not seed quotedText when it is empty/whitespace only', async () => {
it('does not seed quotedText when it is whitespace-only', async () => {
render(CommentThread, {
props: {
documentId: 'doc-1',
@@ -321,73 +321,71 @@ describe('CommentThread', () => {
}
});
await new Promise((r) => setTimeout(r, 50));
await vi.waitFor(() => {
expect(document.querySelector('textarea')).not.toBeNull();
});
const ta = document.querySelector('textarea') as HTMLTextAreaElement;
expect(ta.value).toBe('');
});
it('does not call onCountChange when not provided', async () => {
expect(() =>
render(CommentThread, {
props: {
documentId: 'doc-1',
canComment: false,
currentUserId: null,
initialComments: [baseComment()],
loadOnMount: false
}
})
).not.toThrow();
it('renders the initial comment when onCountChange is not provided', async () => {
// Component must not assume the callback is wired up; verify content still renders.
render(CommentThread, {
props: {
documentId: 'doc-1',
canComment: false,
currentUserId: null,
initialComments: [baseComment()],
loadOnMount: false
}
});
await expect.element(page.getByText('Hello world')).toBeVisible();
});
it('handles fetch network error during reload gracefully', async () => {
it('keeps the empty-hint state when reload fetch rejects (network error)', async () => {
fetchSpy.mockRejectedValueOnce(new Error('network down'));
expect(() =>
render(CommentThread, {
props: {
documentId: 'doc-1',
canComment: false,
currentUserId: null,
initialComments: [],
loadOnMount: true
}
})
).not.toThrow();
render(CommentThread, {
props: {
documentId: 'doc-1',
canComment: false,
currentUserId: null,
initialComments: [],
loadOnMount: true
}
});
// On rejection the component swallows the error and falls back to empty state.
await expect.element(page.getByText(/noch keine kommentare/i)).toBeVisible();
});
it('handles non-OK reload response gracefully', async () => {
it('keeps the empty-hint state when reload returns non-OK status', async () => {
fetchSpy.mockResolvedValueOnce(new Response('error', { status: 500 }));
expect(() =>
render(CommentThread, {
props: {
documentId: 'doc-1',
canComment: false,
currentUserId: null,
initialComments: [],
loadOnMount: true
}
})
).not.toThrow();
render(CommentThread, {
props: {
documentId: 'doc-1',
canComment: false,
currentUserId: null,
initialComments: [],
loadOnMount: true
}
});
await expect.element(page.getByText(/noch keine kommentare/i)).toBeVisible();
});
it('renders own comment with edit/delete affordances when authorId matches currentUserId', async () => {
it('renders own comment when authorId matches currentUserId', async () => {
render(CommentThread, {
props: {
documentId: 'doc-1',
canComment: true,
currentUserId: 'u-self',
initialComments: [baseComment({ id: 'c-mine', authorId: 'u-self' })]
initialComments: [baseComment({ id: 'c-mine', authorId: 'u-self', content: 'mine' })]
}
});
// CommentMessage shows edit/delete actions when isOwn=true
const buttons = Array.from(document.querySelectorAll('button')).filter((b) =>
/bearbeiten|löschen|edit|delete/i.test(
b.textContent ?? '' + (b.getAttribute('aria-label') ?? '')
)
);
expect(buttons.length).toBeGreaterThanOrEqual(0);
await expect.element(page.getByText('mine')).toBeVisible();
});
});