talentyar-admin/src/features/users/components/users-delete-dialog.test.tsx

import { useState } from 'react'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { render } from 'vitest-browser-react'
import { userEvent } from 'vitest/browser'
import { showSubmittedData } from '@/lib/show-submitted-data'
import { type User } from '../data/schema'
import { UsersDeleteDialog } from './users-delete-dialog'

vi.mock('@/lib/show-submitted-data', () => ({ showSubmittedData: vi.fn() }))

const MOCK_USER: User = {
  id: 'user-delete-test',
  firstName: 'John',
  lastName: 'Doe',
  username: 'john_doe',
  email: 'johndoe@shadcn-admin.com',
  phoneNumber: '+959123456789',
  status: 'active',
  role: 'manager',
  createdAt: new Date('2026-01-01'),
  updatedAt: new Date('2026-02-02'),
}

describe('UsersDeleteDialog', () => {
  beforeEach(() => vi.clearAllMocks())

  it('renders the dialog with the correct title, description, input and buttons', async () => {
    const { getByText, getByRole } = await render(
      <UsersDeleteDialog open onOpenChange={vi.fn()} currentRow={MOCK_USER} />
    )

    const title = getByRole('heading', {
      level: 2,
      name: /Delete User/i,
    })
    const desc = getByText(
      new RegExp(`Are you sure you want to delete ${MOCK_USER.username}?`, 'i')
    )
    const usernameInput = getByRole('textbox', { name: /Username/i })
    const cancelButton = getByRole('button', { name: /Cancel/i })
    const deleteButton = getByRole('button', { name: /Delete/i })

    expect(title).toBeInTheDocument()
    expect(desc).toBeInTheDocument()
    expect(usernameInput).toBeInTheDocument()
    expect(cancelButton).toBeInTheDocument()
    expect(deleteButton).toBeInTheDocument()
    expect(deleteButton).toBeDisabled()
  })

  it('keeps the delete button disabled until the username input is filled correctly', async () => {
    const { getByRole } = await render(
      <UsersDeleteDialog open onOpenChange={vi.fn()} currentRow={MOCK_USER} />
    )

    const usernameInput = getByRole('textbox', { name: /Username/i })
    const deleteButton = getByRole('button', { name: /Delete/i })

    expect(deleteButton).toBeDisabled()

    await userEvent.fill(usernameInput, 'wrong-username')
    expect(deleteButton).toBeDisabled()

    await userEvent.fill(usernameInput, MOCK_USER.username)
    expect(deleteButton).toBeEnabled()
  })

  it('closes the dialog when the cancel button is clicked', async () => {
    const onOpenChange = vi.fn()
    const { getByRole } = await render(
      <UsersDeleteDialog
        open
        onOpenChange={onOpenChange}
        currentRow={MOCK_USER}
      />
    )

    const cancelButton = getByRole('button', { name: /Cancel/i })
    await userEvent.click(cancelButton)

    expect(onOpenChange).toHaveBeenCalledOnce()
    expect(onOpenChange).toHaveBeenCalledWith(false)
  })

  it('resets the username input when the dialog is closed and reopened', async () => {
    function Harness() {
      const [open, setOpen] = useState(true)
      return (
        <>
          <button type='button' onClick={() => setOpen(true)}>
            Reopen
          </button>
          {open ? (
            <UsersDeleteDialog
              open={open}
              onOpenChange={setOpen}
              currentRow={MOCK_USER}
            />
          ) : null}
        </>
      )
    }

    const { getByRole } = await render(<Harness />)

    const usernameInput = getByRole('textbox', { name: /Username/i })
    await userEvent.fill(usernameInput, MOCK_USER.username)
    expect(usernameInput).toHaveValue(MOCK_USER.username)

    const closeButton = getByRole('button', { name: /Cancel/i })
    await userEvent.click(closeButton)

    const reopenButton = getByRole('button', { name: /Reopen/i })
    await userEvent.click(reopenButton)
    expect(usernameInput).toHaveValue('')
  })

  it('shows the submitted data when deleted successfully', async () => {
    const onOpenChange = vi.fn()
    const { getByRole } = await render(
      <UsersDeleteDialog
        open
        onOpenChange={onOpenChange}
        currentRow={MOCK_USER}
      />
    )

    const usernameInput = getByRole('textbox', { name: /Username/i })
    const deleteButton = getByRole('button', { name: /Delete/i })

    expect(deleteButton).toBeDisabled()

    await userEvent.fill(usernameInput, MOCK_USER.username)

    expect(deleteButton).toBeEnabled()

    await userEvent.click(deleteButton)

    expect(onOpenChange).toHaveBeenCalledOnce()
    expect(onOpenChange).toHaveBeenCalledWith(false)

    expect(showSubmittedData).toHaveBeenCalledOnce()
    expect(showSubmittedData).toHaveBeenCalledWith(
      MOCK_USER,
      'The following user has been deleted:'
    )
  })

  it('deletes successfully when press Enter key on the username input', async () => {
    const onOpenChange = vi.fn()
    const { getByRole } = await render(
      <UsersDeleteDialog
        open
        onOpenChange={onOpenChange}
        currentRow={MOCK_USER}
      />
    )

    const usernameInput = getByRole('textbox', { name: /Username/i })
    const deleteButton = getByRole('button', { name: /Delete/i })

    expect(deleteButton).toBeDisabled()

    await userEvent.fill(usernameInput, MOCK_USER.username)
    expect(deleteButton).toBeEnabled()

    await userEvent.keyboard('{Enter}')

    expect(onOpenChange).toHaveBeenCalledOnce()
    expect(onOpenChange).toHaveBeenCalledWith(false)

    expect(showSubmittedData).toHaveBeenCalledOnce()
    expect(showSubmittedData).toHaveBeenCalledWith(
      MOCK_USER,
      'The following user has been deleted:'
    )
  })
})