tests: update tests

Author: mrholek

packages/coreui-react/src/components/collapse/__tests__/CCollapse.spec.tsx

@@ -15,7 +15,6 @@ test('CCollapse customize', async () => {
 })
 
 test('CCollapse use case test', async () => {
-  jest.useFakeTimers()
   const { rerender } = render(<CCollapse visible={false}>Test</CCollapse>)
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
@@ -24,15 +23,15 @@ test('CCollapse use case test', async () => {
   expect(screen.getByText('Test')).not.toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).toHaveClass('collapsing')
-  jest.runAllTimers()
+  await new Promise((r) => setTimeout(r, 1000))
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('collapsing')
   rerender(<CCollapse visible={false}>Test</CCollapse>)
   expect(screen.getByText('Test')).not.toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).toHaveClass('collapsing')
-  jest.runAllTimers()
+  await new Promise((r) => setTimeout(r, 1000))
   expect(screen.getByText('Test')).toHaveClass('collapse')
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('collapsing')

packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx

@@ -54,7 +54,6 @@ test('CDropdown change visible prop', async () => {
 })
 
 test('CDropdown click', async () => {
-  jest.useFakeTimers()
   render(
     <CDropdown>
       <CDropdownToggle>Test</CDropdownToggle>
@@ -71,10 +70,9 @@ test('CDropdown click', async () => {
   }
   jest.runAllTimers()
   expect(screen.getByText('Test').closest('div')).toHaveClass('show')
-  fireEvent.click(document) //click outside
+  fireEvent.mouseUp(document.body) //click outside
+  await new Promise((r) => setTimeout(r, 1000))
   expect(screen.getByText('Test').closest('div')).not.toHaveClass('show')
-  jest.runAllTimers()
-  jest.useRealTimers()
 })
 
 test('CDropdown example', async () => {

packages/coreui-react/src/components/form/__tests__/CFormRange.spec.tsx

@@ -27,7 +27,7 @@ test('CFormRange customize', async () => {
   expect(container.firstChild).toHaveAttribute('max', '150')
   expect(container.firstChild).toHaveAttribute('min', '20')
   expect(container.firstChild).toHaveAttribute('readonly', '')
-  expect(container.firstChild).toHaveAttribute('steps', '2')
+  expect(container.firstChild).toHaveAttribute('step', '2')
   expect(container.firstChild).toHaveAttribute('type', 'range')
   expect(container.firstChild).toHaveAttribute('value', '80')
 })

packages/coreui-react/src/components/offcanvas/__tests__/COffcanvas.spec.tsx

@@ -29,7 +29,7 @@ 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
@@ -56,11 +56,13 @@ test('COffcanvas customize and event on click backdrop', async () => {
     fireEvent.click(backdrop)
   }
   expect(onHide).toHaveBeenCalledTimes(1)
+  expect(container.firstChild).toHaveClass('show')
+  expect(container.firstChild).toHaveClass('hiding')
+  await new Promise((r) => setTimeout(r, 1000))
   expect(container.firstChild).not.toHaveClass('show')
 })
 
 test('COffcanvas customize and event on keypress', async () => {
-  jest.useFakeTimers()
   const onHide = jest.fn()
   const { container } = render(
     <COffcanvas
@@ -93,5 +95,8 @@ test('COffcanvas customize and event on keypress', async () => {
     })
   }
   expect(onHide).toHaveBeenCalledTimes(1)
+  expect(container.firstChild).toHaveClass('show')
+  expect(container.firstChild).toHaveClass('hiding')
+  await new Promise((r) => setTimeout(r, 1000))
   expect(container.firstChild).not.toHaveClass('show')
 })

packages/coreui-react/src/components/tabs/__tests__/CTabPane.spec.tsx

@@ -18,7 +18,6 @@ test('CTabPane customize', async () => {
 })
 
 test('CTabContent use case test', async () => {
-  jest.useFakeTimers()
   const { rerender } = render(
     <CTabContent>
       <CTabPane visible={false}>Test</CTabPane>
@@ -33,7 +32,7 @@ test('CTabContent use case test', async () => {
   )
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).toHaveClass('active')
-  jest.runAllTimers()
+  await new Promise((r) => setTimeout(r, 1000))
   expect(screen.getByText('Test')).toHaveClass('show')
   expect(screen.getByText('Test')).toHaveClass('active')
   rerender(
@@ -43,9 +42,7 @@ test('CTabContent use case test', async () => {
   )
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('active')
-  jest.runAllTimers()
+  await new Promise((r) => setTimeout(r, 1000))
   expect(screen.getByText('Test')).not.toHaveClass('show')
   expect(screen.getByText('Test')).not.toHaveClass('active')
-  jest.runAllTimers()
-  jest.useRealTimers()
 })

packages/coreui-react/src/components/toast/__tests__/CToast.spec.tsx

@@ -32,7 +32,7 @@ test('CToast customize', async () => {
 })
 
 test('CToast click on dismiss button', async () => {
-  jest.useFakeTimers()
+  // jest.useFakeTimers()
   const onClose = jest.fn()
   const { container } = render(
     <CToast
@@ -71,6 +71,7 @@ test('CToast click on dismiss button', async () => {
     fireEvent.click(btn)
   }
   jest.runAllTimers()
+  await new Promise((r) => setTimeout(r, 1000))
   expect(onClose).toHaveBeenCalledTimes(1)
   expect(container.firstChild).toBeNull()
   jest.useRealTimers()

packages/coreui-react/src/components/toast/__tests__/__snapshots__/CToast.spec.tsx.snap

@@ -57,7 +57,7 @@ exports[`CToast customize 5`] = `
   <div
     aria-atomic="true"
     aria-live="assertive"
-    class="toast fade bg-warning border-0 bazinga show"
+    class="toast fade bg-warning border-0 bazinga showing"
     role="alert"
   >
     Test