@loadsmart/loadsmart-ui 7.6.0 → 8.0.0-beta.1

package/src/components/Table/Table.test.tsx

@@ -1,310 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-import React from 'react'
-import renderer, { screen, user } from '../../tests/renderer'
-
-import Table from './Table'
-import type { TableProps } from './Table.types'
-
-const setup = ({ ...overrides }: TableProps) => renderer(<Table {...overrides} />).render()
-
-describe('<Table />', () => {
-  it('should render the table with the provided data', () => {
-    const props = {
-      children: (
-        <React.Fragment>
-          <Table.Head>
-            <Table.Row>
-              <Table.HeadCell># Number</Table.HeadCell>
-              <Table.HeadCell>Company</Table.HeadCell>
-              <Table.HeadCell alignment="right">Price $</Table.HeadCell>
-            </Table.Row>
-          </Table.Head>
-          <Table.Body>
-            <Table.Row>
-              <Table.Cell format="number">#000000-1</Table.Cell>
-              <Table.Cell>Modal X 21</Table.Cell>
-              <Table.Cell format="currency" alignment="right">
-                $9876,50
-              </Table.Cell>
-            </Table.Row>
-          </Table.Body>
-        </React.Fragment>
-      ),
-    }
-
-    setup(props)
-
-    expect(screen.getByRole('columnheader', { name: /# number/i })).toBeVisible()
-    expect(screen.getByRole('columnheader', { name: /company/i })).toBeVisible()
-    expect(screen.getByRole('columnheader', { name: /price \$/i })).toBeVisible()
-    expect(screen.getByRole('columnheader', { name: /price \$/i })).toHaveStyle({
-      'text-align': 'right',
-    })
-
-    expect(screen.getByRole('cell', { name: /#000000-1/i })).toBeVisible()
-    expect(screen.getByRole('cell', { name: /#000000-1/i })).toHaveStyle({
-      'font-family': 'font-family-monospace',
-    })
-    expect(screen.getByRole('cell', { name: /Modal X 21/i })).toBeVisible()
-    expect(screen.getByRole('cell', { name: /\$9876,50/i })).toHaveStyle({
-      'font-family': 'font-family-monospace',
-      'text-align': 'right',
-    })
-  })
-
-  describe('Column Picker', () => {
-    it('should pick columns', async () => {
-      const onChange = jest.fn()
-      const OPTION_1 = { title: 'Title1', option: 'Option1', key: 'key1' }
-      const OPTION_2 = { title: 'Title2', option: 'Option2', key: 'Key2' }
-
-      setup({
-        children: (
-          <Table.Picker
-            options={[OPTION_1, OPTION_2]}
-            onChange={onChange}
-            value={OPTION_1}
-            title="Pick a column"
-          />
-        ),
-      })
-
-      user.click(screen.getByRole('button', { name: 'Pick a column' }))
-
-      expect(await screen.findAllByRole('option')).toHaveLength(2)
-
-      expect(screen.getByRole('option', { selected: true })).toHaveTextContent('Option1')
-
-      user.click(screen.getByRole('option', { name: 'Option2' }))
-
-      expect(onChange).toHaveBeenCalledWith(OPTION_2)
-    })
-  })
-
-  describe('Selection', () => {
-    it('should accept selections and allow bulk actions', () => {
-      const action = jest.fn()
-      setup({
-        children: (
-          <React.Fragment>
-            <Table.Caption>
-              <Table.Selection.Actions
-                buttons={[({ values }) => <button onClick={() => action(values)} />]}
-              />
-            </Table.Caption>
-            <Table.Body>
-              <Table.Row>
-                <Table.Selection.Cell value={{ value: 'a' }} />
-              </Table.Row>
-              <Table.Row>
-                <Table.Selection.Cell value={{ value: 'b' }} />
-              </Table.Row>
-            </Table.Body>
-          </React.Fragment>
-        ),
-      })
-
-      const checkboxes = screen.getAllByRole('checkbox')
-      expect(checkboxes).toHaveLength(2)
-
-      user.click(checkboxes[0])
-      user.click(checkboxes[1])
-
-      user.click(screen.getByRole('button'))
-      expect(action).toHaveBeenCalledWith([{ value: 'a' }, { value: 'b' }])
-    })
-  })
-
-  it('Table.Selection only renders actions if there are selections', () => {
-    setup({
-      children: (
-        <React.Fragment>
-          <Table.Caption>
-            <Table.Selection.Actions buttons={[() => <button />]}>
-              Placeholder
-            </Table.Selection.Actions>
-          </Table.Caption>
-          <Table.Body>
-            <Table.Row>
-              <Table.Selection.Cell value={{ value: 'a' }} />
-            </Table.Row>
-          </Table.Body>
-        </React.Fragment>
-      ),
-    })
-
-    expect(screen.getByText('Placeholder')).toBeInTheDocument()
-    expect(screen.queryByRole('button')).not.toBeInTheDocument()
-
-    user.click(screen.getByRole('checkbox'))
-
-    expect(screen.queryByText('Placeholder')).not.toBeInTheDocument()
-    expect(screen.getByRole('button')).toBeInTheDocument()
-  })
-
-  it('should toggle all rows when changing a HeadCell', () => {
-    setup({
-      children: (
-        <React.Fragment>
-          <Table.Head>
-            <Table.Row>
-              <Table.Selection.HeadCell />
-            </Table.Row>
-          </Table.Head>
-          <Table.Body>
-            <Table.Row>
-              <Table.Selection.Cell value={{ value: 'a' }} />
-            </Table.Row>
-            <Table.Row>
-              <Table.Selection.Cell value={{ value: 'b' }} />
-            </Table.Row>
-          </Table.Body>
-        </React.Fragment>
-      ),
-    })
-
-    const [head, ...checkboxes] = screen.getAllByRole('checkbox')
-    // begins unchecked
-    expect(head).not.toBeChecked()
-
-    user.click(checkboxes[0])
-    user.click(checkboxes[1])
-    // auto checks if all rows are checked
-    expect(head).toBeChecked()
-
-    // when unchecked, unchecks all rows
-    user.click(head)
-    expect(checkboxes[0]).not.toBeChecked()
-    expect(checkboxes[1]).not.toBeChecked()
-
-    // when checked, checks all rows
-    user.click(head)
-    expect(checkboxes[0]).toBeChecked()
-    expect(checkboxes[1]).toBeChecked()
-  })
-
-  it('Table.ExpandableRow renders correclty', () => {
-    const onExpandedChange = jest.fn()
-
-    const expandableTable = ({ controlledExpanded4 }: { controlledExpanded4: boolean }) => (
-      <React.Fragment>
-        <Table.Head>
-          <Table.Row>
-            <Table.HeadCell />
-            <Table.HeadCell># Number</Table.HeadCell>
-            <Table.HeadCell>Company</Table.HeadCell>
-            <Table.HeadCell alignment="right">Price $</Table.HeadCell>
-          </Table.Row>
-        </Table.Head>
-        <Table.Body>
-          <Table.ExpandableRow
-            expandableContent={<div>This is an expandable content on index 0</div>}
-            expanded
-          >
-            <Table.Cell format="number">#000000-1</Table.Cell>
-            <Table.Cell>Modal X 21</Table.Cell>
-            <Table.Cell format="currency" alignment="right">
-              $9876,50
-            </Table.Cell>
-          </Table.ExpandableRow>
-          <Table.ExpandableRow>
-            <Table.Cell format="number">#000000-2</Table.Cell>
-            <Table.Cell>Modal X 21</Table.Cell>
-            <Table.Cell format="currency" alignment="right">
-              $9876,50
-            </Table.Cell>
-          </Table.ExpandableRow>
-          <Table.ExpandableRow
-            expandableContent={<div>This is an expandable content on index 2</div>}
-            leading={(expanded) => (expanded ? 'open' : 'closed')}
-            onExpandedChange={onExpandedChange}
-          >
-            <Table.Cell format="number">#000000-3</Table.Cell>
-            <Table.Cell>Modal X 21</Table.Cell>
-            <Table.Cell format="currency" alignment="right">
-              $9876,50
-            </Table.Cell>
-          </Table.ExpandableRow>
-          <Table.ExpandableRow
-            expandableContent={<div>This is an expandable content on index 3</div>}
-            expanded={controlledExpanded4}
-          >
-            <Table.Cell format="number">#000000-4</Table.Cell>
-            <Table.Cell>Modal X 21</Table.Cell>
-            <Table.Cell format="currency" alignment="right">
-              $9876,50
-            </Table.Cell>
-          </Table.ExpandableRow>
-        </Table.Body>
-      </React.Fragment>
-    )
-    const props = {
-      children: expandableTable({ controlledExpanded4: true }),
-    }
-
-    const { rerender } = setup(props)
-
-    // Check if table is displaying 3 rows
-    const row1 = screen.getByText(/000000-1/i).closest('tr')
-    expect(row1).toBeInTheDocument()
-
-    const row2 = screen.getByText(/000000-2/i).closest('tr')
-    expect(row2).toBeInTheDocument()
-
-    const row3 = screen.getByText(/000000-3/i).closest('tr')
-    expect(row3).toBeInTheDocument()
-
-    const row4 = screen.getByText(/000000-4/i).closest('tr')
-    expect(row4).toBeInTheDocument()
-
-    // Row 1 should be forced to be expanded
-    expect(screen.getByText(/This is an expandable content on index 0/i)).toBeInTheDocument()
-
-    // Clicking row1
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    user.click(row1!)
-
-    // Row 1 can't be collapsed
-    expect(screen.getByText(/This is an expandable content on index 0/i)).toBeInTheDocument()
-
-    // Checking if Row 3 has custom trailing (row is collapsed)
-    expect(screen.getByText(/close/i)).toBeInTheDocument()
-
-    // Expanding row3
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    user.click(row3!)
-    expect(screen.getByText(/This is an expandable content on index 2/i)).toBeInTheDocument()
-
-    // Check if onExpandedChange is triggered
-    expect(onExpandedChange).toHaveBeenCalledTimes(1)
-    expect(onExpandedChange).toHaveBeenCalledWith(true)
-
-    // Checking if Row 3 has custom trailing (row is expanded)
-    expect(screen.getByText(/open/i)).toBeInTheDocument()
-
-    // Collapsing row3
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    user.click(row3!)
-    expect(screen.queryByText(/This is an expandable content on index 2/i)).not.toBeInTheDocument()
-
-    // Check if onExpandedChange is triggered
-    expect(onExpandedChange).toHaveBeenCalledTimes(2)
-    expect(onExpandedChange).toHaveBeenCalledWith(false)
-
-    // Checking controlled expanded (row4), it's opened by default
-    expect(screen.queryByText(/This is an expandable content on index 4/i)).not.toBeInTheDocument()
-
-    // Clicking on row4 shouldn't change the open state because it's controlled externally
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    user.click(row4!)
-
-    // row4 should be still opened
-    expect(screen.queryByText(/This is an expandable content on index 4/i)).not.toBeInTheDocument()
-
-    // Re-render to change controlled state
-    rerender(expandableTable({ controlledExpanded4: false }))
-
-    // row4 should be collapsed because externally controlled state is changed
-    expect(screen.queryByText(/This is an expandable content on index 4/i)).not.toBeInTheDocument()
-  })
-})