test: add tests for users delete dialog

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

@@ -0,0 +1,178 @@
+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:'
+    )
+  })
+})