@holdyapp/sdk 1.6.0 → 1.9.0

package/src/changes.dom.test.ts

@@ -0,0 +1,221 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { changeArm } from './arm'
+import { installProductChanges, resolvePreviewId, type ProductChange, type ProductChangesHandle } from './changes'
+
+const ID = '11111111-1111-4111-8111-111111111111'
+const OTHER = '22222222-2222-4222-8222-222222222222'
+
+const change = (over: Partial<ProductChange> = {}): ProductChange => ({
+  id: ID,
+  kind: 'guidance',
+  path: '/setup',
+  anchor: { kind: 'page' },
+  expected_text: null,
+  content: { text: 'Conecte a fonte antes de seguir.' },
+  holdout_pct: 50,
+  ...over,
+})
+
+function accountIn(arm: 'change' | 'holdout', id = ID): string {
+  for (let i = 0; i < 500; i += 1) if (changeArm(id, `conta-${i}`, 50) === arm) return `conta-${i}`
+  throw new Error('sem conta no grupo')
+}
+
+let shadows: ShadowRoot[] = []
+let handle: ProductChangesHandle | null = null
+let requested: string[] = []
+const track = vi.fn()
+
+function serve(changes: ProductChange[]): void {
+  requested = []
+  vi.stubGlobal(
+    'fetch',
+    vi.fn(async (url: string) => {
+      requested.push(String(url))
+      return { ok: true, json: async () => ({ changes, done: [] }) }
+    }),
+  )
+}
+
+async function install(account: string | null): Promise<void> {
+  handle = installProductChanges({ baseUrl: 'https://api.test/api/v1', apiKey: 'k', getAccountKey: () => account, track })
+  await vi.advanceTimersByTimeAsync(400)
+}
+
+const card = (): Element | null => shadows.flatMap((root) => [...root.querySelectorAll('.tip')])[0] ?? null
+const tracked = (name: string) => track.mock.calls.filter((call) => call[0] === name)
+
+beforeEach(() => {
+  vi.useFakeTimers()
+  shadows = []
+  track.mockClear()
+  const attach = Element.prototype.attachShadow
+  vi.spyOn(Element.prototype, 'attachShadow').mockImplementation(function (this: Element, init: ShadowRootInit) {
+    const root = attach.call(this, { ...init, mode: 'open' })
+    shadows.push(root)
+    return root
+  })
+  window.localStorage.clear()
+  window.sessionStorage.clear()
+  window.history.replaceState(null, '', '/setup')
+  document.body.innerHTML = '<main><h1>Setup</h1><button data-testid="save">Salvar</button></main>'
+})
+
+afterEach(() => {
+  handle?.teardown()
+  handle = null
+  vi.restoreAllMocks()
+  vi.unstubAllGlobals()
+  vi.useRealTimers()
+})
+
+describe('a mudança aparece no produto', () => {
+  it('conta do grupo da mudança vê a dica no canto e a exposição sai uma vez', async () => {
+    serve([change()])
+    await install(accountIn('change'))
+    expect(card()?.textContent).toContain('Conecte a fonte antes de seguir.')
+    expect(tracked('$change_exposure')).toEqual([['$change_exposure', { change_id: ID, arm: 'change', kind: 'guidance' }]])
+    handle?.onNavigate()
+    await vi.advanceTimersByTimeAsync(400)
+    expect(tracked('$change_exposure')).toHaveLength(1)
+  })
+
+  it('conta de fora não vê nada, mas a exposição conta no grupo de fora', async () => {
+    serve([change()])
+    await install(accountIn('holdout'))
+    expect(card()).toBeNull()
+    expect(tracked('$change_exposure')[0][1]).toMatchObject({ arm: 'holdout' })
+  })
+
+  it('sem conta identificada nada aparece e nada é medido', async () => {
+    serve([change()])
+    await install(null)
+    expect(card()).toBeNull()
+    expect(track).not.toHaveBeenCalled()
+  })
+
+  it('fora da página do molde a dica não aparece', async () => {
+    window.history.replaceState(null, '', '/billing')
+    serve([change()])
+    await install(accountIn('change'))
+    expect(card()).toBeNull()
+    expect(track).not.toHaveBeenCalled()
+  })
+
+  it('dica ancorada em elemento só aparece quando o elemento existe', async () => {
+    serve([change({ anchor: { kind: 'selector', value: '[data-testid="invite"]' } })])
+    await install(accountIn('change'))
+    expect(card()).toBeNull()
+    expect(track).not.toHaveBeenCalled()
+    document.body.insertAdjacentHTML('beforeend', '<button data-testid="invite">Convidar</button>')
+    await vi.advanceTimersByTimeAsync(400)
+    expect(card()).not.toBeNull()
+    expect(tracked('$change_exposure')).toHaveLength(1)
+  })
+
+  it('troca de texto troca só o texto esperado e devolve o original ao desligar', async () => {
+    serve([change({ kind: 'copy', anchor: { kind: 'selector', value: '[data-testid="save"]' }, expected_text: 'Salvar', content: { text: 'Salvar e continuar' } })])
+    await install(accountIn('change'))
+    const button = document.querySelector('[data-testid="save"]')
+    expect(button?.textContent).toBe('Salvar e continuar')
+    expect(tracked('$change_exposure')).toHaveLength(1)
+    handle?.teardown()
+    handle = null
+    expect(button?.textContent).toBe('Salvar')
+  })
+
+  it('troca de texto não mexe quando o texto atual já é outro', async () => {
+    document.querySelector('[data-testid="save"]')!.textContent = 'Gravar'
+    serve([change({ kind: 'copy', anchor: { kind: 'selector', value: '[data-testid="save"]' }, expected_text: 'Salvar', content: { text: 'Salvar e continuar' } })])
+    await install(accountIn('change'))
+    expect(document.querySelector('[data-testid="save"]')?.textContent).toBe('Gravar')
+    expect(track).not.toHaveBeenCalled()
+  })
+
+  it('fechar a dica registra e ela não volta', async () => {
+    serve([change()])
+    await install(accountIn('change'))
+    ;(card()?.querySelector('button') as HTMLButtonElement).click()
+    expect(tracked('$change_dismissed')).toHaveLength(1)
+    handle?.onNavigate()
+    await vi.advanceTimersByTimeAsync(400)
+    expect(card()).toBeNull()
+  })
+
+  it('pergunta respondida vira $voice ligada ao plano', async () => {
+    serve([change({ kind: 'question', plan_id: 'plano-1', content: { text: 'O que te impediu de continuar?' } })])
+    await install(accountIn('change'))
+    const input = card()?.querySelector('textarea') as HTMLTextAreaElement
+    const send = card()?.querySelector('.send') as HTMLButtonElement
+    expect(send.disabled).toBe(true)
+    input.value = 'Não achei o botão'
+    input.dispatchEvent(new Event('input'))
+    send.click()
+    expect(tracked('$voice')[0][1]).toMatchObject({ text: 'Não achei o botão', action_plan_id: 'plano-1', change_id: ID, path: '/setup' })
+  })
+})
+
+describe('prévia', () => {
+  it('quem abre com holdy_preview vê a mudança mesmo caindo no grupo de fora, e nada é medido', async () => {
+    window.history.replaceState(null, '', `/setup?holdy_preview=${ID}`)
+    serve([change()])
+    await install(accountIn('holdout'))
+    expect(card()?.textContent).toContain('Conecte a fonte antes de seguir.')
+    expect(card()?.querySelector('.preview')?.textContent).toBe('Prévia, só você vê')
+    expect(track).not.toHaveBeenCalled()
+    expect(requested[0]).toContain(`preview=${ID}`)
+  })
+
+  it('prévia aparece sem conta identificada', async () => {
+    window.history.replaceState(null, '', `/setup?holdy_preview=${ID}`)
+    serve([change()])
+    await install(null)
+    expect(card()).not.toBeNull()
+    expect(track).not.toHaveBeenCalled()
+  })
+
+  it('a prévia vale só pra mudança pedida: as outras seguem o sorteio e a medida', async () => {
+    window.history.replaceState(null, '', `/setup?holdy_preview=${ID}`)
+    const account = accountIn('holdout', OTHER)
+    serve([change(), change({ id: OTHER, content: { text: 'Outra dica.' } })])
+    await install(account)
+    expect(tracked('$change_exposure')).toEqual([['$change_exposure', { change_id: OTHER, arm: 'holdout', kind: 'guidance' }]])
+  })
+
+  it('a prévia continua ligada ao navegar na mesma aba e desliga com valor inválido', async () => {
+    window.history.replaceState(null, '', `/?holdy_preview=${ID}`)
+    serve([change()])
+    await install(accountIn('holdout'))
+    expect(card()).toBeNull()
+    window.history.pushState(null, '', '/setup')
+    handle?.onNavigate()
+    await vi.advanceTimersByTimeAsync(400)
+    expect(card()).not.toBeNull()
+    window.history.pushState(null, '', '/setup?holdy_preview=off')
+    handle?.onNavigate()
+    await vi.advanceTimersByTimeAsync(400)
+    expect(card()).toBeNull()
+  })
+
+  it('responder a pergunta na prévia não grava resposta', async () => {
+    window.history.replaceState(null, '', `/setup?holdy_preview=${ID}`)
+    serve([change({ kind: 'question', plan_id: 'plano-1', content: { text: 'O que te impediu de continuar?' } })])
+    await install(accountIn('change'))
+    const input = card()?.querySelector('textarea') as HTMLTextAreaElement
+    input.value = 'teste'
+    input.dispatchEvent(new Event('input'))
+    ;(card()?.querySelector('.send') as HTMLButtonElement).click()
+    expect(track).not.toHaveBeenCalled()
+  })
+})
+
+describe('resolvePreviewId', () => {
+  it('aceita só id no formato, guarda na aba e limpa com qualquer outro valor', () => {
+    const store = window.sessionStorage
+    expect(resolvePreviewId(`?holdy_preview=${ID}`, store)).toBe(ID)
+    expect(resolvePreviewId('', store)).toBe(ID)
+    expect(resolvePreviewId('?holdy_preview=<script>', store)).toBeNull()
+    expect(resolvePreviewId('', store)).toBeNull()
+  })
+})

