Add Test: ui-alert spec

jest.config.js

@@ -1,3 +1,4 @@
 module.exports = {
-  preset: '@vue/cli-plugin-unit-jest'
+  preset: '@vue/cli-plugin-unit-jest',
+  setupFiles: ['./tests/setup.js']
 }

src/components/SideBar.vue

@@ -91,7 +91,6 @@ export default {
   },
   methods: {
     onActive(eles) {
-      console.log(eles);
       this.$emit('click-file', eles);
     },
   },

src/components/ui-alert.vue

@@ -1,49 +1,49 @@
 <template>
-  <v-dialog v-model="value" :width="$vuetify.breakpoint.mdAndUp ? '40vw' : '90vw'">
-    <v-card>
+  <v-dialog v-model="value" width="50%">
+    <v-card data-test="card">
       <v-card-title></v-card-title>
       <v-card-text class="text-center text--primary">
         <v-icon color="warning" size="5rem">mdi-alert-circle-outline</v-icon>
-        <p class="headline mt-3">{{ title }}</p>
-        <p class="subtitle-1">{{ subtitle }}</p>
+        <p class="headline mt-3" data-test="title">{{ title }}</p>
+        <p class="subtitle-1" data-test="subtitle">{{ subtitle }}</p>
       </v-card-text>
       <v-card-actions class="pb-12">
-        <v-spacer></v-spacer>
-        <v-btn class="mx-3 subtitle-1" color="info" @click="$emit('input', false); $emit('ok')">是</v-btn>
-        <v-btn class="mx-3 subtitle-1" color="error" @click="$emit('input', false)">否</v-btn>
-        <v-spacer></v-spacer>
+        <v-spacer />
+        <v-btn class="mx-3 subtitle-1" color="info" @click="clickYes" data-test="yesBtn">是</v-btn>
+        <v-btn class="mx-3 subtitle-1" color="error" @click="clickNo" data-test="noBtn">否</v-btn>
+        <v-spacer />
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
 <script>
 export default {
-
   name: 'ui-alert',
-
   props: {
     value: {
       type: Boolean,
       default: false,
     },
     title: {
       type: String,
-      default: '您是否確定執行此動作？'
+      default: '您是否確定執行此動作？',
     },
     subtitle: {
       type: String,
-      default: '確認後將離開此畫面。'
+      default: '確認後將離開此畫面。',
     },
   },
-
-  data () {
-    return {
-
-    }
-  }
-}
+  methods: {
+    clickYes() {
+      this.$emit('input', false);
+      this.$emit('ok');
+    },
+    clickNo() {
+      this.$emit('input', false);
+    },
+  },
+};
 </script>
 
-<style lang="css" scoped>
-</style>
+<style lang="css" scoped></style>

src/util/file.js

@@ -34,7 +34,6 @@ export default class File {
     pushNode(name) {
         let fullName = `/${this.fullName}`
         if (fullName === '/') fullName = '//'
-        // console.log(name+': '+fullName);
         this.children.unshift(new File({
             name,
             fullName,

tests/setup.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+Vue.use(Vuetify)
+// Nice tip from CEO of Vuetify
+// https://github.com/vuetifyjs/vuetify/issues/3456
+const el = document.createElement('div')
+el.setAttribute('data-app', true)
+document.body.appendChild(el)

tests/unit/components/ui-alert.spec.js

@@ -0,0 +1,89 @@
+// Libraries
+import Vuetify from 'vuetify'
+// Components
+import UiAlert from '@/components/ui-alert.vue'
+// Utilities
+// use mount instead of shallowMount for Vuetify 
+import { createLocalVue, mount } from '@vue/test-utils'
+
+describe('UiAlert.vue', () => {
+  // use the Vuetify object in a localVue instance and pass an instance to the mount functions options
+  const localVue = createLocalVue()
+  let vuetify
+  beforeEach(() => {
+    vuetify = new Vuetify()
+  })
+  const mountInstance = (options) => mount(UiAlert, { localVue, vuetify, ...options })
+
+  it('renders default title and subtitle when no props passed', () => {
+    const wrapper = mountInstance({
+      propsData: { value: true }
+    })
+    const title = wrapper.find('[data-test="title"]')
+    const subtitle = wrapper.find('[data-test="subtitle"]')
+    expect(title.text()).toMatch(wrapper.vm.$props.title)
+    expect(subtitle.text()).toMatch(wrapper.vm.$props.subtitle)
+  })
+
+  it('renders title and subtitle when props passed', () => {
+    const titleMsg = 'alert title msg'
+    const subtitleMsg = 'alert subtitle msg'
+    const wrapper = mountInstance({
+      propsData: {
+        value: true,
+        title: titleMsg,
+        subtitle: subtitleMsg
+      }
+    })
+    const title = wrapper.find('[data-test="title"]')
+    const subtitle = wrapper.find('[data-test="subtitle"]')
+    expect(title.text()).toMatch(titleMsg)
+    expect(subtitle.text()).toMatch(subtitleMsg)
+  })
+
+  it('should not render anything when it is closed', () => {
+    const wrapper = mountInstance({
+      propsData: { value: false }
+    })
+    const card = wrapper.find('[data-test="card"]')
+    expect(card.exists()).toBeFalsy()
+  })
+
+  it('should not render anything by default', () => {
+    const wrapper = mountInstance()
+    const card = wrapper.find('[data-test="card"]')
+    expect(card.exists()).toBeFalsy()
+  })
+
+  it('emits (\'input\', false) when yes button clicked', async () => {
+    const wrapper = mountInstance({
+      propsData: { value: true }
+    })
+    wrapper.find('[data-test="yesBtn"]').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('input')).toBeTruthy()
+    expect(wrapper.emitted('input').length).toBe(1)
+    expect(wrapper.emitted('input')[0]).toEqual([false])
+  })
+
+  it('emits (\'ok\') when yes button clicked', async () => {
+    const wrapper = mountInstance({
+      propsData: { value: true }
+    })
+    wrapper.find('[data-test="yesBtn"]').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('ok')).toBeTruthy()
+    expect(wrapper.emitted('ok').length).toBe(1)
+  })
+
+  it('emits (\'input\', false) when no button clicked', async () => {
+    const wrapper = mountInstance({
+      propsData: { value: true }
+    })
+    wrapper.find('[data-test="noBtn"]').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.emitted('input')).toBeTruthy()
+    expect(wrapper.emitted('input').length).toBe(1)
+    expect(wrapper.emitted('input')[0]).toEqual([false])
+  })
+})