check specifically for each skeleton card

dfinity · Jan 23, 2025 · 8f14282 · 8f14282
1 parent 634e43e
commit 8f14282
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 16 deletions.
diff --git a/frontend/src/lib/components/portfolio/SkeletonTokensCard.svelte b/frontend/src/lib/components/portfolio/SkeletonTokensCard.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import Card from "$lib/components/portfolio/Card.svelte";
+
+  export let testId: string;
 </script>
 
-<Card testId="skeleton-tokens-card">
+<Card {testId}>
   <div class="wrapper">
     <div class="header">
       <div class="header-wrapper">

diff --git a/frontend/src/lib/pages/Portfolio.svelte b/frontend/src/lib/pages/Portfolio.svelte
@@ -123,7 +123,7 @@
   </div>
   <div class="content">
     {#if heldTokensCard === "skeleton"}
-      <SkeletonTokensCard />
+      <SkeletonTokensCard testId="held-tokens-skeleton-card" />
     {:else if heldTokensCard === "empty"}
       <NoHeldTokensCard />
     {:else}
@@ -135,7 +135,7 @@
     {/if}
 
     {#if stakedTokensCard === "skeleton"}
-      <SkeletonTokensCard />
+      <SkeletonTokensCard testId="staked-tokens-skeleton-card" />
     {:else if stakedTokensCard === "empty"}
       <NoStakedTokensCard primaryCard={hasNoStakedTokensCardAPrimaryAction} />
     {:else}

diff --git a/frontend/src/tests/lib/pages/Portfolio.spec.ts b/frontend/src/tests/lib/pages/Portfolio.spec.ts
@@ -122,7 +122,8 @@ describe("Portfolio page", () => {
       });
 
       expect(await po.getTotalAssetsCardPo().hasSpinner()).toEqual(false);
-      expect(await po.getNumberOfSkeletonCards()).toEqual(0);
+      expect(await po.getHeldTokensSkeletonCard().isPresent()).toEqual(false);
+      expect(await po.getStakedTokensSkeletonCard().isPresent()).toEqual(false);
     });
   });
 
@@ -540,9 +541,12 @@ describe("Portfolio page", () => {
         });
 
         expect(await po.getTotalAssetsCardPo().hasSpinner()).toEqual(true);
-        expect(await po.getNumberOfSkeletonCards()).toEqual(2);
-        expect(await po.getHeldTokensCardPo().isPresent()).toBe(false);
-        expect(await po.getStakedTokensCardPo().isPresent()).toBe(false);
+        expect(await po.getHeldTokensSkeletonCard().isPresent()).toEqual(true);
+        expect(await po.getStakedTokensSkeletonCard().isPresent()).toEqual(
+          true
+        );
+        expect(await po.getHeldTokensCardPo().isPresent()).toEqual(false);
+        expect(await po.getStakedTokensCardPo().isPresent()).toEqual(false);
 
         const loadedToken = createUserToken({
           balanceInUsd: 100,
@@ -554,9 +558,12 @@ describe("Portfolio page", () => {
         });
 
         expect(await po.getTotalAssetsCardPo().hasSpinner()).toEqual(true);
-        expect(await po.getNumberOfSkeletonCards()).toEqual(1);
-        expect(await po.getHeldTokensCardPo().isPresent()).toBe(true);
-        expect(await po.getStakedTokensCardPo().isPresent()).toBe(false);
+        expect(await po.getHeldTokensSkeletonCard().isPresent()).toEqual(false);
+        expect(await po.getStakedTokensSkeletonCard().isPresent()).toEqual(
+          true
+        );
+        expect(await po.getHeldTokensCardPo().isPresent()).toEqual(true);
+        expect(await po.getStakedTokensCardPo().isPresent()).toEqual(false);
 
         const loadedProject: TableProject = {
           ...mockTableProject,
@@ -570,9 +577,12 @@ describe("Portfolio page", () => {
         });
 
         expect(await po.getTotalAssetsCardPo().hasSpinner()).toEqual(false);
-        expect(await po.getNumberOfSkeletonCards()).toEqual(0);
-        expect(await po.getHeldTokensCardPo().isPresent()).toBe(true);
-        expect(await po.getStakedTokensCardPo().isPresent()).toBe(true);
+        expect(await po.getHeldTokensSkeletonCard().isPresent()).toEqual(false);
+        expect(await po.getStakedTokensSkeletonCard().isPresent()).toEqual(
+          false
+        );
+        expect(await po.getHeldTokensCardPo().isPresent()).toEqual(true);
+        expect(await po.getStakedTokensCardPo().isPresent()).toEqual(true);
       });
     });
   });

diff --git a/frontend/src/tests/page-objects/PortfolioPage.page-object.ts b/frontend/src/tests/page-objects/PortfolioPage.page-object.ts
@@ -36,8 +36,11 @@ export class PortfolioPagePo extends BasePageObject {
     return StakedTokensCardPo.under(this.root);
   }
 
-  async getNumberOfSkeletonCards(): Promise<number> {
-    const skeletons = await this.root.allByTestId("skeleton-tokens-card");
-    return skeletons.length;
+  getHeldTokensSkeletonCard(): PageObjectElement {
+    return this.getElement("held-tokens-skeleton-card");
+  }
+
+  getStakedTokensSkeletonCard(): PageObjectElement {
+    return this.getElement("staked-tokens-skeleton-card");
   }
 }