@coreui/react 5.5.0 → 5.7.0

package/src/components/modal/__tests__/CModalTitle.spec.tsx

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

package/src/components/nav/CNav.tsx

@@ -21,7 +21,7 @@ export interface CNavProps
   /**
    * Set the nav variant to tabs or pills.
    */
-  variant?: 'pills' | 'tabs' | 'underline' | 'underline-border'
+  variant?: 'enclosed' | 'enclosed-pills' | 'pills' | 'tabs' | 'underline' | 'underline-border'
 }
 
 export const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardRef<
@@ -32,11 +32,12 @@ export const CNav: PolymorphicRefForwardingComponent<'ul', CNavProps> = forwardR
     <Component
       className={classNames(
         'nav',
+        variant === 'enclosed-pills' && 'nav-enclosed', // Enclosed pills variant required for `.nav-enclosed` class
         {
           [`nav-${layout}`]: layout,
           [`nav-${variant}`]: variant,
         },
-        className,
+        className
       )}
       role="navigation"
       {...rest}
@@ -52,7 +53,14 @@ CNav.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   layout: PropTypes.oneOf(['fill', 'justified']),
-  variant: PropTypes.oneOf(['pills', 'tabs', 'underline', 'underline-border']),
+  variant: PropTypes.oneOf([
+    'enclosed',
+    'enclosed-pills',
+    'pills',
+    'tabs',
+    'underline',
+    'underline-border',
+  ]),
 }
 
 CNav.displayName = 'CNav'

package/src/components/nav/CNavGroup.tsx

@@ -16,7 +16,7 @@ import type { TransitionStatus } from 'react-transition-group'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-import { CNavContext } from '../sidebar/CSidebarNav'
+import { CSidebarNavContext } from '../sidebar/CSidebarNavContext'
 
 export interface CNavGroupProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
   /**
@@ -62,7 +62,7 @@ export const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const navItemsRef = useRef<any>(null)
 
-  const { visibleGroup, setVisibleGroup } = useContext(CNavContext)
+  const { visibleGroup, setVisibleGroup } = useContext(CSidebarNavContext)
 
   const [_visible, setVisible] = useState(
     Boolean(visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx))),

package/src/components/nav/CNavLink.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CLinkProps, CLink } from '../link/CLink'
-import { CNavContext } from '../sidebar/CSidebarNav'
+import { CSidebarNavContext } from '../sidebar/CSidebarNavContext'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { useForkedRef } from '../../hooks'
@@ -26,7 +26,7 @@ export const CNavLink: PolymorphicRefForwardingComponent<'a', CNavLinkProps> = f
   const navLinkRef = useRef<HTMLAnchorElement>(null)
   const forkedRef = useForkedRef(ref, navLinkRef)
 
-  const { setVisibleGroup } = useContext(CNavContext)
+  const { setVisibleGroup } = useContext(CSidebarNavContext)
 
   useEffect(() => {
     rest.active = navLinkRef.current?.classList.contains('active')

package/src/components/nav/__tests__/CNav.spec.tsx

@@ -1,15 +1,8 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import {
-  CNav,
-  CNavItem,
-  CNavLink,
-  CDropdown,
-  CDropdownToggle,
-  CDropdownMenu,
-  CDropdownItem,
-} from '../../../index'
+import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '../../dropdown'
+import { CNav, CNavItem, CNavLink } from '../index'
 
 test('loads and displays CNav component', async () => {
   const { container } = render(<CNav>Test</CNav>)
@@ -20,7 +13,7 @@ test('CNav customize', async () => {
   const { container } = render(
     <CNav className="bazinga" as="h3" layout="justified" variant="pills">
       Test
-    </CNav>,
+    </CNav>
   )
   expect(container).toMatchSnapshot()
   expect(container.firstChild).toHaveClass('nav')
@@ -56,7 +49,7 @@ test('CNav example', async () => {
           Disabled
         </CNavLink>
       </CNavItem>
-    </CNav>,
+    </CNav>
   )
   expect(container).toMatchSnapshot()
 })

package/src/components/nav/__tests__/CNavGroup.spec.tsx

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

package/src/components/nav/__tests__/CNavGroupItems.spec.tsx

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

package/src/components/nav/__tests__/CNavItem.spec.tsx

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

package/src/components/nav/__tests__/CNavLink.spec.tsx

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

package/src/components/nav/__tests__/CNavTitle.spec.tsx

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

package/src/components/nav/__tests__/__snapshots__/CNav.spec.tsx.snap

@@ -50,7 +50,6 @@ exports[`CNav example 1`] = `
         A
       </a>
       <ul
-        aria-hidden="true"
         class="dropdown-menu"
         role="menu"
       >

package/src/components/navbar/__tests__/CNavbar.spec.tsx

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

package/src/components/navbar/__tests__/CNavbarBrand.spec.tsx

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

package/src/components/navbar/__tests__/CNavbarNav.spec.tsx

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

package/src/components/navbar/__tests__/CNavbarText.spec.tsx

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

package/src/components/navbar/__tests__/CNavbarToggler.spec.tsx

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

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.