marcel/familienarchiv
1
0
Fork 0
Code Issues 110 Pull Requests 2 Actions 2 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(); 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'); const header = document.querySelector('.font-sans.font-semibold');
expect(header?.textContent).toMatch(/1\s+Kommentar(?!e)/); expect(header?.textContent).toMatch(/1\s+Kommentar(?!e)/);
}); });
@@ -149,9 +148,10 @@ describe('CommentThread', () => {
} }
}); });
await new Promise((r) => setTimeout(r, 50)); await vi.waitFor(() => {
const ta = document.querySelector('textarea') as HTMLTextAreaElement; const ta = document.querySelector('textarea') as HTMLTextAreaElement;
expect(ta.value).toContain('die wichtige Stelle'); expect(ta?.value).toContain('die wichtige Stelle');
});
}); });
it('calls onCountChange on mount with the initial total when loadOnMount=false', async () => { 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)); // 1 thread + 2 replies = 3.
expect(onCountChange).toHaveBeenCalledWith(3); // 1 thread + 2 replies await vi.waitFor(() => expect(onCountChange).toHaveBeenCalledWith(3));
}); });
it('uses the annotation comments URL when annotationId is provided', async () => { it('uses the annotation comments URL when annotationId is provided', async () => {
@@ -191,11 +191,12 @@ describe('CommentThread', () => {
} }
}); });
await new Promise((r) => setTimeout(r, 30)); await vi.waitFor(() => {
const calls = fetchSpy.mock.calls.map((c) => c[0].toString()); 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( expect(calls.some((c) => c.includes('/api/documents/doc-X/annotations/ann-Y/comments'))).toBe(
true true
); );
});
}); });
it('uses the block comments URL when blockId is provided', async () => { it('uses the block comments URL when blockId is provided', async () => {
@@ -210,11 +211,12 @@ describe('CommentThread', () => {
} }
}); });
await new Promise((r) => setTimeout(r, 30)); await vi.waitFor(() => {
const calls = fetchSpy.mock.calls.map((c) => c[0].toString()); const calls = fetchSpy.mock.calls.map((c) => c[0].toString());
expect( expect(
calls.some((c) => c.includes('/api/documents/doc-X/transcription-blocks/block-Z/comments')) calls.some((c) => c.includes('/api/documents/doc-X/transcription-blocks/block-Z/comments'))
).toBe(true); ).toBe(true);
});
}); });
it('uses the document comments URL when neither annotationId nor blockId is provided', async () => { 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)); await vi.waitFor(() => {
const calls = fetchSpy.mock.calls.map((c) => c[0].toString()); const calls = fetchSpy.mock.calls.map((c) => c[0].toString());
expect(calls.some((c) => c.endsWith('/api/documents/doc-X/comments'))).toBe(true); 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(); const onCountChange = vi.fn();
// Mock the reload fetch to return one comment so onCountChange fires from reload, not from mount-effect
fetchSpy.mockResolvedValueOnce( fetchSpy.mockResolvedValueOnce(
new Response( new Response(
JSON.stringify([ JSON.stringify([
@@ -265,8 +267,7 @@ describe('CommentThread', () => {
} }
}); });
await new Promise((r) => setTimeout(r, 50)); await vi.waitFor(() => expect(onCountChange).toHaveBeenCalledWith(1));
expect(onCountChange).toHaveBeenCalledWith(1);
}); });
it('treats currentUserId=null as never owning a comment', async () => { 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 no comment is "own".
// No edit/delete buttons because none is "own"
const editBtns = Array.from(document.querySelectorAll('button')).filter((b) => const editBtns = Array.from(document.querySelectorAll('button')).filter((b) =>
/bearbeiten/i.test(b.textContent ?? '') /bearbeiten/i.test(b.textContent ?? '')
); );
expect(editBtns.length).toBe(0); expect(editBtns.length).toBe(0);
}); });
it('flat-messages flattens replies', async () => { it('flat-messages flattens replies into the rendered list', async () => {
render(CommentThread, { render(CommentThread, {
props: { props: {
documentId: 'doc-1', documentId: 'doc-1',
@@ -310,7 +310,7 @@ describe('CommentThread', () => {
expect(document.body.textContent).toContain('Reply 2'); 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, { render(CommentThread, {
props: { props: {
documentId: 'doc-1', 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; const ta = document.querySelector('textarea') as HTMLTextAreaElement;
expect(ta.value).toBe(''); expect(ta.value).toBe('');
}); });
it('does not call onCountChange when not provided', async () => { it('renders the initial comment when onCountChange is not provided', async () => {
expect(() => // Component must not assume the callback is wired up; verify content still renders.
render(CommentThread, { render(CommentThread, {
props: { props: {
documentId: 'doc-1', documentId: 'doc-1',
canComment: false, canComment: false,
currentUserId: null, currentUserId: null,
initialComments: [baseComment()], initialComments: [baseComment()],
loadOnMount: false loadOnMount: false
} }
}) });
).not.toThrow();
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')); fetchSpy.mockRejectedValueOnce(new Error('network down'));
expect(() => render(CommentThread, {
render(CommentThread, { props: {
props: { documentId: 'doc-1',
documentId: 'doc-1', canComment: false,
canComment: false, currentUserId: null,
currentUserId: null, initialComments: [],
initialComments: [], loadOnMount: true
loadOnMount: true }
} });
})
).not.toThrow(); // 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 })); fetchSpy.mockResolvedValueOnce(new Response('error', { status: 500 }));
expect(() => render(CommentThread, {
render(CommentThread, { props: {
props: { documentId: 'doc-1',
documentId: 'doc-1', canComment: false,
canComment: false, currentUserId: null,
currentUserId: null, initialComments: [],
initialComments: [], loadOnMount: true
loadOnMount: true }
} });
})
).not.toThrow(); 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, { render(CommentThread, {
props: { props: {
documentId: 'doc-1', documentId: 'doc-1',
canComment: true, canComment: true,
currentUserId: 'u-self', 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 await expect.element(page.getByText('mine')).toBeVisible();
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);
}); });
}); });