From c7f815655fbaf3ff907b1da6797b2fa543bb945a Mon Sep 17 00:00:00 2001
From: Jonas Metzener <jonas.metzener@adfinis-sygroup.ch>
Date: Wed, 4 Dec 2019 10:06:45 +0100
Subject: [PATCH] fix(modal): fix modal event handling and tests (#311)

---
 addon/components/uk-modal.js                  | 72 ++++++++++++++++---
 addon/templates/components/uk-modal.hbs       |  2 +-
 .../app/templates/docs/components/modal.hbs   |  2 +-
 tests/integration/components/uk-modal-test.js | 21 ++----
 4 files changed, 70 insertions(+), 27 deletions(-)

diff --git a/addon/components/uk-modal.js b/addon/components/uk-modal.js
index 1b35ece4..5534b734 100644
--- a/addon/components/uk-modal.js
+++ b/addon/components/uk-modal.js
@@ -26,10 +26,16 @@ export default Component.extend({
     ".uk-modal-close-full"
   ].join(", "),
 
+  isAnimating: false,
+
   modalId: computed("elementId", function() {
     return `modal-${this.elementId}`;
   }),
 
+  modalSelector: computed("modalId", function() {
+    return `#${this.modalId}`;
+  }),
+
   containerElement: computed("container", function() {
     return getOwner(this)
       .lookup("service:-document")
@@ -42,6 +48,34 @@ export default Component.extend({
     const config = getOwner(this).resolveRegistration("config:environment");
 
     this.set("container", config.APP.rootElement || "body");
+
+    this.set("eventHandlers", {
+      hidden: async () => {
+        if (this.visible) {
+          await this.getWithDefault("on-hide", noop)();
+        }
+
+        this.set("isAnimating", false);
+      },
+
+      show: async () => {
+        if (!this.visible) {
+          await this.getWithDefault("on-show", noop)();
+        }
+      },
+
+      shown: () => {
+        this.set("isAnimating", false);
+      },
+
+      beforehide: () => {
+        this.set("isAnimating", true);
+      },
+
+      beforeshow: () => {
+        this.set("isAnimating", true);
+      }
+    });
   },
 
   didInsertElement() {
@@ -60,6 +94,8 @@ export default Component.extend({
         )
       )
     );
+
+    scheduleOnce("afterRender", this, "_setupEvents");
   },
 
   didReceiveAttrs() {
@@ -68,27 +104,41 @@ export default Component.extend({
 
   willDestroyElement() {
     if (this.modal) {
+      this._teardownEvents();
+
       this.modal.$destroy(true);
 
       this.set("modal", null);
     }
   },
 
-  toggleModal() {
+  _setupEvents() {
+    Object.keys(this.eventHandlers).forEach(event => {
+      UIkit.util.on(
+        this.modalSelector,
+        event,
+        this.get(`eventHandlers.${event}`)
+      );
+    });
+  },
+
+  _teardownEvents() {
+    Object.keys(this.eventHandlers).forEach(event => {
+      UIkit.util.off(
+        this.modalSelector,
+        event,
+        this.get(`eventHandlers.${event}`)
+      );
+    });
+  },
+
+  async toggleModal() {
     if (!this.modal) return;
 
     if (this.visible) {
-      this.modal.show();
-
-      UIkit.util.on(`#${this.modalId}`, "hidden", () =>
-        this.getWithDefault("on-hide", noop)
-      );
+      await this.modal.show();
     } else {
-      this.modal.hide();
-
-      UIkit.util.on(`#${this.modalId}`, "show", () =>
-        this.getWithDefault("on-show", noop)
-      );
+      await this.modal.hide();
     }
   }
 });
diff --git a/addon/templates/components/uk-modal.hbs b/addon/templates/components/uk-modal.hbs
index 73515609..79de5eaf 100644
--- a/addon/templates/components/uk-modal.hbs
+++ b/addon/templates/components/uk-modal.hbs
@@ -1,5 +1,5 @@
 {{#-in-element containerElement}}
-  <div id={{this.modalId}} class={{@modalClass}}>
+  <div id={{this.modalId}} class={{@modalClass}} data-test-animating={{this.isAnimating}}>
     <div class="uk-modal-dialog {{@dialogClass}}">
       {{#if this.btnClose}}<button class="uk-modal-close-default" type="button" uk-close></button>{{/if}}
       {{yield (hash
diff --git a/tests/dummy/app/templates/docs/components/modal.hbs b/tests/dummy/app/templates/docs/components/modal.hbs
index 5d1e13b0..43bc917f 100644
--- a/tests/dummy/app/templates/docs/components/modal.hbs
+++ b/tests/dummy/app/templates/docs/components/modal.hbs
@@ -22,7 +22,7 @@
     {{/modal.footer}}
   {{/uk-modal}}
 
-  {{uk-button label="Open modal" on-click=(action (mut visible true))}}
+  {{uk-button label="Open modal" on-click=(action (mut visible) true)}}
 </div>
 
 {{#uk-switcher animation="uk-animation-fade" as |switcher|}}
diff --git a/tests/integration/components/uk-modal-test.js b/tests/integration/components/uk-modal-test.js
index c800688f..6fb6a8c8 100644
--- a/tests/integration/components/uk-modal-test.js
+++ b/tests/integration/components/uk-modal-test.js
@@ -1,6 +1,6 @@
 import { module, test } from "qunit";
 import { setupRenderingTest } from "ember-qunit";
-import { render, settled, triggerKeyEvent } from "@ember/test-helpers";
+import { render, click, waitFor } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 
 module("Integration | Component | uk-modal", function(hooks) {
@@ -17,8 +17,6 @@ module("Integration | Component | uk-modal", function(hooks) {
       {{/uk-modal}}
     `);
 
-    await settled();
-
     assert.dom(".uk-modal.uk-open").doesNotExist();
   });
 
@@ -26,7 +24,7 @@ module("Integration | Component | uk-modal", function(hooks) {
     assert.expect(1);
 
     await render(hbs`
-      {{#uk-modal visible=true}}
+      {{#uk-modal visible=true as |modal|}}
         {{#modal.header}}
           <h2>Test</h2>
         {{/modal.header}}
@@ -39,30 +37,25 @@ module("Integration | Component | uk-modal", function(hooks) {
       {{/uk-modal}}
     `);
 
-    await settled();
-
     assert.dom(".uk-modal.uk-open").exists();
   });
 
   test("it triggers the on-hide action", async function(assert) {
     assert.expect(3);
 
-    this.set("hide", assert.step("hide"));
+    this.set("hide", () => assert.step("hide"));
 
     await render(hbs`
-      {{#uk-modal visible=true on-hide=hide}}
+      {{#uk-modal visible=true on-hide=this.hide as |modal|}}
         {{#modal.header}}
           <h2>Test</h2>
         {{/modal.header}}
       {{/uk-modal}}
     `);
 
-    await settled();
-
-    // close by pressing esc
-    await triggerKeyEvent(".uk-modal", "keydown", 27);
-
-    await settled();
+    // close by pressing close button
+    await click(".uk-modal .uk-close");
+    await waitFor(".uk-modal[data-test-animating]", { count: 0 });
 
     assert.dom(".uk-modal.uk-open").doesNotExist();
     assert.verifySteps(["hide"]);