feat: add QuestionsAskedDialog and InterAgentMessagesDialog with tests
Implements the remaining two Radar drilldown dialogs following the established AddAccountDialog pattern. Both use tRPC lazy queries, skeleton loading, and expandable rows via useState<number | null>. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas May
167
apps/web/src/components/radar/InterAgentMessagesDialog.tsx
Normal file
167
apps/web/src/components/radar/InterAgentMessagesDialog.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
import { useState, useEffect, Fragment } from 'react'
|
||||
import { trpc } from '@/lib/trpc'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import type { DrilldownDialogProps } from './types'
|
||||
|
||||
function formatTimestamp(ts: string): string {
|
||||
const date = new Date(ts)
|
||||
const now = new Date()
|
||||
const diffMs = now.getTime() - date.getTime()
|
||||
const diffSecs = Math.floor(diffMs / 1000)
|
||||
const diffMins = Math.floor(diffSecs / 60)
|
||||
const diffHours = Math.floor(diffMins / 60)
|
||||
const diffDays = Math.floor(diffHours / 24)
|
||||
|
||||
let relative: string
|
||||
if (diffSecs < 60) {
|
||||
relative = `${diffSecs}s ago`
|
||||
} else if (diffMins < 60) {
|
||||
relative = `${diffMins}m ago`
|
||||
} else if (diffHours < 24) {
|
||||
relative = `${diffHours}h ago`
|
||||
} else {
|
||||
relative = `${diffDays}d ago`
|
||||
}
|
||||
|
||||
const absolute = date.toLocaleString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: false,
|
||||
})
|
||||
|
||||
return `${relative} · ${absolute}`
|
||||
}
|
||||
|
||||
export function InterAgentMessagesDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
agentId,
|
||||
agentName,
|
||||
}: DrilldownDialogProps) {
|
||||
const [expandedIndex, setExpandedIndex] = useState<number | null>(null)
|
||||
|
||||
const { data, isLoading } = trpc.conversation.getByFromAgent.useQuery(
|
||||
{ agentId },
|
||||
{ enabled: open }
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) setExpandedIndex(null)
|
||||
}, [open])
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{`Inter-Agent Messages — ${agentName}`}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Each row is a conversation this agent initiated with another agent. Click a row to see
|
||||
the full question and answer.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="max-h-[70vh] overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<div className="space-y-2">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div key={i}>
|
||||
<div className="flex items-center gap-4 py-2">
|
||||
<Skeleton className="w-28 h-4" />
|
||||
<Skeleton className="w-32 h-4" />
|
||||
<Skeleton className="w-20 h-5" />
|
||||
</div>
|
||||
{i < 2 && <div className="border-b" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : !data || data.length === 0 ? (
|
||||
<p className="text-center text-muted-foreground py-8">No data found</p>
|
||||
) : (
|
||||
<>
|
||||
{data.length >= 200 && (
|
||||
<p className="text-sm text-muted-foreground mb-2">Showing first 200 instances.</p>
|
||||
)}
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left py-2 pr-4 font-medium">Timestamp</th>
|
||||
<th className="text-left py-2 pr-4 font-medium">Target Agent</th>
|
||||
<th className="text-left py-2 font-medium">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((row, i) => (
|
||||
<Fragment key={i}>
|
||||
<tr
|
||||
className="border-b last:border-0 cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => setExpandedIndex(i === expandedIndex ? null : i)}
|
||||
>
|
||||
<td className="py-2 pr-4 text-muted-foreground whitespace-nowrap">
|
||||
{formatTimestamp(row.timestamp)}
|
||||
</td>
|
||||
<td className="py-2 pr-4">{row.toAgentName}</td>
|
||||
<td className="py-2">
|
||||
{row.status === 'answered' ? (
|
||||
<Badge variant="secondary">answered</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-muted-foreground">
|
||||
pending
|
||||
</Badge>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
{expandedIndex === i && (
|
||||
<tr>
|
||||
<td colSpan={3} className="pb-2">
|
||||
<div className="bg-muted/10 p-3 rounded mt-1 mb-1 space-y-2">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide mb-1">
|
||||
Question
|
||||
</p>
|
||||
<div
|
||||
style={{ maxHeight: '200px', overflowY: 'auto' }}
|
||||
className="bg-muted/50 p-2 rounded font-mono text-sm whitespace-pre-wrap"
|
||||
>
|
||||
{row.question}
|
||||
</div>
|
||||
{row.status === 'answered' ? (
|
||||
<>
|
||||
<p className="text-xs font-semibold uppercase tracking-wide mb-1">
|
||||
Answer
|
||||
</p>
|
||||
<div
|
||||
style={{ maxHeight: '200px', overflowY: 'auto' }}
|
||||
className="bg-muted/50 p-2 rounded font-mono text-sm whitespace-pre-wrap"
|
||||
>
|
||||
{row.answer}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-muted-foreground italic text-sm">No answer yet</p>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
159
apps/web/src/components/radar/QuestionsAskedDialog.tsx
Normal file
159
apps/web/src/components/radar/QuestionsAskedDialog.tsx
Normal file
@@ -0,0 +1,159 @@
|
||||
import { useState, useEffect, Fragment } from 'react'
|
||||
import { trpc } from '@/lib/trpc'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import type { DrilldownDialogProps } from './types'
|
||||
|
||||
function formatTimestamp(ts: string): string {
|
||||
const date = new Date(ts)
|
||||
const now = new Date()
|
||||
const diffMs = now.getTime() - date.getTime()
|
||||
const diffSecs = Math.floor(diffMs / 1000)
|
||||
const diffMins = Math.floor(diffSecs / 60)
|
||||
const diffHours = Math.floor(diffMins / 60)
|
||||
const diffDays = Math.floor(diffHours / 24)
|
||||
|
||||
let relative: string
|
||||
if (diffSecs < 60) {
|
||||
relative = `${diffSecs}s ago`
|
||||
} else if (diffMins < 60) {
|
||||
relative = `${diffMins}m ago`
|
||||
} else if (diffHours < 24) {
|
||||
relative = `${diffHours}h ago`
|
||||
} else {
|
||||
relative = `${diffDays}d ago`
|
||||
}
|
||||
|
||||
const absolute = date.toLocaleString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: false,
|
||||
})
|
||||
|
||||
return `${relative} · ${absolute}`
|
||||
}
|
||||
|
||||
function truncate(text: string, max: number): string {
|
||||
return text.length > max ? text.slice(0, max) + '…' : text
|
||||
}
|
||||
|
||||
export function QuestionsAskedDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
agentId,
|
||||
agentName,
|
||||
}: DrilldownDialogProps) {
|
||||
const [expandedIndex, setExpandedIndex] = useState<number | null>(null)
|
||||
|
||||
const { data, isLoading } = trpc.agent.getQuestionsAsked.useQuery(
|
||||
{ agentId },
|
||||
{ enabled: open }
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) setExpandedIndex(null)
|
||||
}, [open])
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{`Questions Asked — ${agentName}`}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Each row is a question this agent sent to the user via the AskUserQuestion tool.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="max-h-[70vh] overflow-y-auto">
|
||||
{isLoading ? (
|
||||
<div className="space-y-2">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<div key={i}>
|
||||
<div className="flex items-center gap-4 py-2">
|
||||
<Skeleton className="w-28 h-4" />
|
||||
<Skeleton className="w-20 h-4" />
|
||||
<Skeleton className="w-36 h-4" />
|
||||
</div>
|
||||
{i < 2 && <div className="border-b" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : !data || data.length === 0 ? (
|
||||
<p className="text-center text-muted-foreground py-8">No data found</p>
|
||||
) : (
|
||||
<>
|
||||
{data.length >= 200 && (
|
||||
<p className="text-sm text-muted-foreground mb-2">Showing first 200 instances.</p>
|
||||
)}
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="text-left py-2 pr-4 font-medium">Timestamp</th>
|
||||
<th className="text-left py-2 pr-4 font-medium"># Questions</th>
|
||||
<th className="text-left py-2 font-medium">First Question Header</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((row, i) => {
|
||||
const n = row.questions.length
|
||||
const countLabel = `${n} question${n !== 1 ? 's' : ''}`
|
||||
const firstHeader = truncate(row.questions[0]?.header ?? '', 40)
|
||||
return (
|
||||
<Fragment key={i}>
|
||||
<tr
|
||||
className="border-b last:border-0 cursor-pointer hover:bg-muted/50"
|
||||
onClick={() => setExpandedIndex(i === expandedIndex ? null : i)}
|
||||
>
|
||||
<td className="py-2 pr-4 text-muted-foreground whitespace-nowrap">
|
||||
{formatTimestamp(row.timestamp)}
|
||||
</td>
|
||||
<td className="py-2 pr-4">{countLabel}</td>
|
||||
<td className="py-2">{firstHeader}</td>
|
||||
</tr>
|
||||
{expandedIndex === i && (
|
||||
<tr>
|
||||
<td colSpan={3} className="pb-2">
|
||||
<div className="bg-muted/30 p-3 rounded mt-1 mb-1">
|
||||
<ol className="space-y-3 list-decimal list-inside">
|
||||
{row.questions.map((q, qi) => (
|
||||
<li key={qi}>
|
||||
<span className="font-bold bg-muted px-1 py-0.5 rounded text-sm mr-2">
|
||||
{q.header}
|
||||
</span>
|
||||
{q.question}
|
||||
<ul className="ml-4 mt-1 space-y-0.5">
|
||||
{q.options.map((opt, oi) => (
|
||||
<li key={oi} className="text-sm text-muted-foreground">
|
||||
{`• ${opt.label} — ${opt.description}`}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</Fragment>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
// @vitest-environment happy-dom
|
||||
import '@testing-library/jest-dom/vitest'
|
||||
import { render, screen, fireEvent } from '@testing-library/react'
|
||||
import { vi, describe, it, expect, beforeEach } from 'vitest'
|
||||
|
||||
let mockUseQueryReturn: { data: unknown; isLoading: boolean } = {
|
||||
data: undefined,
|
||||
isLoading: false,
|
||||
}
|
||||
|
||||
vi.mock('@/lib/trpc', () => ({
|
||||
trpc: {
|
||||
conversation: {
|
||||
getByFromAgent: {
|
||||
useQuery: vi.fn((_args: unknown, _opts: unknown) => mockUseQueryReturn),
|
||||
},
|
||||
},
|
||||
},
|
||||
}))
|
||||
|
||||
import { InterAgentMessagesDialog } from '../InterAgentMessagesDialog'
|
||||
|
||||
const defaultProps = {
|
||||
open: true,
|
||||
onOpenChange: vi.fn(),
|
||||
agentId: 'agent-123',
|
||||
agentName: 'test-agent',
|
||||
}
|
||||
|
||||
describe('InterAgentMessagesDialog', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
mockUseQueryReturn = { data: undefined, isLoading: false }
|
||||
})
|
||||
|
||||
it('does not render dialog content when open=false', () => {
|
||||
render(<InterAgentMessagesDialog {...defaultProps} open={false} />)
|
||||
expect(screen.queryByText(/Inter-Agent Messages/)).toBeNull()
|
||||
})
|
||||
|
||||
it('shows skeleton rows when loading', () => {
|
||||
mockUseQueryReturn = { data: undefined, isLoading: true }
|
||||
render(<InterAgentMessagesDialog {...defaultProps} />)
|
||||
const skeletons = document.querySelectorAll('.animate-pulse')
|
||||
expect(skeletons.length).toBeGreaterThanOrEqual(3)
|
||||
expect(screen.queryByRole('table')).toBeNull()
|
||||
})
|
||||
|
||||
it('shows "No data found" when data is empty', () => {
|
||||
mockUseQueryReturn = { data: [], isLoading: false }
|
||||
render(<InterAgentMessagesDialog {...defaultProps} />)
|
||||
expect(screen.getByText('No data found')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders data rows for answered conversation', () => {
|
||||
mockUseQueryReturn = {
|
||||
data: [
|
||||
{
|
||||
id: 'c1',
|
||||
timestamp: '2026-03-06T10:00:00.000Z',
|
||||
toAgentName: 'target-agent',
|
||||
toAgentId: 'agent-2',
|
||||
question: 'What is the export path?',
|
||||
answer: 'It is src/api/index.ts',
|
||||
status: 'answered',
|
||||
taskId: null,
|
||||
phaseId: null,
|
||||
},
|
||||
],
|
||||
isLoading: false,
|
||||
}
|
||||
render(<InterAgentMessagesDialog {...defaultProps} />)
|
||||
expect(screen.getByText('target-agent')).toBeInTheDocument()
|
||||
expect(screen.getByText('answered')).toBeInTheDocument()
|
||||
expect(screen.queryByText('What is the export path?')).toBeNull()
|
||||
})
|
||||
|
||||
it('expands answered row to show question and answer', () => {
|
||||
mockUseQueryReturn = {
|
||||
data: [
|
||||
{
|
||||
id: 'c1',
|
||||
timestamp: '2026-03-06T10:00:00.000Z',
|
||||
toAgentName: 'target-agent',
|
||||
toAgentId: 'agent-2',
|
||||
question: 'What is the export path?',
|
||||
answer: 'It is src/api/index.ts',
|
||||
status: 'answered',
|
||||
taskId: null,
|
||||
phaseId: null,
|
||||
},
|
||||
],
|
||||
isLoading: false,
|
||||
}
|
||||
render(<InterAgentMessagesDialog {...defaultProps} />)
|
||||
|
||||
fireEvent.click(screen.getByText('target-agent').closest('tr')!)
|
||||
expect(screen.getByText('What is the export path?')).toBeInTheDocument()
|
||||
expect(screen.getByText('It is src/api/index.ts')).toBeInTheDocument()
|
||||
expect(screen.queryByText('No answer yet')).toBeNull()
|
||||
})
|
||||
|
||||
it('expands pending row to show question and "No answer yet"', () => {
|
||||
mockUseQueryReturn = {
|
||||
data: [
|
||||
{
|
||||
id: 'c2',
|
||||
timestamp: '2026-03-06T10:00:00.000Z',
|
||||
toAgentName: 'target-agent',
|
||||
toAgentId: 'agent-2',
|
||||
question: 'What is the export path?',
|
||||
answer: null,
|
||||
status: 'pending',
|
||||
taskId: null,
|
||||
phaseId: null,
|
||||
},
|
||||
],
|
||||
isLoading: false,
|
||||
}
|
||||
render(<InterAgentMessagesDialog {...defaultProps} />)
|
||||
|
||||
fireEvent.click(screen.getByText('target-agent').closest('tr')!)
|
||||
expect(screen.getByText('What is the export path?')).toBeInTheDocument()
|
||||
expect(screen.getByText('No answer yet')).toBeInTheDocument()
|
||||
expect(screen.queryByText('It is src/api/index.ts')).toBeNull()
|
||||
})
|
||||
|
||||
it('collapses row when clicked again', () => {
|
||||
mockUseQueryReturn = {
|
||||
data: [
|
||||
{
|
||||
id: 'c1',
|
||||
timestamp: '2026-03-06T10:00:00.000Z',
|
||||
toAgentName: 'target-agent',
|
||||
toAgentId: 'agent-2',
|
||||
question: 'What is the export path?',
|
||||
answer: 'It is src/api/index.ts',
|
||||
status: 'answered',
|
||||
taskId: null,
|
||||
phaseId: null,
|
||||
},
|
||||
],
|
||||
isLoading: false,
|
||||
}
|
||||
render(<InterAgentMessagesDialog {...defaultProps} />)
|
||||
|
||||
const row = screen.getByText('target-agent').closest('tr')!
|
||||
fireEvent.click(row)
|
||||
expect(screen.getByText('What is the export path?')).toBeInTheDocument()
|
||||
fireEvent.click(row)
|
||||
expect(screen.queryByText('What is the export path?')).toBeNull()
|
||||
})
|
||||
|
||||
it('shows 200-instance note when data length is 200', () => {
|
||||
mockUseQueryReturn = {
|
||||
data: Array(200).fill({
|
||||
id: 'c1',
|
||||
timestamp: '2026-03-06T10:00:00.000Z',
|
||||
toAgentName: 'target-agent',
|
||||
toAgentId: 'agent-2',
|
||||
question: 'What is the export path?',
|
||||
answer: null,
|
||||
status: 'pending',
|
||||
taskId: null,
|
||||
phaseId: null,
|
||||
}),
|
||||
isLoading: false,
|
||||
}
|
||||
render(<InterAgentMessagesDialog {...defaultProps} />)
|
||||
expect(screen.getByText('Showing first 200 instances.')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,147 @@
|
||||
// @vitest-environment happy-dom
|
||||
import '@testing-library/jest-dom/vitest'
|
||||
import { render, screen, fireEvent } from '@testing-library/react'
|
||||
import { vi, describe, it, expect, beforeEach } from 'vitest'
|
||||
|
||||
let mockUseQueryReturn: { data: unknown; isLoading: boolean } = {
|
||||
data: undefined,
|
||||
isLoading: false,
|
||||
}
|
||||
|
||||
vi.mock('@/lib/trpc', () => ({
|
||||
trpc: {
|
||||
agent: {
|
||||
getQuestionsAsked: {
|
||||
useQuery: vi.fn((_args: unknown, _opts: unknown) => mockUseQueryReturn),
|
||||
},
|
||||
},
|
||||
},
|
||||
}))
|
||||
|
||||
import { QuestionsAskedDialog } from '../QuestionsAskedDialog'
|
||||
|
||||
const defaultProps = {
|
||||
open: true,
|
||||
onOpenChange: vi.fn(),
|
||||
agentId: 'agent-123',
|
||||
agentName: 'test-agent',
|
||||
}
|
||||
|
||||
describe('QuestionsAskedDialog', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
mockUseQueryReturn = { data: undefined, isLoading: false }
|
||||
})
|
||||
|
||||
it('does not render dialog content when open=false', () => {
|
||||
render(<QuestionsAskedDialog {...defaultProps} open={false} />)
|
||||
expect(screen.queryByText(/Questions Asked/)).toBeNull()
|
||||
})
|
||||
|
||||
it('shows skeleton rows when loading', () => {
|
||||
mockUseQueryReturn = { data: undefined, isLoading: true }
|
||||
render(<QuestionsAskedDialog {...defaultProps} />)
|
||||
const skeletons = document.querySelectorAll('.animate-pulse')
|
||||
expect(skeletons.length).toBeGreaterThanOrEqual(3)
|
||||
expect(screen.queryByRole('table')).toBeNull()
|
||||
})
|
||||
|
||||
it('shows "No data found" when data is empty', () => {
|
||||
mockUseQueryReturn = { data: [], isLoading: false }
|
||||
render(<QuestionsAskedDialog {...defaultProps} />)
|
||||
expect(screen.getByText('No data found')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders data rows correctly', () => {
|
||||
mockUseQueryReturn = {
|
||||
data: [
|
||||
{
|
||||
timestamp: '2026-03-06T10:00:00.000Z',
|
||||
questions: [
|
||||
{ question: 'Pick a method', header: 'Method', options: [{ label: 'A', description: 'Option A' }] },
|
||||
{ question: 'Pick a strategy', header: 'Strategy', options: [{ label: 'B', description: 'Option B' }] },
|
||||
],
|
||||
},
|
||||
],
|
||||
isLoading: false,
|
||||
}
|
||||
render(<QuestionsAskedDialog {...defaultProps} />)
|
||||
expect(screen.getByText('2 questions')).toBeInTheDocument()
|
||||
expect(screen.getByText('Method')).toBeInTheDocument()
|
||||
expect(screen.queryByText('Pick a method')).toBeNull()
|
||||
})
|
||||
|
||||
it('expands row to show all sub-questions on click', () => {
|
||||
mockUseQueryReturn = {
|
||||
data: [
|
||||
{
|
||||
timestamp: '2026-03-06T10:00:00.000Z',
|
||||
questions: [
|
||||
{ question: 'Pick a method', header: 'Method', options: [{ label: 'A', description: 'Option A' }] },
|
||||
{ question: 'Pick a strategy', header: 'Strategy', options: [{ label: 'B', description: 'Option B' }] },
|
||||
],
|
||||
},
|
||||
],
|
||||
isLoading: false,
|
||||
}
|
||||
render(<QuestionsAskedDialog {...defaultProps} />)
|
||||
|
||||
fireEvent.click(screen.getByText('2 questions').closest('tr')!)
|
||||
expect(screen.getByText('Pick a method')).toBeInTheDocument()
|
||||
expect(screen.getByText('Pick a strategy')).toBeInTheDocument()
|
||||
expect(screen.getByText('• A — Option A')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('collapses row when clicked again', () => {
|
||||
mockUseQueryReturn = {
|
||||
data: [
|
||||
{
|
||||
timestamp: '2026-03-06T10:00:00.000Z',
|
||||
questions: [
|
||||
{ question: 'Pick a method', header: 'Method', options: [{ label: 'A', description: 'Option A' }] },
|
||||
{ question: 'Pick a strategy', header: 'Strategy', options: [{ label: 'B', description: 'Option B' }] },
|
||||
],
|
||||
},
|
||||
],
|
||||
isLoading: false,
|
||||
}
|
||||
render(<QuestionsAskedDialog {...defaultProps} />)
|
||||
|
||||
const row = screen.getByText('2 questions').closest('tr')!
|
||||
fireEvent.click(row)
|
||||
expect(screen.getByText('Pick a method')).toBeInTheDocument()
|
||||
fireEvent.click(row)
|
||||
expect(screen.queryByText('Pick a method')).toBeNull()
|
||||
})
|
||||
|
||||
it('shows 200-instance note when data length is 200', () => {
|
||||
mockUseQueryReturn = {
|
||||
data: Array(200).fill({
|
||||
timestamp: '2026-03-06T10:00:00.000Z',
|
||||
questions: [
|
||||
{ question: 'Pick a method', header: 'Method', options: [] },
|
||||
],
|
||||
}),
|
||||
isLoading: false,
|
||||
}
|
||||
render(<QuestionsAskedDialog {...defaultProps} />)
|
||||
expect(screen.getByText('Showing first 200 instances.')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows singular "1 question" for single-question rows', () => {
|
||||
mockUseQueryReturn = {
|
||||
data: [
|
||||
{
|
||||
timestamp: '2026-03-06T10:00:00.000Z',
|
||||
questions: [
|
||||
{ question: 'Only one', header: 'Single', options: [] },
|
||||
],
|
||||
},
|
||||
],
|
||||
isLoading: false,
|
||||
}
|
||||
render(<QuestionsAskedDialog {...defaultProps} />)
|
||||
expect(screen.getByText('1 question')).toBeInTheDocument()
|
||||
expect(screen.queryByText('1 questions')).toBeNull()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user