@startsimpli/ui 0.1.0

package/src/components/unified-table/__tests__/components/ExportButton.test.tsx

@@ -0,0 +1,467 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ExportButton } from '../../components/Toolbar/ExportButton'
+import { ColumnConfig } from '../../types'
+import * as exportUtils from '../../utils/export'
+
+jest.mock('../../utils/export', () => ({
+  exportToCSV: jest.fn(),
+  exportToExcel: jest.fn(),
+  generateExportFilename: jest.fn(() => 'mocked-timestamp'),
+}))
+
+interface TestData {
+  id: string
+  name: string
+  email: string
+}
+
+describe('ExportButton', () => {
+  const mockData: TestData[] = [
+    { id: '1', name: 'John Doe', email: 'john@example.com' },
+    { id: '2', name: 'Jane Smith', email: 'jane@example.com' },
+    { id: '3', name: 'Bob Johnson', email: 'bob@example.com' },
+  ]
+
+  const mockFilteredData: TestData[] = [
+    { id: '1', name: 'John Doe', email: 'john@example.com' },
+    { id: '2', name: 'Jane Smith', email: 'jane@example.com' },
+  ]
+
+  const mockSelectedData: TestData[] = [{ id: '1', name: 'John Doe', email: 'john@example.com' }]
+
+  const mockColumns: ColumnConfig<TestData>[] = [
+    { id: 'id', header: 'ID', accessorKey: 'id' },
+    { id: 'name', header: 'Name', accessorKey: 'name' },
+    { id: 'email', header: 'Email', accessorKey: 'email' },
+  ]
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('Rendering', () => {
+    it('should render export button', () => {
+      render(<ExportButton data={mockData} columns={mockColumns} />)
+
+      expect(screen.getByRole('button', { name: /export/i })).toBeInTheDocument()
+    })
+
+    it('should be disabled when no data', () => {
+      render(<ExportButton data={[]} columns={mockColumns} />)
+
+      expect(screen.getByRole('button', { name: /export/i })).toBeDisabled()
+    })
+
+    it('should be disabled when disabled prop is true', () => {
+      render(<ExportButton data={mockData} columns={mockColumns} disabled={true} />)
+
+      expect(screen.getByRole('button', { name: /export/i })).toBeDisabled()
+    })
+  })
+
+  describe('Dropdown Menu', () => {
+    it('should show dropdown menu when clicked', async () => {
+      const user = userEvent.setup()
+      render(<ExportButton data={mockData} columns={mockColumns} />)
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      await waitFor(() => {
+        expect(screen.getByText('CSV Format')).toBeInTheDocument()
+      })
+      expect(screen.getByText('Excel Format')).toBeInTheDocument()
+    })
+
+    it('should show all export options with correct row counts', async () => {
+      const user = userEvent.setup()
+      render(<ExportButton data={mockData} columns={mockColumns} />)
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      await waitFor(() => {
+        const allOptions = screen.getAllByText(/Export All.*3 rows/i)
+        // Should have 2 options: CSV and Excel
+        expect(allOptions).toHaveLength(2)
+      })
+    })
+
+    it('should show filtered data option when available', async () => {
+      const user = userEvent.setup()
+      render(
+        <ExportButton
+          data={mockData}
+          filteredData={mockFilteredData}
+          columns={mockColumns}
+        />
+      )
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      await waitFor(() => {
+        const filteredOptions = screen.getAllByText(/Export Filtered.*2 rows/i)
+        // Should have 2 options: CSV and Excel
+        expect(filteredOptions).toHaveLength(2)
+      })
+    })
+
+    it('should show selected data option when available', async () => {
+      const user = userEvent.setup()
+      render(
+        <ExportButton
+          data={mockData}
+          selectedData={mockSelectedData}
+          columns={mockColumns}
+        />
+      )
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      await waitFor(() => {
+        const selectedOptions = screen.getAllByText(/Export Selected.*1 row/i)
+        // Should have 2 options: CSV and Excel
+        expect(selectedOptions).toHaveLength(2)
+      })
+    })
+
+    it('should not show filtered option when filtered data equals total data', async () => {
+      const user = userEvent.setup()
+      render(
+        <ExportButton data={mockData} filteredData={mockData} columns={mockColumns} />
+      )
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      await waitFor(() => {
+        expect(screen.getByText('CSV Format')).toBeInTheDocument()
+      })
+
+      const filteredOptions = screen.queryAllByText(/Export Filtered/i)
+      expect(filteredOptions).toHaveLength(0)
+    })
+
+    it('should not show selected option when no data selected', async () => {
+      const user = userEvent.setup()
+      render(<ExportButton data={mockData} selectedData={[]} columns={mockColumns} />)
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      await waitFor(() => {
+        expect(screen.getByText('CSV Format')).toBeInTheDocument()
+      })
+
+      const selectedOptions = screen.queryAllByText(/Export Selected/i)
+      expect(selectedOptions).toHaveLength(0)
+    })
+  })
+
+  describe('CSV Export', () => {
+    it('should export all data to CSV', async () => {
+      const user = userEvent.setup()
+      render(<ExportButton data={mockData} columns={mockColumns} />)
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      const csvAllOptions = await screen.findAllByText(/Export All.*3 rows/i)
+      await user.click(csvAllOptions[0]) // First one is CSV
+
+      await waitFor(() => {
+        expect(exportUtils.exportToCSV).toHaveBeenCalledWith(
+          mockData,
+          mockColumns,
+          expect.stringContaining('export_all')
+        )
+      })
+    })
+
+    it('should export filtered data to CSV', async () => {
+      const user = userEvent.setup()
+      render(
+        <ExportButton
+          data={mockData}
+          filteredData={mockFilteredData}
+          columns={mockColumns}
+        />
+      )
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      const csvFilteredOptions = await screen.findAllByText(/Export Filtered.*2 rows/i)
+      await user.click(csvFilteredOptions[0]) // First one is CSV
+
+      await waitFor(() => {
+        expect(exportUtils.exportToCSV).toHaveBeenCalledWith(
+          mockFilteredData,
+          mockColumns,
+          expect.stringContaining('export_filtered')
+        )
+      })
+    })
+
+    it('should export selected data to CSV', async () => {
+      const user = userEvent.setup()
+      render(
+        <ExportButton
+          data={mockData}
+          selectedData={mockSelectedData}
+          columns={mockColumns}
+        />
+      )
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      const csvSelectedOptions = await screen.findAllByText(/Export Selected.*1 row/i)
+      await user.click(csvSelectedOptions[0]) // First one is CSV
+
+      await waitFor(() => {
+        expect(exportUtils.exportToCSV).toHaveBeenCalledWith(
+          mockSelectedData,
+          mockColumns,
+          expect.stringContaining('export_selected')
+        )
+      })
+    })
+
+    it('should use custom base filename', async () => {
+      const user = userEvent.setup()
+      render(
+        <ExportButton
+          data={mockData}
+          columns={mockColumns}
+          baseFilename="custom-export"
+        />
+      )
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      const csvAllOptions = await screen.findAllByText(/Export All.*3 rows/i)
+      await user.click(csvAllOptions[0]) // First one is CSV
+
+      await waitFor(() => {
+        expect(exportUtils.exportToCSV).toHaveBeenCalledWith(
+          mockData,
+          mockColumns,
+          expect.stringContaining('custom-export')
+        )
+      })
+    })
+  })
+
+  describe('Excel Export', () => {
+    it('should export all data to Excel', async () => {
+      const user = userEvent.setup()
+      render(<ExportButton data={mockData} columns={mockColumns} />)
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      const excelAllOptions = await screen.findAllByText(/Export All.*3 rows/i)
+      await user.click(excelAllOptions[1])
+
+      await waitFor(() => {
+        expect(exportUtils.exportToExcel).toHaveBeenCalledWith(
+          mockData,
+          mockColumns,
+          expect.stringContaining('export_all')
+        )
+      })
+    })
+
+    it('should export filtered data to Excel', async () => {
+      const user = userEvent.setup()
+      render(
+        <ExportButton
+          data={mockData}
+          filteredData={mockFilteredData}
+          columns={mockColumns}
+        />
+      )
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      const excelFilteredOptions = await screen.findAllByText(/Export Filtered.*2 rows/i)
+      await user.click(excelFilteredOptions[1])
+
+      await waitFor(() => {
+        expect(exportUtils.exportToExcel).toHaveBeenCalledWith(
+          mockFilteredData,
+          mockColumns,
+          expect.stringContaining('export_filtered')
+        )
+      })
+    })
+
+    it('should export selected data to Excel', async () => {
+      const user = userEvent.setup()
+      render(
+        <ExportButton
+          data={mockData}
+          selectedData={mockSelectedData}
+          columns={mockColumns}
+        />
+      )
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      const excelSelectedOptions = await screen.findAllByText(/Export Selected.*1 row/i)
+      await user.click(excelSelectedOptions[1])
+
+      await waitFor(() => {
+        expect(exportUtils.exportToExcel).toHaveBeenCalledWith(
+          mockSelectedData,
+          mockColumns,
+          expect.stringContaining('export_selected')
+        )
+      })
+    })
+  })
+
+  describe('Callbacks', () => {
+    it('should call onExportStart callback', async () => {
+      const user = userEvent.setup()
+      const onExportStart = jest.fn()
+      render(
+        <ExportButton
+          data={mockData}
+          columns={mockColumns}
+          onExportStart={onExportStart}
+        />
+      )
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      const csvAllOptions = await screen.findAllByText(/Export All.*3 rows/i)
+      await user.click(csvAllOptions[0]) // First one is CSV
+
+      await waitFor(() => {
+        expect(onExportStart).toHaveBeenCalledWith('csv', 'all')
+      })
+    })
+
+    it('should call onExportComplete callback', async () => {
+      const user = userEvent.setup()
+      const onExportComplete = jest.fn()
+      render(
+        <ExportButton
+          data={mockData}
+          columns={mockColumns}
+          onExportComplete={onExportComplete}
+        />
+      )
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      const csvAllOptions = await screen.findAllByText(/Export All.*3 rows/i)
+      await user.click(csvAllOptions[0]) // First one is CSV
+
+      await waitFor(() => {
+        expect(onExportComplete).toHaveBeenCalledWith('csv', 'all', 3)
+      })
+    })
+
+    it('should call onExportError callback on error', async () => {
+      const user = userEvent.setup()
+      const onExportError = jest.fn()
+      const mockError = new Error('Export failed')
+      ;(exportUtils.exportToCSV as jest.Mock).mockImplementation(() => {
+        throw mockError
+      })
+
+      render(
+        <ExportButton
+          data={mockData}
+          columns={mockColumns}
+          onExportError={onExportError}
+        />
+      )
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      const csvAllOptions = await screen.findAllByText(/Export All.*3 rows/i)
+      await user.click(csvAllOptions[0]) // First one is CSV
+
+      await waitFor(() => {
+        expect(onExportError).toHaveBeenCalledWith(mockError)
+      })
+    })
+  })
+
+  describe('Error Handling', () => {
+    it('should handle export errors gracefully', async () => {
+      const user = userEvent.setup()
+      const consoleError = jest.spyOn(console, 'error').mockImplementation()
+      ;(exportUtils.exportToCSV as jest.Mock).mockImplementation(() => {
+        throw new Error('Export failed')
+      })
+
+      render(<ExportButton data={mockData} columns={mockColumns} />)
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      const csvAllOptions = await screen.findAllByText(/Export All.*3 rows/i)
+      await user.click(csvAllOptions[0]) // First one is CSV
+
+      await waitFor(() => {
+        expect(consoleError).toHaveBeenCalledWith(
+          'Export failed:',
+          expect.any(Error)
+        )
+      })
+
+      consoleError.mockRestore()
+    })
+
+    it('should reset loading state after error', async () => {
+      const user = userEvent.setup()
+      ;(exportUtils.exportToCSV as jest.Mock).mockImplementation(() => {
+        throw new Error('Export failed')
+      })
+
+      render(<ExportButton data={mockData} columns={mockColumns} />)
+
+      const button = screen.getByRole('button', { name: /export/i })
+      await user.click(button)
+
+      const csvAllOptions = await screen.findAllByText(/Export All.*3 rows/i)
+      await user.click(csvAllOptions[0]) // First one is CSV
+
+      await waitFor(() => {
+        expect(screen.queryByText(/exporting/i)).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have proper aria-label', () => {
+      render(<ExportButton data={mockData} columns={mockColumns} />)
+
+      const button = screen.getByRole('button', { name: /export/i })
+      expect(button).toHaveAttribute('aria-label', 'Export data')
+    })
+
+    it('should be keyboard accessible', () => {
+      render(<ExportButton data={mockData} columns={mockColumns} />)
+
+      const button = screen.getByRole('button', { name: /export/i })
+      button.focus()
+
+      expect(button).toHaveFocus()
+    })
+  })
+})

package/src/components/unified-table/__tests__/components/InlineEditCell.test.tsx

@@ -0,0 +1,159 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { InlineEditCell } from '../../components/InlineEditCell'
+
+describe('InlineEditCell', () => {
+  const defaultProps = {
+    value: 'Test Value',
+    columnId: 'test-column',
+    rowId: 'test-row',
+    onSave: jest.fn().mockResolvedValue(undefined),
+    onCancel: jest.fn(),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  describe('text input', () => {
+    it('should render with initial value', () => {
+      render(<InlineEditCell {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveValue('Test Value')
+    })
+
+    it('should focus and select input on mount', () => {
+      render(<InlineEditCell {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      expect(document.activeElement).toBe(input)
+    })
+
+    it('should save on Enter key', async () => {
+      const user = userEvent.setup()
+      render(<InlineEditCell {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      await user.clear(input)
+      await user.type(input, 'New Value{Enter}')
+
+      expect(defaultProps.onSave).toHaveBeenCalledWith('New Value')
+    })
+
+    it('should cancel on Escape key', async () => {
+      const user = userEvent.setup()
+      render(<InlineEditCell {...defaultProps} />)
+
+      const input = screen.getByRole('textbox')
+      await user.type(input, '{Escape}')
+
+      expect(defaultProps.onCancel).toHaveBeenCalled()
+    })
+
+    it('should save on check button click', async () => {
+      const user = userEvent.setup()
+      render(<InlineEditCell {...defaultProps} />)
+
+      const buttons = screen.getAllByRole('button')
+      // First button is save (check), second is cancel (X)
+      await user.click(buttons[0])
+
+      expect(defaultProps.onSave).toHaveBeenCalledWith('Test Value')
+    })
+
+    it('should cancel on X button click', async () => {
+      const user = userEvent.setup()
+      render(<InlineEditCell {...defaultProps} />)
+
+      const buttons = screen.getAllByRole('button')
+      // Second button is cancel (X)
+      await user.click(buttons[1])
+
+      expect(defaultProps.onCancel).toHaveBeenCalled()
+    })
+  })
+
+  describe('number input', () => {
+    it('should render number input when editType is number', () => {
+      render(<InlineEditCell {...defaultProps} value={42} editType="number" />)
+
+      const input = screen.getByRole('spinbutton')
+      expect(input).toHaveValue(42)
+    })
+  })
+
+  describe('validation', () => {
+    it('should show error message when validation fails', async () => {
+      const user = userEvent.setup()
+      const validate = jest.fn().mockReturnValue('Value is required')
+
+      render(
+        <InlineEditCell
+          {...defaultProps}
+          value=""
+          validate={validate}
+        />
+      )
+
+      const buttons = screen.getAllByRole('button')
+      await user.click(buttons[0]) // Save button
+
+      expect(screen.getByText('Value is required')).toBeInTheDocument()
+      expect(defaultProps.onSave).not.toHaveBeenCalled()
+    })
+
+    it('should save when validation passes', async () => {
+      const user = userEvent.setup()
+      const validate = jest.fn().mockReturnValue(null)
+
+      render(
+        <InlineEditCell
+          {...defaultProps}
+          validate={validate}
+        />
+      )
+
+      const buttons = screen.getAllByRole('button')
+      await user.click(buttons[0]) // Save button
+
+      expect(validate).toHaveBeenCalledWith('Test Value')
+      expect(defaultProps.onSave).toHaveBeenCalled()
+    })
+  })
+
+  describe('select input', () => {
+    it('should render select when editType is select', () => {
+      render(
+        <InlineEditCell
+          {...defaultProps}
+          editType="select"
+          editOptions={['Option 1', 'Option 2', 'Option 3']}
+          value="Option 1"
+        />
+      )
+
+      // Should have a trigger button
+      expect(screen.getByRole('combobox')).toBeInTheDocument()
+    })
+  })
+
+  describe('loading state', () => {
+    it('should show loading indicator while saving', async () => {
+      const slowSave = jest.fn().mockImplementation(
+        () => new Promise((resolve) => setTimeout(resolve, 100))
+      )
+      const user = userEvent.setup()
+
+      render(<InlineEditCell {...defaultProps} onSave={slowSave} />)
+
+      const buttons = screen.getAllByRole('button')
+      await user.click(buttons[0]) // Save button
+
+      // Should show loading state
+      await waitFor(() => {
+        expect(buttons[0]).toBeDisabled()
+      })
+    })
+  })
+})