diff --git a/src/lib/components/JobErrorLine.svelte b/src/lib/components/JobErrorLine.svelte
index fcc3bd1..9f0b689 100644
--- a/src/lib/components/JobErrorLine.svelte
+++ b/src/lib/components/JobErrorLine.svelte
@@ -4,7 +4,7 @@
interface Props {
job: Job;
accentColor: string;
- onRetry?: () => void;
+ onRetry?: (jobId: string) => void;
onDelete?: () => void;
retryLabel?: string;
deleteLabel?: string;
@@ -18,13 +18,19 @@
retryLabel = 'Retry',
deleteLabel = 'Delete',
}: Props = $props();
+
+ function handleRetry(e: MouseEvent) {
+ e.preventDefault();
+ e.stopPropagation();
+ onRetry?.(job.id);
+ }
{#if job.status === 'failed' && job.error}
{job.error}
{#if onRetry}
-
+
{/if}
{#if onDelete}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 15fb8a7..27d2246 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -271,7 +271,7 @@
{job.title || job.source}
{jobMeta(job)}
-
+
{#if job.status !== 'done' && job.status !== 'failed' && job.status !== 'cancelled'}
diff --git a/src/tests/job-error-line.test.ts b/src/tests/job-error-line.test.ts
index 4a73cfb..ac519d0 100644
--- a/src/tests/job-error-line.test.ts
+++ b/src/tests/job-error-line.test.ts
@@ -35,7 +35,7 @@ describe('JobErrorLine component', () => {
expect(getByText('transcription timeout')).toBeTruthy();
});
- it('shows retry button labeled ↺', () => {
+ it('shows retry button', () => {
const { getByRole } = render(JobErrorLine, {
job: makeJob(),
accentColor: '#cdf24e',
@@ -44,24 +44,15 @@ describe('JobErrorLine component', () => {
expect(getByRole('button', { name: 'Retry' })).toBeTruthy();
});
- it('calls onRetry with job id when retry button clicked', async () => {
+ it('calls onRetry when retry button clicked', async () => {
const onRetry = vi.fn().mockResolvedValue(undefined);
const { getByRole } = render(JobErrorLine, {
- job: makeJob({ id: 'job-abc' }),
+ job: makeJob(),
accentColor: '#cdf24e',
onRetry
});
await fireEvent.click(getByRole('button', { name: 'Retry' }));
- expect(onRetry).toHaveBeenCalledWith('job-abc');
- });
-
- it('shows fallback text when job.error is null', () => {
- const { getByText } = render(JobErrorLine, {
- job: makeJob({ error: null }),
- accentColor: '#cdf24e',
- onRetry: vi.fn().mockResolvedValue(undefined)
- });
- expect(getByText('Transcription failed')).toBeTruthy();
+ expect(onRetry).toHaveBeenCalled();
});
it('shows delete button when onDelete provided', () => {
@@ -100,4 +91,22 @@ describe('JobErrorLine component', () => {
});
expect(getByRole('status')).toBeTruthy();
});
+
+ it('does not render when job has no error text', () => {
+ const { container } = render(JobErrorLine, {
+ job: makeJob({ status: 'failed', error: null }),
+ accentColor: '#cdf24e',
+ onRetry: vi.fn().mockResolvedValue(undefined)
+ });
+ expect(container.querySelector('.recent-err-line')).toBeNull();
+ });
+
+ it('renders "Job was cancelled" for cancelled jobs', () => {
+ const { getByText } = render(JobErrorLine, {
+ job: makeJob({ status: 'cancelled' }),
+ accentColor: '#cdf24e',
+ onRetry: vi.fn().mockResolvedValue(undefined)
+ });
+ expect(getByText('Job was cancelled')).toBeTruthy();
+ });
});
diff --git a/src/tests/job-list-error-display.test.ts b/src/tests/job-list-error-display.test.ts
index dc3f369..c779dfd 100644
--- a/src/tests/job-list-error-display.test.ts
+++ b/src/tests/job-list-error-display.test.ts
@@ -30,6 +30,7 @@ describe('Job list error display', () => {
const result = render(JobErrorLine, {
props: {
job: makeJob({ status: 'failed', error: 'simulated transcription failure' }),
+ accentColor: 'red',
},
});
@@ -41,6 +42,7 @@ describe('Job list error display', () => {
const result = render(JobErrorLine, {
props: {
job: makeJob({ status: 'done', error: null }),
+ accentColor: 'red',
},
});
@@ -54,6 +56,7 @@ describe('Job list error display', () => {
const result = render(JobErrorLine, {
props: {
job: makeJob({ status: 'failed', error: null }),
+ accentColor: 'red',
},
});
@@ -65,6 +68,7 @@ describe('Job list error display', () => {
const result = render(JobErrorLine, {
props: {
job: makeJob({ status: 'pending', error: 'some error' }),
+ accentColor: 'red',
},
});
@@ -77,6 +81,7 @@ describe('Job list error display', () => {
const result = render(JobErrorLine, {
props: {
job: makeJob({ status: 'failed', error: errMsg }),
+ accentColor: 'red',
},
});