refactor: change container component names

Author: woothu

src/containers/DefaultContainer.vue renamed to src/containers/TheContainer.vue

@@ -26,7 +26,7 @@
       <CHeaderNavItem class="d-md-down-none mx-2">
         <i class="cui-envelope-open"></i>
       </CHeaderNavItem>
-      <DefaultHeaderDropdownAccnt/>
+      <TheHeaderDropdownAccnt/>
     </ul>
     <div class="c-subheader px-3">
       <CBreadcrumbRouter class="border-0"/>
@@ -35,12 +35,12 @@
 </template>
 
 <script>
-import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
+import TheHeaderDropdownAccnt from './TheHeaderDropdownAccnt'
 
 export default {
   name: 'TheHeader',
   components: {
-    DefaultHeaderDropdownAccnt
+    TheHeaderDropdownAccnt
   }
 }
 </script>

src/containers/TheHeader.vue

@@ -67,7 +67,7 @@
 
 <script>
 export default {
-  name: 'DefaultHeaderDropdownAccnt',
+  name: 'TheHeaderDropdownAccnt',
   data () {
     return { itemsCount: 42 }
   }

src/containers/DefaultHeaderDropdownAccnt.vue renamed to src/containers/TheHeaderDropdownAccnt.vue

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 // Containers
-const DefaultContainer = () => import('@/containers/DefaultContainer')
+const TheContainer = () => import('@/containers/TheContainer')
 
 // Views
 const Dashboard = () => import('@/views/Dashboard')
@@ -63,12 +63,16 @@ export default new Router({
   mode: 'hash', // https://router.vuejs.org/api/#mode
   linkActiveClass: 'active',
   scrollBehavior: () => ({ y: 0 }),
-  routes: [
+  routes: configRoutes()
+})
+
+function configRoutes () {
+  return [
     {
       path: '/',
       redirect: '/dashboard',
       name: 'Home',
-      component: DefaultContainer,
+      component: TheContainer,
       children: [
         {
           path: 'dashboard',
@@ -327,4 +331,5 @@ export default new Router({
       ]
     }
   ]
-})
+}
+

src/router/index.js

@@ -1,27 +1,27 @@
 import CoreuiVue from '@coreui/vue'
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueRouter from 'vue-router'
-import DefaultContainer from '@/containers/DefaultContainer'
+import TheContainer from '@/containers/TheContainer'
 
 const localVue = createLocalVue()
 localVue.use(VueRouter)
 const router = new VueRouter()
 
 localVue.use(CoreuiVue)
 
-describe('DefaultContainer.vue', () => {
+describe('TheContainer.vue', () => {
   it('has a name', () => {
-    expect(DefaultContainer.name).toMatch('full')
+    expect(TheContainer.name).toMatch('full')
   })
   test('renders correctly', () => {
-    const wrapper = shallowMount(DefaultContainer, {
+    const wrapper = shallowMount(TheContainer, {
       localVue,
         router
     })
     expect(wrapper.element).toMatchSnapshot()
   })
   it('is Vue instance', () => {
-    const wrapper = shallowMount(DefaultContainer, {
+    const wrapper = shallowMount(TheContainer, {
       localVue,
       router
     })

tests/unit/containers/DefaultHeaderDropdownAccnt.spec.js

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import CoreuiVue from '@coreui/vue'
+import TheHeaderDropdownAccnt from '@/containers/TheHeaderDropdownAccnt'
+import { shallowMount } from '@vue/test-utils';
+
+Vue.use(CoreuiVue)
+
+describe('TheHeaderDropdownAccnt.vue', () => {
+  it('has a name', () => {
+    expect(TheHeaderDropdownAccnt.name).toMatch('TheHeaderDropdownAccnt')
+  })
+  it('has a created hook', () => {
+    expect(typeof TheHeaderDropdownAccnt.data).toMatch('function')
+  })
+  it('sets the correct default data', () => {
+    expect(typeof TheHeaderDropdownAccnt.data).toMatch('function')
+    const defaultData = TheHeaderDropdownAccnt.data()
+    expect(defaultData.itemsCount).toBe(42)
+  })
+  test('renders correctly', () => {
+    const wrapper = shallowMount(TheHeaderDropdownAccnt)
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})