@coreui/react-pro 5.26.0 → 5.27.1

package/src/components/autocomplete/__tests__/CAutocompleteOptions.spec.tsx

@@ -1,219 +0,0 @@
-import * as React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CAutocompleteOptions } from '../CAutocompleteOptions'
-import type { Option, OptionsGroup } from '../types'
-
-const mockOptions = [
-  { label: 'Apple', value: 1 },
-  { label: 'Banana', value: 2 },
-  { label: 'Cherry', value: 3 },
-  { label: 'Date', value: 4 },
-]
-
-const mockOptionsWithGroups = [
-  {
-    label: 'Fruits',
-    options: [
-      { label: 'Apple', value: 1 },
-      { label: 'Banana', value: 2 },
-    ],
-  },
-  {
-    label: 'Vegetables',
-    options: [
-      { label: 'Carrot', value: 3 },
-      { label: 'Spinach', value: 4 },
-    ],
-  },
-]
-
-test('loads and displays CAutocompleteOptions component', async () => {
-  const { container } = render(<CAutocompleteOptions options={mockOptions} selected={null} />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CAutocompleteOptions renders all options', async () => {
-  render(<CAutocompleteOptions options={mockOptions} selected={null} />)
-
-  expect(screen.getByText('Apple')).toBeVisible()
-  expect(screen.getByText('Banana')).toBeVisible()
-  expect(screen.getByText('Cherry')).toBeVisible()
-  expect(screen.getByText('Date')).toBeVisible()
-})
-
-test('CAutocompleteOptions renders option groups', async () => {
-  render(<CAutocompleteOptions options={mockOptionsWithGroups} selected={null} />)
-
-  expect(screen.getByText('Fruits')).toBeVisible()
-  expect(screen.getByText('Vegetables')).toBeVisible()
-  expect(screen.getByText('Apple')).toBeVisible()
-  expect(screen.getByText('Carrot')).toBeVisible()
-})
-
-test('CAutocompleteOptions marks selected option', async () => {
-  render(<CAutocompleteOptions options={mockOptions} selected={mockOptions[0]} />)
-
-  const selectedOption = screen.getByText('Apple').closest('.autocomplete-option')
-  expect(selectedOption).toHaveClass('selected')
-})
-
-test('CAutocompleteOptions calls onOptionClick when option clicked', async () => {
-  const onOptionClick = jest.fn()
-  render(<CAutocompleteOptions options={mockOptions} selected={null} onOptionClick={onOptionClick} />)
-
-  const option = screen.getByText('Apple')
-  fireEvent.click(option)
-
-  expect(onOptionClick).toHaveBeenCalledWith(mockOptions[0])
-})
-
-test('CAutocompleteOptions handles Enter key press', async () => {
-  const onOptionClick = jest.fn()
-  render(<CAutocompleteOptions options={mockOptions} selected={null} onOptionClick={onOptionClick} />)
-
-  const option = screen.getByText('Apple')
-  fireEvent.keyDown(option, { key: 'Enter' })
-
-  expect(onOptionClick).toHaveBeenCalledWith(mockOptions[0])
-})
-
-test('CAutocompleteOptions handles Space key press', async () => {
-  const onOptionClick = jest.fn()
-  render(<CAutocompleteOptions options={mockOptions} selected={null} onOptionClick={onOptionClick} />)
-
-  const option = screen.getByText('Apple')
-  fireEvent.keyDown(option, { code: 'Space' })
-
-  expect(onOptionClick).toHaveBeenCalledWith(mockOptions[0])
-})
-
-test('CAutocompleteOptions navigates with arrow keys', async () => {
-  render(<CAutocompleteOptions options={mockOptions} selected={null} />)
-
-  const firstOption = screen.getByText('Apple')
-  const secondOption = screen.getByText('Banana')
-
-  firstOption.focus()
-  fireEvent.keyDown(firstOption, { key: 'ArrowDown' })
-
-  expect(document.activeElement).toBe(secondOption)
-})
-
-test('CAutocompleteOptions shows no results message', async () => {
-  render(
-    <CAutocompleteOptions options={[]} selected={null} searchNoResultsLabel="No options found" />
-  )
-
-  expect(screen.getByText('No options found')).toBeVisible()
-})
-
-test('CAutocompleteOptions highlights search matches', async () => {
-  const { container } = render(
-    <CAutocompleteOptions
-      options={mockOptions}
-      selected={null}
-      highlightOptionsOnSearch={true}
-      searchValue="app"
-    />
-  )
-
-  const option = container.querySelector('.autocomplete-option')
-  expect(option).toBeInTheDocument()
-  expect(option?.querySelector('strong')).toHaveTextContent('App')
-})
-
-test('CAutocompleteOptions uses custom option template', async () => {
-  const customTemplate = (option: Option) => {
-    const { label, value } = option as Exclude<Option, string>
-    return (
-      <div className="custom-option">
-        {label} - {value}
-      </div>
-    )
-  }
-
-  render(
-    <CAutocompleteOptions options={mockOptions} selected={null} optionsTemplate={customTemplate} />
-  )
-
-  expect(screen.getByText('Apple - 1')).toBeVisible()
-  expect(screen.getByText('Banana - 2')).toBeVisible()
-})
-
-test('CAutocompleteOptions uses custom group template', async () => {
-  const customGroupTemplate = (group: OptionsGroup) => (
-    <div className="custom-group">{group.label.toUpperCase()}</div>
-  )
-
-  render(
-    <CAutocompleteOptions
-      options={mockOptionsWithGroups}
-      selected={null}
-      optionsGroupsTemplate={customGroupTemplate}
-    />
-  )
-
-  expect(screen.getByText('FRUITS')).toBeVisible()
-  expect(screen.getByText('VEGETABLES')).toBeVisible()
-})
-
-test('CAutocompleteOptions shows loading state', async () => {
-  const { container } = render(
-    <CAutocompleteOptions options={mockOptions} selected={null} loading={true} />
-  )
-
-  // CElementCover renders a div with position styles when loading
-  const options = container.querySelector('.autocomplete-options')
-  expect(options).toBeInTheDocument()
-  // When loading, the component should render additional cover elements
-  expect(options?.children.length).toBeGreaterThan(0)
-})
-
-test('CAutocompleteOptions renders with virtual scroller', async () => {
-  const { container } = render(
-    <CAutocompleteOptions
-      options={mockOptions}
-      selected={null}
-      virtualScroller={true}
-      visibleItems={2}
-    />
-  )
-
-  expect(container.querySelector('.virtual-scroller')).toBeInTheDocument()
-})
-
-test('CAutocompleteOptions sets max height', async () => {
-  const { container } = render(
-    <CAutocompleteOptions options={mockOptions} selected={null} optionsMaxHeight={200} />
-  )
-
-  const optionsContainer = container.querySelector('.autocomplete-options')
-  expect(optionsContainer).toHaveStyle('max-height: 200px')
-})
-
-test('CAutocompleteOptions marks disabled options', async () => {
-  const optionsWithDisabled = [
-    { label: 'Apple', value: 1 },
-    { label: 'Banana', value: 2, disabled: true },
-  ]
-
-  render(<CAutocompleteOptions options={optionsWithDisabled} selected={null} />)
-
-  const disabledOption = screen.getByText('Banana').closest('.autocomplete-option')
-  expect(disabledOption).toHaveClass('disabled')
-})
-
-test('CAutocompleteOptions has correct accessibility attributes', async () => {
-  const { container } = render(<CAutocompleteOptions options={mockOptions} selected={null} />)
-
-  const listbox = screen.getByRole('listbox')
-  expect(listbox).toBeInTheDocument()
-
-  const options = container.querySelectorAll('.autocomplete-option')
-  expect(options).toHaveLength(4)
-
-  options.forEach((option) => {
-    expect(option).toHaveAttribute('tabIndex', '0')
-  })
-})

package/src/components/autocomplete/__tests__/__snapshots__/CAutocomplete.spec.tsx.snap

@@ -1,129 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CAutocomplete customize 1`] = `
-<div>
-  <div
-    class="autocomplete autocomplete-lg disabled bazinga"
-  >
-    <div
-      class="autocomplete-input-group"
-    >
-      <input
-        aria-autocomplete="list"
-        aria-haspopup="listbox"
-        autocomplete="off"
-        class="autocomplete-input"
-        disabled=""
-        id="autocomplete-:r1:"
-        name="autocomplete-:r1:"
-        placeholder="Select option"
-        role="combobox"
-        type="text"
-      />
-      <div
-        class="autocomplete-buttons"
-      >
-        <button
-          class="autocomplete-indicator"
-          type="button"
-        />
-      </div>
-    </div>
-    <div
-      aria-labelledby="autocomplete-:r1:"
-      class="autocomplete-dropdown"
-      id="autocomplete-listbox-:r1:"
-      role="listbox"
-    >
-      <div
-        class="autocomplete-options"
-        role="listbox"
-      >
-        <div
-          class="autocomplete-option"
-          tabindex="0"
-        >
-          Apple
-        </div>
-        <div
-          class="autocomplete-option"
-          tabindex="0"
-        >
-          Banana
-        </div>
-        <div
-          class="autocomplete-option"
-          tabindex="0"
-        >
-          Cherry
-        </div>
-        <div
-          class="autocomplete-option"
-          tabindex="0"
-        >
-          Date
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CAutocomplete component 1`] = `
-<div>
-  <div
-    class="autocomplete"
-  >
-    <div
-      class="autocomplete-input-group"
-    >
-      <input
-        aria-autocomplete="list"
-        aria-haspopup="listbox"
-        autocomplete="off"
-        class="autocomplete-input"
-        id="autocomplete-:r0:"
-        name="autocomplete-:r0:"
-        role="combobox"
-        type="text"
-      />
-    </div>
-    <div
-      aria-labelledby="autocomplete-:r0:"
-      class="autocomplete-dropdown"
-      id="autocomplete-listbox-:r0:"
-      role="listbox"
-    >
-      <div
-        class="autocomplete-options"
-        role="listbox"
-      >
-        <div
-          class="autocomplete-option"
-          tabindex="0"
-        >
-          Apple
-        </div>
-        <div
-          class="autocomplete-option"
-          tabindex="0"
-        >
-          Banana
-        </div>
-        <div
-          class="autocomplete-option"
-          tabindex="0"
-        >
-          Cherry
-        </div>
-        <div
-          class="autocomplete-option"
-          tabindex="0"
-        >
-          Date
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

package/src/components/autocomplete/__tests__/__snapshots__/CAutocompleteOptions.spec.tsx.snap

@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`loads and displays CAutocompleteOptions component 1`] = `
-<div>
-  <div
-    class="autocomplete-options"
-    role="listbox"
-    style="overflow: scroll;"
-  >
-    <div
-      class="autocomplete-option"
-      tabindex="0"
-    >
-      Apple
-    </div>
-    <div
-      class="autocomplete-option"
-      tabindex="0"
-    >
-      Banana
-    </div>
-    <div
-      class="autocomplete-option"
-      tabindex="0"
-    >
-      Cherry
-    </div>
-    <div
-      class="autocomplete-option"
-      tabindex="0"
-    >
-      Date
-    </div>
-  </div>
-</div>
-`;

