@adatechnology/conversations-ui 0.1.0-rc.2 → 0.1.0-rc.21

package/src/preview/previewStore.ts

@@ -0,0 +1,193 @@
+/**
+ * Estado em memória que alimenta o preview de atendimento humano. Mock de API e mock de SSE
+ * compartilham este store de propósito: se cada um tivesse dados próprios, um evento anunciaria
+ * mensagem nova e o refetch da lista devolveria o estado antigo — a inbox pareceria funcionar e
+ * estaria mentindo, que é exatamente o defeito que o preview deveria expor.
+ *
+ * Os nomes de canal e de evento espelham o servidor (`conv:<whatsappNumber>`, `global`,
+ * `message`/`message-status`/`mode-changed`/`data-changed`). Fidelidade de vocabulário é o que
+ * permite trocar mock por servidor real sem tocar na UI.
+ */
+
+import type { MessagePayload } from '../types'
+import type { ConversationSummary } from '../providers/types'
+
+export const GLOBAL_CHANNEL = 'global'
+
+export function conversationChannel(conversationId: string): string {
+  return `conv:${conversationId}`
+}
+
+export type PreviewEmission = {
+  readonly channel: string
+  readonly event: string
+  readonly payload: Record<string, unknown>
+}
+
+export type PreviewStoreListener = (emission: PreviewEmission) => void
+
+export type AppendMessageParams = {
+  readonly conversationId: string
+  readonly content: string
+  readonly direction: MessagePayload['direction']
+  readonly sender: MessagePayload['sender']
+}
+
+export type SetModeParams = {
+  readonly conversationId: string
+  readonly mode: ConversationSummary['mode']
+  readonly assignedUserId?: string | undefined
+}
+
+export type ListConversationsFilters = {
+  readonly waitingHuman?: boolean
+  readonly search?: string
+}
+
+export type PreviewStore = {
+  listConversations(filters?: ListConversationsFilters): ConversationSummary[]
+  listMessages(conversationId: string): MessagePayload[]
+  appendMessage(params: AppendMessageParams): MessagePayload
+  setMode(params: SetModeParams): void
+  requestHuman(conversationId: string): void
+  markRead(conversationId: string): void
+  subscribe(channel: string, listener: PreviewStoreListener): () => void
+}
+
+export type CreatePreviewStoreParams = {
+  readonly conversations: readonly ConversationSummary[]
+  readonly messages: Readonly<Record<string, readonly MessagePayload[]>>
+  // Injetável para o teste conseguir asserir timestamps sem depender do relógio.
+  readonly now?: () => Date
+}
+
+export function createPreviewStore(params: CreatePreviewStoreParams): PreviewStore {
+  const conversations = params.conversations.map((conversation) => ({ ...conversation }))
+  const messages = new Map<string, MessagePayload[]>(
+    Object.entries(params.messages).map(([conversationId, list]) => [conversationId, [...list]]),
+  )
+  const listeners = new Map<string, Set<PreviewStoreListener>>()
+  const now = params.now ?? ((): Date => new Date())
+
+  let messageSequence = 0
+
+  function emit(emission: PreviewEmission): void {
+    for (const listener of listeners.get(emission.channel) ?? []) listener(emission)
+  }
+
+  // Toda mutação avisa o canal global: é o sinal de "refaça a query" que mantém a lista coerente
+  // com o que o canal da conversa acabou de anunciar.
+  function emitDataChanged(): void {
+    emit({ channel: GLOBAL_CHANNEL, event: 'data-changed', payload: {} })
+  }
+
+  function findConversation(conversationId: string): ConversationSummary | undefined {
+    return conversations.find((conversation) => conversation.id === conversationId)
+  }
+
+  return {
+    listConversations(filters?: ListConversationsFilters): ConversationSummary[] {
+      return conversations
+        .filter((conversation) => (filters?.waitingHuman ? conversation.waitingHuman : true))
+        .filter((conversation) => {
+          const search = filters?.search?.toLowerCase()
+          if (!search) return true
+          return (
+            conversation.whatsappNumber.includes(search) ||
+            (conversation.clientName?.toLowerCase().includes(search) ?? false)
+          )
+        })
+        .map((conversation) => ({ ...conversation }))
+        .sort((left, right) => right.lastAt.localeCompare(left.lastAt))
+    },
+
+    listMessages(conversationId: string): MessagePayload[] {
+      return [...(messages.get(conversationId) ?? [])]
+    },
+
+    appendMessage(appendParams: AppendMessageParams): MessagePayload {
+      messageSequence += 1
+      const timestamp = now().toISOString()
+      const message: MessagePayload = {
+        id: `preview-${messageSequence}`,
+        type: 'text',
+        content: appendParams.content,
+        direction: appendParams.direction,
+        sender: appendParams.sender,
+        timestamp,
+        status: appendParams.direction === 'outbound' ? 'sent' : undefined,
+      }
+
+      const conversationMessages = messages.get(appendParams.conversationId) ?? []
+      messages.set(appendParams.conversationId, [...conversationMessages, message])
+
+      const conversation = findConversation(appendParams.conversationId)
+      if (conversation) {
+        conversation.lastContent = appendParams.content
+        conversation.lastDirection = appendParams.direction
+        conversation.lastAt = timestamp
+        if (appendParams.direction === 'inbound') {
+          conversation.lastInboundAt = timestamp
+          conversation.unread += 1
+        }
+      }
+
+      // O servidor emite APENAS `{ direction, sender }` neste evento — é ping de "refaça a
+      // query", não entrega de dados. Emitir a mensagem inteira aqui deixaria o mock mais
+      // generoso que a realidade, e uma UI que lesse `event.data.content` funcionaria no preview
+      // e quebraria em produção.
+      emit({
+        channel: conversationChannel(appendParams.conversationId),
+        event: 'message',
+        payload: { direction: message.direction, sender: message.sender },
+      })
+      emitDataChanged()
+
+      return message
+    },
+
+    setMode(modeParams: SetModeParams): void {
+      const conversation = findConversation(modeParams.conversationId)
+      if (!conversation) return
+
+      conversation.mode = modeParams.mode
+      conversation.assignedUserId = modeParams.assignedUserId ?? null
+      // Assumir a conversa é o que atende ao pedido de humano — deixar a flag acesa manteria a
+      // conversa na fila de espera para sempre.
+      if (modeParams.mode === 'human') conversation.waitingHuman = false
+
+      emit({
+        channel: conversationChannel(modeParams.conversationId),
+        event: 'mode-changed',
+        payload: { mode: conversation.mode, assignedUserId: conversation.assignedUserId },
+      })
+      emitDataChanged()
+    },
+
+    requestHuman(conversationId: string): void {
+      const conversation = findConversation(conversationId)
+      if (!conversation) return
+
+      conversation.waitingHuman = true
+      emitDataChanged()
+    },
+
+    markRead(conversationId: string): void {
+      const conversation = findConversation(conversationId)
+      if (!conversation) return
+
+      conversation.unread = 0
+      emitDataChanged()
+    },
+
+    subscribe(channel: string, listener: PreviewStoreListener): () => void {
+      const channelListeners = listeners.get(channel) ?? new Set<PreviewStoreListener>()
+      channelListeners.add(listener)
+      listeners.set(channel, channelListeners)
+
+      return () => {
+        channelListeners.delete(listener)
+      }
+    },
+  }
+}

