From 33072440fa2a90f7925cdf84eac7076a1b3ac5be Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Tue, 9 May 2017 23:02:58 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Drawer:=20Call=20init/destroy=20?=
 =?UTF-8?q?of=20foundation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Drawer/Drawer.vue     | 28 ++++++++++++++++++++--------
 test/specs/Drawer.spec.js | 26 ++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/Drawer/Drawer.vue b/src/Drawer/Drawer.vue
index f7cac39..3bea436 100644
--- a/src/Drawer/Drawer.vue
+++ b/src/Drawer/Drawer.vue
@@ -47,7 +47,6 @@ export default {
 
   mounted () {
     if (this.mode === 'temporary') {
-      console.log(this.$refs.drawer)
       this.mdcDrawer = new MDCTemporaryDrawerFoundation({
         addClass: (className) => this.$el.classList.add(className),
         removeClass: (className) => this.$el.classList.remove(className),
@@ -62,29 +61,42 @@ export default {
         deregisterDrawerInteractionHandler: (evt, handler) =>
           this.$refs.drawer.removeEventListener(util.remapEvent(evt), handler),
         registerTransitionEndHandler: (handler) => this.$refs.drawer.addEventListener('transitionend', handler),
-        deregisterTransitionEndHandler: (handler) => this.$refs.drawer.removeEventListener('transitionend', handler),
+        deregisterTransitionEndHandler: /* istanbul ignore next */ (handler) =>
+          this.$refs.drawer.removeEventListener('transitionend', handler),
         registerDocumentKeydownHandler: (handler) => document.addEventListener('keydown', handler),
         deregisterDocumentKeydownHandler: (handler) => document.removeEventListener('keydown', handler),
-        getDrawerWidth: () => this.$refs.drawer.offsetWidth,
-        setTranslateX: (value) => this.$refs.drawer.style.setProperty(
-          util.getTransformPropertyName(), value === null ? null : `translateX(${value}px)`),
+        getDrawerWidth: /* istanbul ignore next */ () =>
+          this.$refs.drawer.offsetWidth,
+        setTranslateX: /* istanbul ignore next */ (value) =>
+          this.$refs.drawer.style.setProperty(
+            util.getTransformPropertyName(),
+            value === null ? null : `translateX(${value}px)`
+          ),
         updateCssVariable: (value) => {
+          // istanbul ignore else
           if (util.supportsCssCustomProperties()) {
             this.$el.style.setProperty(OPACITY_VAR_NAME, value)
           }
         },
         getFocusableElements: () => this.$refs.drawer.querySelectorAll(FOCUSABLE_ELEMENTS),
         saveElementTabState: (el) => util.saveElementTabState(el),
-        restoreElementTabState: (el) => util.restoreElementTabState(el),
+        restoreElementTabState: /* istanbul ignore next */ (el) =>
+          util.restoreElementTabState(el),
         makeElementUntabbable: (el) => el.setAttribute('tabindex', -1),
         notifyOpen: () => this.$emit('opened'),
         notifyClose: () => this.$emit('closed'),
-        isRtl: () => window.getComputedStyle(this.$el).getPropertyValue('direction') === 'rtl',
-        isDrawer: (el) => el === this.$refs.drawer,
+        isRtl: /* istanbul ignore next */ () =>
+          window.getComputedStyle(this.$el).getPropertyValue('direction') === 'rtl',
+        isDrawer: /* istanbul ignore next */ (el) => el === this.$refs.drawer,
       })
+      this.mdcDrawer.init()
     }
   },
 
+  beforeDestroy () {
+    this.mdcDrawer.destroy()
+  },
+
   methods: {
     open () {
       this.mdcDrawer.open()
diff --git a/test/specs/Drawer.spec.js b/test/specs/Drawer.spec.js
index ff6dcf5..a912b8a 100644
--- a/test/specs/Drawer.spec.js
+++ b/test/specs/Drawer.spec.js
@@ -20,6 +20,25 @@ describe('Drawer', function () {
     vm.$refs.drawer.$el.should.have.class('mdc-temporary-drawer')
   })
 
+  it('calls foundation destroy', function (done) {
+    const vm = createVM(this, function (h) {
+      return (
+        <div>{ this.show && <Drawer ref='drawer'/> }</div>
+      )
+    }, {
+      data: { show: true },
+    })
+    const foundation = vm.$refs.drawer.mdcDrawer
+    sinon.spy(foundation, 'destroy')
+    foundation.destroy.should.have.not.been.called
+    vm.show = false
+    nextTick().then(() => {
+      foundation.destroy.should.have.been.called.once
+      foundation.destroy.restore()
+      foundation.destroy()
+    }).then(done)
+  })
+
   describe('temporary', function () {
     describe('no content', function () {
       beforeEach(function () {
@@ -55,6 +74,13 @@ describe('Drawer', function () {
         }).then(done)
       })
 
+      it('closes when clicking outside, function ()', function () {
+        this.vm.$refs.drawer.open()
+        this.vm.$refs.drawer.$el.should.have.class('mdc-temporary-drawer--open')
+        this.vm.$('.mdc-temporary-drawer').click()
+        this.vm.$refs.drawer.$el.should.not.have.class('mdc-temporary-drawer--open')
+      })
+
       it('can be opened', function (done) {
         this.vm.$refs.drawer.$el.should.not.have.class('mdc-temporary-drawer--open')
         this.vm.$refs.drawer.open()