@coreui/react-pro 5.25.0 → 5.27.0

package/src/components/chip/__tests__/CChip.spec.tsx

@@ -1,113 +0,0 @@
-import * as React from 'react'
-import { fireEvent, render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CChip } from '../index'
-
-test('loads and displays CChip component', async () => {
-  const { container } = render(<CChip>Test</CChip>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CChip customize', async () => {
-  const { container } = render(
-    <CChip
-      active={true}
-      className="bazinga"
-      clickable={true}
-      color="warning"
-      as="button"
-      disabled={true}
-      size="lg"
-      variant="outline"
-    >
-      Test
-    </CChip>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('chip')
-  expect(container.firstChild).toHaveClass('active')
-  expect(container.firstChild).toHaveClass('chip-clickable')
-  expect(container.firstChild).toHaveClass('chip-warning')
-  expect(container.firstChild).toHaveClass('chip-lg')
-  expect(container.firstChild).toHaveClass('chip-outline')
-  expect(container.firstChild).toHaveClass('disabled')
-})
-
-test('CChip removable', async () => {
-  const onRemove = jest.fn()
-  const { container } = render(
-    <CChip removable={true} ariaRemoveLabel="Remove test" onRemove={onRemove}>
-      Test
-    </CChip>
-  )
-
-  const removeButton = container.querySelector('.chip-remove')
-  expect(container).toMatchSnapshot()
-  expect(removeButton).toBeInTheDocument()
-  removeButton?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
-  expect(onRemove).toHaveBeenCalled()
-})
-
-test('CChip selectable', async () => {
-  const onSelect = jest.fn()
-  const onDeselect = jest.fn()
-  const { getByText } = render(
-    <CChip selectable={true} onSelect={onSelect} onDeselect={onDeselect}>
-      Selectable
-    </CChip>,
-  )
-  const chip = getByText('Selectable')
-
-  expect(chip).toHaveAttribute('aria-selected', 'false')
-  fireEvent.click(chip)
-  expect(chip).toHaveClass('active')
-  expect(chip).toHaveAttribute('aria-selected', 'true')
-  expect(onSelect).toHaveBeenCalledTimes(1)
-
-  fireEvent.keyDown(chip, { key: 'Enter' })
-  expect(chip).not.toHaveClass('active')
-  expect(chip).toHaveAttribute('aria-selected', 'false')
-  expect(onDeselect).toHaveBeenCalledTimes(1)
-})
-
-test('CChip keyboard navigation', async () => {
-  const { getByText } = render(
-    <div>
-      <CChip selectable={true}>First</CChip>
-      <CChip selectable={true}>Second</CChip>
-      <CChip selectable={true}>Third</CChip>
-    </div>,
-  )
-
-  const first = getByText('First')
-  const second = getByText('Second')
-  const third = getByText('Third')
-
-  first.focus()
-  fireEvent.keyDown(first, { key: 'ArrowRight' })
-  expect(second).toHaveFocus()
-
-  fireEvent.keyDown(second, { key: 'End' })
-  expect(third).toHaveFocus()
-
-  fireEvent.keyDown(third, { key: 'Home' })
-  expect(first).toHaveFocus()
-})
-
-test('CChip delete triggers remove callback', async () => {
-  const onRemove = jest.fn()
-  const { getByText } = render(
-    <div>
-      <CChip removable={true} onRemove={onRemove}>
-        First
-      </CChip>
-      <CChip removable={true}>Second</CChip>
-    </div>,
-  )
-
-  const first = getByText('First')
-  first.focus()
-  fireEvent.keyDown(first, { key: 'Delete' })
-  expect(onRemove).toHaveBeenCalledTimes(1)
-})

package/src/components/chip/__tests__/__snapshots__/CChip.spec.tsx.snap

@@ -1,65 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CChip customize 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    class="chip active disabled chip-warning chip-lg chip-clickable chip-outline bazinga"
-    disabled=""
-  >
-    Test
-  </button>
-</div>
-`;
-
-exports[`CChip removable 1`] = `
-<div>
-  <span
-    class="chip"
-    data-coreui-chip-focusable="true"
-    tabindex="0"
-  >
-    Test
-    <button
-      aria-label="Remove test"
-      class="chip-remove"
-      tabindex="-1"
-      type="button"
-    >
-      <svg
-        fill="none"
-        height="16"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-width="2"
-        viewBox="0 0 16 16"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <line
-          x1="4"
-          x2="12"
-          y1="4"
-          y2="12"
-        />
-        <line
-          x1="12"
-          x2="4"
-          y1="4"
-          y2="12"
-        />
-      </svg>
-    </button>
-  </span>
-</div>
-`;
-
-exports[`loads and displays CChip component 1`] = `
-<div>
-  <span
-    class="chip"
-  >
-    Test
-  </span>
-</div>
-`;

package/src/components/close-button/__tests__/CCloseButton.spec.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCloseButton } from '../index'
-
-test('loads and displays CCloseButton component', async () => {
-  const { container } = render(<CCloseButton />)
-  const button = document.querySelector('button')
-  expect(button).toHaveClass('btn')
-  expect(button).toHaveClass('btn-close')
-  expect(button).toHaveAttribute('aria-label', 'Close')
-  expect(container).toMatchSnapshot()
-})
-
-test('CCloseButton customize', async () => {
-  const { container } = render(<CCloseButton white={true} disabled={true} className="bazinga" />)
-  const button = document.querySelector('button')
-  expect(button).toHaveClass('btn')
-  expect(button).toHaveClass('btn-close')
-  expect(button).toHaveClass('btn-close-white')
-  expect(button).toHaveClass('bazinga')
-  expect(button).toHaveAttribute('aria-label', 'Close')
-  expect(container).toMatchSnapshot()
-})

package/src/components/close-button/__tests__/__snapshots__/CCloseButton.spec.tsx.snap

@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCloseButton customize 1`] = `
-<div>
-  <button
-    aria-label="Close"
-    class="btn btn-close btn-close-white bazinga"
-    disabled=""
-    type="button"
-  />
-</div>
-`;
-
-exports[`loads and displays CCloseButton component 1`] = `
-<div>
-  <button
-    aria-label="Close"
-    class="btn btn-close"
-    type="button"
-  />
-</div>
-`;

package/src/components/collapse/__tests__/CCollapse.spec.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { render, screen, act } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCollapse } from '../index'
-
-test('loads and displays CCollapse component', async () => {
-  const { container } = render(<CCollapse>Test</CCollapse>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCollapse customize', async () => {
-  const { container } = render(<CCollapse className="bazinga">Test</CCollapse>)
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container).toMatchSnapshot()
-})
-
-test('CCollapse use case test', async () => {
-  jest.useFakeTimers()
-
-  const { rerender } = render(<CCollapse visible={false}>Test</CCollapse>)
-
-  expect(screen.getByText('Test')).toHaveClass('collapse')
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-
-  act(() => {
-    rerender(<CCollapse visible={true}>Test</CCollapse>)
-  })
-
-  expect(screen.getByText('Test')).not.toHaveClass('collapse')
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).toHaveClass('collapsing')
-
-  act(() => {
-    jest.runAllTimers()
-  })
-
-  expect(screen.getByText('Test')).toHaveClass('collapse')
-  expect(screen.getByText('Test')).toHaveClass('show')
-  expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-
-  act(() => {
-    rerender(<CCollapse visible={false}>Test</CCollapse>)
-  })
-
-  expect(screen.getByText('Test')).not.toHaveClass('collapse')
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).toHaveClass('collapsing')
-
-  act(() => {
-    jest.runAllTimers()
-  })
-
-  expect(screen.getByText('Test')).toHaveClass('collapse')
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).not.toHaveClass('collapsing')
-
-  jest.useRealTimers()
-})

