feat: revert "use test safe transitions" (#6405)

# Motivation

Revert #6396 because thanks to a different way of mocking the
transitions for test purposes (without vite), those workaround are not
needed anymore when migrating to Svelte v5.

# Resources

New solution to mock the animation for test purposes with Svelte v5
providing by Testing Library in
testing-library/svelte-testing-library#284 (comment)

# Changes

Revert #6396

# Tests

I tested the revert and new way of mocking with Svelte v5 in #6404. The
tests did not throw the keyword `TypeError: Cannot set properties of
undefined (setting 'onfinish')`.

Signed-off-by: David Dal Busco <[email protected]>

Author: peterpeterparker

frontend/src/lib/components/accounts/TransactionCard.svelte

@@ -9,12 +9,13 @@
     TransactionIconType,
     UiTransaction,
   } from "$lib/types/transaction";
-  import { KeyValuePair, testSafeFade } from "@dfinity/gix-components";
+  import { KeyValuePair } from "@dfinity/gix-components";
   import {
     nonNullish,
     type TokenAmount,
     type TokenAmountV2,
   } from "@dfinity/utils";
+  import { fade } from "svelte/transition";
 
   export let transaction: UiTransaction;
 
@@ -55,7 +56,7 @@
   $: seconds = timestamp && timestamp.getTime() / 1000;
 </script>
 
-<article data-tid="transaction-card" transition:testSafeFade>
+<article data-tid="transaction-card" transition:fade|global>
   <div class="icon">
     <TransactionIcon type={iconType} {isPending} />
   </div>

frontend/src/lib/components/common/JsonPreview.svelte

@@ -4,12 +4,9 @@
   import { jsonRepresentationModeStore } from "$lib/derived/json-representation.derived";
   import { i18n } from "$lib/stores/i18n";
   import { expandObject, getObjMaxDepth } from "$lib/utils/utils";
-  import {
-    IconCollapseAll,
-    IconExpandAll,
-    testSafeFade,
-  } from "@dfinity/gix-components";
+  import { IconCollapseAll, IconExpandAll } from "@dfinity/gix-components";
   import { isNullish } from "@dfinity/utils";
+  import { fade } from "svelte/transition";
 
   const DEFAULT_EXPANDED_LEVEL = 1;
 
