@coreui/react-pro 5.26.0 → 5.27.0

package/src/components/stepper/__tests__/CStepper.spec.tsx

@@ -1,101 +0,0 @@
-import * as React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CStepper } from '../index'
-
-const stepsMock = [
-  { label: 'Step 1', content: <div>Content 1</div> },
-  { label: 'Step 2', content: <div>Content 2</div> },
-  { label: 'Step 3', content: <div>Content 3</div> },
-]
-
-test('loads and displays CStepper component', async () => {
-  const { container } = render(<CStepper steps={stepsMock} />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CStepper renders vertical layout', async () => {
-  const { container } = render(<CStepper steps={stepsMock} layout="vertical" />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CStepper disables future steps in linear mode', async () => {
-  render(<CStepper steps={stepsMock} linear={true} />)
-
-  const buttons = screen.getAllByRole('tab')
-  expect(buttons[0]).toBeEnabled()
-  expect(buttons[1]).toBeEnabled() // next step is enabled
-  expect(buttons[2]).toBeDisabled() // steps beyond next are disabled
-})
-
-test('CStepper allows all steps in non-linear mode', async () => {
-  render(<CStepper steps={stepsMock} linear={false} />)
-
-  const buttons = screen.getAllByRole('tab')
-  expect(buttons[0]).toBeEnabled()
-  expect(buttons[1]).toBeEnabled()
-  expect(buttons[2]).toBeEnabled()
-})
-
-test('CStepper calls onStepChange when step is clicked', async () => {
-  const handleStepChange = jest.fn()
-  render(<CStepper steps={stepsMock} linear={false} onStepChange={handleStepChange} />)
-
-  const buttons = screen.getAllByRole('tab')
-  fireEvent.click(buttons[2])
-
-  expect(handleStepChange).toHaveBeenCalledWith(3) // stepNumber = index + 1
-})
-
-test('CStepper renders active step content in horizontal layout', async () => {
-  const { container } = render(<CStepper steps={stepsMock} layout="horizontal" />)
-
-  expect(screen.getByText('Content 1')).toBeVisible()
-  const panels = container.querySelectorAll('[role="tabpanel"]')
-  expect(panels[0]).toHaveClass('active')
-  expect(panels[1]).not.toHaveClass('active')
-  expect(panels[2]).not.toHaveClass('active')
-})
-
-test('CStepper calls onStepChange when navigating to last step', async () => {
-  const handleStepChange = jest.fn()
-  render(<CStepper steps={stepsMock} onStepChange={handleStepChange} linear={false} />)
-
-  const buttons = screen.getAllByRole('tab')
-  fireEvent.click(buttons[2])
-
-  expect(handleStepChange).toHaveBeenCalledWith(3)
-})
-
-test('CStepper resets correctly', async () => {
-  const handleReset = jest.fn()
-  const stepperRef = React.createRef<any>()
-
-  render(<CStepper ref={stepperRef} steps={stepsMock} onReset={handleReset} />)
-
-  stepperRef.current?.next()
-  stepperRef.current?.reset()
-
-  expect(handleReset).toHaveBeenCalled()
-})
-
-test('CStepper works in uncontrolled mode with defaultActiveStepIndex', async () => {
-  const { container } = render(<CStepper steps={stepsMock} defaultActiveStepIndex={1} />)
-
-  const panels = container.querySelectorAll('[role="tabpanel"]')
-  expect(panels[1]).toHaveClass('active')
-  expect(panels[0]).not.toHaveClass('active')
-})
-
-test('CStepper works in controlled mode with activeStepIndex', async () => {
-  const { container, rerender } = render(<CStepper steps={stepsMock} activeStepIndex={0} />)
-
-  let panels = container.querySelectorAll('[role="tabpanel"]')
-  expect(panels[0]).toHaveClass('active')
-
-  rerender(<CStepper steps={stepsMock} activeStepIndex={2} />)
-
-  panels = container.querySelectorAll('[role="tabpanel"]')
-  expect(panels[2]).toHaveClass('active')
-  expect(panels[0]).not.toHaveClass('active')
-})

package/src/components/stepper/__tests__/__snapshots__/CStepper.spec.tsx.snap

@@ -1,295 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CStepper renders vertical layout 1`] = `
-<div>
-  <div
-    class="stepper stepper-vertical"
-  >
-    <ol
-      aria-orientation="vertical"
-      class="stepper-steps"
-      role="tablist"
-    >
-      <li
-        class="stepper-step horizontal"
-        role="presentation"
-      >
-        <button
-          aria-controls="stepper-:r1:-panel-0"
-          aria-selected="true"
-          class="stepper-step-button active"
-          id="stepper-:r1:-step-0"
-          role="tab"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="stepper-step-indicator"
-          >
-            <span
-              class="stepper-step-indicator-text"
-            >
-              1
-            </span>
-          </span>
-          <span
-            class="stepper-step-label"
-          >
-            Step 1
-          </span>
-        </button>
-        <div
-          class="stepper-step-connector"
-        />
-        <div
-          aria-hidden="false"
-          aria-labelledby="stepper-:r1:-step-0"
-          aria-live="polite"
-          class="stepper-step-content collapse show"
-          id="stepper-:r1:-panel-0"
-          role="tabpanel"
-        >
-          <div>
-            Content 1
-          </div>
-        </div>
-      </li>
-      <li
-        class="stepper-step horizontal"
-        role="presentation"
-      >
-        <button
-          aria-controls="stepper-:r1:-panel-1"
-          aria-selected="false"
-          class="stepper-step-button"
-          id="stepper-:r1:-step-1"
-          role="tab"
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="stepper-step-indicator"
-          >
-            <span
-              class="stepper-step-indicator-text"
-            >
-              2
-            </span>
-          </span>
-          <span
-            class="stepper-step-label"
-          >
-            Step 2
-          </span>
-        </button>
-        <div
-          class="stepper-step-connector"
-        />
-        <div
-          aria-hidden="true"
-          aria-labelledby="stepper-:r1:-step-1"
-          aria-live="polite"
-          class="stepper-step-content collapse"
-          id="stepper-:r1:-panel-1"
-          role="tabpanel"
-        >
-          <div>
-            Content 2
-          </div>
-        </div>
-      </li>
-      <li
-        class="stepper-step horizontal"
-        role="presentation"
-      >
-        <button
-          aria-controls="stepper-:r1:-panel-2"
-          aria-selected="false"
-          class="stepper-step-button"
-          disabled=""
-          id="stepper-:r1:-step-2"
-          role="tab"
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="stepper-step-indicator"
-          >
-            <span
-              class="stepper-step-indicator-text"
-            >
-              3
-            </span>
-          </span>
-          <span
-            class="stepper-step-label"
-          >
-            Step 3
-          </span>
-        </button>
-        <div
-          aria-hidden="true"
-          aria-labelledby="stepper-:r1:-step-2"
-          aria-live="polite"
-          class="stepper-step-content collapse"
-          id="stepper-:r1:-panel-2"
-          role="tabpanel"
-        >
-          <div>
-            Content 3
-          </div>
-        </div>
-      </li>
-    </ol>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CStepper component 1`] = `
-<div>
-  <div
-    class="stepper"
-  >
-    <ol
-      aria-orientation="horizontal"
-      class="stepper-steps"
-      role="tablist"
-    >
-      <li
-        class="stepper-step horizontal"
-        role="presentation"
-      >
-        <button
-          aria-controls="stepper-:r0:-panel-0"
-          aria-selected="true"
-          class="stepper-step-button active"
-          id="stepper-:r0:-step-0"
-          role="tab"
-          tabindex="0"
-          type="button"
-        >
-          <span
-            class="stepper-step-indicator"
-          >
-            <span
-              class="stepper-step-indicator-text"
-            >
-              1
-            </span>
-          </span>
-          <span
-            class="stepper-step-label"
-          >
-            Step 1
-          </span>
-        </button>
-        <div
-          class="stepper-step-connector"
-        />
-      </li>
-      <li
-        class="stepper-step horizontal"
-        role="presentation"
-      >
-        <button
-          aria-controls="stepper-:r0:-panel-1"
-          aria-selected="false"
-          class="stepper-step-button"
-          id="stepper-:r0:-step-1"
-          role="tab"
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="stepper-step-indicator"
-          >
-            <span
-              class="stepper-step-indicator-text"
-            >
-              2
-            </span>
-          </span>
-          <span
-            class="stepper-step-label"
-          >
-            Step 2
-          </span>
-        </button>
-        <div
-          class="stepper-step-connector"
-        />
-      </li>
-      <li
-        class="stepper-step horizontal"
-        role="presentation"
-      >
-        <button
-          aria-controls="stepper-:r0:-panel-2"
-          aria-selected="false"
-          class="stepper-step-button"
-          disabled=""
-          id="stepper-:r0:-step-2"
-          role="tab"
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            class="stepper-step-indicator"
-          >
-            <span
-              class="stepper-step-indicator-text"
-            >
-              3
-            </span>
-          </span>
-          <span
-            class="stepper-step-label"
-          >
-            Step 3
-          </span>
-        </button>
-      </li>
-    </ol>
-    <div
-      class="stepper-content"
-    >
-      <div
-        aria-hidden="false"
-        aria-labelledby="stepper-:r0:-step-0"
-        aria-live="polite"
-        class="stepper-pane show active"
-        id="stepper-:r0:-panel-0"
-        role="tabpanel"
-      >
-        <div>
-          Content 1
-        </div>
-      </div>
-      <div
-        aria-hidden="true"
-        aria-labelledby="stepper-:r0:-step-1"
-        aria-live="polite"
-        class="stepper-pane"
-        id="stepper-:r0:-panel-1"
-        role="tabpanel"
-      >
-        <div>
-          Content 2
-        </div>
-      </div>
-      <div
-        aria-hidden="true"
-        aria-labelledby="stepper-:r0:-step-2"
-        aria-live="polite"
-        class="stepper-pane"
-        id="stepper-:r0:-panel-2"
-        role="tabpanel"
-      >
-        <div>
-          Content 3
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/components/table/__tests__/CTable.spec.tsx

@@ -1,150 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import {
-  CTable,
-  CTableCaption,
-  CTableHead,
-  CTableRow,
-  CTableHeaderCell,
-  CTableBody,
-  CTableDataCell,
-  CTableFoot,
-} from '../index'
-
-test('loads and displays CTable component', async () => {
-  const { container } = render(<CTable />)
-  expect(container).toMatchSnapshot()
-})
-
-test('loads and displays CTable component - new way', async () => {
-  const columns = [
-    {
-      key: 'id',
-      label: '#',
-      _props: { scope: 'col' },
-    },
-    'class',
-    {
-      key: 'heading_1',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-    {
-      key: 'heading_2',
-      label: 'Heading',
-      _props: { scope: 'col' },
-    },
-  ]
-  const items = [
-    {
-      id: 1,
-      class: 'Mark',
-      heading_1: 'Otto',
-      heading_2: '@mdo',
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 2,
-      class: 'Jacob',
-      heading_1: 'Thornton',
-      heading_2: '@fat',
-      _cellProps: { id: { scope: 'row' } },
-    },
-    {
-      id: 3,
-      class: 'Larry the Bird',
-      heading_2: '@twitter',
-      _cellProps: { id: { scope: 'row' }, class: { colSpan: 2 } },
-    },
-  ]
-  const { container } = render(<CTable columns={columns} items={items} />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CTable customize', async () => {
-  const { container } = render(
-    <CTable
-      className="bazinga"
-      align="middle"
-      borderColor="primary"
-      bordered={true}
-      borderless={true}
-      caption="top"
-      color="info"
-      hover={true}
-      responsive="xl"
-      small={true}
-      striped={true}
-    >
-      <CTableBody>
-        <CTableRow>
-          <CTableDataCell>Test</CTableDataCell>
-        </CTableRow>
-      </CTableBody>
-    </CTable>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('table-responsive-xl')
-  if (container.firstChild === null) {
-    expect(true).toBe(false)
-  } else {
-    expect(container.firstChild.firstChild).toHaveClass('table')
-    expect(container.firstChild.firstChild).toHaveClass('align-middle')
-    expect(container.firstChild.firstChild).toHaveClass('caption-top')
-    expect(container.firstChild.firstChild).toHaveClass('border-primary')
-    expect(container.firstChild.firstChild).toHaveClass('table-bordered')
-    expect(container.firstChild.firstChild).toHaveClass('table-borderless')
-    expect(container.firstChild.firstChild).toHaveClass('table-info')
-    expect(container.firstChild.firstChild).toHaveClass('table-hover')
-    expect(container.firstChild.firstChild).toHaveClass('table-sm')
-    expect(container.firstChild.firstChild).toHaveClass('table-striped')
-    expect(container.firstChild.firstChild).toHaveClass('bazinga')
-    expect(container.firstChild.firstChild).toHaveTextContent('Test')
-  }
-})
-
-test('CTable full example test', async () => {
-  const { container } = render(
-    <CTable caption="top">
-      <CTableCaption>List of users</CTableCaption>
-      <CTableHead>
-        <CTableRow>
-          <CTableHeaderCell>#</CTableHeaderCell>
-          <CTableHeaderCell>Class</CTableHeaderCell>
-          <CTableHeaderCell>Heading</CTableHeaderCell>
-          <CTableHeaderCell>Heading</CTableHeaderCell>
-        </CTableRow>
-      </CTableHead>
-      <CTableBody>
-        <CTableRow>
-          <CTableHeaderCell>1</CTableHeaderCell>
-          <CTableDataCell>Mark</CTableDataCell>
-          <CTableDataCell>Otto</CTableDataCell>
-          <CTableDataCell>@mdo</CTableDataCell>
-        </CTableRow>
-        <CTableRow>
-          <CTableHeaderCell>2</CTableHeaderCell>
-          <CTableDataCell>Jacob</CTableDataCell>
-          <CTableDataCell>Thornton</CTableDataCell>
-          <CTableDataCell>@fat</CTableDataCell>
-        </CTableRow>
-        <CTableRow>
-          <CTableHeaderCell>3</CTableHeaderCell>
-          <CTableDataCell>Larry</CTableDataCell>
-          <CTableDataCell>the Bird</CTableDataCell>
-          <CTableDataCell>@twitter</CTableDataCell>
-        </CTableRow>
-      </CTableBody>
-      <CTableFoot>
-        <CTableRow>
-          <CTableHeaderCell>#</CTableHeaderCell>
-          <CTableHeaderCell>Class</CTableHeaderCell>
-          <CTableHeaderCell>Heading</CTableHeaderCell>
-          <CTableHeaderCell>Heading</CTableHeaderCell>
-        </CTableRow>
-      </CTableFoot>
-    </CTable>
-  )
-  expect(container).toMatchSnapshot()
-})

package/src/components/table/__tests__/CTableBody.spec.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CTableBody, CTableDataCell, CTableRow } from '../index'
-
-test('loads and displays CTableBody component', async () => {
-  const table = document.createElement('table')
-  const { container } = render(<CTableBody />, {
-    container: document.body.appendChild(table),
-  })
-  expect(container).toMatchSnapshot()
-})
-
-test('CTableBody customize', async () => {
-  const table = document.createElement('table')
-  const { container } = render(
-    <CTableBody className="bazinga" color="info">
-      <CTableRow>
-        <CTableDataCell> Test</CTableDataCell>
-      </CTableRow>
-    </CTableBody>,
-    {
-      container: document.body.appendChild(table),
-    }
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('table-info')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveTextContent('Test')
-})

package/src/components/table/__tests__/CTableCaption.spec.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CTableCaption } from '../index'
-
-test('loads and displays CTableCaption component', async () => {
-  const table = document.createElement('table')
-  const { container } = render(<CTableCaption />, {
-    container: document.body.appendChild(table),
-  })
-  expect(container).toMatchSnapshot()
-})
-
-test('CTableCaption customize', async () => {
-  const table = document.createElement('table')
-  const { container } = render(<CTableCaption>Test</CTableCaption>, {
-    container: document.body.appendChild(table),
-  })
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveTextContent('Test')
-})

package/src/components/table/__tests__/CTableDataCell.spec.tsx

@@ -1,43 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CTableDataCell } from '../index'
-import { CTableBody } from '../CTableBody'
-import { CTableRow } from '../CTableRow'
-
-test('loads and displays CTableDataCell component', async () => {
-  const table = document.createElement('table')
-  const { container } = render(
-    <CTableBody>
-      <CTableRow>
-        <CTableDataCell />
-      </CTableRow>
-    </CTableBody>,
-    {
-      container: document.body.appendChild(table),
-    }
-  )
-  expect(container).toMatchSnapshot()
-})
-
-test('CTableDataCell customize', async () => {
-  const table = document.createElement('table')
-  const { container } = render(
-    <CTableBody>
-      <CTableRow>
-        <CTableDataCell className="bazinga" active={true} align="middle" color="info">
-          Test
-        </CTableDataCell>
-      </CTableRow>
-    </CTableBody>,
-    {
-      container: document.body.appendChild(table),
-    }
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('align-middle')
-  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('table-active')
-  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('table-info')
-  expect(container.firstChild?.firstChild?.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild?.firstChild?.firstChild).toHaveTextContent('Test')
-})

package/src/components/table/__tests__/CTableFoot.spec.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CTableFoot, CTableHeaderCell, CTableRow } from '../index'
-
-test('loads and displays CTableFoot component', async () => {
-  const table = document.createElement('table')
-  const { container } = render(<CTableFoot />, {
-    container: document.body.appendChild(table),
-  })
-  expect(container).toMatchSnapshot()
-})
-
-test('CTableFoot customize', async () => {
-  const table = document.createElement('table')
-  const { container } = render(
-    <CTableFoot className="bazinga" color="info">
-      <CTableRow>
-        <CTableHeaderCell>Test</CTableHeaderCell>
-      </CTableRow>
-    </CTableFoot>,
-    {
-      container: document.body.appendChild(table),
-    }
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('table-info')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild?.firstChild?.firstChild).toHaveTextContent('Test')
-})