refactor: minor changes

Author: woothu

package-lock.json

@@ -37,19 +37,19 @@
     "vuex": "^3.1.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.8.3",
     "@vue/cli-plugin-babel": "^4.1.2",
     "@vue/cli-plugin-e2e-nightwatch": "^4.1.2",
     "@vue/cli-plugin-eslint": "^4.1.2",
     "@vue/cli-plugin-unit-jest": "^4.1.2",
     "@vue/cli-service": "^4.1.2",
     "@vue/test-utils": "1.0.0-beta.29",
-    "@babel/core": "^7.8.3",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^25.1.0",
-    "core-js": "^3.6.4",
     "chromedriver": "^79.0.2",
+    "core-js": "^3.6.4",
     "eslint": "^6.8.0",
-    "eslint-plugin-vue": "^6.1.2",
+    "eslint-plugin-vue": "^6.2.1",
     "node-sass": "^4.13.1",
     "npm-run-all": "^4.1.5",
     "sass-loader": "^8.0.2",

package.json

@@ -1,5 +1,5 @@
 <template>
-  <CFooter>
+  <CFooter :fixed="false">
     <div>
       <a href="https://coreui.io" target="_blank">CoreUI</a>
       <span class="ml-1">&copy; 2020 creativeLabs.</span>

src/containers/TheFooter.vue

@@ -25,7 +25,7 @@
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title="Profile">
+              <CTab title="Profile" active>
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -81,7 +81,7 @@
             Tabs with icons
           </CCardHeader>
           <CCardBody>
-            <CTabs>
+            <CTabs :active-tab.sync="activeTab">
               <CTab active>
                 <template slot="title">
                   <CIcon name="cil-calculator"/>
@@ -123,7 +123,7 @@
           </CCardHeader>
           <CCardBody>
             <CTabs add-tab-classes="mt-1">
-              <CTab active>
+              <CTab>
                 <template slot="title">
                   <CIcon name="cil-calculator"/> {{tabs[0]}}
                 </template>
@@ -133,7 +133,7 @@
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab>
+              <CTab active>
                 <template slot="title">
                   <CIcon name="cil-basket"/> {{tabs[1]}}
                 </template>
@@ -211,7 +211,8 @@ export default {
         'Calculator',
         'Shopping cart',
         'Charts'
-      ]
+      ],
+      activeTab: 1
     }
   }
 }

src/views/base/Tabs.vue

@@ -1,27 +1,39 @@
 import CoreuiVue from '@coreui/vue'
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueRouter from 'vue-router'
+import Vuex from 'vuex'
 import TheContainer from '@/containers/TheContainer'
 
 const localVue = createLocalVue()
+localVue.use(Vuex)
 localVue.use(VueRouter)
-const router = new VueRouter()
-
 localVue.use(CoreuiVue)
+const store = new Vuex.Store({
+  state: {
+    darkMode: false,
+    sidebarShow: 'responsive',
+    sidebarMinimize: false,
+    asideShow: false
+  }
+})
+
+const router = new VueRouter()
 
 describe('TheContainer.vue', () => {
   it('has a name', () => {
     expect(TheContainer.name).toBe('TheContainer')
   })
   test('renders correctly', () => {
     const wrapper = shallowMount(TheContainer, {
+      store,
       localVue,
-        router
+      router
     })
     expect(wrapper.element).toMatchSnapshot()
   })
   it('is Vue instance', () => {
     const wrapper = shallowMount(TheContainer, {
+      store,
       localVue,
       router
     })

tests/unit/containers/TheContainer.spec.js

@@ -2,7 +2,6 @@
 
 exports[`TheFooter.vue renders correctly 1`] = `
 <cfooter-stub
-  fixed="true"
   tag="footer"
 >
   <div>

tests/unit/containers/__snapshots__/TheFooter.spec.js.snap

@@ -58,6 +58,7 @@ exports[`Tabs.vue renders correctly 1`] = `
             </ctab-stub>
              
             <ctab-stub
+              active="true"
               activeclass="router-link-active"
               event="click"
               exactactiveclass="router-link-exact-active"
@@ -184,6 +185,7 @@ exports[`Tabs.vue renders correctly 1`] = `
          
         <ccardbody-stub>
           <ctabs-stub
+            activetab="1"
             fade="true"
             variant="tabs"
           >
@@ -274,7 +276,6 @@ exports[`Tabs.vue renders correctly 1`] = `
             variant="tabs"
           >
             <ctab-stub
-              active="true"
               activeclass="router-link-active"
               event="click"
               exactactiveclass="router-link-exact-active"
@@ -298,6 +299,7 @@ exports[`Tabs.vue renders correctly 1`] = `
             </ctab-stub>
              
             <ctab-stub
+              active="true"
               activeclass="router-link-active"
               event="click"
               exactactiveclass="router-link-exact-active"