tests: update tests and snapshots

Author: mrholek

packages/coreui-react/src/components/button-group/__tests__/CButtonGroup.spec.tsx

@@ -11,9 +11,9 @@ test('loads and displays CButtonGroup component', async () => {
 test('CButtonGroup customize', async () => {
   const { container } = render(
     <CButtonGroup className="bazinga" size="lg" vertical={false}>
-      <CButton>Test A</CButton>
-      <CButton>Test B</CButton>
-      <CButton>Test C</CButton>
+      <CButton color="primary">Test A</CButton>
+      <CButton color="primary">Test B</CButton>
+      <CButton color="primary">Test C</CButton>
     </CButtonGroup>,
   )
   expect(container).toMatchSnapshot()
@@ -25,9 +25,9 @@ test('CButtonGroup customize', async () => {
 test('CButtonGroup customize vertical', async () => {
   const { container } = render(
     <CButtonGroup className="bazinga" size="lg" vertical={true}>
-      <CButton>Test A</CButton>
-      <CButton>Test B</CButton>
-      <CButton>Test C</CButton>
+      <CButton color="primary">Test A</CButton>
+      <CButton color="primary">Test B</CButton>
+      <CButton color="primary">Test C</CButton>
     </CButtonGroup>,
   )
   expect(container).toMatchSnapshot()

packages/coreui-react/src/components/button-group/__tests__/CButtonToolbar.spec.tsx

@@ -12,14 +12,14 @@ test('CButtonToolbar customize', async () => {
   const { container } = render(
     <CButtonToolbar className="bazinga" role="group" aria-label="Bazinga">
       <CButtonGroup role="group">
-        <CButton>1</CButton>
-        <CButton>2</CButton>
-        <CButton>3</CButton>
+        <CButton color="primary">1</CButton>
+        <CButton color="primary">2</CButton>
+        <CButton color="primary">3</CButton>
       </CButtonGroup>
       <CButtonGroup role="group">
-        <CButton>A</CButton>
-        <CButton>B</CButton>
-        <CButton>C</CButton>
+        <CButton color="primary">A</CButton>
+        <CButton color="primary">B</CButton>
+        <CButton color="primary">C</CButton>
       </CButtonGroup>
     </CButtonToolbar>,
   )

packages/coreui-react/src/components/button/__tests__/CButton.spec.tsx

@@ -4,7 +4,7 @@ import '@testing-library/jest-dom'
 import { CButton } from '../../../index'
 
 test('loads and displays CButton component', async () => {
-  const { container } = render(<CButton>Test</CButton>)
+  const { container } = render(<CButton color="primary">Test</CButton>)
   expect(container).toMatchSnapshot()
 })
 

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

@@ -10,7 +10,7 @@ test('loads and displays CDropdownToggle component', async () => {
 
 test('CDropdownToggle customize', async () => {
   const { container } = render(
-    <CDropdownToggle caret={true} split={true} trigger="focus">
+    <CDropdownToggle caret={true} color="primary" split={true} trigger="focus">
       Test
     </CDropdownToggle>,
   )

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

@@ -17,7 +17,7 @@ exports[`CDropdown example 1`] = `
   >
     <button
       aria-expanded="false"
-      class="btn btn-primary dropdown-toggle"
+      class="btn dropdown-toggle"
       tabindex="0"
       type="button"
     >

packages/coreui-react/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.tsx.snap

@@ -20,7 +20,7 @@ exports[`CDropdownToggle customize 1`] = `
 exports[`loads and displays CDropdownToggle component 1`] = `
 <div>
   <button
-    class="btn btn-primary dropdown-toggle"
+    class="btn dropdown-toggle"
     tabindex="0"
     type="button"
   >

packages/coreui-react/src/components/modal/__tests__/CModal.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render, fireEvent } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CModal } from '../../../index'
 
 test('loads and displays CModal component', async () => {

packages/coreui-react/src/components/nav/__tests__/__snapshots__/CNavItem.spec.tsx.snap

@@ -2,35 +2,39 @@
 
 exports[`CNavItem customize 1`] = `
 <div>
-  <li
+  <h3
     class="nav-item bazinga"
   >
-    <h3
+    <a
       aria-current="page"
+      aria-disabled="true"
       class="nav-link bazinga active disabled"
       disabled=""
       href="/bazinga"
+      tabindex="-1"
     >
       Test
-    </h3>
-  </li>
+    </a>
+  </h3>
 </div>
 `;
 
 exports[`CNavItem customize 2`] = `
 <div>
-  <li
+  <h3
     class="nav-item bazinga"
   >
-    <h3
+    <a
       aria-current="page"
+      aria-disabled="true"
       class="nav-link bazinga active disabled"
       disabled=""
       href="/bazinga"
+      tabindex="-1"
     >
       Test
-    </h3>
-  </li>
+    </a>
+  </h3>
 </div>
 `;
 

packages/coreui-react/src/components/popover/__tests__/CPopover.spec.tsx

@@ -6,7 +6,7 @@ import { CPopover, CButton } from '../../../index'
 test('loads and displays CPopover component', async () => {
   const { container } = render(
     <CPopover content="A">
-      <CButton>Test</CButton>
+      <CButton color="primary">Test</CButton>
     </CPopover>,
   )
   expect(container).toMatchSnapshot()
@@ -17,7 +17,7 @@ test('CPopover customize', async () => {
   let arr, element
   const { container } = render(
     <CPopover content="content" title="title" trigger="click" placement="right">
-      <CButton>Test</CButton>
+      <CButton color="primary">Test</CButton>
     </CPopover>,
     { container: document.body },
   )

packages/coreui-react/src/components/popover/__tests__/__snapshots__/CPopover.spec.tsx.snap

@@ -3,11 +3,33 @@
 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"
+    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>
 `;