@coreui/react-pro 5.26.0 → 5.27.1

package/src/components/placeholder/__tests__/__snapshots__/CPlaceholder.spec.tsx.snap

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CPlaceholder customize 1`] = `
-<div>
-  <span
-    class="placeholder-glow bg-secondary placeholder-lg col-sm-7 bazinga"
-  />
-</div>
-`;
-
-exports[`loads and displays CPlaceholder component 1`] = `
-<div>
-  <span
-    class="placeholder bg-primary"
-  />
-</div>
-`;

package/src/components/popover/__tests__/CPopover.spec.tsx

@@ -1,173 +0,0 @@
-import * as React from 'react'
-import { act, cleanup, render, fireEvent, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
-
-import { CButton } from '../../button'
-import { CPopover } from '../index'
-
-let container: HTMLDivElement | null = null
-
-beforeEach(() => {
-  container = document.createElement('div')
-  document.body.appendChild(container)
-})
-
-afterEach(() => {
-  cleanup()
-})
-
-test('CPopover stays visible when re-hovered during the hide delay', async () => {
-  jest.useFakeTimers()
-
-  render(
-    <CPopover trigger="hover" delay={{ show: 0, hide: 300 }} content="content">
-      <CButton color="primary">Test</CButton>
-    </CPopover>
-  )
-
-  const btn = screen.getByRole('button', { name: /test/i })
-
-  act(() => {
-    fireEvent.mouseOver(btn)
-  })
-
-  act(() => {
-    jest.runAllTimers()
-  })
-
-  expect(document.querySelector('.popover')).toHaveClass('show')
-
-  act(() => {
-    fireEvent.mouseOut(btn)
-    jest.advanceTimersByTime(100)
-  })
-
-  act(() => {
-    fireEvent.mouseOver(btn)
-    jest.advanceTimersByTime(1000)
-  })
-
-  expect(document.querySelector('.popover')).toHaveClass('show')
-
-  jest.useRealTimers()
-})
-
-test('CPopover preserves event handlers of the child element', async () => {
-  jest.useFakeTimers()
-
-  const onClick = jest.fn()
-  const onMouseEnter = jest.fn()
-
-  render(
-    <CPopover trigger={['hover', 'click']} content="content">
-      <CButton color="primary" onClick={onClick} onMouseEnter={onMouseEnter}>
-        Test
-      </CButton>
-    </CPopover>
-  )
-
-  const btn = screen.getByRole('button', { name: /test/i })
-
-  act(() => {
-    fireEvent.mouseOver(btn)
-    jest.runAllTimers()
-  })
-
-  act(() => {
-    fireEvent.click(btn)
-    jest.runAllTimers()
-  })
-
-  expect(onMouseEnter).toHaveBeenCalledTimes(1)
-  expect(onClick).toHaveBeenCalledTimes(1)
-
-  jest.useRealTimers()
-})
-
-test('loads and displays CPopover component', async () => {
-  const { container } = render(
-    <CPopover content="A">
-      <CButton color="primary">Test</CButton>
-    </CPopover>
-  )
-  expect(container).toMatchSnapshot()
-})
-
-test('CPopover customize', async () => {
-  jest.useFakeTimers()
-
-  render(
-    <CPopover content="content" title="title" trigger="click" placement="right">
-      <CButton color="primary">Test</CButton>
-    </CPopover>,
-    { container: container! }
-  )
-
-  const btn = screen.getByRole('button', { name: /test/i })
-
-  act(() => {
-    fireEvent.click(btn)
-    jest.runAllTimers()
-  })
-
-  expect(document.querySelector('.popover')).toBeInTheDocument()
-  expect(document.querySelector('.bs-popover-auto')).toBeInTheDocument()
-  expect(document.querySelector('.popover-arrow')).toBeInTheDocument()
-  expect(document.querySelector('.popover-header')).toBeInTheDocument()
-  expect(document.querySelector('.popover-body')).toBeInTheDocument()
-
-  expect(document.querySelector('.popover-header')?.innerHTML).toBe('title')
-  expect(document.querySelector('.popover-body')?.innerHTML).toBe('content')
-
-  jest.useRealTimers()
-})
-
-test('CPopover onShow and onHide', async () => {
-  jest.useFakeTimers()
-
-  const onShow = jest.fn()
-  const onHide = jest.fn()
-
-  render(
-    <CPopover
-      content="content"
-      title="title"
-      trigger="click"
-      placement="right"
-      onShow={onShow}
-      onHide={onHide}
-    >
-      <CButton color="primary">Test</CButton>
-    </CPopover>,
-    { container: container! }
-  )
-
-  const btn = screen.getByRole('button', { name: /test/i })
-
-  expect(onShow).toHaveBeenCalledTimes(0)
-  expect(onHide).toHaveBeenCalledTimes(0)
-
-  act(() => {
-    fireEvent.click(btn)
-  })
-
-  act(() => {
-    jest.runAllTimers()
-  })
-
-  expect(onShow).toHaveBeenCalledTimes(1)
-  expect(onHide).toHaveBeenCalledTimes(0)
-
-  act(() => {
-    fireEvent.click(btn)
-  })
-
-  act(() => {
-    jest.runAllTimers()
-  })
-
-  expect(onShow).toHaveBeenCalledTimes(1)
-  expect(onHide).toHaveBeenCalledTimes(1)
-
-  jest.useRealTimers()
-})

package/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`loads and displays CPopover component 1`] = `
-<div>
-  <button
-    class="btn btn-primary"
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;

