fix(modal): fix modal event handling and add some tests

addon/components/uk-modal.js

@@ -1,4 +1,5 @@
 import Component from "@ember/component";
+import { computed } from "@ember/object";
 import layout from "../templates/components/uk-modal";
 import UIkit from "uikit";
 import { scheduleOnce } from "@ember/runloop";
@@ -23,56 +24,69 @@ export default Component.extend({
     ".uk-modal-close-full"
   ].join(", "),
 
-  init() {
-    this._super(...arguments);
+  modalId: computed("elementId", function() {
+    return `modal-${this.elementId}`;
+  }),
 
-    const { APP } = getOwner(this).resolveRegistration("config:environment");
+  containerElement: computed("container", function() {
+    return getOwner(this)
+      .lookup("service:-document")
+      .querySelector(this.container);
+  }),
 
-    this.set("container", document.querySelector(APP.rootElement || "body"));
-  },
+  init() {
+    this._super(...arguments);
 
-  _show() {
-    this.getWithDefault("on-show", noop)();
-  },
+    const config = getOwner(this).resolveRegistration("config:environment");
 
-  _hide() {
-    this.getWithDefault("on-hide", noop)();
+    this.set("container", config.APP.rootElement || "body");
   },
 
   didInsertElement() {
-    const id = `#modal-${this.elementId}`;
-
     this.set(
       "modal",
-      UIkit.modal(id, {
-        escClose: this.get("escClose"),
-        bgClose: this.get("bgClose"),
-        stack: this.get("stack"),
-        container: this.get("container"),
-        clsPage: this.get("clsPage"),
-        clsPanel: this.get("clsPanel"),
-        selClose: this.get("selClose")
-      })
+      UIkit.modal(
+        `#${this.modalId}`,
+        this.getProperties(
+          "escClose",
+          "bgClose",
+          "stack",
+          "container",
+          "clsPage",
+          "clsPanel",
+          "selClose"
+        )
+      )
     );
-
-    UIkit.util.on(id, "show", () => this._show());
-    UIkit.util.on(id, "hidden", () => this._hide());
   },
 
   didReceiveAttrs() {
-    scheduleOnce("afterRender", this, "initVisible");
+    scheduleOnce("afterRender", this, "toggleModal");
   },
 
   willDestroyElement() {
-    this.modal.$el.parentNode.removeChild(this.modal.$el);
-    this.set("modal", null);
+    if (this.modal) {
+      this.modal.$destroy(true);
+
+      this.set("modal", null);
+    }
   },
 
-  initVisible() {
+  toggleModal() {
+    if (!this.modal) return;
+
     if (this.visible) {
       this.modal.show();
+
+      UIkit.util.on(`#${this.modalId}`, "hidden", () =>
+        this.getWithDefault("on-hide", noop)
+      );
     } else {
       this.modal.hide();
+
+      UIkit.util.on(`#${this.modalId}`, "show", () =>
+        this.getWithDefault("on-show", noop)
+      );
     }
   }
 });

addon/templates/components/uk-modal.hbs

@@ -1,6 +1,6 @@
-{{#-in-element container}}
-  <div id="modal-{{elementId}}">
-    <div class="uk-modal-dialog ">
+{{#-in-element containerElement}}
+  <div id={{this.modalId}}>
+    <div class="uk-modal-dialog">
       {{#if @btnClose}}<button class="uk-modal-close-default" type="button" uk-close></button>{{/if}}
       <div class="uk-modal-body">
         {{yield}}

tests/dummy/app/snippets/modal.hbs

@@ -1,4 +1,4 @@
-{{#uk-modal visible=visible}}
+{{#uk-modal visible=visible on-hide=(action (mut visible) false)}}
   <h2 class="uk-modal-title">Attention</h2>
   <p>Do you really want to proceed?</p>
   <p class="uk-text-right">

tests/dummy/app/templates/docs/components/modal.hbs

@@ -3,7 +3,6 @@
 <div class="uk-padding uk-box-shadow-medium uk-margin">
   {{#uk-modal
     visible=visible
-    on-submit=(action "submit")
     on-show=(action (mut visible) true)
     on-hide=(action (mut visible) false)
   }}

tests/integration/components/uk-modal-test.js

@@ -1,28 +1,58 @@
 import { module, test } from "qunit";
 import { setupRenderingTest } from "ember-qunit";
-import { render } from "@ember/test-helpers";
+import { render, settled, triggerKeyEvent } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 
 module("Integration | Component | uk-modal", function(hooks) {
   setupRenderingTest(hooks);
 
   test("it doesn't render by default", async function(assert) {
+    assert.expect(1);
+
     await render(hbs`
       {{#uk-modal}}
         <h2>Test</h2>
       {{/uk-modal}}
     `);
 
-    assert.dom(".uk-modal").hasText("Test");
+    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}}
+        <h2>Test</h2>
+      {{/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"));
+
     await render(hbs`
-      {{#uk-modal visible="true"}}
+      {{#uk-modal visible=true on-hide=hide}}
         <h2>Test</h2>
       {{/uk-modal}}
     `);
 
-    assert.dom(".uk-modal").hasText("Test");
+    await settled();
+
+    // close by pressing esc
+    await triggerKeyEvent(".uk-modal", "keydown", 27);
+
+    await settled();
+
+    assert.dom(".uk-modal.uk-open").doesNotExist();
+    assert.verifySteps(["hide"]);
   });
 });