From 6d1da169e73e4224c913cd87f9a599ccfda39295 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Tue, 27 Feb 2024 18:17:15 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20prevent=20animate?=
 =?UTF-8?q?=20usage=20on=20some=20envs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This animate function is not supported by some testing environments,
to prevent any crashes on consumers side we need to first make sure
this function is defined.

Fixes #281
---
 .../src/components/Toast/ToastProvider.tsx    | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/components/Toast/ToastProvider.tsx b/packages/react/src/components/Toast/ToastProvider.tsx
index 3e0b15a..f1c4011 100644
--- a/packages/react/src/components/Toast/ToastProvider.tsx
+++ b/packages/react/src/components/Toast/ToastProvider.tsx
@@ -85,27 +85,33 @@ export const ToastProvider = ({ children }: PropsWithChildren) => {
   );
 
   const animateContainer = async () => {
+    if (!container.current) {
+      return;
+    }
     // FLIP pattern: https://aerotwist.com/blog/flip-your-animations/
     // FIRST
     const first = previousContainerHeight.current;
 
     // LAST
-    const last = container.current!.offsetHeight;
+    const last = container.current.offsetHeight;
 
     // INVERT
     const invert = last - first;
 
     // PLAY
-    container.current!.animate(
-      [
-        { transform: `translateY(${invert}px)` },
-        { transform: "translateY(0)" },
-      ],
-      {
-        duration: getSlideInDuration(),
-        easing: "ease",
-      },
-    );
+    // We need to check if the animate function exists because it's not available in some testing environments ( like jest-dom )
+    if (typeof container.current.animate === "function") {
+      container.current.animate(
+        [
+          { transform: `translateY(${invert}px)` },
+          { transform: "translateY(0)" },
+        ],
+        {
+          duration: getSlideInDuration(),
+          easing: "ease",
+        },
+      );
+    }
   };
 
   // We only want this to be triggered when an item gets ADDED to the list, not when