package/src/preview/startPreviewScript.ts

@@ -0,0 +1,60 @@
+/**
+ * Roteiro que mantém o preview vivo: sem tráfego chegando, a inbox é uma tela estática e as
+ * transições que o atendente precisa testar (fila de espera enchendo, handoff, devolução ao bot)
+ * nunca acontecem.
+ *
+ * O roteiro é cíclico e determinístico — mesma ordem a cada execução. Aleatoriedade tornaria um
+ * defeito visto uma vez difícil de reencontrar.
+ */
+
+import type { PreviewStore } from './previewStore'
+
+export type PreviewScriptStep = (store: PreviewStore) => void
+
+export const DEFAULT_PREVIEW_SCRIPT: readonly PreviewScriptStep[] = [
+  (store) =>
+    store.appendMessage({
+      conversationId: '5511988887777',
+      content: 'pode trocar o óleo por azeite?',
+      direction: 'inbound',
+      sender: 'customer',
+    }),
+  (store) => store.requestHuman('5511988887777'),
+  (store) =>
+    store.appendMessage({
+      conversationId: '5511955554444',
+      content: 'e o troco?',
+      direction: 'inbound',
+      sender: 'customer',
+    }),
+  (store) => store.setMode({ conversationId: '5511977776666', mode: 'human', assignedUserId: 'agent-2' }),
+  (store) =>
+    store.appendMessage({
+      conversationId: '5511977776666',
+      content: 'Oi Diego, sou a Ana. Já vi seu pedido.',
+      direction: 'outbound',
+      sender: 'agent',
+    }),
+  (store) => store.setMode({ conversationId: '5511966665555', mode: 'bot' }),
+]
+
+export type StartPreviewScriptParams = {
+  readonly store: PreviewStore
+  readonly intervalMs?: number
+  readonly steps?: readonly PreviewScriptStep[]
+}
+
+const DEFAULT_INTERVAL_MS = 4000
+
+export function startPreviewScript(params: StartPreviewScriptParams): () => void {
+  const steps = params.steps ?? DEFAULT_PREVIEW_SCRIPT
+  const intervalMs = params.intervalMs ?? DEFAULT_INTERVAL_MS
+  let index = 0
+
+  const timer = setInterval(() => {
+    steps[index % steps.length]?.(params.store)
+    index += 1
+  }, intervalMs)
+
+  return () => clearInterval(timer)
+}