@@ -41,12 +38,12 @@
       on:click={toggleExpanded}
     >
       {#if isAllExpanded}
-        <div in:testSafeFade>
+        <div in:fade>
           <IconCollapseAll />
           <span class="expand-all-label">{$i18n.core.collapse_all}</span>
         </div>
       {:else}
-        <div in:testSafeFade>
+        <div in:fade>
           <IconExpandAll />
           <span class="expand-all-label">{$i18n.core.expand_all}</span>
         </div>
@@ -55,15 +52,15 @@
   {/if}
   <div data-tid="json-wrapper" class="json-wrapper">
     {#if $jsonRepresentationModeStore === "tree"}
-      <div in:testSafeFade>
+      <div in:fade>
         <TreeJson
           testId="tree-json"
           json={expandedData}
           defaultExpandedLevel={isAllExpanded ? Number.MAX_SAFE_INTEGER : 1}
         />
       </div>
     {:else}
-      <div in:testSafeFade>
+      <div in:fade>
         <RawJson testId="raw-json" {json} />
       </div>
     {/if}

frontend/src/lib/components/common/MenuItems.svelte

@@ -28,10 +28,10 @@
     ThemeToggleButton,
     layoutMenuOpen,
     menuCollapsed,
-    testSafeScale,
   } from "@dfinity/gix-components";
   import type { ComponentType } from "svelte";
   import { cubicIn, cubicOut } from "svelte/easing";
+  import { scale } from "svelte/transition";
 
   let routes: {
     context: string;
@@ -127,8 +127,8 @@
     <div
       data-tid="menu-footer"
       class="menu-footer"
-      out:testSafeScale={{ duration: 200, easing: cubicOut }}
-      in:testSafeScale={{ duration: 200, easing: cubicIn }}
+      out:scale={{ duration: 200, easing: cubicOut }}
+      in:scale={{ duration: 200, easing: cubicIn }}
     >
       <TotalValueLocked layout="stacked" />
       <div class="menu-footer-buttons">

frontend/src/lib/components/common/TreeJson.svelte

@@ -6,7 +6,8 @@
     type TreeJsonValueType,
   } from "$lib/utils/json.utils";
   import { typeOfLikeANumber } from "$lib/utils/utils";
-  import { IconExpandMore, testSafeFade } from "@dfinity/gix-components";
+  import { IconExpandMore } from "@dfinity/gix-components";
+  import { fade } from "svelte/transition";
 
   export let json: unknown | undefined = undefined;
   export let defaultExpandedLevel = Infinity;
@@ -71,7 +72,7 @@
   {/if}
   {#if !collapsed}
     <!-- children of expandable-key -->
-    <ul class:root class:is-array={isArray} in:testSafeFade data-tid={testId}>
+    <ul class:root class:is-array={isArray} in:fade data-tid={testId}>
       {#each children as [key, value]}
         <li class:root class:key-is-index={keyIsIndex}>
           <svelte:self

frontend/src/lib/components/proposal-detail/VotingCard/ExpandableProposalNeurons.svelte

@@ -1,17 +1,14 @@
 <script lang="ts">
-  import {
-    Collapsible,
-    IconExpandCircleDown,
-    testSafeFade,
-  } from "@dfinity/gix-components";
+  import { Collapsible, IconExpandCircleDown } from "@dfinity/gix-components";
+  import { fade } from "svelte/transition";
 
   export let testId: string;
 
   let toggleContent: () => void;
   let expanded: boolean;
 </script>
 
-<div class="container" in:testSafeFade>
+<div class="container" in:fade>
   <Collapsible
     {testId}
     expandButton={false}

frontend/src/lib/components/proposals/ActionableProposalCountBadge.svelte

@@ -4,9 +4,10 @@
   import type { Universe } from "$lib/types/universe";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
   import { isUniverseNns } from "$lib/utils/universe.utils";
-  import { Tooltip, testSafeScale } from "@dfinity/gix-components";
+  import { Tooltip } from "@dfinity/gix-components";
   import { Principal } from "@dfinity/principal";
   import { cubicOut } from "svelte/easing";
+  import { scale } from "svelte/transition";
 
   export let count: number;
   export let universe: Universe | "all";
@@ -33,7 +34,7 @@
 <TestIdWrapper testId="actionable-proposal-count-badge-component">
   <Tooltip idPrefix="actionable-count-tooltip" text={tooltipText} top={true}
     ><span
-      transition:testSafeScale={{
+      transition:scale={{
         duration: 250,
         easing: cubicOut,
       }}

frontend/src/lib/components/proposals/FiltersWrapper.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
-  import { testSafeFade } from "@dfinity/gix-components";
+  import { fade } from "svelte/transition";
 </script>
 
-<div
-  class="filters"
-  data-tid="proposals-filters"
-  in:testSafeFade={{ duration: 150 }}
->
+<div class="filters" data-tid="proposals-filters" in:fade={{ duration: 150 }}>
   <slot />
 </div>
 

frontend/src/lib/components/proposals/NnsProposalsList.svelte

@@ -12,10 +12,10 @@
   import { authSignedInStore } from "$lib/derived/auth.derived";
   import { filteredActionableProposals } from "$lib/derived/proposals.derived";
   import { actionableNnsProposalsStore } from "$lib/stores/actionable-nns-proposals.store";
-  import { InfiniteScroll, testSafeFade } from "@dfinity/gix-components";
+  import { InfiniteScroll } from "@dfinity/gix-components";
   import type { ProposalInfo } from "@dfinity/nns";
   import { isNullish } from "@dfinity/utils";
-
+  import { fade } from "svelte/transition";
   export let hidden: boolean;
   export let disableInfiniteScroll: boolean;
   export let loading: boolean;
@@ -35,7 +35,7 @@
 
   {#if display}
     {#if !$actionableProposalsActiveStore}
-      <div in:testSafeFade data-tid="all-proposal-list">
+      <div in:fade data-tid="all-proposal-list">
         {#if loadingAnimation === "skeleton"}
           <LoadingProposals />
         {:else if $filteredActionableProposals.proposals.length === 0}
@@ -59,7 +59,7 @@
         {/if}
       </div>
     {:else}
-      <div in:testSafeFade data-tid="actionable-proposal-list">
+      <div in:fade data-tid="actionable-proposal-list">
         {#if !$authSignedInStore}
           <ActionableProposalsSignIn />
         {:else if isNullish(actionableProposals)}

frontend/src/lib/components/sns-proposals/SnsProposalsList.svelte

@@ -10,9 +10,10 @@
   import { authSignedInStore } from "$lib/derived/auth.derived";
   import { pageStore } from "$lib/derived/page.derived";
   import type { SnsProposalActionableData } from "$lib/derived/sns/sns-filtered-actionable-proposals.derived";
-  import { InfiniteScroll, testSafeFade } from "@dfinity/gix-components";
+  import { InfiniteScroll } from "@dfinity/gix-components";
   import type { SnsNervousSystemFunction } from "@dfinity/sns";
   import { fromNullable, isNullish } from "@dfinity/utils";
+  import { fade } from "svelte/transition";
 
   export let proposals: SnsProposalActionableData[] | undefined;
   export let actionableSelected: boolean;
@@ -25,7 +26,7 @@
   <SnsProposalsFilters />
 
   {#if !actionableSelected}
-    <div in:testSafeFade data-tid="all-proposal-list">
+    <div in:fade data-tid="all-proposal-list">
       {#if proposals === undefined}
         <LoadingProposals />
       {:else if proposals.length === 0}
@@ -50,7 +51,7 @@
       {/if}
     </div>
   {:else}
-    <div in:testSafeFade data-tid="actionable-proposal-list">
+    <div in:fade data-tid="actionable-proposal-list">
       {#if !$authSignedInStore}
         <ActionableProposalsSignIn />
       {:else if isNullish(proposals)}

frontend/src/lib/components/universe/SelectUniverseCard.svelte

@@ -15,10 +15,11 @@
   import { i18n } from "$lib/stores/i18n";
   import type { Universe } from "$lib/types/universe";
   import { isSelectedPath } from "$lib/utils/navigation.utils";
-  import { Card, testSafeScale } from "@dfinity/gix-components";
+  import { Card } from "@dfinity/gix-components";
   import { nonNullish } from "@dfinity/utils";
   import { onMount } from "svelte";
   import { cubicOut } from "svelte/easing";
+  import { scale } from "svelte/transition";
 
   export let selected: boolean;
   // "link" for desktop, "button" for mobile, "dropdown" to open the modal
@@ -73,7 +74,7 @@
           {#if $actionableProposalIndicationVisibleStore}
             {#if $actionableProposalTotalCountStore > 0 && mounted}
               <div
-                in:testSafeScale={{
+                in:scale={{
                   duration: 250,
                   easing: cubicOut,
                 }}