test(ST-dgognlsz): vitest-tests voor SoloTaskCard pbi-velden en SoloTaskCardOverlay

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

__tests__/components/solo/solo-board-batch-enqueue.test.tsx

@@ -94,6 +94,9 @@ const TODO_TASK = {
   story_code: 'ST-1',
   story_title: 'Story 1',
   task_code: 'ST-1.1',
+  pbi_code: null,
+  pbi_title: null,
+  pbi_description: null,
 }
 
 const DEFAULT_PROPS = {

__tests__/components/solo/solo-task-card.test.tsx

@@ -0,0 +1,99 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom'
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import type { SoloTask } from '@/components/solo/solo-board'
+
+vi.mock('@/components/ui/tooltip', () => ({
+  TooltipProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  TooltipTrigger: ({ render: r, children }: { render?: React.ReactElement; children?: React.ReactNode }) =>
+    r ? <>{r}</> : <>{children}</>,
+  TooltipContent: ({ children }: { children: React.ReactNode }) =>
+    <span data-testid="tooltip-content">{children}</span>,
+}))
+
+vi.mock('@dnd-kit/core', () => ({
+  useDraggable: () => ({
+    attributes: {},
+    listeners: {},
+    setNodeRef: vi.fn(),
+    transform: null,
+    isDragging: false,
+  }),
+}))
+
+vi.mock('@/stores/solo-store', () => ({
+  useSoloStore: () => null,
+}))
+
+vi.mock('@/components/shared/code-badge', () => ({
+  CodeBadge: ({ code }: { code: string }) => <span data-testid="code-badge">{code}</span>,
+}))
+
+import { SoloTaskCard, SoloTaskCardOverlay } from '@/components/solo/solo-task-card'
+
+function makeSoloTask(overrides: Partial<SoloTask> = {}): SoloTask {
+  return {
+    id: 'task-1',
+    title: 'Taak titel',
+    description: 'Omschrijving van de taak die langer is dan tachtig tekens voor de tooltip test',
+    implementation_plan: null,
+    priority: 2,
+    sort_order: 0,
+    status: 'TO_DO',
+    verify_only: false,
+    verify_required: 'ALIGNED',
+    story_id: 'story-1',
+    story_code: 'ST-1',
+    story_title: 'Story titel',
+    task_code: 'T-1',
+    pbi_code: 'PBI-1',
+    pbi_title: 'PBI titel',
+    pbi_description: 'PBI omschrijving',
+    ...overrides,
+  }
+}
+
+describe('SoloTaskCard', () => {
+  it('toont taaknaam, story_code en story_title', () => {
+    render(<SoloTaskCard task={makeSoloTask()} isDemo={false} onClick={vi.fn()} />)
+    // title appears in card + tooltip-content mock, so use getAllByText
+    expect(screen.getAllByText('Taak titel').length).toBeGreaterThan(0)
+    expect(screen.getByText('ST-1')).toBeInTheDocument()
+    expect(screen.getByText('Story titel')).toBeInTheDocument()
+  })
+
+  it('verbergt pbi_code badge als pbi_code null is', () => {
+    render(<SoloTaskCard task={makeSoloTask({ pbi_code: null, pbi_title: null, pbi_description: null })} isDemo={false} onClick={vi.fn()} />)
+    const badges = screen.queryAllByTestId('code-badge')
+    const pbiAttempt = badges.find(b => b.textContent === 'PBI-1')
+    expect(pbiAttempt).toBeUndefined()
+  })
+
+  it('verbergt description-paragraaf als description null is', () => {
+    render(<SoloTaskCard task={makeSoloTask({ description: null })} isDemo={false} onClick={vi.fn()} />)
+    expect(screen.queryByText('Omschrijving')).not.toBeInTheDocument()
+  })
+
+  it('rendert zonder crash met alle velden ingevuld', () => {
+    expect(() =>
+      render(<SoloTaskCard task={makeSoloTask()} isDemo={false} onClick={vi.fn()} />)
+    ).not.toThrow()
+  })
+})
+
+describe('SoloTaskCardOverlay', () => {
+  it('toont taaknaam en codes zonder tooltip-wrappers', () => {
+    render(<SoloTaskCardOverlay task={makeSoloTask()} />)
+    expect(screen.getAllByText('Taak titel').length).toBeGreaterThan(0)
+    expect(screen.getByText('ST-1')).toBeInTheDocument()
+    expect(screen.getByText('Story titel')).toBeInTheDocument()
+  })
+
+  it('rendert zonder crash als pbi_code null is', () => {
+    expect(() =>
+      render(<SoloTaskCardOverlay task={makeSoloTask({ pbi_code: null, pbi_title: null, pbi_description: null })} />)
+    ).not.toThrow()
+  })
+})

__tests__/components/solo/task-detail-dialog.test.tsx

@@ -65,6 +65,9 @@ const baseTask: SoloTask = {
   story_code: 'ST-100',
   story_title: 'Test Story',
   task_code: 'ST-100.1',
+  pbi_code: null,
+  pbi_title: null,
+  pbi_description: null,
 }
 
 const DEFAULT_PROPS = {

__tests__/stores/solo-store-realtime.test.ts

@@ -17,6 +17,9 @@ const baseTask = (id: string, overrides: Partial<SoloTask> = {}): SoloTask => ({
   story_code: 'ST-100',
   story_title: 'Original Story',
   task_code: 'ST-100.1',
+  pbi_code: null,
+  pbi_title: null,
+  pbi_description: null,
   ...overrides,
 })
 

app/(app)/products/[id]/solo/page.tsx

@@ -46,6 +46,7 @@ export default async function SoloProductPage({ params }: Props) {
             code: true,
             title: true,
             tasks: { select: { id: true }, orderBy: { sort_order: 'asc' } },
+            pbi: { select: { code: true, title: true, description: true } },
           },
         },
       },