package/src/components/avatar/__tests__/CAvatar.spec.tsx

@@ -1,54 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CAvatar } from '../index'
-
-test('loads and displays CAvatar component', async () => {
-  const { container } = render(<CAvatar color="primary">Test</CAvatar>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CAvatar customize', async () => {
-  let element
-  const { container } = render(
-    <CAvatar
-      className="bazinga"
-      color="secondary"
-      shape="rounded"
-      size="xl"
-      status="warning"
-      textColor="white"
-    >
-      Test
-    </CAvatar>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('avatar')
-  expect(container.firstChild).toHaveClass('bg-secondary')
-  expect(container.firstChild).toHaveClass('avatar-xl')
-  expect(container.firstChild).toHaveClass('text-white')
-  element = container.getElementsByClassName('avatar-status')
-  element = element[0]
-  expect(element).toHaveClass('bg-warning')
-})
-
-test('CAvatar customize image', async () => {
-  const { container } = render(
-    <CAvatar
-      className="bazinga"
-      color="secondary"
-      shape="rounded"
-      size="xl"
-      status="warning"
-      textColor="white"
-      src="/bazinga"
-    >
-      Test
-    </CAvatar>
-  )
-  expect(container).toMatchSnapshot()
-
-  const element = container.getElementsByClassName('avatar-img')
-  expect(element.length).toBe(1)
-})

package/src/components/avatar/__tests__/__snapshots__/CAvatar.spec.tsx.snap

@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CAvatar customize 1`] = `
-<div>
-  <div
-    class="avatar bg-secondary avatar-xl text-white rounded bazinga"
-  >
-    Test
-    <span
-      class="avatar-status bg-warning"
-    />
-  </div>
-</div>
-`;
-
-exports[`CAvatar customize image 1`] = `
-<div>
-  <div
-    class="avatar bg-secondary avatar-xl text-white rounded bazinga"
-  >
-    <img
-      class="avatar-img"
-      src="/bazinga"
-    />
-    <span
-      class="avatar-status bg-warning"
-    />
-  </div>
-</div>
-`;
-
-exports[`loads and displays CAvatar component 1`] = `
-<div>
-  <div
-    class="avatar bg-primary"
-  >
-    Test
-  </div>
-</div>
-`;

package/src/components/backdrop/__tests__/CBackdrop.spec.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CBackdrop } from '../index'
-
-test('loads and displays CBackdrop component', async () => {
-  const { container } = render(<CBackdrop>Test</CBackdrop>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CBackdrop customize', async () => {
-  jest.useFakeTimers()
-  const { container } = render(<CBackdrop visible={true}>Test</CBackdrop>)
-  jest.runAllTimers()
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('modal-backdrop')
-  jest.useRealTimers()
-})
-
-test('CBackdrop customize 2', async () => {
-  jest.useFakeTimers()
-  const { container } = render(
-    <CBackdrop className="bazinga" visible={true}>
-      Test
-    </CBackdrop>
-  )
-  jest.runAllTimers()
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  jest.useRealTimers()
-})

package/src/components/backdrop/__tests__/__snapshots__/CBackdrop.spec.tsx.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CBackdrop customize 1`] = `
-<div>
-  <div
-    class="modal-backdrop fade show"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CBackdrop customize 2 1`] = `
-<div>
-  <div
-    class="bazinga fade show"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CBackdrop component 1`] = `<div />`;