package/src/providers/types.ts

@@ -1,37 +1,193 @@
-import type { MessagePayload } from '../types'
+import type { MessagePayload, MessageTranscription } from '../types'
+import type { ConversationChannel } from '../conversationChannel'
+
+export interface ListConversationsParams {
+  page?: number
+  limit?: number
+  waitingHuman?: boolean
+  search?: string
+  /**
+   * Recortes que só o produto conhece (tipo de financiamento, carteira, campanha) repassados
+   * crus ao backend dele. É o que evita o vocabulário de uma vertical virar campo fixo aqui:
+   * o pacote transporta o filtro sem saber o que ele significa.
+   */
+  filters?: Record<string, string | undefined>
+}
+
+/**
+ * Página com o total, para a UI conseguir desenhar controles de paginação.
+ *
+ * `fetchConversations` devolve isto **ou** o array puro de antes: implementações existentes
+ * continuam válidas sem mudar uma linha, e quem precisa paginar passa a ter o total. Sem a união
+ * seria impossível saber se um retorno curto é a última página ou uma página cheia por acaso.
+ */
+export interface ConversationPage {
+  conversations: ConversationSummary[]
+  total: number
+}
+
+export interface ListDocumentsParams {
+  search?: string
+  page?: number
+  /** Tamanho da página. Sem ele, `page` sozinho não define fatia nenhuma. */
+  limit?: number
+  /** Origem do arquivo (`customer`, `agent`, `bot`…). O vocabulário é do host. */
+  source?: string
+  sortDirection?: 'asc' | 'desc'
+}
+
+/** Arquivo na biblioteca da empresa: o mesmo da conversa, mais de qual conversa veio. */
+export interface CompanyDocument extends ConversationDocument {
+  conversationId: string
+}
+
+export interface CompanyDocumentPage {
+  documents: CompanyDocument[]
+  total: number
+}
+
+export interface ConversationDocumentPage {
+  documents: ConversationDocument[]
+  total: number
+}
+
+/**
+ * Template disponível para envio a partir da inbox. Distinto do `WhatsAppTemplateSummary` de
+ * `settings/`, e de propósito: aquele serve ao formulário que **edita** template e carrega o que
+ * a edição precisa (`shortId`, `variableCount`); este serve a quem só vai **escolher um para
+ * enviar**, e pedir os campos de edição obrigaria todo host a produzi-los sem uso.
+ */
+export interface ConversationTemplate {
+  name: string
+  language: string
+  status: string
+  category?: string
+  bodyText?: string | null
+}
 
 export interface ConversationsApi {
   fetchMessages(conversationId: string, params?: { limit?: number; before?: string }): Promise<MessagePayload[]>
-  fetchConversations(params?: {
-    page?: number
-    limit?: number
-    waitingHuman?: boolean
-    search?: string
-  }): Promise<ConversationSummary[]>
+  fetchConversations(params?: ListConversationsParams): Promise<ConversationSummary[] | ConversationPage>
   sendMessage(conversationId: string, text: string): Promise<MessagePayload>
   sendMedia(
     conversationId: string,
     data: { base64: string; mimeType: string; filename: string; caption?: string },
   ): Promise<MessagePayload>
+  /**
+   * `templateName` é opcional porque reabrir a janela é a operação, e escolher *qual* template a
+   * usa nem sempre é decisão da UI: backends que guardam um template padrão configurado só
+   * precisam do "reabra". Exigir o nome obrigaria toda inbox a listar templates antes de poder
+   * mandar o primeiro — e a listagem é `listTemplates?`, opcional.
+   */
   sendTemplate(
     conversationId: string,
-    data: { templateName: string; languageCode?: string; bodyParams?: string[] },
+    data: { templateName?: string; languageCode?: string; bodyParams?: string[] },
   ): Promise<void>
   markRead(conversationId: string): Promise<void>
   getContext(conversationId: string): Promise<Record<string, unknown>>
-  getDocuments(conversationId: string, params?: { search?: string; page?: number }): Promise<ConversationDocument[]>
-  getDocumentUrl(uploadId: string): Promise<string>
+  getDocuments(
+    conversationId: string,
+    params?: ListDocumentsParams,
+  ): Promise<ConversationDocument[] | ConversationDocumentPage>
+  /**
+   * `disposition` decide entre abrir no navegador e baixar. É o backend que assina a URL e grava
+   * o `Content-Disposition` nela, então a escolha precisa viajar na chamada — depois de assinada
+   * não há como o cliente mudá-la. Ausente = o padrão do host.
+   */
+  getDocumentUrl(uploadId: string, disposition?: 'inline' | 'attachment'): Promise<string>
+  /**
+   * Baixa vários arquivos num zip único.
+   *
+   * **Opcional por capacidade:** montar zip exige o host LER os bytes do storage, o que nem toda
+   * instalação faz — as que só assinam URL não conseguem. Ausente, o painel esconde a seleção em
+   * lote em vez de oferecer um botão que falha.
+   */
+  downloadDocumentsArchive?(conversationId: string, uploadIds: readonly string[]): Promise<Blob>
+  /**
+   * Biblioteca de TODAS as conversas, para uma tela de Documentos fora do atendimento.
+   *
+   * Opcional por capacidade: host que só expõe anexo dentro da conversa não implementa, e o
+   * componente de biblioteca simplesmente não é usável — melhor que uma tela que sempre erra.
+   */
+  getAllDocuments?(params?: ListDocumentsParams): Promise<CompanyDocumentPage>
   getMediaProxyUrl(mediaId: string): Promise<{ mimeType: string; data: string }>
+
+  /**
+   * Operações de atendimento humano. **Opcionais por capacidade, não por descuido:** nem toda
+   * inbox tem fila humana — um canal só-bot, ou um chat de site sem operador, não sabe o que é
+   * assumir conversa. Quem não implementa não ganha o botão, em vez de ganhar um botão que
+   * estoura no clique. Os hooks devolvem `undefined` para a ação ausente, e é isso que a UI
+   * consulta para decidir se desenha a afordância.
+   */
+  takeover?(conversationId: string): Promise<void>
+  release?(conversationId: string): Promise<void>
+  /** Encerra o atendimento. Despedida, se houver, é decisão do host — o pacote não a inventa. */
+  finalize?(conversationId: string): Promise<void>
+
+  markAllRead?(): Promise<void>
+  listTemplates?(): Promise<ConversationTemplate[]>
+
+  /**
+   * Transcrição completa gerada pelo servidor. Existe ao lado de `buildTranscriptText`, que monta
+   * a partir das mensagens já em memória: a tela costuma ter só a última página carregada, e
+   * exportar dali entregaria um recorte parcial com cara de histórico inteiro. Opcional porque
+   * nem todo backend expõe a rota — quem não tem continua usando o builder local.
+   */
+  exportTranscript?(conversationId: string): Promise<{ transcript: string; filename: string }>
+
+  /**
+   * Transcreve o áudio de uma mensagem e devolve o resultado.
+   *
+   * **Opcional por capacidade.** Um host em modo automático transcreve na ingestão e não expõe rota
+   * nenhuma; um host sem engine configurado não transcreve de jeito algum. Nos dois casos o balão
+   * simplesmente não desenha o botão, em vez de oferecer uma ação que estoura no clique.
+   *
+   * `messageId` e não `conversationId`: transcrição é por áudio, e uma conversa tem vários.
+   */
+  transcribeAudio?(messageId: string): Promise<MessageTranscription>
+}
+
+/**
+ * Superfície mínima de stream que o pacote consome — exatamente o que `useConversationRealtime`
+ * usa: assinar 'message', desassinar e fechar. Deliberadamente estrutural em vez de
+ * `EventSource`: sem servidor HTTP não existe `EventSource`, e é isso que impediria alimentar a
+ * inbox com dados mockados em desenvolvimento. Um `EventSource` nativo satisfaz este tipo, então
+ * quem já implementa `SSEProvider` continua válido sem mudança.
+ */
+export interface ConversationEventSource {
+  addEventListener(type: string, listener: (event: MessageEvent) => void): void
+  removeEventListener(type: string, listener: (event: MessageEvent) => void): void
+  close(): void
 }
 
