@coreui/react-pro 5.25.0 → 5.27.0

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

@@ -1,76 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CDropdown customize 1`] = `
-<div>
-  <li
-    class="nav-item dropdown dropstart bazinga"
-  >
-    Test
-  </li>
-</div>
-`;
-
-exports[`CDropdown example 1`] = `
-<div>
-  <div
-    class="dropdown"
-  >
-    <button
-      aria-expanded="false"
-      class="btn dropdown-toggle"
-      tabindex="0"
-      type="button"
-    >
-      Test
-    </button>
-    <ul
-      class="dropdown-menu"
-      role="menu"
-    >
-      <li>
-        <h6
-          class="dropdown-header"
-        >
-          A
-        </h6>
-      </li>
-      <li>
-        <a
-          class="dropdown-item"
-        >
-          B
-        </a>
-      </li>
-      <li>
-        <span
-          class="dropdown-item-text"
-        >
-          C
-        </span>
-      </li>
-      <li>
-        <hr
-          class="dropdown-divider"
-        />
-      </li>
-      <li>
-        <a
-          class="dropdown-item"
-        >
-          D
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CDropdown component 1`] = `
-<div>
-  <div
-    class="dropdown"
-  >
-    Test
-  </div>
-</div>
-`;

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

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CDropdownDivider customize 1`] = `
-<div>
-  <hr
-    class="dropdown-divider bazinga"
-  />
-</div>
-`;
-
-exports[`loads and displays CDropdownDivider component 1`] = `
-<div>
-  <hr
-    class="dropdown-divider"
-  />
-</div>
-`;

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

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

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

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

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

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

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

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CDropdownMenu customize 1`] = `
-<div>
-  <div
-    class="dropdown"
-  >
-    <div
-      class="dropdown-menu show bazinga"
-      role="menu"
-    >
-      Test
-    </div>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CDropdownMenu component 1`] = `
-<div>
-  <ul
-    class="dropdown-menu"
-    data-coreui-popper="static"
-    role="menu"
-  />
-</div>
-`;

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

@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CDropdownToggle customize 1`] = `
-<div>
-  <button
-    class="btn btn-primary dropdown-toggle dropdown-toggle-split"
-    tabindex="0"
-    type="button"
-  >
-    Test
-    <span
-      class="visually-hidden"
-    >
-      Toggle Dropdown
-    </span>
-  </button>
-</div>
-`;
-
-exports[`loads and displays CDropdownToggle component 1`] = `
-<div>
-  <button
-    class="btn dropdown-toggle"
-    tabindex="0"
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;

package/src/components/focus-trap/__tests__/CFocusTrap.spec.tsx

@@ -1,232 +0,0 @@
-import * as React from 'react'
-import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFocusTrap } from '../CFocusTrap'
-
-// Helper function to create a test component with focusable elements
-interface TestComponentProps {
-  children?: React.ReactNode
-  [key: string]: any
-}
-
-const TestComponent = ({ children, ...props }: TestComponentProps) => (
-  <CFocusTrap {...props}>
-    <div data-testid="container">
-      <button data-testid="first-button">First</button>
-      <input data-testid="input" type="text" placeholder="Input field" />
-      <a href="#" data-testid="link">
-        Link
-      </a>
-      <button data-testid="last-button">Last</button>
-      {children}
-    </div>
-  </CFocusTrap>
-)
-
-describe('CFocusTrap', () => {
-  beforeEach(() => {
-    // Reset document focus before each test
-    document.body.focus()
-  })
-
-  test('loads and displays CFocusTrap component', () => {
-    const { container } = render(
-      <CFocusTrap>
-        <div data-testid="test-content">Test Content</div>
-      </CFocusTrap>
-    )
-    expect(container).toMatchSnapshot()
-    expect(screen.getByTestId('test-content')).toBeInTheDocument()
-  })
-
-  test('CFocusTrap with custom props', () => {
-    const onActivate = jest.fn()
-    const onDeactivate = jest.fn()
-
-    const { container } = render(
-      <CFocusTrap
-        active={true}
-        restoreFocus={false}
-        focusFirstElement={false}
-        onActivate={onActivate}
-        onDeactivate={onDeactivate}
-      >
-        <div data-testid="custom-container">Custom Content</div>
-      </CFocusTrap>
-    )
-
-    expect(container).toMatchSnapshot()
-    expect(onActivate).toHaveBeenCalledTimes(1)
-  })
-
-  test('focuses container when focusFirstElement is false (default)', () => {
-    const mockFocus = jest.fn()
-    const originalFocus = HTMLElement.prototype.focus
-    HTMLElement.prototype.focus = mockFocus
-
-    render(<TestComponent active={true} />)
-
-    const container = screen.getByTestId('container')
-    expect(container).toBeInTheDocument()
-    expect(mockFocus).toHaveBeenCalledWith({ preventScroll: true })
-
-    HTMLElement.prototype.focus = originalFocus
-  })
-
-  test('does not trap focus when active is false', () => {
-    render(<TestComponent active={false} />)
-
-    // Focus should not be moved to any element
-    expect(screen.getByTestId('container')).not.toHaveFocus()
-    expect(screen.getByTestId('first-button')).not.toHaveFocus()
-  })
-
-  test('handles container with no tabbable elements', () => {
-    const mockFocus = jest.fn()
-    const originalFocus = HTMLElement.prototype.focus
-    HTMLElement.prototype.focus = mockFocus
-
-    render(
-      <CFocusTrap active={true}>
-        <div data-testid="empty-container">No focusable elements</div>
-      </CFocusTrap>
-    )
-
-    const container = screen.getByTestId('empty-container')
-    expect(container).toBeInTheDocument()
-    expect(mockFocus).toHaveBeenCalledWith({ preventScroll: true })
-
-    HTMLElement.prototype.focus = originalFocus
-  })
-
-  test('calls onActivate callback when trap becomes active', () => {
-    const onActivate = jest.fn()
-
-    const { rerender } = render(<TestComponent active={false} onActivate={onActivate} />)
-    expect(onActivate).not.toHaveBeenCalled()
-
-    // Re-render with active=true
-    rerender(<TestComponent active={true} onActivate={onActivate} />)
-    expect(onActivate).toHaveBeenCalledTimes(1)
-  })
-
-  test('calls onDeactivate callback when trap becomes inactive', () => {
-    const onDeactivate = jest.fn()
-
-    const { rerender } = render(<TestComponent active={true} onDeactivate={onDeactivate} />)
-    expect(onDeactivate).not.toHaveBeenCalled()
-
-    // Deactivate the trap
-    rerender(<TestComponent active={false} onDeactivate={onDeactivate} />)
-    expect(onDeactivate).toHaveBeenCalledTimes(1)
-  })
-
-  test('cleans up event listeners on unmount', () => {
-    const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener')
-
-    const { unmount } = render(<TestComponent active={true} />)
-
-    unmount()
-
-    expect(removeEventListenerSpy).toHaveBeenCalledWith('focusin', expect.any(Function), true)
-
-    removeEventListenerSpy.mockRestore()
-  })
-
-  test('focuses first element when focusFirstElement is true', () => {
-    const mockFocus = jest.fn()
-    const originalFocus = HTMLElement.prototype.focus
-    HTMLElement.prototype.focus = mockFocus
-
-    render(<TestComponent active={true} focusFirstElement={true} />)
-
-    const firstButton = screen.getByTestId('first-button')
-    expect(firstButton).toBeInTheDocument()
-    expect(mockFocus).toHaveBeenCalledWith({ preventScroll: true })
-
-    HTMLElement.prototype.focus = originalFocus
-  })
-
-  test('works with additionalContainer prop', () => {
-    const additionalRef = React.createRef<HTMLDivElement>()
-
-    render(
-      <div>
-        <CFocusTrap active={true} additionalContainer={additionalRef}>
-          <div data-testid="main-container">
-            <button data-testid="main-button">Main Button</button>
-          </div>
-        </CFocusTrap>
-        <div ref={additionalRef} data-testid="additional-container">
-          <button data-testid="additional-button">Additional Button</button>
-        </div>
-      </div>
-    )
-
-    const mainContainer = screen.getByTestId('main-container')
-    const additionalContainer = screen.getByTestId('additional-container')
-
-    expect(mainContainer).toBeInTheDocument()
-    expect(additionalContainer).toBeInTheDocument()
-  })
-
-  test('restores focus when restoreFocus is true', () => {
-    // Mock document.activeElement to simulate a focused element
-    const focusButton = document.createElement('button')
-    focusButton.dataset.testid = 'focus-button'
-    document.body.appendChild(focusButton)
-
-    const mockFocus = jest.fn()
-    focusButton.focus = mockFocus
-
-    // Mock document.activeElement
-    Object.defineProperty(document, 'activeElement', {
-      value: focusButton,
-      writable: true,
-      configurable: true,
-    })
-
-    const { rerender } = render(<TestComponent active={false} restoreFocus={true} />)
-
-    // Activate the trap (should store the previous focused element)
-    rerender(<TestComponent active={true} restoreFocus={true} />)
-
-    // Deactivate the trap (should restore focus)
-    rerender(<TestComponent active={false} restoreFocus={true} />)
-
-    // Verify focus restoration was attempted
-    expect(mockFocus).toHaveBeenCalledWith({ preventScroll: true })
-
-    focusButton.remove()
-  })
-
-  test('does not restore focus when restoreFocus is false', () => {
-    // Mock document.activeElement to simulate a focused element
-    const focusButton = document.createElement('button')
-    focusButton.dataset.testid = 'focus-button'
-    document.body.appendChild(focusButton)
-
-    const mockFocus = jest.fn()
-    focusButton.focus = mockFocus
-
-    // Mock document.activeElement
-    Object.defineProperty(document, 'activeElement', {
-      value: focusButton,
-      writable: true,
-      configurable: true,
-    })
-
-    const { rerender } = render(<TestComponent active={false} restoreFocus={false} />)
-
-    // Activate the trap (should store the previous focused element)
-    rerender(<TestComponent active={true} restoreFocus={false} />)
-
-    // Deactivate the trap (should NOT restore focus)
-    rerender(<TestComponent active={false} restoreFocus={false} />)
-
-    // Verify focus restoration was not attempted
-    expect(mockFocus).not.toHaveBeenCalledWith({ preventScroll: true })
-
-    focusButton.remove()
-  })
-})

package/src/components/focus-trap/__tests__/__snapshots__/CFocusTrap.spec.tsx.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CFocusTrap CFocusTrap with custom props 1`] = `
-<div>
-  <div
-    data-testid="custom-container"
-  >
-    Custom Content
-  </div>
-</div>
-`;
-
-exports[`CFocusTrap loads and displays CFocusTrap component 1`] = `
-<div>
-  <div
-    data-testid="test-content"
-  >
-    Test Content
-  </div>
-</div>
-`;