package/src/changes.test.ts

@@ -25,9 +25,47 @@ describe('changesForPage', () => {
     expect(out[0].change.id).toBe('c1')
     expect(out[0].arm).toBe(changeArm('c1', 'acme', 50))
   })
+
+  it('o checklist acompanha a conta em qualquer página', () => {
+    const list = [checklist(), change({ id: 'c2', path: '/billing' })]
+    const out = changesForPage(list, '/qualquer/pagina', 'acme')
+    expect(out.map((o) => o.change.id)).toEqual(['k1'])
+  })
+})
+
+const checklist = (over: Partial<ProductChange> = {}): ProductChange => ({
+  id: 'k1',
+  kind: 'checklist',
+  path: '/',
+  anchor: { kind: 'page' },
+  expected_text: null,
+  content: {
+    text: 'Primeiros passos',
+    items: [
+      { definition_name: 'Setup completo', label: 'Crie o seu espaço de trabalho', events: ['workspace_created'] },
+      { definition_name: 'Time convidado', label: 'Convide alguém do seu time', events: ['invite_sent'] },
+    ],
+  },
+  holdout_pct: 50,
+  ...over,
 })
 
 describe('parseChanges', () => {
+  it('pergunta só entra com o plano que perguntou, porque a resposta precisa saber a quem pertence', () => {
+    const question = change({ id: 'q1', kind: 'question', content: { text: 'O que te impediu de convidar o time?' } })
+    const body = { changes: [{ ...question, plan_id: 'plan-1' }, question] }
+    const parsed = parseChanges(body)
+    expect(parsed.map((c) => c.id)).toEqual(['q1'])
+    expect(parsed[0].plan_id).toBe('plan-1')
+  })
+
+  it('checklist só entra com itens no formato do contrato', () => {
+    const ok = checklist()
+    const semItens = checklist({ id: 'k2', content: { text: 'Vazio', items: [] } })
+    const itemTorto = checklist({ id: 'k3', content: { text: 'Torto', items: [{ definition_name: 'x', label: 'y' } as never] } })
+    expect(parseChanges({ changes: [ok, semItens, itemTorto] }).map((c) => c.id)).toEqual(['k1'])
+  })
+
   it('descarta o que não tem o formato do contrato', () => {
     const body = {
       changes: [