package/src/components/collapse/__tests__/__snapshots__/CCollapse.spec.tsx.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCollapse customize 1`] = `
-<div>
-  <div
-    class="bazinga collapse"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CCollapse component 1`] = `
-<div>
-  <div
-    class="collapse"
-  >
-    Test
-  </div>
-</div>
-`;

package/src/components/date-picker/__tests__/CDatePicker.spec.tsx

@@ -1,9 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDatePicker } from '../CDatePicker'
-
-test('loads and displays CDatePicker component', async () => {
-  const { container } = render(<CDatePicker />)
-  expect(container).toMatchSnapshot()
-})

package/src/components/date-picker/__tests__/__snapshots__/CDatePicker.spec.tsx.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`loads and displays CDatePicker component 1`] = `
-<div>
-  <div
-    class="date-picker"
-  >
-    <div
-      class="date-picker-input-group"
-    >
-      <div
-        class="date-picker-input-wrapper"
-      >
-        <input
-          autocomplete="off"
-          class="date-picker-input"
-          placeholder="Select date"
-        />
-      </div>
-      <div
-        class="date-picker-indicator"
-        tabindex="0"
-      />
-    </div>
-  </div>
-</div>
-`;

package/src/components/date-range-picker/__tests__/CDateRangePicker.spec.tsx

@@ -1,9 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDateRangePicker } from '../CDateRangePicker'
-
-test('loads and displays CDateRangePicker component', async () => {
-  const { container } = render(<CDateRangePicker />)
-  expect(container).toMatchSnapshot()
-})

package/src/components/date-range-picker/__tests__/__snapshots__/CDateRangePicker.spec.tsx.snap

@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`loads and displays CDateRangePicker component 1`] = `
-<div>
-  <div
-    class="date-picker"
-  >
-    <div
-      class="date-picker-input-group"
-    >
-      <div
-        class="date-picker-input-wrapper"
-      >
-        <input
-          autocomplete="off"
-          class="date-picker-input"
-          placeholder="Start date"
-        />
-      </div>
-      <div
-        class="date-picker-separator"
-      />
-      <div
-        class="date-picker-input-wrapper"
-      >
-        <input
-          autocomplete="off"
-          class="date-picker-input"
-          placeholder="End date"
-        />
-      </div>
-      <div
-        class="date-picker-indicator"
-        tabindex="0"
-      />
-    </div>
-  </div>
-</div>
-`;

package/src/components/dropdown/__tests__/CDropdown.spec.tsx

@@ -1,116 +0,0 @@
-import * as React from 'react'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import {
-  CDropdown,
-  CDropdownToggle,
-  CDropdownMenu,
-  CDropdownItem,
-  CDropdownItemPlain,
-  CDropdownHeader,
-  CDropdownDivider,
-} from '../index'
-
-test('loads and displays CDropdown component', async () => {
-  const { container } = render(<CDropdown>Test</CDropdown>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CDropdown customize', async () => {
-  const { container } = render(
-    <CDropdown
-      alignment={{ lg: 'start' }}
-      className="bazinga"
-      as="h3"
-      dark={true}
-      direction="dropstart"
-      placement="right-end"
-      popper={true}
-      variant="nav-item"
-      visible={true}
-    >
-      Test
-    </CDropdown>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('nav-item')
-  expect(container.firstChild).toHaveClass('dropdown')
-  expect(container.firstChild).toHaveClass('dropstart')
-})
-
-// test('CDropdown change visible prop', async () => {
-//   jest.useFakeTimers()
-//   const { rerender } = render(<CDropdown visible={false}>Test</CDropdown>)
-//   expect(screen.getByText('Test')).not.toHaveClass('show')
-//   rerender(<CDropdown visible={true}>Test</CDropdown>)
-//   jest.runAllTimers()
-//   expect(screen.getByText('Test')).toHaveClass('show')
-//   rerender(<CDropdown visible={false}>Test</CDropdown>)
-//   expect(screen.getByText('Test')).not.toHaveClass('show')
-//   jest.runAllTimers()
-//   jest.useRealTimers()
-// })
-
-test('CDropdown opens on toggle click and closes on clicking outside', async () => {
-  render(
-    <div>
-      {/* External element to simulate clicking outside the dropdown */}
-      <div data-testid="external-area">External Area</div>
-
-      {/* The dropdown component */}
-      <CDropdown>
-        <CDropdownToggle>Test</CDropdownToggle>
-        <CDropdownMenu>
-          <CDropdownItem>A</CDropdownItem>
-          <CDropdownItem>B</CDropdownItem>
-        </CDropdownMenu>
-      </CDropdown>
-    </div>
-  )
-
-  // Ensure the dropdown is initially closed
-  const toggleButton = screen.getByText('Test')
-  expect(toggleButton).toBeInTheDocument()
-
-  // Assuming the 'show' class is applied to the CDropdownMenu
-  const dropdownMenu = screen.getByRole('menu', { hidden: true }) // Adjust role if different
-  expect(dropdownMenu).not.toHaveClass('show')
-
-  // Click on the toggle to open the dropdown
-  fireEvent.click(toggleButton)
-
-  // Wait for the dropdown menu to become visible
-  await waitFor(() => {
-    const openedMenu = screen.getByRole('menu') // Adjust role if different
-    expect(openedMenu).toBeVisible()
-    expect(openedMenu).toHaveClass('show')
-  })
-
-  // Click outside the dropdown to close it
-  const externalArea = screen.getByTestId('external-area')
-  fireEvent.click(externalArea)
-
-  // Wait for the dropdown menu to be hidden
-  await waitFor(() => {
-    const closedMenu = screen.getByRole('menu', { hidden: true }) // Adjust role if different
-    expect(closedMenu).not.toHaveClass('show')
-  })
-})
-
-test('CDropdown example', async () => {
-  jest.useFakeTimers()
-  const { container } = render(
-    <CDropdown>
-      <CDropdownToggle>Test</CDropdownToggle>
-      <CDropdownMenu>
-        <CDropdownHeader>A</CDropdownHeader>
-        <CDropdownItem>B</CDropdownItem>
-        <CDropdownItemPlain>C</CDropdownItemPlain>
-        <CDropdownDivider />
-        <CDropdownItem>D</CDropdownItem>
-      </CDropdownMenu>
-    </CDropdown>
-  )
-  expect(container).toMatchSnapshot()
-})

package/src/components/dropdown/__tests__/CDropdownDivider.spec.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDropdownDivider } from '../index'
-
-test('loads and displays CDropdownDivider component', async () => {
-  const { container } = render(<CDropdownDivider />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CDropdownDivider customize', async () => {
-  const { container } = render(<CDropdownDivider className="bazinga" />)
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('dropdown-divider')
-})

package/src/components/dropdown/__tests__/CDropdownHeader.spec.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDropdownHeader } from '../index'
-
-test('loads and displays CDropdownHeader component', async () => {
-  const { container } = render(<CDropdownHeader>Test</CDropdownHeader>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CDropdownHeader customize', async () => {
-  const { container } = render(
-    <CDropdownHeader className="bazinga" as="h3">
-      Test
-    </CDropdownHeader>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('dropdown-header')
-})

package/src/components/dropdown/__tests__/CDropdownItem.spec.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDropdownItem } from '../index'
-
-test('loads and displays CDropdownItem component', async () => {
-  const { container } = render(<CDropdownItem>Test</CDropdownItem>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CDropdownItem customize', async () => {
-  const { container } = render(
-    <CDropdownItem className="bazinga" as="div">
-      Test
-    </CDropdownItem>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('dropdown-item')
-})

package/src/components/dropdown/__tests__/CDropdownItemPlain.spec.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDropdownItemPlain } from '../index'
-
-test('loads and displays CDropdownItemPlain component', async () => {
-  const { container } = render(<CDropdownItemPlain>Test</CDropdownItemPlain>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CDropdownItemPlain customize', async () => {
-  const { container } = render(
-    <CDropdownItemPlain className="bazinga" as="div">
-      Test
-    </CDropdownItemPlain>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('dropdown-item-text')
-})

package/src/components/dropdown/__tests__/CDropdownMenu.spec.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDropdown, CDropdownMenu } from '../index'
-
-test('loads and displays CDropdownMenu component', async () => {
-  const { container } = render(<CDropdownMenu>Test</CDropdownMenu>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CDropdownMenu customize', async () => {
-  const { container } = render(
-    <CDropdown visible={true}>
-      <CDropdownMenu className="bazinga" as="div">
-        Test
-      </CDropdownMenu>
-    </CDropdown>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild?.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild?.firstChild).toHaveClass('dropdown-menu')
-  expect(container.firstChild?.firstChild).toHaveClass('show')
-})

package/src/components/dropdown/__tests__/CDropdownToggle.spec.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CDropdownToggle } from '../index'
-
-test('loads and displays CDropdownToggle component', async () => {
-  const { container } = render(<CDropdownToggle>Test</CDropdownToggle>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CDropdownToggle customize', async () => {
-  const { container } = render(
-    <CDropdownToggle caret={true} color="primary" split={true} trigger="focus">
-      Test
-    </CDropdownToggle>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('dropdown-toggle')
-  expect(container.firstChild).toHaveClass('dropdown-toggle-split')
-})