@opensaas/stack-ui 0.1.6 → 0.3.0

package/tests/components/ListViewClient.test.tsx

@@ -0,0 +1,415 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ListViewClient } from '../../src/components/ListViewClient.js'
+
+// Mock Next.js navigation
+const mockPush = vi.fn()
+vi.mock('next/navigation.js', () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+}))
+
+describe('ListViewClient', () => {
+  const defaultProps = {
+    items: [
+      { id: '1', title: 'First Post', status: 'published', views: 100 },
+      { id: '2', title: 'Second Post', status: 'draft', views: 50 },
+      { id: '3', title: 'Third Post', status: 'published', views: 200 },
+    ],
+    fieldTypes: {
+      title: 'text',
+      status: 'select',
+      views: 'integer',
+    },
+    relationshipRefs: {},
+    listKey: 'Post',
+    urlKey: 'post',
+    basePath: '/admin',
+    page: 1,
+    pageSize: 50,
+    total: 3,
+  }
+
+  beforeEach(() => {
+    mockPush.mockClear()
+  })
+
+  describe('rendering', () => {
+    it('should render all items in table', () => {
+      render(<ListViewClient {...defaultProps} />)
+
+      expect(screen.getByText('First Post')).toBeInTheDocument()
+      expect(screen.getByText('Second Post')).toBeInTheDocument()
+      expect(screen.getByText('Third Post')).toBeInTheDocument()
+    })
+
+    it('should render column headers', () => {
+      render(<ListViewClient {...defaultProps} />)
+
+      expect(screen.getByText('Title')).toBeInTheDocument()
+      expect(screen.getByText('Status')).toBeInTheDocument()
+      expect(screen.getByText('Views')).toBeInTheDocument()
+    })
+
+    it('should render actions column', () => {
+      render(<ListViewClient {...defaultProps} />)
+
+      const editLinks = screen.getAllByText('Edit')
+      expect(editLinks).toHaveLength(3)
+    })
+
+    it('should show empty state when no items', () => {
+      render(<ListViewClient {...defaultProps} items={[]} total={0} />)
+
+      expect(screen.getByText('No items found')).toBeInTheDocument()
+    })
+
+    it('should only render specified columns when provided', () => {
+      render(<ListViewClient {...defaultProps} columns={['title', 'status']} />)
+
+      expect(screen.getByText('Title')).toBeInTheDocument()
+      expect(screen.getByText('Status')).toBeInTheDocument()
+      expect(screen.queryByText('Views')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('sorting', () => {
+    it('should sort items ascending when header clicked', async () => {
+      const user = userEvent.setup()
+      render(<ListViewClient {...defaultProps} />)
+
+      await user.click(screen.getByText('Title'))
+
+      const rows = screen.getAllByRole('row')
+      // First row is header, so data rows start at index 1
+      expect(rows[1]).toHaveTextContent('First Post')
+      expect(rows[2]).toHaveTextContent('Second Post')
+      expect(rows[3]).toHaveTextContent('Third Post')
+    })
+
+    it('should toggle sort order when same header clicked twice', async () => {
+      const user = userEvent.setup()
+      render(<ListViewClient {...defaultProps} />)
+
+      const titleHeader = screen.getByText('Title')
+      await user.click(titleHeader)
+      await user.click(titleHeader)
+
+      const rows = screen.getAllByRole('row')
+      // Should be descending now
+      expect(rows[1]).toHaveTextContent('Third Post')
+      expect(rows[2]).toHaveTextContent('Second Post')
+      expect(rows[3]).toHaveTextContent('First Post')
+    })
+
+    it('should show sort indicator on active column', async () => {
+      const user = userEvent.setup()
+      render(<ListViewClient {...defaultProps} />)
+
+      await user.click(screen.getByText('Title'))
+
+      expect(screen.getByText('↑')).toBeInTheDocument()
+    })
+
+    it('should sort numeric fields correctly', async () => {
+      const user = userEvent.setup()
+      render(<ListViewClient {...defaultProps} />)
+
+      await user.click(screen.getByText('Views'))
+
+      const rows = screen.getAllByRole('row')
+      // Should sort by views: 100, 200, 50 (string comparison)
+      // Note: The current implementation sorts as strings, not numbers
+      expect(rows[1]).toHaveTextContent('100')
+      expect(rows[2]).toHaveTextContent('200')
+      expect(rows[3]).toHaveTextContent('50')
+    })
+  })
+
+  describe('search', () => {
+    it('should render search input', () => {
+      render(<ListViewClient {...defaultProps} />)
+
+      expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument()
+    })
+
+    it('should update search input value', async () => {
+      const user = userEvent.setup()
+      render(<ListViewClient {...defaultProps} />)
+
+      const searchInput = screen.getByPlaceholderText('Search...')
+      await user.type(searchInput, 'test')
+
+      expect(searchInput).toHaveValue('test')
+    })
+
+    it('should navigate with search query when search submitted', async () => {
+      const user = userEvent.setup()
+      render(<ListViewClient {...defaultProps} />)
+
+      const searchInput = screen.getByPlaceholderText('Search...')
+      await user.type(searchInput, 'test')
+
+      const searchButton = screen.getByRole('button', { name: /search/i })
+      await user.click(searchButton)
+
+      expect(mockPush).toHaveBeenCalledWith('/admin/post?search=test&page=1')
+    })
+
+    it('should show clear button when search has value', async () => {
+      const user = userEvent.setup()
+      render(<ListViewClient {...defaultProps} />)
+
+      const searchInput = screen.getByPlaceholderText('Search...')
+      await user.type(searchInput, 'test')
+
+      expect(screen.getByText('✕')).toBeInTheDocument()
+    })
+
+    it('should clear search when clear button clicked', async () => {
+      const user = userEvent.setup()
+      render(<ListViewClient {...defaultProps} />)
+
+      const searchInput = screen.getByPlaceholderText('Search...')
+      await user.type(searchInput, 'test')
+
+      const clearButton = screen.getByText('✕')
+      await user.click(clearButton)
+
+      expect(mockPush).toHaveBeenCalledWith('/admin/post')
+    })
+
+    it('should reset to page 1 when new search submitted', async () => {
+      const user = userEvent.setup()
+      render(<ListViewClient {...defaultProps} page={3} />)
+
+      const searchInput = screen.getByPlaceholderText('Search...')
+      await user.type(searchInput, 'test')
+
+      const searchButton = screen.getByRole('button', { name: /search/i })
+      await user.click(searchButton)
+
+      expect(mockPush).toHaveBeenCalledWith('/admin/post?search=test&page=1')
+    })
+
+    it('should preserve initial search value', () => {
+      render(<ListViewClient {...defaultProps} search="existing" />)
+
+      const searchInput = screen.getByPlaceholderText('Search...')
+      expect(searchInput).toHaveValue('existing')
+    })
+  })
+
+  describe('pagination', () => {
+    it('should show pagination when total pages > 1', () => {
+      render(<ListViewClient {...defaultProps} total={100} pageSize={10} />)
+
+      expect(screen.getByText(/Page 1 of 10/)).toBeInTheDocument()
+    })
+
+    it('should not show pagination when total pages = 1', () => {
+      render(<ListViewClient {...defaultProps} total={3} pageSize={50} />)
+
+      expect(screen.queryByText(/Page/)).not.toBeInTheDocument()
+    })
+
+    it('should show correct page info', () => {
+      render(<ListViewClient {...defaultProps} total={100} pageSize={10} page={2} />)
+
+      expect(screen.getByText(/Showing 11 to 20 of 100 results/)).toBeInTheDocument()
+    })
+
+    it('should disable Previous button on first page', () => {
+      render(<ListViewClient {...defaultProps} total={100} pageSize={10} page={1} />)
+
+      const prevButton = screen.getByRole('button', { name: /previous/i })
+      expect(prevButton).toBeDisabled()
+    })
+
+    it('should disable Next button on last page', () => {
+      render(<ListViewClient {...defaultProps} total={100} pageSize={10} page={10} />)
+
+      const nextButton = screen.getByRole('button', { name: /next/i })
+      expect(nextButton).toBeDisabled()
+    })
+
+    it('should navigate to previous page when Previous clicked', async () => {
+      const user = userEvent.setup()
+      render(<ListViewClient {...defaultProps} total={100} pageSize={10} page={2} />)
+
+      const prevButton = screen.getByRole('button', { name: /previous/i })
+      await user.click(prevButton)
+
+      expect(mockPush).toHaveBeenCalledWith('/admin/post?page=1')
+    })
+
+    it('should navigate to next page when Next clicked', async () => {
+      const user = userEvent.setup()
+      render(<ListViewClient {...defaultProps} total={100} pageSize={10} page={1} />)
+
+      const nextButton = screen.getByRole('button', { name: /next/i })
+      await user.click(nextButton)
+
+      expect(mockPush).toHaveBeenCalledWith('/admin/post?page=2')
+    })
+
+    it('should preserve search in pagination URLs', async () => {
+      const user = userEvent.setup()
+      render(<ListViewClient {...defaultProps} total={100} pageSize={10} page={1} search="test" />)
+
+      const nextButton = screen.getByRole('button', { name: /next/i })
+      await user.click(nextButton)
+
+      expect(mockPush).toHaveBeenCalledWith('/admin/post?search=test&page=2')
+    })
+  })
+
+  describe('relationships', () => {
+    it('should render relationship as link when relationshipRefs provided', () => {
+      const items = [
+        {
+          id: '1',
+          title: 'Post 1',
+          author: { id: 'user-1', name: 'John Doe' },
+        },
+      ]
+
+      render(
+        <ListViewClient
+          {...defaultProps}
+          items={items}
+          fieldTypes={{ title: 'text', author: 'relationship' }}
+          relationshipRefs={{ author: 'User.posts' }}
+          columns={['title', 'author']}
+        />,
+      )
+
+      const authorLink = screen.getByRole('link', { name: 'John Doe' })
+      expect(authorLink).toBeInTheDocument()
+      expect(authorLink).toHaveAttribute('href', '/admin/user/user-1')
+    })
+
+    it('should render multiple relationships as comma-separated links', () => {
+      const items = [
+        {
+          id: '1',
+          title: 'Post 1',
+          tags: [
+            { id: 'tag-1', name: 'JavaScript' },
+            { id: 'tag-2', name: 'TypeScript' },
+          ],
+        },
+      ]
+
+      const { container } = render(
+        <ListViewClient
+          {...defaultProps}
+          items={items}
+          fieldTypes={{ title: 'text', tags: 'relationship' }}
+          relationshipRefs={{ tags: 'Tag.posts' }}
+          columns={['title', 'tags']}
+        />,
+      )
+
+      expect(screen.getByRole('link', { name: 'JavaScript' })).toBeInTheDocument()
+      expect(screen.getByRole('link', { name: 'TypeScript' })).toBeInTheDocument()
+      // Check for comma separator in the container
+      expect(container.textContent).toContain(', ')
+    })
+
+    it('should show dash for empty relationship', () => {
+      const items = [{ id: '1', title: 'Post 1', author: null }]
+
+      render(
+        <ListViewClient
+          {...defaultProps}
+          items={items}
+          fieldTypes={{ title: 'text', author: 'relationship' }}
+          relationshipRefs={{ author: 'User.posts' }}
+          columns={['title', 'author']}
+        />,
+      )
+
+      const cells = screen.getAllByRole('cell')
+      const authorCell = cells.find((cell) => cell.textContent === '-')
+      expect(authorCell).toBeInTheDocument()
+    })
+
+    it('should show dash for empty relationship array', () => {
+      const items = [{ id: '1', title: 'Post 1', tags: [] }]
+
+      render(
+        <ListViewClient
+          {...defaultProps}
+          items={items}
+          fieldTypes={{ title: 'text', tags: 'relationship' }}
+          relationshipRefs={{ tags: 'Tag.posts' }}
+          columns={['title', 'tags']}
+        />,
+      )
+
+      const cells = screen.getAllByRole('cell')
+      const tagsCell = cells.find((cell) => cell.textContent === '-')
+      expect(tagsCell).toBeInTheDocument()
+    })
+  })
+
+  describe('field display values', () => {
+    it('should display checkbox values as Yes/No', () => {
+      const items = [
+        { id: '1', title: 'Post 1', published: true },
+        { id: '2', title: 'Post 2', published: false },
+      ]
+
+      render(
+        <ListViewClient
+          {...defaultProps}
+          items={items}
+          fieldTypes={{ title: 'text', published: 'checkbox' }}
+          columns={['title', 'published']}
+        />,
+      )
+
+      expect(screen.getByText('Yes')).toBeInTheDocument()
+      expect(screen.getByText('No')).toBeInTheDocument()
+    })
+
+    it('should display timestamp values as formatted dates', () => {
+      const items = [{ id: '1', title: 'Post 1', createdAt: '2024-01-01T12:00:00Z' }]
+
+      render(
+        <ListViewClient
+          {...defaultProps}
+          items={items}
+          fieldTypes={{ title: 'text', createdAt: 'timestamp' }}
+          columns={['title', 'createdAt']}
+        />,
+      )
+
+      // Just check that it's formatted (not the exact format which depends on locale)
+      const cells = screen.getAllByRole('cell')
+      const dateCell = cells.find((cell) => cell.textContent?.includes('2024'))
+      expect(dateCell).toBeInTheDocument()
+    })
+  })
+
+  describe('edit links', () => {
+    it('should link to correct edit page', () => {
+      render(<ListViewClient {...defaultProps} />)
+
+      const editLinks = screen.getAllByRole('link', { name: 'Edit' })
+      expect(editLinks[0]).toHaveAttribute('href', '/admin/post/1')
+      expect(editLinks[1]).toHaveAttribute('href', '/admin/post/2')
+      expect(editLinks[2]).toHaveAttribute('href', '/admin/post/3')
+    })
+
+    it('should use custom basePath in edit links', () => {
+      render(<ListViewClient {...defaultProps} basePath="/custom" />)
+
+      const editLinks = screen.getAllByRole('link', { name: 'Edit' })
+      expect(editLinks[0]).toHaveAttribute('href', '/custom/post/1')
+    })
+  })
+})

package/tests/components/SearchBar.test.tsx

@@ -0,0 +1,254 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { SearchBar } from '../../src/components/standalone/SearchBar.js'
+
+// Mock Next.js navigation
+const mockPush = vi.fn()
+const mockPathname = '/admin/posts'
+
+vi.mock('next/navigation.js', () => ({
+  useRouter: () => ({
+    push: mockPush,
+  }),
+  usePathname: () => mockPathname,
+}))
+
+describe('SearchBar', () => {
+  beforeEach(() => {
+    mockPush.mockClear()
+  })
+
+  describe('rendering', () => {
+    it('should render search input', () => {
+      render(<SearchBar />)
+
+      expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument()
+    })
+
+    it('should render search button', () => {
+      render(<SearchBar />)
+
+      expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument()
+    })
+
+    it('should use custom placeholder', () => {
+      render(<SearchBar placeholder="Search posts..." />)
+
+      expect(screen.getByPlaceholderText('Search posts...')).toBeInTheDocument()
+    })
+
+    it('should use custom search button label', () => {
+      render(<SearchBar searchLabel="Find" />)
+
+      expect(screen.getByRole('button', { name: 'Find' })).toBeInTheDocument()
+    })
+
+    it('should apply custom className', () => {
+      const { container } = render(<SearchBar className="custom-class" />)
+
+      expect(container.querySelector('.custom-class')).toBeInTheDocument()
+    })
+
+    it('should show default value', () => {
+      render(<SearchBar defaultValue="initial search" />)
+
+      const input = screen.getByPlaceholderText('Search...')
+      expect(input).toHaveValue('initial search')
+    })
+  })
+
+  describe('user interactions', () => {
+    it('should update input value when user types', async () => {
+      const user = userEvent.setup()
+      render(<SearchBar />)
+
+      const input = screen.getByPlaceholderText('Search...')
+      await user.type(input, 'test query')
+
+      expect(input).toHaveValue('test query')
+    })
+
+    it('should show clear button when input has value', async () => {
+      const user = userEvent.setup()
+      render(<SearchBar />)
+
+      const input = screen.getByPlaceholderText('Search...')
+      await user.type(input, 'test')
+
+      expect(screen.getByText('✕')).toBeInTheDocument()
+    })
+
+    it('should not show clear button when input is empty', () => {
+      render(<SearchBar />)
+
+      expect(screen.queryByText('✕')).not.toBeInTheDocument()
+    })
+
+    it('should clear input when clear button clicked', async () => {
+      const user = userEvent.setup()
+      render(<SearchBar />)
+
+      const input = screen.getByPlaceholderText('Search...')
+      await user.type(input, 'test')
+
+      const clearButton = screen.getByText('✕')
+      await user.click(clearButton)
+
+      expect(input).toHaveValue('')
+    })
+
+    it('should hide clear button after clearing', async () => {
+      const user = userEvent.setup()
+      render(<SearchBar />)
+
+      const input = screen.getByPlaceholderText('Search...')
+      await user.type(input, 'test')
+
+      const clearButton = screen.getByText('✕')
+      await user.click(clearButton)
+
+      expect(screen.queryByText('✕')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('search functionality', () => {
+    it('should call onSearch with trimmed query when search button clicked', async () => {
+      const onSearch = vi.fn()
+      const user = userEvent.setup()
+
+      render(<SearchBar onSearch={onSearch} />)
+
+      const input = screen.getByPlaceholderText('Search...')
+      await user.type(input, '  test query  ')
+
+      const searchButton = screen.getByRole('button', { name: 'Search' })
+      await user.click(searchButton)
+
+      expect(onSearch).toHaveBeenCalledWith('test query')
+    })
+
+    it('should call onSearch when form submitted via Enter key', async () => {
+      const onSearch = vi.fn()
+      const user = userEvent.setup()
+
+      render(<SearchBar onSearch={onSearch} />)
+
+      const input = screen.getByPlaceholderText('Search...')
+      await user.type(input, 'test query{Enter}')
+
+      expect(onSearch).toHaveBeenCalledWith('test query')
+    })
+
+    it('should navigate with search param when onSearch not provided', async () => {
+      const user = userEvent.setup()
+      render(<SearchBar />)
+
+      const input = screen.getByPlaceholderText('Search...')
+      await user.type(input, 'test query')
+
+      const searchButton = screen.getByRole('button', { name: 'Search' })
+      await user.click(searchButton)
+
+      expect(mockPush).toHaveBeenCalledWith('/admin/posts?search=test query')
+    })
+
+    it('should call onClear when clear button clicked', async () => {
+      const onClear = vi.fn()
+      const user = userEvent.setup()
+
+      render(<SearchBar onClear={onClear} />)
+
+      const input = screen.getByPlaceholderText('Search...')
+      await user.type(input, 'test')
+
+      const clearButton = screen.getByText('✕')
+      await user.click(clearButton)
+
+      expect(onClear).toHaveBeenCalled()
+    })
+
+    it('should not call onClear when not provided', async () => {
+      const user = userEvent.setup()
+      render(<SearchBar />)
+
+      const input = screen.getByPlaceholderText('Search...')
+      await user.type(input, 'test')
+
+      const clearButton = screen.getByText('✕')
+      await user.click(clearButton)
+
+      // Should not throw error
+      expect(input).toHaveValue('')
+    })
+
+    it('should trim whitespace from search query', async () => {
+      const onSearch = vi.fn()
+      const user = userEvent.setup()
+
+      render(<SearchBar onSearch={onSearch} />)
+
+      const input = screen.getByPlaceholderText('Search...')
+      await user.type(input, '   spaces   ')
+
+      const searchButton = screen.getByRole('button', { name: 'Search' })
+      await user.click(searchButton)
+
+      expect(onSearch).toHaveBeenCalledWith('spaces')
+    })
+
+    it('should allow searching for empty string', async () => {
+      const onSearch = vi.fn()
+      const user = userEvent.setup()
+
+      render(<SearchBar onSearch={onSearch} />)
+
+      const searchButton = screen.getByRole('button', { name: 'Search' })
+      await user.click(searchButton)
+
+      expect(onSearch).toHaveBeenCalledWith('')
+    })
+  })
+
+  describe('form behavior', () => {
+    it('should prevent default form submission', async () => {
+      const onSearch = vi.fn()
+      const user = userEvent.setup()
+
+      render(<SearchBar onSearch={onSearch} />)
+
+      const input = screen.getByPlaceholderText('Search...')
+      await user.type(input, 'test{Enter}')
+
+      // Form should not reload the page
+      expect(onSearch).toHaveBeenCalled()
+    })
+
+    it('should submit via button click', async () => {
+      const onSearch = vi.fn()
+      const user = userEvent.setup()
+
+      render(<SearchBar onSearch={onSearch} />)
+
+      const input = screen.getByPlaceholderText('Search...')
+      await user.type(input, 'test')
+
+      const searchButton = screen.getByRole('button', { name: 'Search' })
+      await user.click(searchButton)
+
+      expect(onSearch).toHaveBeenCalledWith('test')
+    })
+
+    it('should submit via Enter key', async () => {
+      const onSearch = vi.fn()
+      const user = userEvent.setup()
+
+      render(<SearchBar onSearch={onSearch} />)
+
+      const input = screen.getByPlaceholderText('Search...')
+      await user.type(input, 'test{Enter}')
+
+      expect(onSearch).toHaveBeenCalledWith('test')
+    })
+  })
+})