@opensaas/stack-ui 0.1.7 → 0.3.0

package/tests/components/DeleteButton.test.tsx

@@ -0,0 +1,331 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { DeleteButton } from '../../src/components/standalone/DeleteButton.js'
+
+describe('DeleteButton', () => {
+  const mockOnDelete = vi.fn()
+
+  beforeEach(() => {
+    mockOnDelete.mockClear()
+  })
+
+  describe('rendering', () => {
+    it('should render delete button', () => {
+      render(<DeleteButton onDelete={mockOnDelete} />)
+
+      expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument()
+    })
+
+    it('should use custom button label', () => {
+      render(<DeleteButton onDelete={mockOnDelete} buttonLabel="Remove" />)
+
+      expect(screen.getByRole('button', { name: 'Remove' })).toBeInTheDocument()
+    })
+
+    it('should apply custom className', () => {
+      render(<DeleteButton onDelete={mockOnDelete} className="custom-class" />)
+
+      const button = screen.getByRole('button', { name: /delete/i })
+      expect(button).toHaveClass('custom-class')
+    })
+
+    it('should be disabled when disabled prop is true', () => {
+      render(<DeleteButton onDelete={mockOnDelete} disabled />)
+
+      const button = screen.getByRole('button', { name: /delete/i })
+      expect(button).toBeDisabled()
+    })
+
+    it('should not show confirmation dialog initially', () => {
+      render(<DeleteButton onDelete={mockOnDelete} itemName="post" />)
+
+      expect(screen.queryByText(/delete post/i)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('confirmation dialog', () => {
+    it('should show confirmation dialog when button clicked', async () => {
+      const user = userEvent.setup()
+      render(<DeleteButton onDelete={mockOnDelete} itemName="post" />)
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i })
+      await user.click(deleteButton)
+
+      expect(screen.getByText(/delete post/i)).toBeInTheDocument()
+    })
+
+    it('should show default confirmation message', async () => {
+      const user = userEvent.setup()
+      render(<DeleteButton onDelete={mockOnDelete} itemName="post" />)
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i })
+      await user.click(deleteButton)
+
+      expect(screen.getByText(/are you sure you want to delete this post/i)).toBeInTheDocument()
+    })
+
+    it('should show custom confirmation title', async () => {
+      const user = userEvent.setup()
+      render(
+        <DeleteButton onDelete={mockOnDelete} confirmTitle="Confirm Deletion" itemName="post" />,
+      )
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i })
+      await user.click(deleteButton)
+
+      expect(screen.getByText('Confirm Deletion')).toBeInTheDocument()
+    })
+
+    it('should show custom confirmation message', async () => {
+      const user = userEvent.setup()
+      render(
+        <DeleteButton
+          onDelete={mockOnDelete}
+          confirmMessage="This will permanently delete the post."
+        />,
+      )
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i })
+      await user.click(deleteButton)
+
+      expect(screen.getByText('This will permanently delete the post.')).toBeInTheDocument()
+    })
+
+    it('should show custom confirm label', async () => {
+      const user = userEvent.setup()
+      render(<DeleteButton onDelete={mockOnDelete} confirmLabel="Yes, delete it" />)
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i })
+      await user.click(deleteButton)
+
+      expect(screen.getByRole('button', { name: 'Yes, delete it' })).toBeInTheDocument()
+    })
+
+    it('should show custom cancel label', async () => {
+      const user = userEvent.setup()
+      render(<DeleteButton onDelete={mockOnDelete} cancelLabel="No, keep it" />)
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i })
+      await user.click(deleteButton)
+
+      expect(screen.getByRole('button', { name: 'No, keep it' })).toBeInTheDocument()
+    })
+
+    it('should close dialog when cancel button clicked', async () => {
+      const user = userEvent.setup()
+      render(<DeleteButton onDelete={mockOnDelete} itemName="post" />)
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i })
+      await user.click(deleteButton)
+
+      const cancelButton = screen.getByRole('button', { name: /cancel/i })
+      await user.click(cancelButton)
+
+      await waitFor(() => {
+        expect(screen.queryByText(/delete post/i)).not.toBeInTheDocument()
+      })
+    })
+
+    it('should not call onDelete when cancel button clicked', async () => {
+      const user = userEvent.setup()
+      render(<DeleteButton onDelete={mockOnDelete} />)
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i })
+      await user.click(deleteButton)
+
+      const cancelButton = screen.getByRole('button', { name: /cancel/i })
+      await user.click(cancelButton)
+
+      expect(mockOnDelete).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('delete functionality', () => {
+    it('should call onDelete when confirmed', async () => {
+      mockOnDelete.mockResolvedValue({ success: true })
+      const user = userEvent.setup()
+
+      render(<DeleteButton onDelete={mockOnDelete} />)
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i })
+      await user.click(deleteButton)
+
+      const confirmButton = screen.getByRole('button', { name: /^delete$/i })
+      await user.click(confirmButton)
+
+      await waitFor(() => {
+        expect(mockOnDelete).toHaveBeenCalled()
+      })
+    })
+
+    it('should close dialog when delete confirmed', async () => {
+      mockOnDelete.mockResolvedValue({ success: true })
+      const user = userEvent.setup()
+
+      render(<DeleteButton onDelete={mockOnDelete} itemName="post" />)
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i })
+      await user.click(deleteButton)
+
+      const confirmButton = screen.getByRole('button', { name: /^delete$/i })
+      await user.click(confirmButton)
+
+      await waitFor(() => {
+        expect(screen.queryByText(/delete post/i)).not.toBeInTheDocument()
+      })
+    })
+
+    it('should show loading state during delete', async () => {
+      let resolveDelete: (value: { success: boolean }) => void
+      const deletePromise = new Promise<{ success: boolean }>((resolve) => {
+        resolveDelete = resolve
+      })
+      mockOnDelete.mockReturnValue(deletePromise)
+
+      const user = userEvent.setup()
+      render(<DeleteButton onDelete={mockOnDelete} />)
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i })
+      await user.click(deleteButton)
+
+      const confirmButton = screen.getByRole('button', { name: /^delete$/i })
+      await user.click(confirmButton)
+
+      await waitFor(() => {
+        const button = screen.getByRole('button', { name: /delete/i })
+        expect(button).toBeDisabled()
+      })
+
+      resolveDelete!({ success: true })
+    })
+
+    it('should disable button during delete', async () => {
+      let resolveDelete: (value: { success: boolean }) => void
+      const deletePromise = new Promise<{ success: boolean }>((resolve) => {
+        resolveDelete = resolve
+      })
+      mockOnDelete.mockReturnValue(deletePromise)
+
+      const user = userEvent.setup()
+      render(<DeleteButton onDelete={mockOnDelete} />)
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i })
+      await user.click(deleteButton)
+
+      const confirmButton = screen.getByRole('button', { name: /^delete$/i })
+      await user.click(confirmButton)
+
+      await waitFor(() => {
+        const button = screen.getByRole('button', { name: /delete/i })
+        expect(button).toBeDisabled()
+      })
+
+      resolveDelete!({ success: true })
+
+      await waitFor(() => {
+        const button = screen.getByRole('button', { name: /delete/i })
+        expect(button).not.toBeDisabled()
+      })
+    })
+  })
+
+  describe('error handling', () => {
+    it('should show error when delete fails with error message', async () => {
+      mockOnDelete.mockResolvedValue({ success: false, error: 'Database error' })
+      const user = userEvent.setup()
+
+      render(<DeleteButton onDelete={mockOnDelete} />)
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i })
+      await user.click(deleteButton)
+
+      const confirmButton = screen.getByRole('button', { name: /^delete$/i })
+      await user.click(confirmButton)
+
+      await waitFor(() => {
+        expect(screen.getByText('Database error')).toBeInTheDocument()
+      })
+    })
+
+    it('should show default error when delete fails without error message', async () => {
+      mockOnDelete.mockResolvedValue({ success: false })
+      const user = userEvent.setup()
+
+      render(<DeleteButton onDelete={mockOnDelete} itemName="post" />)
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i })
+      await user.click(deleteButton)
+
+      const confirmButton = screen.getByRole('button', { name: /^delete$/i })
+      await user.click(confirmButton)
+
+      await waitFor(() => {
+        expect(screen.getByText('Failed to delete post')).toBeInTheDocument()
+      })
+    })
+
+    it('should show error when delete throws exception', async () => {
+      mockOnDelete.mockRejectedValue(new Error('Network error'))
+      const user = userEvent.setup()
+
+      render(<DeleteButton onDelete={mockOnDelete} />)
+
+      const deleteButton = screen.getByRole('button', { name: /delete/i })
+      await user.click(deleteButton)
+
+      const confirmButton = screen.getByRole('button', { name: /^delete$/i })
+      await user.click(confirmButton)
+
+      await waitFor(() => {
+        expect(screen.getByText('Network error')).toBeInTheDocument()
+      })
+    })
+
+    it('should clear previous error on new delete attempt', async () => {
+      mockOnDelete
+        .mockResolvedValueOnce({ success: false, error: 'First error' })
+        .mockResolvedValueOnce({ success: true })
+
+      const user = userEvent.setup()
+      render(<DeleteButton onDelete={mockOnDelete} />)
+
+      // First attempt - fails
+      const deleteButton = screen.getByRole('button', { name: /delete/i })
+      await user.click(deleteButton)
+
+      const confirmButton1 = screen.getByRole('button', { name: /^delete$/i })
+      await user.click(confirmButton1)
+
+      await waitFor(() => {
+        expect(screen.getByText('First error')).toBeInTheDocument()
+      })
+
+      // Second attempt - succeeds
+      await user.click(deleteButton)
+
+      const confirmButton2 = screen.getByRole('button', { name: /^delete$/i })
+      await user.click(confirmButton2)
+
+      await waitFor(() => {
+        expect(screen.queryByText('First error')).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('button variants and sizes', () => {
+    it('should apply custom button variant', () => {
+      render(<DeleteButton onDelete={mockOnDelete} buttonVariant="outline" />)
+
+      const button = screen.getByRole('button', { name: /delete/i })
+      expect(button).toBeInTheDocument()
+    })
+
+    it('should apply custom size', () => {
+      render(<DeleteButton onDelete={mockOnDelete} size="sm" />)
+
+      const button = screen.getByRole('button', { name: /delete/i })
+      expect(button).toBeInTheDocument()
+    })
+  })
+})

package/tests/components/IntegerField.test.tsx

@@ -0,0 +1,147 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { IntegerField } from '../../src/components/fields/IntegerField.js'
+
+describe('IntegerField', () => {
+  describe('edit mode', () => {
+    it('should render number input with label', () => {
+      render(<IntegerField name="age" value={null} onChange={vi.fn()} label="Age" />)
+
+      expect(screen.getByLabelText('Age')).toBeInTheDocument()
+      expect(screen.getByRole('spinbutton')).toBeInTheDocument()
+    })
+
+    it('should display current numeric value', () => {
+      render(<IntegerField name="age" value={25} onChange={vi.fn()} label="Age" />)
+
+      const input = screen.getByRole('spinbutton')
+      expect(input).toHaveValue(25)
+    })
+
+    it('should display empty string for null value', () => {
+      render(<IntegerField name="age" value={null} onChange={vi.fn()} label="Age" />)
+
+      const input = screen.getByRole('spinbutton')
+      expect(input).toHaveValue(null)
+    })
+
+    it('should call onChange with parsed integer', async () => {
+      const onChange = vi.fn()
+      const user = userEvent.setup()
+
+      render(<IntegerField name="age" value={null} onChange={onChange} label="Age" />)
+
+      const input = screen.getByRole('spinbutton')
+      await user.type(input, '5')
+
+      expect(onChange).toHaveBeenCalled()
+      // Verify it's called with a number, not a string
+      expect(onChange).toHaveBeenCalledWith(5)
+    })
+
+    it('should call onChange with null when input is cleared', async () => {
+      const onChange = vi.fn()
+      const user = userEvent.setup()
+
+      render(<IntegerField name="age" value={25} onChange={onChange} label="Age" />)
+
+      const input = screen.getByRole('spinbutton')
+      await user.clear(input)
+
+      expect(onChange).toHaveBeenCalledWith(null)
+    })
+
+    it('should show required indicator when required', () => {
+      render(<IntegerField name="age" value={null} onChange={vi.fn()} label="Age" required />)
+
+      expect(screen.getByText('*')).toBeInTheDocument()
+    })
+
+    it('should display error message', () => {
+      render(
+        <IntegerField
+          name="age"
+          value={null}
+          onChange={vi.fn()}
+          label="Age"
+          error="Age must be a positive number"
+        />,
+      )
+
+      expect(screen.getByText('Age must be a positive number')).toBeInTheDocument()
+    })
+
+    it('should be disabled when disabled prop is true', () => {
+      render(<IntegerField name="age" value={null} onChange={vi.fn()} label="Age" disabled />)
+
+      const input = screen.getByRole('spinbutton')
+      expect(input).toBeDisabled()
+    })
+
+    it('should show placeholder text', () => {
+      render(
+        <IntegerField
+          name="age"
+          value={null}
+          onChange={vi.fn()}
+          label="Age"
+          placeholder="Enter your age"
+        />,
+      )
+
+      expect(screen.getByPlaceholderText('Enter your age')).toBeInTheDocument()
+    })
+
+    it('should set min attribute', () => {
+      render(<IntegerField name="age" value={null} onChange={vi.fn()} label="Age" min={0} />)
+
+      const input = screen.getByRole('spinbutton')
+      expect(input).toHaveAttribute('min', '0')
+    })
+
+    it('should set max attribute', () => {
+      render(<IntegerField name="age" value={null} onChange={vi.fn()} label="Age" max={100} />)
+
+      const input = screen.getByRole('spinbutton')
+      expect(input).toHaveAttribute('max', '100')
+    })
+
+    it('should handle negative numbers', async () => {
+      const onChange = vi.fn()
+      const user = userEvent.setup()
+
+      render(
+        <IntegerField name="temperature" value={null} onChange={onChange} label="Temperature" />,
+      )
+
+      const input = screen.getByRole('spinbutton')
+      await user.type(input, '-5')
+
+      expect(onChange).toHaveBeenCalledWith(-5)
+    })
+  })
+
+  describe('read mode', () => {
+    it('should render value as text', () => {
+      render(<IntegerField name="age" value={25} onChange={vi.fn()} label="Age" mode="read" />)
+
+      expect(screen.getByText('Age')).toBeInTheDocument()
+      expect(screen.getByText('25')).toBeInTheDocument()
+      expect(screen.queryByRole('spinbutton')).not.toBeInTheDocument()
+    })
+
+    it('should show dash when value is null', () => {
+      render(<IntegerField name="age" value={null} onChange={vi.fn()} label="Age" mode="read" />)
+
+      expect(screen.getByText('-')).toBeInTheDocument()
+    })
+
+    it('should display zero correctly', () => {
+      render(<IntegerField name="count" value={0} onChange={vi.fn()} label="Count" mode="read" />)
+
+      expect(screen.getByText('0')).toBeInTheDocument()
+      expect(screen.queryByText('-')).not.toBeInTheDocument()
+    })
+  })
+})