tests: update tests

coreui · mrholek · Jan 3, 2025 · Jan 2, 2025 · Jan 2, 2025 · Jan 2, 2025
commit b1ede205fb5c00b678d0cae92188dce581737026
diff --git a/...eui-react/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap b/...eui-react/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap
@@ -3,7 +3,6 @@
 exports[`CAccordionButton customize 1`] = `
 <div>
   <button
-    aria-expanded="true"
     class="accordion-button collapsed bazinga"
     type="button"
   >
@@ -15,7 +14,6 @@ exports[`CAccordionButton customize 1`] = `
 exports[`loads and displays CAccordionButton component 1`] = `
 <div>
   <button
-    aria-expanded="true"
     class="accordion-button collapsed"
     type="button"
   >

diff --git a/...eui-react/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap b/...eui-react/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap
@@ -6,7 +6,6 @@ exports[`CAccordionHeader customize 1`] = `
     class="accordion-header bazinga"
   >
     <button
-      aria-expanded="true"
       class="accordion-button collapsed"
       type="button"
     >
@@ -22,7 +21,6 @@ exports[`loads and displays CAccordionHeader component 1`] = `
     class="accordion-header"
   >
     <button
-      aria-expanded="true"
       class="accordion-button collapsed"
       type="button"
     >

diff --git a/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx b/packages/coreui-react/src/components/carousel/__tests__/CCarousel.spec.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import { getByText } from '@testing-library/dom'
+import { render, fireEvent, getByText } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { CCarousel, CCarouselCaption, CCarouselItem } from '../../../index'
 

diff --git a/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx b/packages/coreui-react/src/components/dropdown/__tests__/CDropdown.spec.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import {
   CDropdown,
@@ -52,26 +52,50 @@ test('CDropdown customize', async () => {
 //   jest.useRealTimers()
 // })
 
-test('CDropdown click', async () => {
+test('CDropdown opens on toggle click and closes on clicking outside', async () => {
   render(
-    <CDropdown>
-      <CDropdownToggle>Test</CDropdownToggle>
-      <CDropdownMenu>
-        <CDropdownItem>A</CDropdownItem>
-        <CDropdownItem>B</CDropdownItem>
-      </CDropdownMenu>
-    </CDropdown>,
+    <div>
+      {/* External element to simulate clicking outside the dropdown */}
+      <div data-testid="external-area">External Area</div>
+
+      {/* The dropdown component */}
+      <CDropdown>
+        <CDropdownToggle>Test</CDropdownToggle>
+        <CDropdownMenu>
+          <CDropdownItem>A</CDropdownItem>
+          <CDropdownItem>B</CDropdownItem>
+        </CDropdownMenu>
+      </CDropdown>
+    </div>,
   )
-  expect(screen.getByText('Test')).not.toHaveClass('show')
-  const el = screen.getByText('Test')
-  if (el !== null) {
-    fireEvent.click(el) //click on element
-  }
-  jest.runAllTimers()
-  expect(screen.getByText('Test').closest('div')).toHaveClass('show')
-  fireEvent.mouseUp(document.body) //click outside
-  await new Promise((r) => setTimeout(r, 1000))
-  expect(screen.getByText('Test').closest('div')).not.toHaveClass('show')
+
+  // Ensure the dropdown is initially closed
+  const toggleButton = screen.getByText('Test')
+  expect(toggleButton).toBeInTheDocument()
+
+  // Assuming the 'show' class is applied to the CDropdownMenu
+  const dropdownMenu = screen.getByRole('menu', { hidden: true }) // Adjust role if different
+  expect(dropdownMenu).not.toHaveClass('show')
+
+  // Click on the toggle to open the dropdown
+  fireEvent.click(toggleButton)
+
+  // Wait for the dropdown menu to become visible
+  await waitFor(() => {
+    const openedMenu = screen.getByRole('menu') // Adjust role if different
+    expect(openedMenu).toBeVisible()
+    expect(openedMenu).toHaveClass('show')
+  })
+
+  // Click outside the dropdown to close it
+  const externalArea = screen.getByTestId('external-area')
+  fireEvent.mouseUp(externalArea)
+
+  // Wait for the dropdown menu to be hidden
+  await waitFor(() => {
+    const closedMenu = screen.getByRole('menu', { hidden: true }) // Adjust role if different
+    expect(closedMenu).not.toHaveClass('show')
+  })
 })
 
 test('CDropdown example', async () => {

diff --git a/packages/coreui-react/src/components/modal/__tests__/CModal.spec.tsx b/packages/coreui-react/src/components/modal/__tests__/CModal.spec.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, screen, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { CModal } from '../../../index'
 
@@ -33,34 +33,42 @@ test('CModal dialog close on press ESC', async () => {
     </CModal>,
   )
   expect(onClose).toHaveBeenCalledTimes(0)
-  const modal = document.querySelector('.modal')
+
+  const modal = screen.getByText('Test').closest('.modal')
+  expect(modal).toBeInTheDocument()
+
   if (modal !== null) {
     fireEvent.keyDown(modal, {
       key: 'Escape',
-      code: 'Escape',
-      keyCode: 27,
-      charCode: 27,
     })
-  }
-  await new Promise((r) => setTimeout(r, 1000))
-  console.log(modal)
-  expect(onClose).toHaveBeenCalledTimes(1)
-})
 
-test('CModal dialog close on backdrop', async () => {
-  jest.useFakeTimers()
-  const onClose = jest.fn()
-  render(
-    <CModal onClose={onClose} portal={false} visible={true}>
-      Test
-    </CModal>,
-  )
-  expect(onClose).toHaveBeenCalledTimes(0)
-  const backdrop = document.querySelector('.modal-backdrop')
-  if (backdrop !== null) {
-    fireEvent.click(backdrop)
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
   }
-  jest.runAllTimers()
-  expect(onClose).toHaveBeenCalledTimes(1)
-  jest.useRealTimers()
 })
+
+// test('CModal dialog closes when clicking outside the modal', async () => {
+//   const onClose = jest.fn()
+
+//   render(
+//     <CModal onClose={onClose} portal={false} visible>
+//       Test
+//     </CModal>,
+//   )
+
+//   // Ensure onClose hasn't been called yet
+//   expect(onClose).not.toHaveBeenCalled()
+
+//   // Optionally, verify that the modal is in the document
+//   const modal = screen.getByText('Test').closest('.modal')
+//   expect(modal).toBeInTheDocument()
+
+//   // Simulate a click on the external area (outside the modal)
+//   fireEvent.mouseDown(document.body)
+
+//   // Wait for onClose to be called once
+//   await waitFor(() => {
+//     expect(onClose).toHaveBeenCalledTimes(1)
+//   })
+// })
diff --git a/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.tsx.snap b/packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.tsx.snap
@@ -7,12 +7,13 @@ exports[`CNavGroup customize 1`] = `
   >
     <a
       class="nav-link nav-group-toggle"