package/src/components/footer/__tests__/CFooter.spec.tsx

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

package/src/components/footer/__tests__/__snapshots__/CFooter.spec.tsx.snap

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

package/src/components/form/__tests__/CChipInput.spec.tsx

@@ -1,62 +0,0 @@
-import * as React from 'react'
-import { fireEvent, render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CChipInput } from '../index'
-
-test('loads and displays CChipInput component', async () => {
-  const { container } = render(<CChipInput defaultValue={['React', 'TypeScript']} />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CChipInput renders internal label', async () => {
-  const { getByText } = render(<CChipInput id="skillsInput" label="Skills:" />)
-
-  const label = getByText('Skills:')
-  expect(label).toHaveClass('chip-input-label')
-  expect(label).toHaveAttribute('for', 'skillsInput')
-})
-
-test('CChipInput adds chip on enter', async () => {
-  const onChange = jest.fn()
-  const { container } = render(<CChipInput onChange={onChange} />)
-
-  const input = container.querySelector('.chip-input-field') as HTMLInputElement
-  fireEvent.change(input, { target: { value: 'CoreUI' } })
-  fireEvent.keyDown(input, { key: 'Enter' })
-
-  expect(container.querySelectorAll('.chip')).toHaveLength(1)
-  expect(container.querySelector('.chip')?.textContent).toContain('CoreUI')
-  expect(onChange).toHaveBeenCalledWith(['CoreUI'])
-})
-
-test('CChipInput handles separators', async () => {
-  const { container } = render(<CChipInput separator="," />)
-  const input = container.querySelector('.chip-input-field') as HTMLInputElement
-
-  fireEvent.change(input, { target: { value: 'React,TypeScript,' } })
-
-  expect(container.querySelectorAll('.chip')).toHaveLength(2)
-  expect(input.value).toBe('')
-})
-
-test('CChipInput removes chip via remove button', async () => {
-  const onRemove = jest.fn()
-  const { container } = render(<CChipInput defaultValue={['React']} onRemove={onRemove} />)
-
-  const removeButton = container.querySelector('.chip-remove') as HTMLButtonElement
-  fireEvent.click(removeButton)
-
-  expect(container.querySelectorAll('.chip')).toHaveLength(0)
-  expect(onRemove).toHaveBeenCalledWith('React')
-})
-
-test('CChipInput selectable chips', async () => {
-  const onSelect = jest.fn()
-  const { container } = render(<CChipInput defaultValue={['React']} selectable onSelect={onSelect} />)
-
-  const chip = container.querySelector('.chip') as HTMLElement
-  fireEvent.click(chip)
-
-  expect(chip).toHaveClass('active')
-  expect(onSelect).toHaveBeenCalledWith(['React'])
-})

package/src/components/form/__tests__/CForm.spec.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CButton } from '../../button'
-import { CForm, CFormLabel, CFormInput, CFormText, CFormCheck } from '../index'
-
-test('loads and displays CForm component', async () => {
-  const { container } = render(<CForm>Test</CForm>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CForm customize', async () => {
-  const { container } = render(
-    <CForm className="bazinga" validated={true}>
-      Test
-    </CForm>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('was-validated')
-})
-
-test('CForm example', async () => {
-  const { container } = render(
-    <CForm>
-      <CFormLabel>A</CFormLabel>
-      <CFormInput type="email" aria-describedby="B" />
-      <CFormText>C</CFormText>
-      <CFormCheck label="D" />
-      <CButton type="submit" color="primary">
-        E
-      </CButton>
-    </CForm>
-  )
-  expect(container).toMatchSnapshot()
-})

package/src/components/form/__tests__/CFormCheck.spec.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CFormCheck } from '../index'
-
-test('loads and displays CFormCheck component', async () => {
-  const { container } = render(<CFormCheck />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CFormCheck customize button=false', async () => {
-  const { container } = render(
-    <CFormCheck className="bazinga" id="id" inline={true} label="label" type="radio" />
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('form-check')
-  expect(container.firstChild).toHaveClass('form-check-inline')
-})
-
-test('CFormCheck customize button=true', async () => {
-  const { container } = render(
-    <CFormCheck
-      button={{ color: 'primary', size: 'lg', shape: 'rounded', variant: 'ghost' }}
-      className="bazinga"
-      id="id"
-      inline={true}
-      label="label"
-      type="radio"
-    />
-  )
-  expect(container).toMatchSnapshot()
-})