Fix didTransitionOut not being called reliably

addon/src/modifiers/css-transition.js

@@ -27,7 +27,7 @@ if (macroCondition(dependencySatisfies('ember-modifier', '>=3.2.0 || 4.x'))) {
     parentElement = null;
     nextElementSibling = null;
     installed = false;
-    finishedTransitionIn = false;
+    startedTransitionIn = false;
     isEnabled = true;
     parentSelector;
 
@@ -108,7 +108,7 @@ if (macroCondition(dependencySatisfies('ember-modifier', '>=3.2.0 || 4.x'))) {
       super(owner, args);
 
       registerDestructor(this, () => {
-        if (this.isEnabled === false || !this.finishedTransitionIn) {
+        if (this.isEnabled === false || !this.startedTransitionIn) {
           return;
         }
 
@@ -222,6 +222,8 @@ if (macroCondition(dependencySatisfies('ember-modifier', '>=3.2.0 || 4.x'))) {
     }
 
     *transitionIn() {
+      this.startedTransitionIn = true;
+
       if (this.enterClass) {
         yield* this.transition({
           className: this.enterClass,
@@ -233,8 +235,6 @@ if (macroCondition(dependencySatisfies('ember-modifier', '>=3.2.0 || 4.x'))) {
           this.didTransitionIn();
         }
       }
-
-      this.finishedTransitionIn = true;
     }
 
     *transitionOut() {

test-app/tests/integration/components/css-transition-test.js

@@ -197,6 +197,11 @@ module('Integration | Component | transition group', function (hooks) {
           this.didTransitionOut.notCalled,
           'didTransitionOut was not called'
         );
+
+        await new Promise((resolve) => {
+          setTimeout(resolve, 1000);
+        });
+
         assert.dom('#my-element_clone').doesNotExist('clone was not created');
       });
 
@@ -228,6 +233,11 @@ module('Integration | Component | transition group', function (hooks) {
           this.didTransitionOut.notCalled,
           'didTransitionOut was not called'
         );
+
+        await new Promise((resolve) => {
+          setTimeout(resolve, 1000);
+        });
+
         assert.dom('#my-element_clone').doesNotExist('clone was not created');
       });
     });
@@ -500,4 +510,146 @@ module('Integration | Component | transition group', function (hooks) {
       .dom('#my-element')
       .exists({ count: 1 }, 'child element is still rendered');
   });
+
+  module('Always call didTransitionOut', function () {
+    let testCases = [
+      {
+        name: 'element',
+        template: hbs`
+        <style>
+          .window-enter,
+          .window-leave-to {
+            opacity: 0;
+            transform: scale(0.9);
+          }
+
+          .window-enter-active,
+          .window-leave-active {
+            transition: opacity 0.5s ease, transform 0.5s ease;
+          }
+
+          .window-enter-to,
+          .window-leave {
+            opacity: 1;
+            transform: scale(1);
+          }
+        </style>
+
+        {{#if this.show}}
+          <div id="my-element" {{css-transition
+            enterClass="window-enter"
+            enterActiveClass="window-enter-active"
+            enterToClass="window-enter-to"
+            leaveClass="window-leave"
+            leaveActiveClass="window-leave-active"
+            leaveToClass="window-leave-to"
+            didTransitionOut=this.didTransitionOut
+          }}>
+            <p class="content">Çup?</p>
+          </div>
+        {{/if}}
+      `,
+      },
+      {
+        name: 'classic component',
+        template: hbs`
+        <style>
+          .window-enter,
+          .window-leave-to {
+            opacity: 0;
+            transform: scale(0.9);
+          }
+
+          .window-enter-active,
+          .window-leave-active {
+            transition: opacity 0.5s ease, transform 0.5s ease;
+          }
+
+          .window-enter-to,
+          .window-leave {
+            opacity: 1;
+            transform: scale(1);
+          }
+        </style>
+
+        {{#if this.show}}
+          <MyComponent id="my-element" {{css-transition
+            enterClass="window-enter"
+            enterActiveClass="window-enter-active"
+            enterToClass="window-enter-to"
+            leaveClass="window-leave"
+            leaveActiveClass="window-leave-active"
+            leaveToClass="window-leave-to"
+            didTransitionOut=this.didTransitionOut
+          }}>
+            <p class="content">Çup?</p>
+          </MyComponent>
+        {{/if}}
+      `,
+      },
+      {
+        name: 'glimmer component',
+        template: hbs`
+        <style>
+          .window-enter,
+          .window-leave-to {
+            opacity: 0;
+            transform: scale(0.9);
+          }
+
+          .window-enter-active,
+          .window-leave-active {
+            transition: opacity 0.5s ease, transform 0.5s ease;
+          }
+
+          .window-enter-to,
+          .window-leave {
+            opacity: 1;
+            transform: scale(1);
+          }
+        </style>
+
+        {{#if this.show}}
+          <GlimmerComponent id="my-element" {{css-transition
+            enterClass="window-enter"
+            enterActiveClass="window-enter-active"
+            enterToClass="window-enter-to"
+            leaveClass="window-leave"
+            leaveActiveClass="window-leave-active"
+            leaveToClass="window-leave-to"
+            didTransitionOut=this.didTransitionOut
+          }}>
+            <p class="content">Çup?</p>
+          </GlimmerComponent>
+        {{/if}}
+      `,
+      },
+    ];
+
+    testCases.forEach((i) => {
+      test(`didTransitionOut is called for (${i.name})`, async function (assert) {
+        this.didTransitionOut = () => {
+          assert.step('transition-out');
+        };
+
+        this.set('show', false);
+
+        await render(i.template);
+
+        this.set('show', true);
+
+        await new Promise((resolve) => {
+          setTimeout(resolve, 1);
+        });
+
+        this.set('show', false);
+
+        await new Promise((resolve) => {
+          setTimeout(resolve, 2000);
+        });
+
+        assert.verifySteps(['transition-out']);
+      });
+    });
+  });
 });