@adatechnology/conversations-ui 0.5.0 → 0.6.1

package/src/legacyStyles.golden.test.ts

@@ -0,0 +1,92 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'bun:test'
+
+import { splitBlocks } from './cssBlocks.test-helper'
+
+// legacyStyles.fixture.css is the styles.css shipped by 0.4.2; the stylesheet is global, so anything
+// added since must be namespaced under .cv- and must not reach the host's own elements.
+const LEGACY_CSS = readFileSync(join(import.meta.dir, 'legacyStyles.fixture.css'), 'utf8')
+const CURRENT_CSS = readFileSync(join(import.meta.dir, 'styles.css'), 'utf8')
+
+const NESTED_AT_RULES = ['@media', '@supports']
+const ALLOWED_NEW_AT_RULES = ['@media', '@supports', '@keyframes']
+
+type Inventory = { selectors: string[]; atRules: string[]; keyframeNames: string[] }
+
+function splitSelectorList(prelude: string): string[] {
+  const parts: string[] = []
+  let parenthesisDepth = 0
+  let current = ''
+  for (const char of prelude) {
+    if (char === '(') parenthesisDepth += 1
+    if (char === ')') parenthesisDepth -= 1
+    if (char === ',' && parenthesisDepth === 0) {
+      parts.push(current.trim())
+      current = ''
+    } else {
+      current += char
+    }
+  }
+  parts.push(current.trim())
+  return parts.filter(Boolean)
+}
+
+function collect(css: string, inventory: Inventory): Inventory {
+  for (const { prelude, body } of splitBlocks(css.replace(/\/\*[\s\S]*?\*\//g, ''))) {
+    if (!prelude.startsWith('@')) {
+      inventory.selectors.push(...splitSelectorList(prelude))
+      continue
+    }
+    const atRuleName = prelude.split(/[\s(]/)[0] ?? prelude
+    inventory.atRules.push(atRuleName)
+    if (atRuleName === '@keyframes') inventory.keyframeNames.push(prelude.replace('@keyframes', '').trim())
+    if (NESTED_AT_RULES.includes(atRuleName) && body !== undefined) collect(body, inventory)
+  }
+  return inventory
+}
+
+function inventoryOf(css: string): Inventory {
+  return collect(css, { selectors: [], atRules: [], keyframeNames: [] })
+}
+
+function addedSince(legacy: readonly string[], current: readonly string[]): string[] {
+  const remaining = [...legacy]
+  return current.filter((entry) => {
+    const position = remaining.indexOf(entry)
+    if (position === -1) return true
+    remaining.splice(position, 1)
+    return false
+  })
+}
+
+describe('styles.css não vaza para o host desde a 0.4.2', () => {
+  const legacy = inventoryOf(LEGACY_CSS)
+  const current = inventoryOf(CURRENT_CSS)
+  const addedSelectors = addedSince(legacy.selectors, current.selectors)
+  const addedAtRules = addedSince(legacy.atRules, current.atRules)
+
+  it('G8: o parse enxerga as regras (guarda contra um parser que não acha nada)', () => {
+    expect(legacy.selectors.length).toBeGreaterThan(100)
+    expect(addedSelectors.length).toBeGreaterThan(20)
+  })
+
+  it('G8: todo seletor adicionado começa por .cv- ou .dark .cv-', () => {
+    const offenders = addedSelectors.filter((selector) => !/^(\.dark )?\.cv-/.test(selector))
+
+    expect(offenders).toEqual([])
+  })
+
+  it('G8: nenhum seletor global (:root, html, body, *) foi adicionado', () => {
+    const globals = addedSelectors.filter((selector) => /^(:root|html|body|\*)([\s.:#[>+~,]|$)/.test(selector))
+
+    expect(globals).toEqual([])
+  })
+
+  it('G8: nenhum @import, @layer ou outra at-rule nova além de @media, @supports e @keyframes', () => {
+    expect(addedAtRules.filter((rule) => !ALLOWED_NEW_AT_RULES.includes(rule))).toEqual([])
+    expect(addedSince(legacy.keyframeNames, current.keyframeNames).filter((name) => !name.startsWith('cv-'))).toEqual(
+      [],
+    )
+  })
+})

package/src/messageTextCopyInteraction.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'bun:test'
+
+import { resolveCopyInteraction } from './messageTextCopyInteraction'
+
+function buildKeyEvent(key: string): { key: string; preventDefault: () => void; wasPrevented: () => boolean } {
+  let prevented = false
+  return {
+    key,
+    preventDefault: () => {
+      prevented = true
+    },
+    wasPrevented: () => prevented,
+  }
+}
+
+describe('resolveCopyInteraction', () => {
+  it('por padrão devolve só o onClick de cópia', () => {
+    const onCopy = () => undefined
+    const props = resolveCopyInteraction({ copyOnClick: true, accessibleCopy: false, onCopy })
+
+    expect(props.onClick).toBe(onCopy)
+    expect('role' in props).toBe(false)
+    expect('tabIndex' in props).toBe(false)
+    expect('onKeyDown' in props).toBe(false)
+  })
+
+  it('com copyOnClick desligado devolve objeto vazio, mesmo com accessibleCopy', () => {
+    expect(resolveCopyInteraction({ copyOnClick: false, accessibleCopy: false, onCopy: () => undefined })).toEqual({})
+    expect(resolveCopyInteraction({ copyOnClick: false, accessibleCopy: true, onCopy: () => undefined })).toEqual({})
+  })
+
+  it('com accessibleCopy expõe role, tabIndex e o onClick', () => {
+    const onCopy = () => undefined
+    const props = resolveCopyInteraction({ copyOnClick: true, accessibleCopy: true, onCopy })
+
+    expect(props.role).toBe('button')
+    expect(props.tabIndex).toBe(0)
+    expect(props.onClick).toBe(onCopy)
+  })
+
+  it('Enter e Espaço copiam e previnem o default', () => {
+    let copies = 0
+    const props = resolveCopyInteraction({
+      copyOnClick: true,
+      accessibleCopy: true,
+      onCopy: () => {
+        copies += 1
+      },
+    })
+
+    for (const key of ['Enter', ' ']) {
+      const event = buildKeyEvent(key)
+      props.onKeyDown?.(event)
+      expect(event.wasPrevented()).toBe(true)
+    }
+    expect(copies).toBe(2)
+  })
+
+  it('outras teclas não copiam nem previnem o default', () => {
+    let copies = 0
+    const props = resolveCopyInteraction({
+      copyOnClick: true,
+      accessibleCopy: true,
+      onCopy: () => {
+        copies += 1
+      },
+    })
+    const event = buildKeyEvent('Tab')
+
+    props.onKeyDown?.(event)
+
+    expect(copies).toBe(0)
+    expect(event.wasPrevented()).toBe(false)
+  })
+})

package/src/messageTextCopyInteraction.ts

@@ -0,0 +1,37 @@
+export type CopyKeyboardEvent = {
+  readonly key: string
+  preventDefault: () => void
+}
+
+export type CopyInteractionProps = {
+  onClick?: () => void
+  role?: 'button'
+  tabIndex?: 0
+  onKeyDown?: (event: CopyKeyboardEvent) => void
+}
+
+export type ResolveCopyInteractionOptions = {
+  readonly copyOnClick: boolean
+  readonly accessibleCopy: boolean
+  readonly onCopy: () => void
+}
+
+export function resolveCopyInteraction({
+  copyOnClick,
+  accessibleCopy,
+  onCopy,
+}: ResolveCopyInteractionOptions): CopyInteractionProps {
+  if (!copyOnClick) return {}
+  if (!accessibleCopy) return { onClick: onCopy }
+
+  return {
+    onClick: onCopy,
+    role: 'button',
+    tabIndex: 0,
+    onKeyDown: (event) => {
+      if (event.key !== 'Enter' && event.key !== ' ') return
+      event.preventDefault()
+      onCopy()
+    },
+  }
+}

package/src/participant/ParticipantChannelBadges.test.tsx

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { ParticipantChannelBadges } from './ParticipantChannelBadges'
+import { findUtilityClassTokens } from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+
+const render = (channels: readonly string[] | undefined, variant?: 'list' | 'inline') =>
+  renderToStaticMarkup(
+    <ParticipantChannelBadges
+      channels={channels}
+      labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+      {...(variant === undefined ? {} : { variant })}
+    />,
+  )
+
+describe('ParticipantChannelBadges', () => {
+  it('draws nothing without channels, not even the list', () => {
+    expect(render(undefined)).toBe('')
+    expect(render([])).toBe('')
+    expect(render(['sms'])).toBe('')
+  })
+
+  it('draws one badge per channel in a stable order with accessible text', () => {
+    const markup = render(['whatsapp', 'app'])
+
+    expect(markup).toContain('<ul class="cv-p-channels"')
+    expect(markup).toContain('aria-label="Channels in this conversation"')
+    expect(markup.indexOf('cv-p-channel--app')).toBeLessThan(markup.indexOf('cv-p-channel--whatsapp'))
+    expect(markup).toContain('<span class="cv-p-sr-only">App</span>')
+    expect(markup).toContain('<span class="cv-p-sr-only">WhatsApp</span>')
+  })
+
+  it('hides the icons from assistive tech and uses no utility classes', () => {
+    const markup = render(['app', 'whatsapp', 'email', 'portal', 'webchat'])
+
+    expect(markup.match(/<svg[^>]*aria-hidden="true"/g)).toHaveLength(5)
+    expect(findUtilityClassTokens(markup)).toEqual([])
+  })
+
+  it('inline variant draws spans only, with a group prefix and audible separators', () => {
+    const markup = render(['whatsapp', 'app', 'app'], 'inline')
+
+    expect(markup).not.toContain('<ul')
+    expect(markup).not.toContain('<li')
+    expect(markup).toContain('<span class="cv-p-channels">')
+    expect(markup).toContain('<span class="cv-p-sr-only">Channels in this conversation: </span>')
+    expect(markup.match(/class="cv-p-channel cv-p-channel--/g)).toHaveLength(2)
+    expect(markup.indexOf('cv-p-channel--app')).toBeLessThan(markup.indexOf('cv-p-channel--whatsapp'))
+    expect(markup).toContain('<span class="cv-p-sr-only">App, </span>')
+    expect(markup).toContain('<span class="cv-p-sr-only">WhatsApp</span>')
+    expect(markup.match(/<svg[^>]*aria-hidden="true"/g)).toHaveLength(2)
+  })
+
+  it('inline variant draws nothing without valid channels', () => {
+    expect(render(undefined, 'inline')).toBe('')
+    expect(render(['sms'], 'inline')).toBe('')
+  })
+})

package/src/participant/ParticipantChannelBadges.tsx

@@ -0,0 +1,75 @@
+import { Globe, Mail, MessageCircle, MessagesSquare, Smartphone } from 'lucide-react'
+import type { ComponentType } from 'react'
+
+import {
+  resolveParticipantChannelLabel,
+  resolveParticipantChannels,
+  type ParticipantChannelDescriptor,
+} from './participantChannels'
+import type { ParticipantConversationsLabels } from './participantLabels'
+
+const ICONS: Record<
+  ParticipantChannelDescriptor['iconName'],
+  ComponentType<{ size?: number; 'aria-hidden'?: boolean }>
+> = {
+  Smartphone,
+  MessageCircle,
+  Mail,
+  Globe,
+  MessagesSquare,
+}
+
+export type ParticipantChannelBadgesProps = {
+  readonly channels: readonly string[] | undefined
+  readonly labels: ParticipantConversationsLabels
+  /** 'list' draws ul/li; 'inline' draws spans only, valid inside a button. */
+  readonly variant?: 'list' | 'inline'
+}
+
+type BadgeProps = {
+  readonly descriptor: ParticipantChannelDescriptor
+  readonly labels: ParticipantConversationsLabels
+  readonly separator: string
+}
+
+function BadgeContent({ descriptor, labels, separator }: BadgeProps) {
+  const Icon = ICONS[descriptor.iconName]
+  return (
+    <>
+      <Icon size={14} aria-hidden={true} />
+      <span className="cv-p-sr-only">{`${resolveParticipantChannelLabel(descriptor, labels)}${separator}`}</span>
+    </>
+  )
+}
+
+export function ParticipantChannelBadges({ channels, labels, variant = 'list' }: ParticipantChannelBadgesProps) {
+  const descriptors = resolveParticipantChannels(channels)
+  if (descriptors.length === 0) return null
+
+  if (variant === 'inline') {
+    return (
+      <span className="cv-p-channels">
+        <span className="cv-p-sr-only">{`${labels.channelsGroup}: `}</span>
+        {descriptors.map((descriptor, index) => (
+          <span key={descriptor.channel} className={`cv-p-channel cv-p-channel--${descriptor.channel}`}>
+            <BadgeContent
+              descriptor={descriptor}
+              labels={labels}
+              separator={index < descriptors.length - 1 ? ', ' : ''}
+            />
+          </span>
+        ))}
+      </span>
+    )
+  }
+
+  return (
+    <ul className="cv-p-channels" aria-label={labels.channelsGroup}>
+      {descriptors.map((descriptor) => (
+        <li key={descriptor.channel} className={`cv-p-channel cv-p-channel--${descriptor.channel}`}>
+          <BadgeContent descriptor={descriptor} labels={labels} separator="" />
+        </li>
+      ))}
+    </ul>
+  )
+}

package/src/participant/ParticipantConversations.tsx

@@ -1,15 +1,16 @@
 import type { ReactNode } from 'react'
 
-import type {
-  ParticipantConversationSummary,
-  ParticipantSubjectRef,
-} from '@adatechnology/conversation-contracts'
+import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
 
 import type { ConversationChannel } from '../conversationChannel'
 import type { QuickReply } from '../quickReplies/quickReply.types'
 import type { ConversationsTheme } from '../types'
 import { ParticipantConversationsScreen } from './ParticipantConversationsScreen'
-import type { ParticipantConversationsClassNames, ParticipantSubjectGroup } from './participant.types'
+import type {
+  ParticipantConversationsClassNames,
+  ParticipantSubjectGroup,
+  ParticipantSubjectIconRenderer,
+} from './participant.types'
 import type { ParticipantConversationsApi, ParticipantPendingMessage } from './participantApi.types'
 import type { ParticipantConversationsLabels } from './participantLabels'
 import { useParticipantInbox } from './useParticipantInbox'
@@ -30,6 +31,7 @@ export type ParticipantConversationsProps = {
   pendingMessages?: readonly ParticipantPendingMessage[]
   onRetryPending?: (clientMessageId: string) => void
   quickReplies?: readonly QuickReply[]
+  renderSubjectIcon?: ParticipantSubjectIconRenderer
   renderSubjectCard?: (conversation: ParticipantConversationSummary) => ReactNode
   onOpenSubject?: (subject: ParticipantSubjectRef) => void
 }
@@ -38,5 +40,10 @@ export function ParticipantConversations(props: ParticipantConversationsProps) {
   const inbox = useParticipantInbox(props.api)
   const { status, conversations, hasMore, refresh, loadMore, markSubjectRead } = inbox
 
-  return <ParticipantConversationsScreen {...props} inbox={{ status, conversations, hasMore, refresh, loadMore, markSubjectRead }} />
+  return (
+    <ParticipantConversationsScreen
+      {...props}
+      inbox={{ status, conversations, hasMore, refresh, loadMore, markSubjectRead }}
+    />
+  )
 }

package/src/participant/ParticipantConversationsScreen.tsx

@@ -6,12 +6,16 @@ import { ParticipantThreadScreen } from './ParticipantThreadScreen'
 import { draftKey, type ParticipantDrafts } from './participantDrafts'
 import { groupParticipantConversations } from './participantGrouping'
 import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { isInboxSearchVisible } from './participantProtocol'
 import { participantSendStatesReducer } from './participantSendStates'
 import { buildParticipantThemeStyle } from './participantTheme'
 import type { UseParticipantInboxResult } from './useParticipantInbox'
 
 export type ParticipantConversationsScreenProps = ParticipantConversationsProps & {
-  readonly inbox: Pick<UseParticipantInboxResult, 'status' | 'conversations' | 'hasMore' | 'refresh' | 'loadMore' | 'markSubjectRead'>
+  readonly inbox: Pick<
+    UseParticipantInboxResult,
+    'status' | 'conversations' | 'hasMore' | 'refresh' | 'loadMore' | 'markSubjectRead'
+  >
 }
 
 const ALL_FILTER = 'all'
@@ -19,16 +23,21 @@ const ALL_FILTER = 'all'
 export function ParticipantConversationsScreen(props: ParticipantConversationsScreenProps) {
   const { selected, inbox, subjectGroups, classNames } = props
   const [filter, setFilter] = useState(ALL_FILTER)
+  const [searchQuery, setSearchQuery] = useState('')
   const draftsRef = useRef<ParticipantDrafts>(new Map())
   const [sendStates, dispatchSendStates] = useReducer(participantSendStatesReducer, new Map())
-  const labels = useMemo(
-    () => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }),
-    [props.labels],
-  )
+  const labels = useMemo(() => ({ ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, ...props.labels }), [props.labels])
   const view = useMemo(
-    () => groupParticipantConversations({ conversations: inbox.conversations, subjectGroups, filter }),
-    [inbox.conversations, subjectGroups, filter],
+    () =>
+      groupParticipantConversations({
+        conversations: inbox.conversations,
+        subjectGroups,
+        filter,
+        searchQuery,
+      }),
+    [inbox.conversations, subjectGroups, filter, searchQuery],
   )
+  const isSearchVisible = isInboxSearchVisible({ conversations: inbox.conversations, searchQuery })
   const rootClassName = ['cv-p-root', props.className, classNames?.root].filter(Boolean).join(' ')
 
   return (
@@ -47,6 +56,8 @@ export function ParticipantConversationsScreen(props: ParticipantConversationsSc
             hasMore={inbox.hasMore}
             loadMore={() => void inbox.loadMore()}
             locale={props.locale}
+            renderSubjectIcon={props.renderSubjectIcon}
+            search={{ value: searchQuery, onChange: setSearchQuery, isVisible: isSearchVisible }}
           />
         </div>
       ) : (

package/src/participant/ParticipantInbox.test.tsx

@@ -5,7 +5,7 @@ import { buildConversation, findForeignClassTokens, findUtilityClassTokens } fro
 import { groupParticipantConversations } from './participantGrouping'
 import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
 import type { ParticipantSubjectGroup } from './participant.types'
-import { ParticipantInbox } from './ParticipantInbox'
+import { ParticipantInbox, type ParticipantInboxProps } from './ParticipantInbox'
 
 const GROUPS: readonly ParticipantSubjectGroup[] = [
   { subjectType: 'invoice', label: 'Invoice' },
@@ -13,7 +13,13 @@ const GROUPS: readonly ParticipantSubjectGroup[] = [
 ]
 
 const CONVERSATIONS = [
-  buildConversation({ subjectId: '1', subjectLabel: 'Awaiting one', awaitingParticipant: true, unreadCount: 2, lastMessagePreview: 'Please send the photo' }),
+  buildConversation({
+    subjectId: '1',
+    subjectLabel: 'Awaiting one',
+    awaitingParticipant: true,
+    unreadCount: 2,
+    lastMessagePreview: 'Please send the photo',
+  }),
   buildConversation({ subjectId: '2', subjectLabel: 'Invoice two' }),
   buildConversation({ subjectId: '3', subjectType: 'incident', subjectLabel: 'Incident three' }),
   buildConversation({ subjectId: '4', subjectLabel: 'Old one', status: 'closed' }),
@@ -24,6 +30,7 @@ type RenderOverrides = {
   filter?: string
   status?: 'idle' | 'loading' | 'ready' | 'error'
   hasMore?: boolean
+  renderSubjectIcon?: ParticipantInboxProps['renderSubjectIcon']
 }
 
 function render(overrides: RenderOverrides = {}): string {
@@ -44,10 +51,100 @@ function render(overrides: RenderOverrides = {}): string {
       refresh={() => undefined}
       hasMore={overrides.hasMore ?? false}
       loadMore={() => undefined}
+      renderSubjectIcon={overrides.renderSubjectIcon}
     />,
   )
 }
 
+describe('ParticipantInbox channels and subject icon', () => {
+  const withChannels = [
+    buildConversation({ subjectId: '9', subjectLabel: 'Chatty', channels: ['whatsapp', 'app'], iconName: 'file-text' }),
+  ]
+
+  it('shows channel badges only when the conversation has channels', () => {
+    expect(render({ conversations: withChannels })).toContain('cv-p-channel--app')
+    expect(render()).not.toContain('cv-p-channels')
+  })
+
+  it('keeps the badge order stable and the accessible text present', () => {
+    const markup = render({ conversations: withChannels })
+
+    expect(markup.indexOf('cv-p-channel--app')).toBeLessThan(markup.indexOf('cv-p-channel--whatsapp'))
+    expect(markup).toContain('<span class="cv-p-sr-only">WhatsApp</span>')
+  })
+
+  it('row badges are phrasing content: no list inside the row button, header keeps its list', () => {
+    const markup = render({ conversations: withChannels })
+    const button = markup.slice(markup.indexOf('<button'), markup.indexOf('</button>'))
+
+    expect(button).toContain('cv-p-channels')
+    expect(button).not.toContain('<ul')
+    expect(button).not.toContain('<li')
+    expect(button).toContain('Channels in this conversation: ')
+  })
+
+  it('treats false and empty string from renderSubjectIcon as absent', () => {
+    const groups = [{ subjectType: 'invoice', label: 'Invoice', icon: 'GRP' }]
+    const view = groupParticipantConversations({ conversations: withChannels, subjectGroups: groups })
+    const renderWith = (renderSubjectIcon: ParticipantInboxProps['renderSubjectIcon']) =>
+      renderToStaticMarkup(
+        <ParticipantInbox
+          view={view}
+          subjectGroups={groups}
+          filter="all"
+          onFilterChange={() => undefined}
+          onSelect={() => undefined}
+          labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+          status="ready"
+          refresh={() => undefined}
+          hasMore={false}
+          loadMore={() => undefined}
+          renderSubjectIcon={renderSubjectIcon}
+        />,
+      )
+
+    expect(renderWith(() => false)).toContain('GRP')
+    expect(renderWith(() => '')).toContain('GRP')
+    expect(renderWith(() => <i data-custom="1" />)).not.toContain('GRP')
+  })
+
+  it('uses renderSubjectIcon when it returns a node', () => {
+    const markup = render({
+      renderSubjectIcon: (conversation) => <i data-icon={conversation.iconName ?? 'none'} />,
+      conversations: withChannels,
+    })
+
+    expect(markup).toContain('cv-p-inbox__icon')
+    expect(markup).toContain('data-icon="file-text"')
+  })
+
+  it('falls back to the group icon when renderSubjectIcon returns null or undefined', () => {
+    const groups = [{ subjectType: 'invoice', label: 'Invoice', icon: 'GRP' }]
+    const view = groupParticipantConversations({ conversations: withChannels, subjectGroups: groups })
+    const renderWith = (renderSubjectIcon: ParticipantInboxProps['renderSubjectIcon']) =>
+      renderToStaticMarkup(
+        <ParticipantInbox
+          view={view}
+          subjectGroups={groups}
+          filter="all"
+          onFilterChange={() => undefined}
+          onSelect={() => undefined}
+          labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+          status="ready"
+          refresh={() => undefined}
+          hasMore={false}
+          loadMore={() => undefined}
+          renderSubjectIcon={renderSubjectIcon}
+        />,
+      )
+
+    expect(renderWith(() => null)).toContain('GRP')
+    expect(renderWith(() => undefined)).toContain('GRP')
+    expect(renderWith(undefined)).toContain('GRP')
+    expect(renderWith(() => <i data-custom="1" />)).not.toContain('GRP')
+  })
+})
+
 describe('ParticipantInbox', () => {
   it('renders section headers with label and count, awaiting highlighted', () => {
     const markup = render()