From b7dcf11d71e269a46ca93f909d29070d3d9495c4 Mon Sep 17 00:00:00 2001
From: Leo Largillet <leo.largillet@gmail.com>
Date: Wed, 29 May 2024 15:34:05 +0200
Subject: [PATCH] feat(modal): add animation mixin, adapt tests and base close
 method on animationend event

---
 .../src/components/ods-modal/ods-modal.scss   | 26 +++----------------
 .../src/components/ods-modal/ods-modal.tsx    |  7 +++--
 .../modal/tests/behaviour/ods-modal.e2e.ts    | 10 ++-----
 .../modal/tests/behaviour/ods-modal.spec.ts   |  5 ++--
 packages/ods/src/style/_modal.scss            | 25 +++++++++++++++++-
 5 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.scss b/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.scss
index be381ebe38..c640a2105b 100644
--- a/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.scss
+++ b/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.scss
@@ -1,26 +1,8 @@
-@keyframes modal-open {
-  from {
-    transform: scale(0.8);
-    opacity: 0;
-  }
-
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
+@use '../../../../../style/modal';
+@use '../../../../../style/focus';
 
-@keyframes modal-close {
-  from {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  to {
-    transform: scale(0.9);
-    opacity: 0;
-  }
-}
+@include modal.animation-mixin(modal-open);
+@include modal.animation-mixin(modal-close);
 
 :host(.ods-modal) {
   display: none;
diff --git a/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.tsx b/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.tsx
index 917ab1157e..a6991db8c4 100644
--- a/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.tsx
+++ b/packages/ods/src/components/modal/src/components/ods-modal/ods-modal.tsx
@@ -27,10 +27,13 @@ export class OdsModal {
     if (this.modalDialog) {
       this.modalDialog.classList.add('ods-modal__dialog--close-animation');
 
-      setTimeout(() => {
+      const onAnimationEnd = () => {
         this.isOpen = false;
         this.modalDialog.classList.remove('ods-modal__dialog--close-animation');
-      }, 100);
+        this.modalDialog.removeEventListener('animationend', onAnimationEnd);
+      };
+
+      this.modalDialog.addEventListener('animationend', onAnimationEnd);
     } else {
       this.isOpen = false;
     }
diff --git a/packages/ods/src/components/modal/tests/behaviour/ods-modal.e2e.ts b/packages/ods/src/components/modal/tests/behaviour/ods-modal.e2e.ts
index 6483b9613e..c18ec15894 100644
--- a/packages/ods/src/components/modal/tests/behaviour/ods-modal.e2e.ts
+++ b/packages/ods/src/components/modal/tests/behaviour/ods-modal.e2e.ts
@@ -62,16 +62,10 @@ describe('ods-modal behaviour', () => {
     const modal = await page.find('ods-modal');
     await modal.callMethod('close');
 
-    // Wait for the dialog to close
-    await new Promise((resolve) => setTimeout(resolve, 200));
-
     await page.waitForChanges();
 
-    const isOpen = await page.evaluate(() => {
-      const dialog = document.querySelector('ods-modal')?.shadowRoot?.querySelector('.ods-modal__dialog') as HTMLDialogElement;
-      return dialog && dialog.hasAttribute('open');
-    });
+    const closeAnimation = await page.find('ods-modal >>> .ods-modal__dialog--close-animation');
 
-    expect(isOpen).toBe(false);
+    expect(closeAnimation).not.toBeNull();
   });
 });
diff --git a/packages/ods/src/components/modal/tests/behaviour/ods-modal.spec.ts b/packages/ods/src/components/modal/tests/behaviour/ods-modal.spec.ts
index d82b2102b0..98ead3ec8c 100644
--- a/packages/ods/src/components/modal/tests/behaviour/ods-modal.spec.ts
+++ b/packages/ods/src/components/modal/tests/behaviour/ods-modal.spec.ts
@@ -29,9 +29,8 @@ describe('ods-modal behaviour', () => {
     await modal.close();
     await page.waitForChanges();
 
-    // Wait for the dialog to close
-    await new Promise((resolve) => setTimeout(resolve, 200));
+    const closeAnimation = page.root?.shadowRoot?.querySelector('.ods-modal__dialog--close-animation');
 
-    expect(modal.isOpen).toBe(false);
+    expect(closeAnimation).not.toBeNull();
   });
 });
diff --git a/packages/ods/src/style/_modal.scss b/packages/ods/src/style/_modal.scss
index 6b77ef868a..6ee7b3b634 100644
--- a/packages/ods/src/style/_modal.scss
+++ b/packages/ods/src/style/_modal.scss
@@ -1,5 +1,29 @@
 $ods-modal-border-radius: var(--ods-border-radius-sm);
 
+@mixin animation-mixin($name) {
+  @keyframes modal-open {
+    0% {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes modal-close {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(0.9);
+      opacity: 0;
+    }
+  }
+}
+
 @mixin ods-modal() {
   position: fixed;
   z-index: 1;
@@ -11,7 +35,6 @@ $ods-modal-border-radius: var(--ods-border-radius-sm);
   width: 100%;
   max-width: 512px;
   overflow: hidden;
-  animation: modal-open 0.2s ease-in-out;
 
   &::backdrop {
     opacity: 0.75;