✨ Add closing event on HdModal Overlay (#785)

* ✨ Add closing event on HdModal Overlay * 🎨 Rename method
homeday-de · Jul 23, 2021 · 2e6f8f8 · 2e6f8f8
1 parent 1d770f4
commit 2e6f8f8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/components/HdModal.vue b/src/components/HdModal.vue
@@ -5,7 +5,7 @@
       class="hd-modal"
       :class="{ 'hd-modal--with-icon': withIcon }"
     >
-      <div class="hd-modal__overlay" />
+      <div class="hd-modal__overlay" @click="onClose" />
       <slot>
         <div class="hd-modal__container">
           <header class="hd-modal__header">
@@ -50,7 +50,7 @@
           <button
             v-if="isCloseButtonVisible"
             class="hd-modal__close-button"
-            @click="$emit('close')"
+            @click="onClose()"
           >
             <hd-icon
               :src="closeIcon"
@@ -120,7 +120,7 @@ export default {
     },
   },
   methods: {
-    onCloseClick() {
+    onClose() {
       this.$emit('close');
     },
   },

diff --git a/tests/unit/components/HdModal.spec.js b/tests/unit/components/HdModal.spec.js
@@ -5,6 +5,7 @@ const TITLE_SELECTOR = '.hd-modal__title';
 const BODY_SELECTOR = '.hd-modal__body';
 const ACTIONS_SELECTOR = '.hd-modal__footer';
 const CLOSE_BUTTON_SELECTOR = '.hd-modal__close-button';
+const OVERLAY_SELECTOR = '.hd-modal__overlay';
 const HEADER_SELECTOR = '.hd-modal__header';
 const ICON_SELECTOR = 'hd-icon-stub';
 const WITH_ICON_SELECTOR = '.hd-modal--with-icon';
@@ -121,4 +122,12 @@ describe('HdModal', () => {
 
     expect(wrapper.html()).toMatchSnapshot();
   });
+
+  it('renders the modal and trigger a click on the overlay', async () => {
+    const wrapper = wrapperBuilder();
+
+    await wrapper.find(OVERLAY_SELECTOR).trigger('click');
+
+    expect(wrapper.emitted().close).toBeTruthy();
+  });
 });