@@ -86,6 +87,9 @@ export default async function SoloProductPage({ params }: Props) {
     story_code: t.story.code,
     story_title: t.story.title,
     task_code: t.code,
+    pbi_code:        t.story.pbi?.code        ?? null,
+    pbi_title:       t.story.pbi?.title       ?? null,
+    pbi_description: t.story.pbi?.description ?? null,
   }))
 
   const unassignedStories: UnassignedStory[] = rawUnassigned.map(s => ({

app/(mobile)/m/products/[id]/solo/page.tsx

@@ -51,6 +51,7 @@ export default async function MobileSoloProductPage({ params }: Props) {
             code: true,
             title: true,
             tasks: { select: { id: true }, orderBy: { sort_order: 'asc' } },
+            pbi: { select: { code: true, title: true, description: true } },
           },
         },
       },
@@ -91,6 +92,9 @@ export default async function MobileSoloProductPage({ params }: Props) {
     story_code: t.story.code,
     story_title: t.story.title,
     task_code: t.code,
+    pbi_code:        t.story.pbi?.code        ?? null,
+    pbi_title:       t.story.pbi?.title       ?? null,
+    pbi_description: t.story.pbi?.description ?? null,
   }))
 
   const unassignedStories: UnassignedStory[] = rawUnassigned.map(s => ({

components/solo/solo-board.tsx

@@ -32,6 +32,9 @@ export interface SoloTask {
   story_code: string | null
   story_title: string
   task_code: string | null
+  pbi_code: string | null
+  pbi_title: string | null
+  pbi_description: string | null
 }
 
 export interface SoloBoardProps {

components/solo/solo-task-card.tsx

@@ -8,6 +8,7 @@ import { cn } from '@/lib/utils'
 import { CodeBadge } from '@/components/shared/code-badge'
 import { JOB_STATUS_LABELS, JOB_STATUS_COLORS, JOB_STATUS_ACTIVE } from '@/components/shared/job-status'
 import { useSoloStore } from '@/stores/solo-store'
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip'
 import type { SoloTask } from './solo-board'
 
 const PRIORITY_BORDER: Record<number, string> = {
@@ -30,10 +31,6 @@ export function SoloTaskCard({ task, isDemo, onClick }: SoloTaskCardProps) {
     disabled: isDemo,
   })
 
-  // view-transition-name laat de browser deze card snapshotten zodat hij
-  // soepel van kolom naar kolom animeert wanneer de status realtime wijzigt
-  // (ST-805 animatie A). Tijdens drag uit zetten — dnd-kit beheert de
-  // transform dan zelf en dubbele transitions willen we niet.
   const style: React.CSSProperties | undefined = transform
     ? { transform: CSS.Translate.toString(transform) }
     : { viewTransitionName: `solo-task-${task.id}` }
@@ -51,12 +48,66 @@ export function SoloTaskCard({ task, isDemo, onClick }: SoloTaskCardProps) {
       )}
       {...(!isDemo ? { ...attributes, ...listeners } : {})}
     >
+      {/* Regel 1: taaknaam + task_code */}
       <div className="flex items-start justify-between gap-2">
         <p className="text-sm text-foreground leading-snug flex-1">{task.title}</p>
-        {task.task_code && <CodeBadge code={task.task_code} className="shrink-0 mt-0.5" />}
+        {task.task_code && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger render={<span className="shrink-0 mt-0.5" />}>
+                <CodeBadge code={task.task_code} />
+              </TooltipTrigger>
+              <TooltipContent side="left">
+                <p className="font-semibold">{task.title}</p>
+                {task.description && (
+                  <p className="text-muted-foreground italic">{task.description.slice(0, 100)}</p>
+                )}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
       </div>
+
+      {/* Regels 2–3: beschrijving + pbi_code */}
+      <div className="flex items-start justify-between gap-2 mt-0.5">
+        {task.description ? (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger render={
+                <p className="text-xs text-muted-foreground line-clamp-2 flex-1" />
+              }>
+                {task.description}
+              </TooltipTrigger>
+              {task.description.length > 80 && (
+                <TooltipContent side="bottom">
+                  {task.description}
+                </TooltipContent>
+              )}
+            </Tooltip>
+          </TooltipProvider>
+        ) : (
+          <div className="flex-1" />
+        )}
+        {task.pbi_code && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger render={<span className="shrink-0" />}>
+                <CodeBadge code={task.pbi_code} />
+              </TooltipTrigger>
+              <TooltipContent side="left">
+                <p className="font-semibold">{task.pbi_title}</p>
+                {task.pbi_description && (
+                  <p className="text-muted-foreground italic">{task.pbi_description.slice(0, 100)}</p>
+                )}
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+      </div>
+
+      {/* Regel 4: story-info + job-badge */}
       <div className="flex items-center justify-between gap-2 mt-0.5">
-        <p className="text-xs text-muted-foreground truncate">
+        <p className="text-xs text-muted-foreground truncate flex-1">
           {task.story_code && <span className="font-mono mr-1">{task.story_code}</span>}
           {task.story_title}
         </p>
@@ -95,10 +146,21 @@ export function SoloTaskCardOverlay({ task }: { task: SoloTask }) {
         PRIORITY_BORDER[task.priority],
       )}
     >
+      {/* Regel 1 */}
       <div className="flex items-start justify-between gap-2">
         <p className="text-sm text-foreground leading-snug flex-1">{task.title}</p>
         {task.task_code && <CodeBadge code={task.task_code} className="shrink-0 mt-0.5" />}
       </div>
+      {/* Regels 2–3 */}
+      <div className="flex items-start justify-between gap-2 mt-0.5">
+        {task.description ? (
+          <p className="text-xs text-muted-foreground line-clamp-2 flex-1">{task.description}</p>
+        ) : (
+          <div className="flex-1" />
+        )}
+        {task.pbi_code && <CodeBadge code={task.pbi_code} className="shrink-0" />}
+      </div>
+      {/* Regel 4 */}
       <p className="text-xs text-muted-foreground mt-0.5 truncate">
         {task.story_code && <span className="font-mono mr-1">{task.story_code}</span>}
         {task.story_title}