test: Added tests

Author: woothu

src/__tests__/index.js

@@ -5,7 +5,7 @@
     :class="classList"
     type="button"
     @click="asideToggle">
-    <span class="navbar-toggler-icon" />
+  <span class="navbar-toggler-icon" />
   </button>
 </template>
 

src/components/Aside/AsideToggler.vue

@@ -5,7 +5,7 @@
     :class="classList"
     type="button"
     @click="asideToggle">
-    <span class="navbar-toggler-icon" />
+  <span class="navbar-toggler-icon" />
   </button>
 </template>
 

src/components/Aside/CAsideToggler.vue

@@ -1,16 +1,21 @@
 import { mount } from '@vue/test-utils'
-import Aside from "../Aside/Aside";
+import Component from "../Aside";
 
-describe("Aside.vue", () => {
+const ComponentName = 'Aside'
+const wrapper = mount(Component)
+
+describe(`${ComponentName} .vue`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
   // Inspect the raw component options
   it('has isFixed method', () => {
-    expect(typeof Aside.methods.isFixed).toBe('function')
+    expect(typeof Component.methods.isFixed).toBe('function')
   })
   it('has isOffCanvas method', () => {
-    expect(typeof Aside.methods.isOffCanvas).toBe('function')
+    expect(typeof Component.methods.isOffCanvas).toBe('function')
   })
   it('renders correctly', () => {
-    const wrapper = mount(Aside)
     expect(wrapper.element).toMatchSnapshot()
     expect(wrapper.is('aside')).toBe(true)
     expect(wrapper.classes()).toContain('aside-menu')

src/components/__tests__/Aside.js renamed to src/components/Aside/tests/Aside.spec.js

@@ -0,0 +1,23 @@
+import { mount } from "@vue/test-utils";
+import Component from "../AsideToggler";
+
+const ComponentName = 'AsideToggler'
+const wrapper = mount(Component)
+
+describe(`${ComponentName} .vue`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+  // Inspect the raw component options
+  it('has toggle method', () => {
+    expect(typeof Component.methods.toggle).toBe('function')
+  })
+  it('has asideToggle method', () => {
+    expect(typeof Component.methods.asideToggle).toBe('function')
+  })
+  it('renders correctly', () => {
+    expect(wrapper.element).toMatchSnapshot()
+    expect(wrapper.is('button')).toBe(true)
+    expect(wrapper.classes()).toContain('navbar-toggler')
+  })
+});

src/components/Aside/tests/AsideToggler.spec.js

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils'
+import Component from "../CAside";
+
+const ComponentName = 'CAside'
+const wrapper = mount(Component)
+
+describe(`${ComponentName} .vue`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+  // Inspect the raw component options
+  it('has isFixed method', () => {
+    expect(typeof Component.methods.isFixed).toBe('function')
+  })
+  it('has isOffCanvas method', () => {
+    expect(typeof Component.methods.isOffCanvas).toBe('function')
+  })
+  it('renders correctly', () => {
+    expect(wrapper.element).toMatchSnapshot()
+    expect(wrapper.is('aside')).toBe(true)
+    expect(wrapper.classes()).toContain('aside-menu')
+    expect(wrapper.element.textContent).toEqual('Aside')
+  })
+});

src/components/Aside/tests/CAside.spec.js

@@ -0,0 +1,23 @@
+import { mount } from "@vue/test-utils";
+import Component from "../CAsideToggler";
+
+const ComponentName = 'CAsideToggler'
+const wrapper = mount(Component)
+
+describe(`${ComponentName} .vue`, () => {
+  it('has a name', () => {
+    expect(Component.name).toMatch(ComponentName)
+  })
+  // Inspect the raw component options
+  it('has toggle method', () => {
+    expect(typeof Component.methods.toggle).toBe('function')
+  })
+  it('has asideToggle method', () => {
+    expect(typeof Component.methods.asideToggle).toBe('function')
+  })
+  it('renders correctly', () => {
+    expect(wrapper.element).toMatchSnapshot()
+    expect(wrapper.is('button')).toBe(true)
+    expect(wrapper.classes()).toContain('navbar-toggler')
+  })
+});

src/components/Aside/tests/CAsideToggler.spec.js

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Aside .vue renders correctly 1`] = `
+<aside
+  class="aside-menu"
+>
+  Aside
+</aside>
+`;
+
+exports[`Aside.vue renders correctly 1`] = `
+<aside
+  class="aside-menu"
+>
+  Aside
+</aside>
+`;

src/components/Aside/tests/__snapshots__/Aside.spec.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AsideToggler .vue renders correctly 1`] = `
+<button
+  class="navbar-toggler"
+  display="lg"
+  type="button"
+>
+  <span
+    class="navbar-toggler-icon"
+  />
+</button>
+`;
+
+exports[`AsideToggler.vue renders correctly 1`] = `
+<button
+  class="navbar-toggler"
+  display="lg"
+  type="button"
+>
+  <span
+    class="navbar-toggler-icon"
+  />
+</button>
+`;

src/components/Aside/tests/__snapshots__/AsideToggler.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Aside.vue renders correctly 1`] = `
+exports[`CAside .vue renders correctly 1`] = `
 <aside
   class="aside-menu"
 >