@coreui/react 5.5.0 → 5.7.0

package/src/components/tabs/__tests__/CTabPane.spec.tsx

@@ -1,48 +1,68 @@
 import * as React from 'react'
-import { render, screen } from '@testing-library/react'
+import { act, render, screen, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTabPane, CTabContent } from '../../../index'
+
+import { CTabPane, CTabContent } from '../index'
 
 test('loads and displays CTabPane component', async () => {
-  const { container } = render(<CTabPane>Test</CTabPane>)
-  expect(container).toMatchSnapshot()
+  let container: HTMLElement
+  await act(async () => {
+    const renderResult = render(<CTabPane>Test</CTabPane>)
+    container = renderResult.container
+  })
+  expect(container!).toMatchSnapshot()
 })
 
 test('CTabPane customize', async () => {
-  const { container } = render(
-    <CTabPane className="bazinga" visible={true}>
-      Test
-    </CTabPane>,
-  )
-  expect(container).toMatchSnapshot()
+  let container: HTMLElement
+  await act(async () => {
+    const renderResult = render(
+      <CTabPane className="bazinga" visible={true}>
+        Test
+      </CTabPane>
+    )
+    container = renderResult.container
+  })
+  expect(container!).toMatchSnapshot()
 })
 
 test('CTabContent use case test', async () => {
+  jest.useFakeTimers()
+
   const { rerender } = render(
     <CTabContent>
       <CTabPane visible={false}>Test</CTabPane>
-    </CTabContent>,
-  )
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).not.toHaveClass('active')
-  rerender(
-    <CTabContent>
-      <CTabPane visible={true}>Test</CTabPane>
-    </CTabContent>,
-  )
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  expect(screen.getByText('Test')).toHaveClass('active')
-  await new Promise((r) => setTimeout(r, 1000))
-  expect(screen.getByText('Test')).toHaveClass('show')
-  expect(screen.getByText('Test')).toHaveClass('active')
-  rerender(
-    <CTabContent>
-      <CTabPane visible={false}>Test</CTabPane>
-    </CTabContent>,
+    </CTabContent>
   )
+
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('active')
-  await new Promise((r) => setTimeout(r, 1000))
+
+  act(() => {
+    rerender(
+      <CTabContent>
+        <CTabPane visible={true}>Test</CTabPane>
+      </CTabContent>
+    )
+    jest.runAllTimers()
+  })
+
+  await waitFor(() => {
+    expect(screen.getByText('Test')).toHaveClass('active')
+    expect(screen.getByText('Test')).toHaveClass('show')
+  })
+
+  act(() => {
+    rerender(
+      <CTabContent>
+        <CTabPane visible={false}>Test</CTabPane>
+      </CTabContent>
+    )
+    jest.runAllTimers()
+  })
+
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('active')
+
+  jest.useRealTimers()
 })

package/src/components/toast/CToast.tsx

@@ -1,15 +1,10 @@
-import React, {
-  createContext,
-  forwardRef,
-  HTMLAttributes,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
+import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 
+import { CToastContext } from './CToastContext'
+
 import { useForkedRef } from '../../hooks'
 import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
@@ -59,13 +54,6 @@ export interface CToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title
   visible?: boolean
 }
 
-interface ContextProps extends CToastProps {
-  visible?: boolean
-  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
-}
-
-export const CToastContext = createContext({} as ContextProps)
-
 export const CToast = forwardRef<HTMLDivElement, CToastProps>(
   (
     {
@@ -82,12 +70,12 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
       onShow,
       ...rest
     },
-    ref,
+    ref
   ) => {
-    const toastRef = useRef()
+    const toastRef = useRef(null)
     const forkedRef = useForkedRef(ref, toastRef)
     const [_visible, setVisible] = useState(false)
-    const timeout = useRef<number>()
+    const timeout = useRef<number>(undefined)
 
     useEffect(() => {
       setVisible(visible)
@@ -135,7 +123,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
                   'show showing': state === 'entering' || state === 'exiting',
                   show: state === 'entered',
                 },
-                className,
+                className
               )}
               aria-live="assertive"
               aria-atomic="true"
@@ -152,7 +140,7 @@ export const CToast = forwardRef<HTMLDivElement, CToastProps>(
         )}
       </Transition>
     )
-  },
+  }
 )
 
 CToast.propTypes = {
@@ -163,10 +151,7 @@ CToast.propTypes = {
   color: colorPropType,
   delay: PropTypes.number,
   index: PropTypes.number,
-  innerKey: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.string
-  ]),
+  innerKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   onClose: PropTypes.func,
   onShow: PropTypes.func,
   visible: PropTypes.bool,

package/src/components/toast/CToastClose.tsx

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 
 import { CButtonProps } from '../button/CButton'
 import { CCloseButton, CCloseButtonProps } from '../close-button/CCloseButton'
-
-import { CToastContext } from './CToast'
+import { CToastContext } from './CToastContext'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 

package/src/components/toast/CToastContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+export interface CToastContextProps {
+  visible?: boolean
+  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+}
+
+export const CToastContext = createContext({} as CToastContextProps)

