mozempk/tonemark
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

story-ui-job-list-error: fix fake-green test — extract real JobErrorLine component

Browse Source 
Reviewer flagged: tests rendered __mocks__/JobErrorDisplay.svelte (a test-only
duplicate), so removing lines 273-274 from +page.svelte left every test green.

Fix (option B): extract error block into src/lib/components/JobErrorLine.svelte,
import it from +page.svelte, move scoped CSS into the component, delete the mock,
and point the test at the real component.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Giancarmine Salucci
2026-07-16 00:08:20 +02:00
co-authored by Claude Sonnet 4.6
parent c20f0d5f22
commit 559eef7180
3 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/tests/__mocks__/JobErrorDisplay.svelte → src/lib/components/JobErrorLine.svelte
+13
View File
@@ -11,3 +11,16 @@
{#if job.status === 'failed' && job.error}
<div class="recent-err-line" title={job.error}>{job.error}</div>
{/if}
<style>
.recent-err-line {
font-size: 11.5px;
color: var(--error-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 3px;
font-family: var(--font-mono);
max-width: 100%;
}
</style>
src/routes/+page.svelte
+2 -14
View File
@@ -5,6 +5,7 @@
import SourceIcon from '$lib/components/SourceIcon.svelte';
import Waveform from '$lib/components/Waveform.svelte';
import RecordButton from '$lib/components/RecordButton.svelte';
import JobErrorLine from '$lib/components/JobErrorLine.svelte';
import { accent } from '$lib/accent.js';
const ACCENT = $derived($accent.value);
@@ -270,9 +271,7 @@
<div class="recent-text">
<div class="recent-title">{job.title || job.source}</div>
<div class="recent-meta mono">{jobMeta(job)}</div>
{#if job.status === 'failed' && job.error}
<div class="recent-err-line" title={job.error}>{job.error}</div>
{/if}
<JobErrorLine {job} />
</div>
{#if job.status !== 'done' && job.status !== 'failed' && job.status !== 'cancelled'}
<div class="recent-progress mono" style="color: {ACCENT}">
@@ -568,17 +567,6 @@
color: var(--error-text);
}
.recent-err-line {
font-size: 11.5px;
color: var(--error-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 3px;
font-family: var(--font-mono);
max-width: 100%;
}
/* ── Utilities ─────────────────────────────────────────── */
.sr-only {
position: absolute;
src/tests/job-list-error-display.test.ts
+7 -7
View File
@@ -1,7 +1,7 @@
import { describe, it, expect } from 'vitest';
import { render } from 'svelte/server';
import type { Job, AudioMode, JobStatus } from '$lib/types.js';
import JobErrorDisplay from './__mocks__/JobErrorDisplay.svelte';
import type { Job } from '$lib/types.js';
import JobErrorLine from '$lib/components/JobErrorLine.svelte';
// Factory: minimal Job shape needed by the error display logic
function makeJob(overrides: Partial<Job> = {}): Job {
@@ -27,7 +27,7 @@ function makeJob(overrides: Partial<Job> = {}): Job {
describe('Job list error display', () => {
it('renders error text for a failed job with error message', () => {
const result = render(JobErrorDisplay, {
const result = render(JobErrorLine, {
props: {
job: makeJob({ status: 'failed', error: 'simulated transcription failure' }),
},
@@ -38,7 +38,7 @@ describe('Job list error display', () => {
});
it('renders nothing when job status is done with null error', () => {
const result = render(JobErrorDisplay, {
const result = render(JobErrorLine, {
props: {
job: makeJob({ status: 'done', error: null }),
},
@@ -51,7 +51,7 @@ describe('Job list error display', () => {
});
it('renders nothing when job status is failed but error is null', () => {
const result = render(JobErrorDisplay, {
const result = render(JobErrorLine, {
props: {
job: makeJob({ status: 'failed', error: null }),
},
@@ -62,7 +62,7 @@ describe('Job list error display', () => {
});
it('renders nothing when job has error but status is not failed', () => {
const result = render(JobErrorDisplay, {
const result = render(JobErrorLine, {
props: {
job: makeJob({ status: 'pending', error: 'some error' }),
},
@@ -74,7 +74,7 @@ describe('Job list error display', () => {
it('sets title attribute on error element to full error text', () => {
const errMsg = 'detailed error description for tooltip';
const result = render(JobErrorDisplay, {
const result = render(JobErrorLine, {
props: {
job: makeJob({ status: 'failed', error: errMsg }),
},