refactor: CToast component refactor, functions simplification

Author: woothu

src/components/toast/CToast.vue

@@ -49,9 +49,8 @@ export default {
   data () {
     return {
       isShowed: this.show,
-      hidding: false,
-      timeout: null,
-      hiddingTimeout: null
+      hideTimeout: null,
+      closeTimeout: null
     }
   },
   watch: {
@@ -85,55 +84,40 @@ export default {
       this.$nextTick(() => {
         if (this.props.autohide) {
           this.setAutohide()
-        } else if (this.hidding === true) {
-          this.finishHidding()
         }
       })
     },
-    close (restoreOnHover = false) {
-      if (this.isShowed === false) {
-        return
-      }
-      
+    close () {
       this.isShowed = false
       this.$emit('update:show', false)
-      this.$el.removeEventListener('mouseout', this.onHoverOut)
       this.$el.removeEventListener('mouseover', this.onHover)
-
-      if (this.props.fade) {
-        this.setHiddingMode(restoreOnHover)
-      }
+      this.$el.removeEventListener('mouseover', this.restoreHiddingToast)
+      this.$el.removeEventListener('mouseout', this.onHoverOut)
     },
-    setHiddingMode (restoreOnHover) {
-      this.hidding = true
-      if (restoreOnHover) {
-        this.$el.addEventListener('mouseover', this.restoreHiddingToast)
-      }
-      clearTimeout(this.timeout)
-      this.hiddingTimeout = setTimeout(this.finishHidding, 1500)
+    setHiddingMode () {
+      this.isShowed = false
+      this.$el.removeEventListener('mouseover', this.onHover)
+      this.closeTimeout = setTimeout(() => this.close(), 1500)
+      this.$el.addEventListener('mouseover', this.restoreHiddingToast)
     },
-    finishHidding () {
-      this.$el.removeEventListener('mouseover', this.restoreHiddingToast)
-      this.hidding = false
-      clearTimeout(this.hiddingTimeout)
+    restoreHiddingToast () {
+      clearTimeout(this.closeTimeout)
+      this.display()
     },
     onHover () {
       this.$el.removeEventListener('mouseover', this.onHover)
-      clearTimeout(this.timeout)
+      clearTimeout(this.hideTimeout)
       this.$el.addEventListener('mouseout', this.onHoverOut)
     },
     onHoverOut () {
       this.$el.removeEventListener('mouseout', this.onHoverOut)
       this.setAutohide()
     },
     setAutohide () {
-      this.timeout = setTimeout(() => {
-        this.close(true)
+      this.hideTimeout = setTimeout(() => {
+        this.setHiddingMode()
       }, this.props.autohide)
       this.$el.addEventListener('mouseover', this.onHover)
-    },
-    restoreHiddingToast () {
-      this.display()
     }
   }
 }

src/components/toast/tests/CToast.spec.js

@@ -15,8 +15,7 @@ const customWrapper = mount(Component, {
     show: true,
     position: 'bottom-center',
     header: 'title',
-    autohide: 10,
-    closeButton: true
+    autohide: 1000
   },
   slots: {
     default: 'CToast body'
@@ -33,35 +32,43 @@ describe(ComponentName, () => {
   it('renders correctly custom wrapper', () => {
     expect(customWrapper.element).toMatchSnapshot()
   })
-  it('closes by watcher correctly', () => {
-    wrapper.setProps({ show: false })
-    wrapper.vm.$nextTick(() => expect(wrapper.vm.isShowed).toBe(false))
-  })
+
   it('closes by watcher correctly', () => {
     wrapper.setProps({ show: false })
     expect(wrapper.vm.isShowed).toBe(false)
   })
-  it('closes by close button correctly', () => {
-    customWrapper.find('.close').trigger('click')
-    expect(customWrapper.vm.isShowed).toBe(false)
-  })
-  // it('autohiding works correctly', (done) => {
-  //   customWrapper.vm.display()
-  //   setTimeout(() => {
-  //     customWrapper.trigger('mouseover')
-  //     customWrapper.trigger('mouseout')
-  //   }, 9)
+  // it('closes by close button correctly', () => {
+  //   wrapper.find('.close').trigger('click')
+  //   expect(wrapper.vm.isShowed).toBe(false)
+  // })
+  it('autohiding works correctly', (done) => {
+    setTimeout(() => {
+      customWrapper.find('div').trigger('mouseover')
+      customWrapper.find('div').trigger('mouseout')
+    }, 900)
 
-  //   setTimeout(() => {
-  //     expect(customWrapper.vm.isShowed).toBe(true)
-  //   }, 18)
+    setTimeout(() => {
+      expect(customWrapper.vm.isShowed).toBe(true)
+    }, 1100)
 
-  //   setTimeout(() => {
-  //     expect(customWrapper.vm.isShowed).toBe(false)
-  //     customWrapper.trigger('mouseover')
-  //     customWrapper.trigger('mouseout')
-  //     expect(customWrapper.vm.isShowed).toBe(true)
-  //     done()
-  //   }, 25)
-  // })
+    setTimeout(() => {
+      expect(customWrapper.vm.closeTimeout).toBeTruthy()
+      expect(customWrapper.vm.isShowed).toBe(false)
+      customWrapper.vm.restoreHiddingToast()
+      expect(customWrapper.vm.isShowed).toBe(true)
+    }, 2000)
+
+    setTimeout(() => {
+      expect(customWrapper.emitted()['update:show']).toBeTruthy()
+      done()
+    }, 4600)
+
+
+  })
+    // it('closes by watcher correctly', () => {
+    //   wrapper.vm.$nextTick(() => {
+    //     wrapper.find('.close').trigger('click')
+    //     expect(wrapper.vm.isShowed).toBe(false)
+    //   })
+    // })
 })