@coreui/react 5.5.0 → 5.6.0

package/src/components/offcanvas/__tests__/COffcanvas.spec.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { COffcanvas } from '../../../index'
+
+import { COffcanvas } from '../index'
 
 test('loads and displays COffcanvas component', async () => {
   const { container } = render(<COffcanvas placement="top" />)
@@ -19,7 +20,7 @@ test('COffcanvas customize one', async () => {
       visible={false}
     >
       Test
-    </COffcanvas>,
+    </COffcanvas>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('offcanvas')
@@ -29,7 +30,8 @@ test('COffcanvas customize one', async () => {
 })
 
 test('COffcanvas customize and event on click backdrop', async () => {
-  // jest.useFakeTimers()
+  jest.useFakeTimers()
+
   const onHide = jest.fn()
   const { container } = render(
     <COffcanvas
@@ -42,8 +44,9 @@ test('COffcanvas customize and event on click backdrop', async () => {
       onHide={onHide}
     >
       Test
-    </COffcanvas>,
+    </COffcanvas>
   )
+
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('offcanvas')
   expect(container.firstChild).toHaveClass('offcanvas-end')
@@ -51,18 +54,32 @@ test('COffcanvas customize and event on click backdrop', async () => {
   expect(container.firstChild).toHaveClass('show')
   expect(container.firstChild).toHaveTextContent('Test')
   expect(onHide).toHaveBeenCalledTimes(0)
+
   const backdrop = document.querySelector('.offcanvas-backdrop')
+
   if (backdrop !== null) {
-    fireEvent.click(backdrop)
+    act(() => {
+      fireEvent.click(backdrop)
+      jest.runAllTimers()
+    })
   }
+
   expect(onHide).toHaveBeenCalledTimes(1)
   expect(container.firstChild).toHaveClass('show')
   expect(container.firstChild).toHaveClass('hiding')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
   expect(container.firstChild).not.toHaveClass('show')
+
+  jest.useRealTimers()
 })
 
 test('COffcanvas customize and event on keypress', async () => {
+  jest.useFakeTimers()
+
   const onHide = jest.fn()
   const { container } = render(
     <COffcanvas
@@ -75,28 +92,39 @@ test('COffcanvas customize and event on keypress', async () => {
       onHide={onHide}
     >
       Test
-    </COffcanvas>,
+    </COffcanvas>
   )
+
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('offcanvas')
   expect(container.firstChild).toHaveClass('offcanvas-end')
   expect(container.firstChild).toHaveClass('bazinga')
   expect(container.firstChild).toHaveClass('show')
   expect(onHide).toHaveBeenCalledTimes(0)
+
   const canvas = document.querySelector('.offcanvas')
-  if (canvas === null) {
-    expect(true).toBe(false)
-  } else {
-    fireEvent.keyDown(canvas, {
-      key: 'Escape',
-      code: 'Escape',
-      keyCode: 27,
-      charCode: 27,
+
+  if (canvas !== null) {
+    act(() => {
+      fireEvent.keyDown(canvas, {
+        key: 'Escape',
+        code: 'Escape',
+        keyCode: 27,
+        charCode: 27,
+      })
+      jest.runAllTimers()
     })
   }
+
   expect(onHide).toHaveBeenCalledTimes(1)
   expect(container.firstChild).toHaveClass('show')
   expect(container.firstChild).toHaveClass('hiding')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    jest.runAllTimers()
+  })
+
   expect(container.firstChild).not.toHaveClass('show')
+
+  jest.useRealTimers()
 })

package/src/components/offcanvas/__tests__/COffcanvasBody.spec.tsx

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

package/src/components/offcanvas/__tests__/COffcanvasHeader.spec.tsx

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

package/src/components/offcanvas/__tests__/COffcanvasTitle.spec.tsx

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

package/src/components/pagination/__tests__/CPagination.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CPagination, CPaginationItem } from '../../../index'
+import { CPagination, CPaginationItem } from '../index'
 
 test('loads and displays CPagination component', async () => {
   const { container } = render(<CPagination>Test</CPagination>)

package/src/components/pagination/__tests__/CPaginationItem.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CPaginationItem } from '../../../index'
+import { CPaginationItem } from '../index'
 
 test('loads and displays CPaginationItem component', async () => {
   const { container } = render(<CPaginationItem>Test</CPaginationItem>)

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CPlaceholder } from '../../../index'
+import { CPlaceholder } from '../index'
 
 test('loads and displays CPlaceholder component', async () => {
   const { container } = render(<CPlaceholder color="primary" />)

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

@@ -1,84 +1,92 @@
 import * as React from 'react'
-import { act, render, fireEvent } from '@testing-library/react'
+import { act, cleanup, render, fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CPopover, CButton } from '../../../index'
+
+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('loads and displays CPopover component', async () => {
   const { container } = render(
     <CPopover content="A">
       <CButton color="primary">Test</CButton>
-    </CPopover>,
+    </CPopover>
   )
   expect(container).toMatchSnapshot()
 })
 
 test('CPopover customize', async () => {
   jest.useFakeTimers()
-  let arr, element
-  const { container } = render(
+
+  render(
     <CPopover content="content" title="title" trigger="click" placement="right">
       <CButton color="primary">Test</CButton>
     </CPopover>,
-    { container: document.body },
+    { container: container! }
   )
-  const btn = document.querySelector('.btn')
+
+  const btn = screen.getByRole('button', { name: /test/i })
+
   act(() => {
-    if (btn !== null) {
-      fireEvent.click(btn)
-    }
+    fireEvent.click(btn)
+    jest.runAllTimers()
   })
-  jest.runAllTimers()
-  expect(container).toMatchSnapshot()
-  let arrLength = container.getElementsByClassName('popover').length
-  expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('bs-popover-auto').length
-  expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('popover-arrow').length
-  expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('popover-header').length
-  expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('popover-body').length
-  expect(arrLength).toBe(1)
-  arr = container.getElementsByClassName('popover-header')
-  if (arr.length > 0) {
-    element = arr[0]
-    expect(element.innerHTML).toBe('title')
-  } else {
-    expect(true).toBe(false)
-  }
-  arr = container.getElementsByClassName('popover-body')
-  if (arr.length > 0) {
-    element = arr[0]
-    expect(element.innerHTML).toBe('content')
-  } else {
-    expect(true).toBe(false)
-  }
+
+  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 onToggle', async () => {
-//   let btn
-//   jest.useFakeTimers()
-//   const onToggle = jest.fn()
-//   render(
-//     <CPopover onToggle={onToggle} content="content" trigger="click">
-//       <CButton>Test</CButton>
-//     </CPopover>,
-//   )
-//   expect(onToggle).toHaveBeenCalledTimes(0)
-//   btn = document.querySelector('.btn')
-//   if (btn !== null) {
-//     fireEvent.click(btn)
-//   }
-//   jest.runAllTimers()
-//   expect(onToggle).toHaveBeenCalledTimes(1)
-//   btn = document.querySelector('.btn')
-//   if (btn !== null) {
-//     fireEvent.click(btn)
-//   }
-//   jest.runAllTimers()
-//   expect(onToggle).toHaveBeenCalledTimes(2)
-//   jest.useRealTimers()
-// })
-
-//TODO: test visible on focus, click and mouseEnter
+test('CPopover onShow and onHide', async () => {
+  jest.useFakeTimers()
+
+  render(
+    <CPopover content="content" title="title" trigger="click" placement="right" visible={true}>
+      <CButton color="primary">Test</CButton>
+    </CPopover>,
+    { container: container! }
+  )
+
+  const onShow = jest.fn()
+  const onHide = jest.fn()
+
+  const btn = screen.getByRole('button', { name: /test/i })
+
+  expect(onShow).toHaveBeenCalledTimes(0)
+  expect(onHide).toHaveBeenCalledTimes(0)
+
+  act(() => {
+    fireEvent.click(btn)
+    jest.runAllTimers()
+  })
+
+  expect(onShow).toHaveBeenCalledTimes(1)
+  expect(onHide).toHaveBeenCalledTimes(0)
+
+  act(() => {
+    fireEvent.click(btn)
+    jest.runAllTimers()
+  })
+
+  expect(onShow).toHaveBeenCalledTimes(1)
+  expect(onHide).toHaveBeenCalledTimes(1)
+
+  jest.useRealTimers()
+})

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

@@ -1,37 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CPopover customize 1`] = `
-<body>
-  <button
-    class="btn btn-primary"
-    type="button"
-  >
-    Test
-  </button>
-  <div
-    class="popover bs-popover-auto fade"
-    id="popover:r1:"
-    role="tooltip"
-    style="position: absolute; left: 0px; top: 0px; margin: 0px;"
-  >
-    <div
-      class="popover-arrow"
-      style="position: absolute;"
-    />
-    <div
-      class="popover-header"
-    >
-      title
-    </div>
-    <div
-      class="popover-body"
-    >
-      content
-    </div>
-  </div>
-</body>
-`;
-
 exports[`loads and displays CPopover component 1`] = `
 <div>
   <button

package/src/components/progress/CProgress.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CProgressStackedContext } from './CProgressStacked'
+import { CProgressStackedContext } from './CProgressStackedContext'
 import { CProgressBar, CProgressBarProps } from './CProgressBar'
 
 export interface CProgressProps

package/src/components/progress/CProgressBar.tsx

@@ -2,10 +2,11 @@ import React, { forwardRef, HTMLAttributes, useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CProgressStackedContext } from './CProgressStacked'
 import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
 
+import { CProgressStackedContext } from './CProgressStackedContext'
+
 export interface CProgressBarProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Use to animate the stripes right to left via CSS3 animations.

package/src/components/progress/CProgressStacked.tsx

@@ -1,7 +1,9 @@
-import React, { createContext, forwardRef, HTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { CProgressStackedContext } from './CProgressStackedContext'
+
 export interface CProgressStackedProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the component.
@@ -9,12 +11,6 @@ export interface CProgressStackedProps extends HTMLAttributes<HTMLDivElement> {
   className?: string
 }
 
-export interface CProgressStackedContextProps {
-  stacked?: boolean
-}
-
-export const CProgressStackedContext = createContext({} as CProgressStackedContextProps)
-
 export const CProgressStacked = forwardRef<HTMLDivElement, CProgressStackedProps>(
   ({ children, className, ...rest }, ref) => {
     return (
@@ -28,7 +24,7 @@ export const CProgressStacked = forwardRef<HTMLDivElement, CProgressStackedProps
         </CProgressStackedContext.Provider>
       </div>
     )
-  },
+  }
 )
 
 CProgressStacked.propTypes = {

package/src/components/progress/CProgressStackedContext.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react'
+
+export interface CProgressStackedContextProps {
+  stacked?: boolean
+}
+
+export const CProgressStackedContext = createContext({} as CProgressStackedContextProps)

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CProgress } from '../../../index'
+import { CProgress } from '../index'
 
 test('loads and displays CProgress component', async () => {
   const { container } = render(<CProgress color="warning">Test</CProgress>)

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CProgressBar } from '../../../index'
+import { CProgressBar } from '../index'
 
 test('loads and displays CProgressBar component', async () => {
   const { container } = render(<CProgressBar color="warning">Test</CProgressBar>)

package/src/components/sidebar/CSidebarNav.tsx

@@ -1,5 +1,4 @@
 import React, {
-  createContext,
   ElementType,
   forwardRef,
   HTMLAttributes,
@@ -10,6 +9,12 @@ import React, {
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import type { CNavGroupProps } from '../nav/CNavGroup'
+import type { CNavLinkProps } from '../nav/CNavLink'
+import type { CNavItemProps } from '../nav/CNavItem'
+
+import { CSidebarNavContext } from './CSidebarNavContext'
+
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
 export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
@@ -25,42 +30,37 @@ export interface CSidebarNavProps extends HTMLAttributes<HTMLUListElement> {
   className?: string
 }
 
-interface ContextProps {
-  visibleGroup: string
-  setVisibleGroup: React.Dispatch<React.SetStateAction<string | undefined>>
+const isNavElement = (
+  child: ReactNode
+): child is ReactElement<CNavGroupProps | CNavLinkProps | CNavItemProps> => {
+  if (!React.isValidElement(child)) return false
+  const type = child.type as { displayName?: string }
+  return (
+    type.displayName === 'CNavGroup' ||
+    type.displayName === 'CNavLink' ||
+    type.displayName === 'CNavItem'
+  )
 }
 
-export const CNavContext = createContext({} as ContextProps)
-
 const recursiveClone = (children: ReactNode, id?: string, updateId?: boolean): ReactNode => {
-  return React.Children.map(children, (child: ReactNode, index: number) => {
-    if (
-      !React.isValidElement(child) ||
-      // @ts-expect-error the `children` exist in each component. TODO: resolve
-      (child.type.displayName !== 'CNavGroup' &&
-        // @ts-expect-error the `children` exist in each component. TODO: resolve
-        child.type.displayName !== 'CNavLink' &&
-        // @ts-expect-error the `children` exist in each component. TODO: resolve
-        child.type.displayName !== 'CNavItem')
-    ) {
+  return React.Children.map(children, (child, index) => {
+    if (!isNavElement(child)) {
       return child
     }
 
     const _id = id ? (updateId ? `${id}.${index}` : `${id}`) : `${index}`
 
-    if (child.props && child.props.children) {
-      return React.cloneElement(child as ReactElement<any>, {
+    if (child.props.children) {
+      const type = child.type as { displayName?: string }
+      const shouldUpdateId = type.displayName !== 'CNavItem'
+
+      return React.cloneElement(child, {
         idx: _id,
-        children: recursiveClone(
-          child.props.children,
-          _id,
-          // @ts-expect-error the `displayName` exist in each component. TODO: resolve
-          child.type.displayName === 'CNavItem' ? false : true,
-        ),
+        children: recursiveClone(child.props.children, _id, shouldUpdateId),
       })
     }
 
-    return React.cloneElement(child as ReactElement<any>, {
+    return React.cloneElement(child, {
       idx: _id,
     })
   })
@@ -77,11 +77,11 @@ export const CSidebarNav: PolymorphicRefForwardingComponent<'ul', CSidebarNavPro
   }
 
   return (
-    <CNavContext.Provider value={CNavContextValues}>
+    <CSidebarNavContext.Provider value={CNavContextValues}>
       <Component className={classNames('sidebar-nav', className)} ref={ref} {...rest}>
         {recursiveClone(children)}
       </Component>
-    </CNavContext.Provider>
+    </CSidebarNavContext.Provider>
   )
 })
 

package/src/components/sidebar/CSidebarNavContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+export interface CSidebarNavContextProps {
+  visibleGroup: string
+  setVisibleGroup: React.Dispatch<React.SetStateAction<string | undefined>>
+}
+
+export const CSidebarNavContext = createContext({} as CSidebarNavContextProps)

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

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import {
   CSidebar /* , CSidebarNav, CNavLink, CNavGroup, CNavGroupItems, CNavItem */,
-} from '../../../index'
+} from '../index'
 
 test('loads and displays CSidebar component', async () => {
   const { container } = render(<CSidebar>Test</CSidebar>)

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CSidebarBrand } from '../../../index'
+import { CSidebarBrand } from '../index'
 
 test('loads and displays CSidebarBrand component', async () => {
   const { container } = render(<CSidebarBrand color="primary">Test</CSidebarBrand>)

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CSidebarFooter } from '../../../index'
+import { CSidebarFooter } from '../index'
 
 test('loads and displays CSidebarFooter component', async () => {
   const { container } = render(<CSidebarFooter>Test</CSidebarFooter>)

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CSidebarHeader } from '../../../index'
+import { CSidebarHeader } from '../index'
 
 test('loads and displays CSidebarHeader component', async () => {
   const { container } = render(<CSidebarHeader>Test</CSidebarHeader>)

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

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CSidebarNav } from '../../../index'
+import { CSidebarNav } from '../index'
 
 test('loads and displays CSidebarNav component', async () => {
   const { container } = render(<CSidebarNav>Test</CSidebarNav>)

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

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

package/src/components/spinner/__tests__/CSpinner.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CSpinner } from '../../../index'
+import { CSpinner } from '../index'
 
 test('loads and displays CSpinner component', async () => {
   const { container } = render(<CSpinner>Test</CSpinner>)

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

@@ -10,7 +10,7 @@ import {
   CTableBody,
   CTableDataCell,
   CTableFoot,
-} from '../../../index'
+} from '../index'
 
 test('loads and displays CTable component', async () => {
   const { container } = render(<CTable />)