supabase/apps/studio/components/interfaces/Account/TOTPFactors/GenerateRecoveryCodesModal.test.tsx

import { AuthError } from '@supabase/auth-js'
import { fireEvent, screen, waitFor } from '@testing-library/react'
import { describe, expect, test, vi } from 'vitest'

import { GenerateRecoveryCodesModal } from './GenerateRecoveryCodesModal'
import { formatRecoveryCode } from './RecoveryCodesModal.utils'
import { auth } from '@/lib/gotrue'
import { customRender } from '@/tests/lib/custom-render'

const { mockCopyToClipboard } = vi.hoisted(() => ({
  mockCopyToClipboard: vi.fn((_value: string, callback: () => void) => {
    return callback()
  }),
}))
vi.mock('ui', async (importOriginal) => ({
  ...(await importOriginal<typeof import('ui')>()),
  copyToClipboard: mockCopyToClipboard,
}))

const codes = [
  'wto24t5xbeulvjmi',
  'ade6in2sufndbbwd',
  'oge3npsrhrr66k25',
  'pxbkfvxlbi6ggvnf',
  'kc3oaioqdjn4htc3',
  '363gseoknplambiy',
  '3urgae2p2jegem4m',
  'tbxog2guayp6uvud',
  'rpcvcf4owbclxrfp',
  'kyyfsp3eqjydj53t',
]

describe('GenerateRecoveryCodesModal', () => {
  test('generate the recovery codes and allow users to copy them', async () => {
    vi.spyOn(auth.mfa.recoveryCodes, 'generate').mockResolvedValue({
      data: {
        id: 'some_id',
        total: 10,
        codes,
        type: 'recovery_code',
      },
      error: null,
    })
    customRender(<GenerateRecoveryCodesModal />)
    fireEvent.click(await screen.findByRole('button', { name: 'Generate recovery codes' }))

    // Codes are generated
    await screen.findByText('Save your recovery codes')
    await screen.findByText('WTO2-4T5X-BEUL-VJMI')
    await screen.findByText('KYYF-SP3E-QJYD-J53T')

    // Users have to copy the codes to close the modal, next click should fail if they managed to close it
    expect(await screen.findAllByRole('button', { name: 'Close' })).toHaveLength(1)
    fireEvent.click(await screen.findByRole('button', { name: 'Close' }))
    fireEvent.click(await screen.findByRole('button', { name: 'Copy to clipboard' }))
    await waitFor(() =>
      expect(screen.getByRole('checkbox', { name: 'I have copied the codes' })).toBeChecked()
    )
    expect(mockCopyToClipboard).toHaveBeenCalledWith(
      codes.map((code) => formatRecoveryCode(code)).join('\n'),
      expect.any(Function)
    )

    // We should have 2 close buttons (header icon and a standard button)
    expect(await screen.findAllByRole('button', { name: 'Close' })).toHaveLength(2)
    fireEvent.click((await screen.findAllByRole('button', { name: 'Close' })).at(1)!)
    await waitFor(() => expect(screen.queryByText('Save your recovery codes')).toBeNull())
  })

  test('allow users to retry in case of error', async () => {
    vi.spyOn(auth.mfa.recoveryCodes, 'generate')
      .mockRejectedValueOnce({
        data: null,
        error: new AuthError('boom'),
      })
      .mockResolvedValue({
        data: {
          id: 'some_id',
          total: 10,
          codes,
          type: 'recovery_code',
        },
        error: null,
      })
    customRender(<GenerateRecoveryCodesModal />)
    fireEvent.click(await screen.findByRole('button', { name: 'Generate recovery codes' }))
    await screen.findByText(
      "We couldn't generate your recovery code. Please try again later or contact support if the problem persists."
    )

    // We should have 2 close buttons (header icon and a standard button)
    expect(await screen.findAllByRole('button', { name: 'Close' })).toHaveLength(2)
    fireEvent.click((await screen.findAllByRole('button', { name: 'Close' })).at(1)!)
    await waitFor(() => expect(screen.queryByText('Save your recovery codes')).toBeNull())

    // Retry
    fireEvent.click(await screen.findByRole('button', { name: 'Generate recovery codes' }))
    // Codes are generated
    await screen.findByText('Save your recovery codes')
    await screen.findByText('WTO2-4T5X-BEUL-VJMI')
    await screen.findByText('KYYF-SP3E-QJYD-J53T')
  })
})