package/src/components/badge/__tests__/CBadge.spec.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CBadge } from '../index'
-
-test('loads and displays CBadge component', async () => {
-  const { container } = render(<CBadge color="primary">Test</CBadge>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CBadge customize', async () => {
-  const { container } = render(
-    <CBadge className="bazinga" color="warning" as="div" shape="rounded" textColor="white">
-      Test
-    </CBadge>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('badge')
-  expect(container.firstChild).toHaveClass('bg-warning')
-  expect(container.firstChild).toHaveClass('rounded')
-})

package/src/components/badge/__tests__/__snapshots__/CBadge.spec.tsx.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CBadge customize 1`] = `
-<div>
-  <div
-    class="badge bg-warning text-white rounded bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CBadge component 1`] = `
-<div>
-  <span
-    class="badge bg-primary"
-  >
-    Test
-  </span>
-</div>
-`;

package/src/components/breadcrumb/__tests__/CBreadcrumb.spec.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CBreadcrumb, CBreadcrumbItem } from '../index'
-
-test('loads and displays CBreadcrumb component', async () => {
-  const { container } = render(<CBreadcrumb></CBreadcrumb>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CBreadcrumb customize', async () => {
-  const { container } = render(
-    <CBreadcrumb className="bazinga">
-      <CBreadcrumbItem>Test A</CBreadcrumbItem>
-      <CBreadcrumbItem active={false}>Test B</CBreadcrumbItem>
-      <CBreadcrumbItem active={true}>Test C</CBreadcrumbItem>
-    </CBreadcrumb>
-  )
-  const ol = container.querySelector('ol')
-  expect(container).toMatchSnapshot()
-  expect(ol).toHaveClass('bazinga')
-})

package/src/components/breadcrumb/__tests__/CBreadcrumbItem.spec.tsx

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

package/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.tsx.snap

@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CBreadcrumb customize 1`] = `
-<div>
-  <nav
-    aria-label="breadcrumb"
-  >
-    <ol
-      class="breadcrumb bazinga"
-    >
-      <li
-        class="breadcrumb-item"
-      >
-        Test A
-      </li>
-      <li
-        class="breadcrumb-item"
-      >
-        Test B
-      </li>
-      <li
-        aria-current="page"
-        class="breadcrumb-item active"
-      >
-        Test C
-      </li>
-    </ol>
-  </nav>
-</div>
-`;
-
-exports[`loads and displays CBreadcrumb component 1`] = `
-<div>
-  <nav
-    aria-label="breadcrumb"
-  >
-    <ol
-      class="breadcrumb"
-    />
-  </nav>
-</div>
-`;

package/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumbItem.spec.tsx.snap

@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CBreadcrumbItem customize 1`] = `
-<div>
-  <li
-    aria-current="page"
-    class="breadcrumb-item active bazinga"
-  >
-    Test
-  </li>
-</div>
-`;
-
-exports[`loads and displays CBreadcrumbItem component 1`] = `
-<div>
-  <li
-    class="breadcrumb-item"
-  >
-    Test
-  </li>
-</div>
-`;