fix(modal): fix modal event handling and tests (#311)

adfinis · Dec 4, 2019 · c7f8156 · c7f8156
1 parent 3955fc5
commit c7f8156
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,16 +17,14 @@ module("Integration | Component | uk-modal", function(hooks) {
       {{/uk-modal}}
     `);
 
-    await settled();
-
     assert.dom(".uk-modal.uk-open").doesNotExist();
   });
 
   test("it renders if visible=true", async function(assert) {
     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"]);