From 83b68b77e16951b4344811f6954ae90846016d20 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@dfinity.org>
Date: Tue, 4 Feb 2025 09:36:51 +0100
Subject: [PATCH] feat: use directive transition wrappers

---
 src/lib/components/Backdrop.svelte          |  6 +-
 src/lib/components/BusyScreen.svelte        |  4 +-
 src/lib/components/Modal.svelte             |  8 +--
 src/lib/components/Popover.svelte           | 13 +++-
 src/lib/components/ThemeToggleButton.svelte |  6 +-
 src/lib/components/Toast.svelte             | 12 +++-
 src/lib/components/WizardTransition.svelte  |  4 +-
 src/lib/directives/transition.directives.ts | 67 +++++++++++++++++++++
 src/lib/index.ts                            |  1 +
 9 files changed, 101 insertions(+), 20 deletions(-)
 create mode 100644 src/lib/directives/transition.directives.ts

diff --git a/src/lib/components/Backdrop.svelte b/src/lib/components/Backdrop.svelte
index 6a4141967..cd62f5cfb 100644
--- a/src/lib/components/Backdrop.svelte
+++ b/src/lib/components/Backdrop.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fade } from "svelte/transition";
+  import { testSafeFade } from "$lib/directives/transition.directives";
   import { createEventDispatcher } from "svelte";
   import { i18n } from "$lib/stores/i18n";
   import { handleKeyPress } from "$lib/utils/keyboard.utils";
@@ -18,8 +18,8 @@
   role="button"
   tabindex="-1"
   aria-label={$i18n.core.close}
-  in:fade|global={{ duration: FADE_IN_DURATION }}
-  out:fade|global={{ duration: FADE_OUT_DURATION }}
+  in:testSafeFade|global={{ duration: FADE_IN_DURATION }}
+  out:testSafeFade|global={{ duration: FADE_OUT_DURATION }}
   class="backdrop"
   class:visible={!invisible}
   on:click|stopPropagation={close}
diff --git a/src/lib/components/BusyScreen.svelte b/src/lib/components/BusyScreen.svelte
index 93f4d7d6f..5454d08dc 100644
--- a/src/lib/components/BusyScreen.svelte
+++ b/src/lib/components/BusyScreen.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fade } from "svelte/transition";
+  import { testSafeFade } from "$lib/directives/transition.directives";
   import { busy, busyMessage } from "$lib/stores/busy.store";
   import Spinner from "$lib/components/Spinner.svelte";
   import { nonNullish } from "@dfinity/utils";
