Enable onAnimationModalInEnd callback

Closes #637

Author: pichfl

README.md

@@ -141,6 +141,9 @@ this.modals.open(
     // optional: a hook that is called when the closing animation of
     //           the modal (so not the backdrop) has finished.
     onAnimationModalOutEnd: () => {},
+    // optional: a hook that is called when the opening animation of
+    //           the modal (so not the backdrop) has finished.
+    onAnimationModalInEnd: () => {},
   },
 );
 ```

addon/components/modal.js

@@ -104,7 +104,11 @@ export default Component.extend({
       let isOutAnimation = animationName.substring(animationName.length - 4) === '-out';
       if (isOutAnimation) {
         this.modal._remove();
+
+        return;
       }
+
+      this.modal._options.onAnimationModalInEnd?.(animationName);
     };
 
     let element = this._getElement();

tests/application/basics-test.js

@@ -2,7 +2,7 @@ import { visit, click, triggerKeyEvent, waitUntil } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import { module, test } from 'qunit';
 
-import sinon from 'sinon';
+import Modal1 from 'dummy/components/modal1';
 
 import { setupPromiseModals } from 'ember-promise-modals/test-support';
 
@@ -71,6 +71,45 @@ module('Application | basics', function (hooks) {
     assert.dom('body', document).hasStyle({ overflow: 'visible' });
   });
 
+  test('opening a modal calls onAnimationModal*End once the animation ends', async function (assert) {
+    await visit('/');
+
+    assert.dom('.epm-backdrop').doesNotExist();
+    assert.dom('.epm-modal').doesNotExist();
+
+    const applicationController = this.owner.lookup('controller:application');
+    const modalsService = applicationController.modals;
+    const showModal = applicationController.actions.showModal;
+
+    applicationController.actions.showModal = () => {
+      assert.step('open');
+
+      modalsService.open(
+        Modal1,
+        {},
+        {
+          onAnimationModalInEnd: () => {
+            assert.step('onAnimationModalInEnd');
+          },
+          onAnimationModalOutEnd: () => {
+            assert.step('onAnimationModalOutEnd');
+          },
+        },
+      );
+    };
+
+    await click('[data-test-show-modal]');
+    await waitUntil(() => !document.body.classList.contains('epm-animating'));
+    await click('.epm-backdrop');
+
+    assert.dom('.epm-backdrop').doesNotExist();
+    assert.dom('.epm-modal').doesNotExist();
+
+    assert.verifySteps(['open', 'onAnimationModalInEnd', 'onAnimationModalOutEnd']);
+
+    applicationController.actions.showModal = showModal;
+  });
+
   test('pressing the Escape keyboard button closes the modal', async function (assert) {
     await visit('/');
 
@@ -100,29 +139,4 @@ module('Application | basics', function (hooks) {
       foo: 'bar',
     });
   });
-
-  test('closing a modal will trigger the animation start on the `modals` service', async function (assert) {
-    await visit('/');
-
-    let modalsService = this.owner.lookup('service:modals');
-    let spy = sinon.spy(modalsService, '_onModalAnimationStart');
-
-    assert.dom('.epm-modal').doesNotExist();
-
-    await click('[data-test-show-modal]');
-
-    assert.dom('.epm-modal').exists();
-
-    await waitUntil(() => {
-      let { opacity } = window.getComputedStyle(document.querySelector('.epm-backdrop'));
-      return opacity === '1';
-    });
-
-    assert.strictEqual(spy.callCount, 1, '_onModalAnimationStart is called when opening a modal');
-
-    await triggerKeyEvent(document, 'keydown', 'Escape');
-
-    assert.dom('.epm-modal').doesNotExist();
-    assert.strictEqual(spy.callCount, 2, '_onModalAnimationStart is called again when closing it');
-  });
 });