feat: transition directive wrapper for test purpose (#573)

# Motivation

Svelte requires require the [web animations
API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API),
and neither [jsdom](https://github.com/jsdom/jsdom) nor
[happy-dom](https://github.com/capricorn86/happy-dom) implements it.

While in Gix-cmp or OISY we are able to apply some mocks in the
configuration, this is insuffisent for the existing large test suite of
NNS dapp for which many tests fail, when migrating to Svelte v5, with
the error:

> TypeError: Cannot set properties of undefined (setting 'onfinish')

As suggested in one of the related issues (see linked below), we can
overcome the problem by disabling animations in test mode.

# References

-
testing-library/svelte-testing-library#284 (comment)
- testing-library/svelte-testing-library#416

# CI issues

-
https://github.com/dfinity/nns-dapp/actions/runs/13129931873/job/36632946426

# Changes

- Implement utils for fade, fly and scale that returns an empty
transition configuration for test mode
- Expose utils to make to re-usable by consumers as well

# Tests

Errors do not happen anymore in NNS dapp - Svelte v5 wip branch running
in the CI.

-
https://github.com/dfinity/nns-dapp/actions/runs/13131104521/job/36636304026?pr=6020

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

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);
+};

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";