package/src/components/progress/__tests__/CProgress.spec.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CProgress } from '../index'
-
-test('loads and displays CProgress component', async () => {
-  const { container } = render(<CProgress color="warning">Test</CProgress>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CProgress customize', async () => {
-  const { container } = render(
-    <CProgress className="bazinga" height={100} color="warning" value={50}>
-      Test
-    </CProgress>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('progress')
-  expect(container.firstChild).toHaveStyle(`height: 100px`)
-})

package/src/components/progress/__tests__/CProgressBar.spec.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CProgressBar } from '../index'
-
-test('loads and displays CProgressBar component', async () => {
-  const { container } = render(<CProgressBar color="warning">Test</CProgressBar>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CProgressBar customize', async () => {
-  const { container } = render(
-    <CProgressBar color="warning" className="bazinga" animated={true} value={50} variant="striped">
-      Test
-    </CProgressBar>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('progress-bar')
-
-  expect(container.firstChild).toHaveClass('bg-warning')
-  expect(container.firstChild).toHaveClass('progress-bar-striped')
-  expect(container.firstChild).toHaveClass('progress-bar-animated')
-  expect(container.firstChild).toHaveStyle(`width: 50%`)
-})

package/src/components/progress/__tests__/__snapshots__/CProgress.spec.tsx.snap

@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CProgress customize 1`] = `
-<div>
-  <div
-    aria-valuemax="100"
-    aria-valuemin="0"
-    aria-valuenow="50"
-    class="progress bazinga"
-    role="progressbar"
-    style="height: 100px;"
-  >
-    <div
-      class="progress-bar bg-warning"
-      style="width: 50%;"
-    >
-      Test
-    </div>
-  </div>
-</div>
-`;
-
-exports[`loads and displays CProgress component 1`] = `
-<div>
-  <div
-    class="progress"
-  >
-    <div
-      class="progress-bar bg-warning"
-      style="width: 0%;"
-    >
-      Test
-    </div>
-  </div>
-</div>
-`;

package/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.tsx.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CProgressBar customize 1`] = `
-<div>
-  <div
-    class="progress-bar bg-warning progress-bar-striped progress-bar-animated bazinga"
-    style="width: 50%;"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CProgressBar component 1`] = `
-<div>
-  <div
-    class="progress-bar bg-warning"
-    style="width: 0%;"
-  >
-    Test
-  </div>
-</div>
-`;

package/src/components/search-button/__tests__/CSearchButton.spec.tsx

@@ -1,95 +0,0 @@
-import * as React from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CSearchButton } from '../index'
-
-const originalPlatform = window.navigator.platform
-
-beforeEach(() => {
-  Object.defineProperty(window.navigator, 'platform', {
-    configurable: true,
-    value: 'MacIntel',
-  })
-})
-
-afterEach(() => {
-  Object.defineProperty(window.navigator, 'platform', {
-    configurable: true,
-    value: originalPlatform,
-  })
-})
-
-test('loads and displays CSearchButton component', async () => {
-  const { container } = render(<CSearchButton />)
-  expect(container).toMatchSnapshot()
-})
-
-test('CSearchButton customize', async () => {
-  const { container } = render(
-    <CSearchButton className="bazinga" placeholder="Command palette" shortcut="meta+k,ctrl+k" />
-  )
-
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('search-button')
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(screen.getByText('Command palette')).toBeInTheDocument()
-  expect(screen.getByText('⌘')).toBeInTheDocument()
-  expect(screen.getByText('K')).toBeInTheDocument()
-})
-
-test('CSearchButton triggers click on matching shortcut', async () => {
-  const onClick = jest.fn()
-  const onTrigger = jest.fn()
-
-  render(<CSearchButton onClick={onClick} onTrigger={onTrigger} shortcut="meta+k,ctrl+k" />)
-
-  fireEvent.keyDown(document, { key: 'k', metaKey: true })
-
-  expect(onClick).toHaveBeenCalledTimes(0)
-  expect(onTrigger).toHaveBeenCalledTimes(1)
-})
-
-test('CSearchButton ignores plain typing in editable fields', async () => {
-  const onClick = jest.fn()
-
-  render(
-    <>
-      <input aria-label="Search input" />
-      <CSearchButton onClick={onClick} shortcut="k" />
-    </>
-  )
-
-  fireEvent.keyDown(screen.getByLabelText('Search input'), { key: 'k' })
-
-  expect(onClick).not.toHaveBeenCalled()
-})
-
-test('CSearchButton highlights active shortcut keys', async () => {
-  render(<CSearchButton shortcut="meta+k,ctrl+k" />)
-
-  fireEvent.keyDown(document, { key: 'Meta', metaKey: true })
-
-  expect(screen.getByText('⌘')).toHaveClass('active')
-
-  fireEvent.keyDown(document, { key: 'k', metaKey: true })
-
-  expect(screen.getByText('⌘')).toHaveClass('active')
-  expect(screen.getByText('K')).toHaveClass('active')
-
-  fireEvent.keyUp(document, { key: 'k' })
-
-  expect(screen.getByText('⌘')).not.toHaveClass('active')
-  expect(screen.getByText('K')).not.toHaveClass('active')
-})
-
-test('CSearchButton triggers onTrigger on click', async () => {
-  const onClick = jest.fn()
-  const onTrigger = jest.fn()
-
-  render(<CSearchButton onClick={onClick} onTrigger={onTrigger} />)
-
-  fireEvent.click(screen.getByRole('button'))
-
-  expect(onClick).toHaveBeenCalledTimes(1)
-  expect(onTrigger).toHaveBeenCalledTimes(1)
-})