package/src/components/toast/CToaster.tsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { CConditionalPortal } from '../conditional-portal'
 
+import type { CToastProps } from './CToast'
+
 export interface CToasterProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * A string of all className you want applied to the base component.
@@ -27,20 +29,22 @@ export interface CToasterProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Adds new `CToast` to `CToaster`.
    */
-  push?: ReactElement
+  push?: ReactElement<CToastProps>
 }
 
 export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
   ({ children, className, placement, push, ...rest }, ref) => {
-    const [toasts, setToasts] = useState<ReactElement[]>([])
+    const [toasts, setToasts] = useState<ReactElement<CToastProps>[]>([])
     const index = useRef<number>(0)
 
     useEffect(() => {
       index.current++
-      push && addToast(push)
+      if (push) {
+        addToast(push)
+      }
     }, [push])
 
-    const addToast = (push: ReactElement) => {
+    const addToast = (push: ReactElement<CToastProps>) => {
       setToasts((state) => [
         ...state,
         React.cloneElement(push, {
@@ -67,18 +71,18 @@ export const CToaster = forwardRef<HTMLDivElement, CToasterProps>(
                 'start-50 translate-middle-x': placement && placement.includes('center'),
                 'end-0': placement && placement.includes('end'),
               },
-              className,
+              className
             )}
             {...rest}
             ref={ref}
           >
             {children}
-            {toasts.map((toast) => React.cloneElement(toast, { visible: true }))}
+            {toasts.map((toast, index) => React.cloneElement(toast, { visible: true, key: index }))}
           </div>
         ) : null}
       </CConditionalPortal>
     )
-  },
+  }
 )
 
 CToaster.propTypes = {

package/src/components/toast/__tests__/CToast.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { render, fireEvent, waitFor } from '@testing-library/react'
+import { render, fireEvent, waitFor, act } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CToast, CToastBody, CToastHeader } from '../../../index'
+import { CToast, CToastBody, CToastHeader } from '../index'
 
 test('loads and displays CToast component', async () => {
   const { container } = render(<CToast>Test</CToast>)
@@ -10,16 +10,9 @@ test('loads and displays CToast component', async () => {
 
 test('CToast customize', async () => {
   const { container } = render(
-    <CToast
-      className="bazinga"
-      autohide={false}
-      color="warning"
-      delay={100}
-      visible={true}
-      //onClose
-    >
+    <CToast className="bazinga" autohide={false} color="warning" delay={100} visible={true}>
       Test
-    </CToast>,
+    </CToast>
   )
   await waitFor(() => {
     expect(container).toMatchSnapshot()
@@ -32,7 +25,8 @@ test('CToast customize', async () => {
 })
 
 test('CToast click on dismiss button', async () => {
-  // jest.useFakeTimers()
+  jest.useFakeTimers()
+
   const onClose = jest.fn()
   const { container } = render(
     <CToast
@@ -59,41 +53,52 @@ test('CToast click on dismiss button', async () => {
         <small>7 min ago</small>
       </CToastHeader>
       <CToastBody>Hello, world! This is a toast message.</CToastBody>
-    </CToast>,
+    </CToast>
   )
+
   await waitFor(() => {
     expect(container.firstChild).toHaveClass('show')
   })
 
   expect(onClose).toHaveBeenCalledTimes(0)
+
   const btn = document.querySelector('.btn-close')
+
   if (btn !== null) {
-    fireEvent.click(btn)
+    act(() => {
+      fireEvent.click(btn)
+      jest.runAllTimers()
+    })
   }
-  jest.runAllTimers()
-  await new Promise((r) => setTimeout(r, 1000))
-  expect(onClose).toHaveBeenCalledTimes(1)
-  expect(container.firstChild).toBeNull()
+
+  await waitFor(() => {
+    expect(onClose).toHaveBeenCalledTimes(1)
+    expect(container.firstChild).toBeNull()
+  })
+
   jest.useRealTimers()
 })
 
 test('CToast test autohide', async () => {
+  jest.useFakeTimers()
+
   const { container } = render(
     <CToast autohide={true} delay={1000} visible={true}>
       Test
-    </CToast>,
+    </CToast>
   )
 
   await waitFor(() => {
     expect(container.firstChild).toHaveClass('show')
   })
 
-  await waitFor(
-    () => {
-      expect(container.firstChild).toBeNull()
-    },
-    {
-      timeout: 5000,
-    },
-  )
+  act(() => {
+    jest.advanceTimersByTime(1000)
+  })
+
+  await waitFor(() => {
+    expect(container.firstChild).toBeNull()
+  })
+
+  jest.useRealTimers()
 })

package/src/components/toast/__tests__/CToastBody.spec.tsx

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

package/src/components/toast/__tests__/CToastHeader.spec.tsx

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

package/src/components/toast/__tests__/CToaster.spec.tsx

@@ -1,7 +1,8 @@
 import React from 'react' //  useState,
 import { render, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CToast, CToaster, CToastBody, CToastHeader, CButton } from '../../../index'
+import { CButton } from '../../button'
+import { CToast, CToaster, CToastBody, CToastHeader } from '../index'
 
 test('loads and displays CToaster component', async () => {
   const { container } = render(<CToaster>Test</CToaster>)

package/src/components/tooltip/__tests__/CTooltip.spec.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
-import { act } from 'react-dom/test-utils'
-import { fireEvent, render } from '@testing-library/react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
-import { CTooltip, CLink } from '../../../index'
+import { CLink } from '../../link'
+import { CTooltip } from '../index'
+import { CButton } from '../../button'
 
 let container: HTMLDivElement | null
 
@@ -20,44 +21,64 @@ test('loads and displays CTooltip component', async () => {
   const { container } = render(
     <CTooltip content="content">
       <CLink>Test</CLink>
-    </CTooltip>,
+    </CTooltip>
   )
   expect(container).toMatchSnapshot()
 })
 
 test('CTooltip customize', async () => {
-  const { container } = render(
+  jest.useFakeTimers()
+
+  render(
     <CTooltip trigger="hover" placement="right" content="content">
-      <CLink className="link">Test</CLink>
-    </CTooltip>,
+      <CLink href="#">Test</CLink>
+    </CTooltip>
   )
-  const link = document.querySelector('.link')
+
+  const link = screen.getByText('Test')
+
   act(() => {
-    if (link !== null) {
-      fireEvent.mouseOver(link)
-    }
+    fireEvent.mouseOver(link)
+    jest.runAllTimers()
   })
-  expect(container).toMatchSnapshot()
+
+  expect(document.querySelector('.tooltip')).toBeInTheDocument()
+
+  jest.useRealTimers()
 })
 
-// test('CTooltip on toggle', async () => {
-//   jest.useFakeTimers()
-//   const onToggle = jest.fn()
-//   render(
-//     <CTooltip
-//       trigger="click"
-//       placement="right-end"
-//       content="content"
-//       visible={true}
-//       onToggle={onToggle}
-//     >
-//       <CButton>Test</CButton>
-//     </CTooltip>,
-//   )
-//   expect(onToggle).toHaveBeenCalledTimes(0)
-//   const btn = document.querySelector('.btn')
-//   if (btn !== null) {
-//     fireEvent.click(btn)
-//   }
-//   expect(onToggle).toHaveBeenCalledTimes(1)
-// })
+test('CTooltip onShow and onHide', async () => {
+  jest.useFakeTimers()
+
+  const onShow = jest.fn()
+  const onHide = jest.fn()
+
+  render(
+    <CTooltip trigger="click" placement="right" content="content" onShow={onShow} onHide={onHide}>
+      <CButton>Test</CButton>
+    </CTooltip>
+  )
+
+  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/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap

@@ -1,15 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CTooltip customize 1`] = `
-<div>
-  <a
-    class="link"
-  >
-    Test
-  </a>
-</div>
-`;
-
 exports[`loads and displays CTooltip component 1`] = `
 <div>
   <a

package/src/components/widgets/__tests__/CWidgetStatsA.spec.tsx

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

package/src/components/widgets/__tests__/CWidgetStatsB.spec.tsx

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

package/src/components/widgets/__tests__/CWidgetStatsC.spec.tsx

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

package/src/components/widgets/__tests__/CWidgetStatsD.spec.tsx

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

package/src/components/widgets/__tests__/CWidgetStatsE.spec.tsx

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

package/src/components/widgets/__tests__/CWidgetStatsF.spec.tsx

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

package/src/hooks/usePopper.ts

@@ -10,8 +10,8 @@ interface UsePopperOutput {
 }
 
 export const usePopper = (): UsePopperOutput => {
-  const _popper = useRef<Instance>()
-  const el = useRef<HTMLElement>()
+  const _popper = useRef<Instance>(undefined)
+  const el = useRef<HTMLElement>(null)
 
   const initPopper = (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => {
     _popper.current = createPopper(reference, popper, options)

package/src/components/button/__tests__/CButtonClose.spec.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom'
-import { CCloseButton } from '../../../index'
-
-test('loads and displays CCloseButton component', async () => {
-  const { container } = render(<CCloseButton>Test</CCloseButton>)
-  expect(container).toMatchSnapshot()
-})
-
-test('CCloseButton customize', async () => {
-  const { container } = render(
-    <CCloseButton white={true} disabled={true} className="bazinga">
-      Test
-    </CCloseButton>,
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('btn')
-  expect(container.firstChild).toHaveClass('btn-close')
-  expect(container.firstChild).toHaveClass('btn-close-white')
-  expect(container.firstChild).toHaveAttribute('disabled')
-})

package/src/components/button/__tests__/__snapshots__/CButtonClose.spec.tsx.snap

@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CCloseButton customize 1`] = `
-<div>
-  <button
-    aria-label="Close"
-    class="btn btn-close btn-close-white bazinga"
-    disabled=""
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;
-
-exports[`loads and displays CCloseButton component 1`] = `
-<div>
-  <button
-    aria-label="Close"
-    class="btn btn-close"
-    type="button"
-  >
-    Test
-  </button>
-</div>
-`;