test: fix unit tests

Author: woothu

src/components/Alert/tests/CAlert.spec.js

@@ -1,6 +1,9 @@
 import { mount } from '@vue/test-utils'
 import Component from "../CAlert";
 import CButtonClose from "../../Button/CButtonClose";
+import Vue from 'vue'
+
+Vue.component('CButtonClose', CButtonClose)
 
 const ComponentName = 'CAlert'
 const defaultWrapper = mount(Component, {

src/components/Alert/tests/__snapshots__/CAlert.spec.js.snap

@@ -19,14 +19,16 @@ exports[`CAlert renders correctly 2`] = `
   class="alert alert-success alert-dismissible"
   role="alert"
 >
-  <cbuttonclose
+  <button
     aria-label="close it"
+    class="close"
     style="color: red;"
+    type="button"
   >
     
                     ok
                 
-  </cbuttonclose>
+  </button>
   Dismissible Alert!
 </div>
 `;

src/components/Breadcrumb/tests/__snapshots__/CBreadcrumb.spec.js.snap

@@ -32,9 +32,7 @@ exports[`CBreadcrumb renders correctly 1`] = `
     class="breadcrumb-item active"
     role="presentation"
   >
-    <span
-      class="active"
-    >
+    <span>
       Library
     </span>
   </li>

src/components/Card/test/CCard.spec.js

@@ -28,9 +28,7 @@ const slotWrapper = mount(Component, {
     }
   },
   slots: {
-    header: 'this should overwrite header<br>',
-    default: 'this should overwrite body<br>',
-    footer: 'this should overwrite footer'
+    default: 'this should overwrite body<br>'
   }
 })
 

src/components/Card/test/__snapshots__/CCard.spec.js.snap

@@ -4,34 +4,39 @@ exports[`CCard renders correctly 1`] = `
 <div
   class="card text-left bg-success border-solid text-white"
 >
-  <div
+  <header
     class="card-header"
   >
     header
-  </div>
+  </header>
   <div
     class="card-body"
   >
-    <!---->
-    <!---->
     body
   </div>
-  <div
+  <footer
     class="card-footer"
   >
     footer
-  </div>
+  </footer>
 </div>
 `;
 
 exports[`CCard renders correctly with slots 1`] = `
 <div
   class="card text-left bg-success border-solid text-white"
 >
-  this should overwrite header
-  <br />
+  <header
+    class="card-header"
+  >
+    header
+  </header>
   this should overwrite body
   <br />
-  this should overwrite footer
+  <footer
+    class="card-footer"
+  >
+    footer
+  </footer>
 </div>
 `;

src/components/Card/test/__snapshots__/CCardFooter.spec.js.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CCardFooter renders correctly 1`] = `
-<div
+<footer
   class="card-footer text-left bg-primary border-solid text-white"
 >
   <template>
     content goes here
   </template>
-</div>
+</footer>
 `;

src/components/Card/test/__snapshots__/CCardHeader.spec.js.snap

@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CCardHeader renders correctly 1`] = `
-<div
+<header
   class="card-header text-left bg-primary border-solid text-white"
 >
   <template>
     content goes here
   </template>
-</div>
+</header>
 `;

src/components/Header/HeaderDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-nav-item-dropdown :right="right" :no-caret="noCaret">
+  <CDropdown :placement="right ? 'bottom-end' : null" :noCaret="noCaret">
     <template #buttonContent>
       <slot name="header">
         &#10068;
@@ -10,20 +10,14 @@
         <span class="text-center">dropdown</span>
       </div>
     </slot>
-  </b-nav-item-dropdown>
+  </CDropdown>
 </template>
 <script>
 export default {
   name: 'HeaderDropdown',
   props: {
-    right: {
-      type: Boolean,
-      default: false
-    },
-    noCaret: {
-      type: Boolean,
-      default: false
-    }
+    right: Boolean,
+    noCaret: Boolean
   },
   mounted () {
     console.error(this.$options._componentTag + ' component is deprecated and will be replaced in coreui-vue 3.0 version, please import C - prefixed version')

src/components/Header/tests/HeaderDropdown.spec.js

@@ -1,10 +1,13 @@
 import { shallowMount, mount } from '@vue/test-utils'
 import Component from "../HeaderDropdown";
+import CDropdown from "../../Dropdown/CDropdown"
+import Vue from 'vue'
+
+Vue.component('CDropdown', CDropdown)
 
 const ComponentName = 'HeaderDropdown'
 const wrapper = mount(Component)
 // /* eslint-disable no-console */
-// console.log("something")
 
 describe(`${ComponentName} .vue`, () => {
   it('has a name', () => {

src/components/Header/tests/__snapshots__/HeaderDropdown.spec.js.snap

@@ -1,41 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HeaderDropdown .vue renders correctly 1`] = `
-<b-nav-item-dropdown>
-  <template>
-    
-      ❔
-    
-  </template>
-   
-  <div
-    style="height: 200px;"
+<div
+  class="dropdown btn-group"
+>
+  <button
+    aria-haspopup="true"
+    class="btn btn-secondary dropdown-toggle"
+    style="cursor: pointer;"
   >
-    <span
-      class="text-center"
-    >
-      dropdown
-    </span>
-  </div>
-</b-nav-item-dropdown>
-`;
-
-exports[`HeaderDropdown.vue renders correctly 1`] = `
-<b-nav-item-dropdown>
-  <template>
     
       ❔
     
-  </template>
-   
+  </button>
+  <!---->
   <div
-    style="height: 200px;"
+    class="dropdown-menu"
   >
-    <span
-      class="text-center"
+     
+    <div
+      style="height: 200px;"
     >
-      dropdown
-    </span>
+      <span
+        class="text-center"
+      >
+        dropdown
+      </span>
+    </div>
   </div>
-</b-nav-item-dropdown>
+</div>
 `;

src/components/Nav/tests/CNavItemDropdown.spec.js

@@ -3,14 +3,15 @@
 exports[`CProgress renders correctly 1`] = `
 <div
   class="progress"
+  color="black"
 >
   <div
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
     class="progress-bar"
     role="progressbar"
-    style="width: 0%; background-color: black;"
+    style="width: 0%;"
   >
     <!---->
   </div>

src/components/Nav/tests/__snapshots__/CNavItemDropdown.spec.js.snap

@@ -6,6 +6,7 @@ exports[`CProgressBar renders correctly 1`] = `
   aria-valuemin="0"
   aria-valuenow="50"
   class="progress-bar progress-bar-striped"
+  color="success"
   role="progressbar"
   style="width: 50%;"
 >