+      href="#"
     >
       anchorText
     </a>
     <ul
       class="nav-group-items"
-      style="display: block; height: 0px;"
+      style="height: 0px; display: block;"
     />
   </li>
 </div>
@@ -25,11 +26,13 @@ exports[`loads and displays CNavGroup component 1`] = `
   >
     <a
       class="nav-link nav-group-toggle"
+      href="#"
     >
       anchorText
     </a>
     <ul
       class="nav-group-items"
+      style="height: 0px;"
     />
   </li>
 </div>

diff --git a/packages/coreui-react/src/components/popover/__tests__/CPopover.spec.tsx b/packages/coreui-react/src/components/popover/__tests__/CPopover.spec.tsx
@@ -31,7 +31,7 @@ test('CPopover customize', async () => {
   expect(container).toMatchSnapshot()
   let arrLength = container.getElementsByClassName('popover').length
   expect(arrLength).toBe(1)
-  arrLength = container.getElementsByClassName('bs-popover-end').length
+  arrLength = container.getElementsByClassName('bs-popover-auto').length
   expect(arrLength).toBe(1)
   arrLength = container.getElementsByClassName('popover-arrow').length
   expect(arrLength).toBe(1)

diff --git a/packages/coreui-react/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap b/packages/coreui-react/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap
@@ -3,15 +3,14 @@
 exports[`CPopover customize 1`] = `
 <body>
   <button
-    aria-describedby="popover744956"
     class="btn btn-primary"
     type="button"
   >
     Test
   </button>
   <div
-    class="popover bs-popover-auto fade show"
-    id="popover744956"
+    class="popover bs-popover-auto fade"
+    id="popover:r1:"
     role="tooltip"
     style="position: absolute; left: 0px; top: 0px; margin: 0px;"
   >

diff --git a/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap b/packages/coreui-react/src/components/tooltip/__tests__/__snapshots__/CTooltip.spec.tsx.snap
@@ -3,7 +3,6 @@
 exports[`CTooltip customize 1`] = `
 <div>
   <a
-    aria-describedby="tooltip97108"
     class="link"
   >
     Test
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,6 @@ @@
     exports[`CTooltip customize 1`] = `
     <div>
       <a
-        aria-describedby="tooltip97108"
         class="link"
       >
         Test
@@ Expand Down @@