🐛 Drawer: Call init/destroy of foundation

posva · May 9, 2017 · 3307244 · 3307244
1 parent db4679b
commit 3307244
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 8 deletions.
diff --git 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
@@ -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()