@coreui/react-pro 5.12.0 → 5.14.0

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/utils/index.ts

@@ -2,7 +2,6 @@ import executeAfterTransition from './executeAfterTransition'
 import getNextActiveElement from './getNextActiveElement'
 import getRTLPlacement from './getRTLPlacement'
 import getTransitionDurationFromElement from './getTransitionDurationFromElement'
-import isEqual from './isEqual'
 import isInViewport from './isInViewport'
 import isObjectInArray from './isObjectInArray'
 import isRTL from './isRTL'
@@ -13,7 +12,6 @@ export {
   getNextActiveElement,
   getRTLPlacement,
   getTransitionDurationFromElement,
-  isEqual,
   isInViewport,
   isObjectInArray,
   isRTL,

package/dist/cjs/utils/isEqual.d.ts

@@ -1,2 +0,0 @@
-declare const isEqual: (a: any, b: any) => boolean;
-export default isEqual;

package/dist/esm/utils/isEqual.d.ts

@@ -1,2 +0,0 @@
-declare const isEqual: (a: any, b: any) => boolean;
-export default isEqual;

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/utils/isEqual.ts

@@ -1,58 +0,0 @@
-const isEqual = (a: any, b: any): boolean => {
-  if (a === b) return true
-
-  if (a && b && typeof a === 'object' && typeof b === 'object') {
-    if (a.constructor !== b.constructor) return false
-
-    let length: number, i: number | [any, any], keys: string[]
-    if (Array.isArray(a)) {
-      length = a.length
-      if (length !== b.length) return false
-      for (i = length; i-- !== 0; ) if (!isEqual(a[i], b[i])) return false
-      return true
-    }
-
-    if (a instanceof Map && b instanceof Map) {
-      if (a.size !== b.size) return false
-      for (i of a.entries()) if (!b.has(i[0])) return false
-      for (i of a.entries()) if (!isEqual(i[1], b.get(i[0]))) return false
-      return true
-    }
-
-    if (a instanceof Set && b instanceof Set) {
-      if (a.size !== b.size) return false
-      for (i of a.entries()) if (!b.has(i[0])) return false
-      return true
-    }
-
-    if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
-      length = a.length
-      if (length !== b.length) return false
-      for (i = length; i-- !== 0; ) if (a[i] !== b[i]) return false
-      return true
-    }
-
-    if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags
-    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf()
-    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString()
-
-    keys = Object.keys(a)
-    length = keys.length
-    if (length !== Object.keys(b).length) return false
-
-    for (i = length; i-- !== 0; )
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false
-
-    for (i = length; i-- !== 0; ) {
-      var key: string = keys[i]
-
-      if (!isEqual(a[key], b[key])) return false
-    }
-
-    return true
-  }
-
-  return a !== a && b !== b
-}
-
-export default isEqual