+/**
+ * Eventos nomeados que o servidor realmente emite (`event: <nome>` no fio). O canal por conversa
+ * é `conv:<whatsappNumber>`; o global só emite `data-changed`, como sinal de "refaça a query".
+ * Tipar `addEventListener` como `string` em vez de `'message'` existe por isto: quem assina
+ * precisa alcançar `message-status` e `mode-changed`, não só `message`.
+ */
+export const CONVERSATION_STREAM_EVENTS = ['message', 'message-status', 'mode-changed'] as const
+export type ConversationStreamEvent = (typeof CONVERSATION_STREAM_EVENTS)[number]
+
+export const GLOBAL_STREAM_EVENTS = ['data-changed'] as const
+export type GlobalStreamEvent = (typeof GLOBAL_STREAM_EVENTS)[number]
+
 export interface SSEProvider {
-  connectConversationStream(conversationId: string): EventSource
-  connectGlobalStream(): EventSource
+  connectConversationStream(conversationId: string): ConversationEventSource
+  connectGlobalStream(): ConversationEventSource
 }
 
 export interface ConversationSummary {
   id: string
+  /**
+   * @deprecated Use `contactId` com `channel`. Mantido obrigatório para não quebrar quem já
+   * consome; some quando o segundo canal entrar em produção.
+   */
   whatsappNumber: string
+  /** Identificador neutro do contato. Ausente = usa `whatsappNumber`. */
+  contactId?: string
+  /** Ausente = `whatsapp`, o comportamento de antes desta mudança. */
+  channel?: ConversationChannel
   clientName?: string
   lastContent?: string
   lastDirection?: 'inbound' | 'outbound'
@@ -42,6 +198,13 @@ export interface ConversationSummary {
   waitingHuman: boolean
   unread: number
   currentState: string
+  /**
+   * Atributos que só o produto conhece e desenha (tipo de financiamento, carteira, campanha). É a
+   * contraparte de leitura do `filters` de `ListConversationsParams`: o pacote transporta e nunca
+   * interpreta. Sem isto, exibir um selo próprio na linha exigiria o host manter uma segunda
+   * consulta paralela à mesma listagem — a implementação duplicada que o pacote existe para evitar.
+   */
+  attributes?: Record<string, string | undefined>
 }
 
 export interface ConversationDocument {

package/src/quickReply.test.ts

@@ -0,0 +1,58 @@
+/**
+ * Guarda a interpolação das mensagens rápidas.
+ *
+ * O caso que decide o desenho: variável ausente. Deixar `{{nome}}` no texto significa o atendente
+ * mandar "Olá {{nome}}!" para o cliente — pior que a saudação sem nome.
+ */
+
+import { describe, expect, it } from 'bun:test'
+
+import { applyQuickReplyVariables, resolveQuickReply } from './MessageComposer'
+
+describe('applyQuickReplyVariables', () => {
+  it('troca a variável pelo valor', () => {
+    expect(applyQuickReplyVariables('Olá {{nome}}!', { nome: 'Marina' })).toBe('Olá Marina!')
+  })
+
+  it('aceita espaço dentro das chaves', () => {
+    expect(applyQuickReplyVariables('Olá {{ nome }}!', { nome: 'Rita' })).toBe('Olá Rita!')
+  })
+
+  it('troca todas as ocorrências', () => {
+    expect(applyQuickReplyVariables('{{nome}}, confirma? Obrigado, {{nome}}.', { nome: 'Ana' })).toBe(
+      'Ana, confirma? Obrigado, Ana.',
+    )
+  })
+
+  // Nunca vaza o literal para o cliente.
+  it('apaga a variável que não foi passada', () => {
+    expect(applyQuickReplyVariables('Olá {{nome}}!', {})).toBe('Olá !')
+    expect(applyQuickReplyVariables('Olá {{nome}}!')).toBe('Olá !')
+  })
+
+  it('não mexe em texto sem variável', () => {
+    expect(applyQuickReplyVariables('Bom dia!', { nome: 'X' })).toBe('Bom dia!')
+  })
+})
+
+describe('resolveQuickReply', () => {
+  it('interpola quando o texto é string', () => {
+    const resolvido = resolveQuickReply({ key: 'g', label: '👋', text: 'Olá {{nome}}!' }, { nome: 'Rita' })
+
+    expect(resolvido).toBe('Olá Rita!')
+  })
+
+  // A função existe para o que a string não resolve: escolher copy por produto, pluralizar, formatar.
+  it('chama a função com as variáveis', () => {
+    const resolvido = resolveQuickReply(
+      { key: 's', label: '📋', text: (variables) => `Status de ${variables['produto'] ?? 'seu pedido'}` },
+      { produto: 'financiamento' },
+    )
+
+    expect(resolvido).toBe('Status de financiamento')
+  })
+
+  it('função sem variáveis não quebra', () => {
+    expect(resolveQuickReply({ key: 'c', label: '📞', text: () => 'Posso ligar?' })).toBe('Posso ligar?')
+  })
+})

package/src/settings/TranscriptionSettingsForm.test.tsx

@@ -0,0 +1,81 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { TranscriptionSettingsForm } from './TranscriptionSettingsForm'
+import type { TranscriptionSettingsFormProps } from './TranscriptionSettingsForm'
+
+/**
+ * Extrai uma tag pelo atributo, em vez de casar regex com a ordem dos atributos: o React SSR emite
+ * `checked=""` antes de `value=""`, então `/value="auto"[^>]*checked/` falha num componente correto.
+ */
+function findTag(markup: string, tagPattern: RegExp, contains: string): string | undefined {
+  return (markup.match(tagPattern) ?? []).find((tag) => tag.includes(contains))
+}
+
+function render(overrides: Partial<TranscriptionSettingsFormProps> = {}): string {
+  return renderToStaticMarkup(
+    <TranscriptionSettingsForm
+      enabled={false}
+      onEnabledChange={() => {}}
+      mode="onDemand"
+      onModeChange={() => {}}
+      onSave={() => {}}
+      {...overrides}
+    />,
+  )
+}
+
+describe('TranscriptionSettingsForm', () => {
+  it('esconde a escolha de modo enquanto estiver desligado', () => {
+    const markup = render({ enabled: false })
+
+    expect(markup).not.toContain('Quando transcrever')
+  })
+
+  it('mostra as duas opções de modo ao ligar', () => {
+    const markup = render({ enabled: true })
+
+    expect(markup).toContain('Quando transcrever')
+    expect(markup).toContain('Quando o atendente pedir')
+    expect(markup).toContain('Automaticamente')
+  })
+
+  it('marca o modo atual', () => {
+    const markup = render({ enabled: true, mode: 'auto' })
+    const radios = /<input type="radio"[^>]*>/g
+
+    expect(findTag(markup, radios, 'value="auto"')).toContain('checked')
+    expect(findTag(markup, radios, 'value="onDemand"')).not.toContain('checked')
+  })
+
+  /**
+   * "O ambiente consegue" é diferente de "esta empresa quer". Sem o aviso, o lojista ligaria o
+   * interruptor num ambiente sem engine, nada apareceria, e nada explicaria por quê.
+   */
+  it('avisa e bloqueia quando a capacidade não existe no servidor', () => {
+    const markup = render({ isAvailable: false })
+
+    expect(markup).toContain('não está disponível neste ambiente')
+    expect(findTag(markup, /<input type="checkbox"[^>]*>/g, 'type="checkbox"')).toContain('disabled')
+  })
+
+  it('não avisa nada quando a capacidade existe', () => {
+    const markup = render({ isAvailable: true })
+
+    expect(markup).not.toContain('não está disponível neste ambiente')
+  })
+
+  it('aceita rótulos do host', () => {
+    const markup = render({ labels: { sectionTitle: 'Áudio em texto' } })
+
+    expect(markup).toContain('Áudio em texto')
+    expect(markup).not.toContain('Transcrição de áudio')
+  })
+
+  it('desabilita o salvar enquanto salva', () => {
+    const markup = render({ saving: true })
+
+    expect(markup).toContain('Salvando...')
+    expect(findTag(markup, /<button type="submit"[^>]*>/g, 'type="submit"')).toContain('disabled')
+  })
+})