@@ -7,7 +7,7 @@
 
 <!-- Display spinner and lock UI if busyStore is not empty -->
 {#if $busy}
-  <div data-tid="busy" transition:fade|global>
+  <div data-tid="busy" transition:testSafeFade|global>
     <div class="content">
       {#if nonNullish($busyMessage)}
         <p>{$busyMessage}</p>
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
index e015bf164..b239b44ec 100644
--- a/src/lib/components/Modal.svelte
+++ b/src/lib/components/Modal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fade } from "svelte/transition";
+  import { testSafeFade } from "$lib/directives/transition.directives";
   import { createEventDispatcher } from "svelte";
   import { i18n } from "$lib/stores/i18n";
   import IconClose from "$lib/icons/IconClose.svelte";
@@ -46,7 +46,7 @@
 {#if visible}
   <div
     class="modal"
-    transition:fade|global={{ duration: 25 }}
+    transition:testSafeFade|global={{ duration: 25 }}
     on:introend
     {role}
     data-tid={testId}
@@ -56,8 +56,8 @@
   >
     <Backdrop {disablePointerEvents} on:nnsClose />
     <div
-      in:fade|global={{ duration: FADE_IN_DURATION }}
-      out:fade|global={{ duration: FADE_OUT_DURATION }}
+      in:testSafeFade|global={{ duration: FADE_IN_DURATION }}
+      out:testSafeFade|global={{ duration: FADE_OUT_DURATION }}
       class={`wrapper ${role}`}
     >
       {#if showHeader}
diff --git a/src/lib/components/Popover.svelte b/src/lib/components/Popover.svelte
index 156e6e22b..fdd8b24e6 100644
--- a/src/lib/components/Popover.svelte
+++ b/src/lib/components/Popover.svelte
@@ -1,6 +1,9 @@
 <!-- https://github.com/papyrs/papyrs/blob/main/src/lib/components/ui/Popover.svelte -->
 <script lang="ts">
-  import { fade, scale } from "svelte/transition";
+  import {
+    testSafeFade,
+    testSafeScale,
+  } from "$lib/directives/transition.directives";
   import { quintOut } from "svelte/easing";
   import { i18n } from "$lib/stores/i18n";
   import Backdrop from "./Backdrop.svelte";
@@ -30,7 +33,7 @@
   <div
     role="menu"
     aria-orientation="vertical"
-    transition:fade|global
+    transition:testSafeFade|global
     class="popover"
     tabindex="-1"
     style="--popover-top: {`${bottom}px`}; --popover-left: {`${left}px`}; --popover-right: {`${
@@ -45,7 +48,11 @@
       invisible={invisibleBackdrop}
     />
     <div
-      transition:scale|global={{ delay: 25, duration: 150, easing: quintOut }}
+      transition:testSafeScale|global={{
+        delay: 25,
+        duration: 150,
+        easing: quintOut,
+      }}
       class="wrapper"
       class:with-border={invisibleBackdrop}
       class:rtl={direction === "rtl"}
diff --git a/src/lib/components/ThemeToggleButton.svelte b/src/lib/components/ThemeToggleButton.svelte
index eea69f4b0..7d16edbb1 100644
--- a/src/lib/components/ThemeToggleButton.svelte
+++ b/src/lib/components/ThemeToggleButton.svelte
@@ -4,7 +4,7 @@
   import { i18n } from "$lib/stores/i18n";
   import IconLightMode from "$lib/icons/IconLightMode.svelte";
   import IconDarkMode from "$lib/icons/IconDarkMode.svelte";
-  import { fade } from "svelte/transition";
+  import { testSafeFade } from "$lib/directives/transition.directives";
 
   const switchTheme = () => {
     themeStore.select($themeStore === Theme.LIGHT ? Theme.DARK : Theme.LIGHT);
@@ -21,11 +21,11 @@
   aria-label={$i18n.theme.switch_theme}
 >
   {#if isDarkMode}
-    <span in:fade|global>
+    <span in:testSafeFade|global>
       <IconLightMode />
     </span>
   {:else}
-    <span in:fade|global>
+    <span in:testSafeFade|global>
       <IconDarkMode />
     </span>
   {/if}
diff --git a/src/lib/components/Toast.svelte b/src/lib/components/Toast.svelte
index f96a6dba8..7f512b176 100644
--- a/src/lib/components/Toast.svelte
+++ b/src/lib/components/Toast.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
   import { toastsStore } from "$lib/stores/toasts.store";
-  import { fade, fly } from "svelte/transition";
+  import {
+    testSafeFade,
+    testSafeFly,
+  } from "$lib/directives/transition.directives";
   import { i18n } from "$lib/stores/i18n";
   import type {
     ToastLevel,
@@ -92,8 +95,11 @@
   data-tid="toast-component"
   role="dialog"
   class={`toast ${theme ?? "themed"}`}
-  in:fly|global={{ y: (position === "top" ? -1 : 1) * 100, duration: 200 }}
-  out:fade|global={{ delay: 100 }}
+  in:testSafeFly|global={{
+    y: (position === "top" ? -1 : 1) * 100,
+    duration: 200,
+  }}
+  out:testSafeFade|global={{ delay: 100 }}
 >
   <div class="icon {level}" aria-hidden="true">
     {#if spinner}
diff --git a/src/lib/components/WizardTransition.svelte b/src/lib/components/WizardTransition.svelte
index 78286efd5..00eebe61c 100644
--- a/src/lib/components/WizardTransition.svelte
+++ b/src/lib/components/WizardTransition.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { fly } from "svelte/transition";
+  import { testSafeFly } from "$lib/directives/transition.directives";
 
   // Instead of a number an object is used to make svelte notice any updates need rerender
   export let transition: { diff: number } = { diff: 0 };
@@ -19,7 +19,7 @@
 {#key transition}
   <div
     bind:clientWidth={absolutOffset}
-    in:fly|global={{ x: slideOffset, duration: ANIMATION_DURATION }}
+    in:testSafeFly|global={{ x: slideOffset, duration: ANIMATION_DURATION }}
     class="transition"
   >
     <slot />
diff --git a/src/lib/directives/transition.directives.ts b/src/lib/directives/transition.directives.ts
new file mode 100644
index 000000000..ae9841899
--- /dev/null
+++ b/src/lib/directives/transition.directives.ts
@@ -0,0 +1,67 @@
+import {
+  fade as svelteFade,
+  fly as svelteFly,
+  scale as svelteScale,
+  type FadeParams,
+  type TransitionConfig,
+} from "svelte/transition";
+
+/**
+ * A wrapper around Svelte's `fade` transition that disables itself in test mode.
+ *
+ * Prevents the test error "Cannot set properties of undefined (setting 'onfinish')".
+ *
+ * @param {HTMLElement} node - The HTML element to apply the transition to.
+ * @param {FadeParams} [params] - Optional parameters for the fade transition.
+ * @returns {TransitionConfig} The transition configuration, or an empty object in test mode.
+ */
+export const testSafeFade = (
+  node: HTMLElement,
+  params?: FadeParams | undefined,
+): TransitionConfig => {
+  if (process.env.NODE_ENV === "test") {
+    return {};
+  }
+
+  return svelteFade(node, params);
+};
+
+/**
+ * A wrapper around Svelte's `fly` transition that disables itself in test mode.
+ *
+ * Prevents the test error "Cannot set properties of undefined (setting 'onfinish')".
+ *
+ * @param {HTMLElement} node - The HTML element to apply the transition to.
+ * @param {FlyParams} [params] - Optional parameters for the fly transition.
+ * @returns {TransitionConfig} The transition configuration, or an empty object in test mode.
+ */
+export const testSafeFly = (
+  node: HTMLElement,
+  params?: FadeParams | undefined,
+): TransitionConfig => {
+  if (process.env.NODE_ENV === "test") {
+    return {};
+  }
+
+  return svelteFly(node, params);
+};
+
+/**
+ * A wrapper around Svelte's `scale` transition that disables itself in test mode.
+ *
+ * Prevents the test error "Cannot set properties of undefined (setting 'onfinish')".
+ *
+ * @param {HTMLElement} node - The HTML element to apply the transition to.
+ * @param {ScaleParams} [params] - Optional parameters for the scale transition.
+ * @returns {TransitionConfig} The transition configuration, or an empty object in test mode.
+ */
+export const testSafeScale = (
+  node: HTMLElement,
+  params?: FadeParams | undefined,
+): TransitionConfig => {
+  if (process.env.NODE_ENV === "test") {
+    return {};
+  }
+
+  return svelteScale(node, params);
+};
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 0cfe15f86..4333ba4f5 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,5 +1,6 @@
 export * from "./components";
 export * from "./constants/constants";
+export * from "./directives/transition.directives";
 export * from "./icons";
 export * from "./stores/busy.store";
 export * from "./stores/layout.store";