diff --git a/frontend/src/lib/components/portfolio/SkeletonTokensCard.svelte b/frontend/src/lib/components/portfolio/SkeletonTokensCard.svelte index d2fdb71cec..7a0c088e37 100644 --- a/frontend/src/lib/components/portfolio/SkeletonTokensCard.svelte +++ b/frontend/src/lib/components/portfolio/SkeletonTokensCard.svelte @@ -1,8 +1,10 @@ - +
diff --git a/frontend/src/lib/pages/Portfolio.svelte b/frontend/src/lib/pages/Portfolio.svelte index f09852c69f..a0ec4e498e 100644 --- a/frontend/src/lib/pages/Portfolio.svelte +++ b/frontend/src/lib/pages/Portfolio.svelte @@ -123,7 +123,7 @@
{#if heldTokensCard === "skeleton"} - + {:else if heldTokensCard === "empty"} {:else} @@ -135,7 +135,7 @@ {/if} {#if stakedTokensCard === "skeleton"} - + {:else if stakedTokensCard === "empty"} {:else} diff --git a/frontend/src/tests/lib/pages/Portfolio.spec.ts b/frontend/src/tests/lib/pages/Portfolio.spec.ts index 175e0332cd..6284ce7897 100644 --- 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 index 04ebe3f49d..b2cbc0e0ce 100644 --- 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 { - 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"); } }