package/src/components/search-button/__tests__/__snapshots__/CSearchButton.spec.tsx.snap

@@ -1,87 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CSearchButton customize 1`] = `
-<div>
-  <button
-    class="search-button bazinga"
-    type="button"
-  >
-    <svg
-      aria-hidden="true"
-      class="search-button-icon"
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="m479.6 399.716-81.084-81.084-62.368-25.767A175 175 0 0 0 368 192c0-97.047-78.953-176-176-176S16 94.953 16 192s78.953 176 176 176a175.03 175.03 0 0 0 101.619-32.377l25.7 62.2 81.081 81.088a56 56 0 1 0 79.2-79.195M48 192c0-79.4 64.6-144 144-144s144 64.6 144 144-64.6 144-144 144S48 271.4 48 192m408.971 264.284a24.03 24.03 0 0 1-33.942 0l-76.572-76.572-23.894-57.835 57.837 23.894 76.573 76.572a24.03 24.03 0 0 1-.002 33.941"
-        fill="currentColor"
-      />
-    </svg>
-    <span
-      class="search-button-placeholder"
-    >
-      Command palette
-    </span>
-    <span
-      aria-hidden="true"
-      class="search-button-keys"
-    >
-      <span
-        class="search-button-key"
-        data-coreui-search-button-key="⌘"
-      >
-        ⌘
-      </span>
-      <span
-        class="search-button-key"
-        data-coreui-search-button-key="K"
-      >
-        K
-      </span>
-    </span>
-  </button>
-</div>
-`;
-
-exports[`loads and displays CSearchButton component 1`] = `
-<div>
-  <button
-    class="search-button"
-    type="button"
-  >
-    <svg
-      aria-hidden="true"
-      class="search-button-icon"
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="m479.6 399.716-81.084-81.084-62.368-25.767A175 175 0 0 0 368 192c0-97.047-78.953-176-176-176S16 94.953 16 192s78.953 176 176 176a175.03 175.03 0 0 0 101.619-32.377l25.7 62.2 81.081 81.088a56 56 0 1 0 79.2-79.195M48 192c0-79.4 64.6-144 144-144s144 64.6 144 144-64.6 144-144 144S48 271.4 48 192m408.971 264.284a24.03 24.03 0 0 1-33.942 0l-76.572-76.572-23.894-57.835 57.837 23.894 76.573 76.572a24.03 24.03 0 0 1-.002 33.941"
-        fill="currentColor"
-      />
-    </svg>
-    <span
-      class="search-button-placeholder"
-    >
-      Search
-    </span>
-    <span
-      aria-hidden="true"
-      class="search-button-keys"
-    >
-      <span
-        class="search-button-key"
-        data-coreui-search-button-key="⌘"
-      >
-        ⌘
-      </span>
-      <span
-        class="search-button-key"
-        data-coreui-search-button-key="/"
-      >
-        /
-      </span>
-    </span>
-  </button>
-</div>
-`;

package/src/components/sidebar/__tests__/CSidebar.spec.tsx

@@ -1,72 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import {
-  CSidebar /* , CSidebarNav, CNavLink, CNavGroup, CNavGroupItems, CNavItem */,
-} from '../index'
-
-test('loads and displays CSidebar component', async () => {
-  const { container } = render(<CSidebar>Test</CSidebar>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CSidebar customize show', async () => {
-  const { container } = render(
-    <CSidebar
-      className="bazinga"
-      narrow={true}
-      position="fixed"
-      visible={true}
-      unfoldable={true}
-      overlaid={true}
-    >
-      Test
-    </CSidebar>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('sidebar')
-  expect(container.firstChild).toHaveClass('sidebar-narrow')
-  expect(container.firstChild).toHaveClass('sidebar-overlaid')
-  expect(container.firstChild).toHaveClass('sidebar-fixed')
-  expect(container.firstChild).toHaveClass('sidebar-narrow-unfoldable')
-  // expect(container.firstChild).toHaveClass('show')
-})
-
-test('CSidebar customize hide', async () => {
-  const { container } = render(
-    <CSidebar className="bazinga" position="sticky" visible={false} overlaid={false}>
-      Test
-    </CSidebar>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('sidebar')
-  expect(container.firstChild).toHaveClass('sidebar-sticky')
-})
-
-test('CSidebar removes the exact transitionend listener reference on cleanup', async () => {
-  const addSpy = jest.spyOn(HTMLElement.prototype, 'addEventListener')
-  const removeSpy = jest.spyOn(HTMLElement.prototype, 'removeEventListener')
-
-  const { container, unmount } = render(<CSidebar>Test</CSidebar>)
-  const sidebar = container.querySelector('.sidebar')
-  unmount()
-
-  const handlersOn = (spy: jest.SpyInstance) =>
-    spy.mock.calls
-      .map((args, index) => ({ args, context: spy.mock.contexts[index] }))
-      .filter(({ args, context }) => args[0] === 'transitionend' && context === sidebar)
-      .map(({ args }) => args[1])
-
-  const added = handlersOn(addSpy)
-  const removed = handlersOn(removeSpy)
-
-  expect(added.length).toBeGreaterThan(0)
-  for (const handler of added) {
-    expect(removed).toContain(handler)
-  }
-
-  addSpy.mockRestore()
-  removeSpy.mockRestore()
-})

package/src/components/sidebar/__tests__/CSidebarBrand.spec.tsx

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

package/src/components/sidebar/__tests__/CSidebarFooter.spec.tsx

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

package/src/components/sidebar/__tests__/CSidebarHeader.spec.tsx

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

package/src/components/sidebar/__tests__/CSidebarNav.spec.tsx

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

package/src/components/sidebar/__tests__/CSidebarToggler.spec.tsx

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

package/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.tsx.snap

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CSidebar customize hide 1`] = `
-<div>
-  <div
-    class="sidebar sidebar-sticky hide bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`CSidebar customize show 1`] = `
-<div>
-  <div
-    class="sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-narrow-unfoldable show bazinga"
-  >
-    Test
-  </div>
-</div>
-`;
-
-exports[`loads and displays CSidebar component 1`] = `
-<div>
-  <div
-    class="sidebar"
-  >
-    Test
-  </div>
-</div>
-`;