From 2b526eff5b9c1976c8e2380ef42d7e163b4e93b7 Mon Sep 17 00:00:00 2001
From: David de Kloet <122978264+dskloetd@users.noreply.github.com>
Date: Fri, 5 Jan 2024 12:40:28 +0100
Subject: [PATCH] GIX-2187: Fix wallet title when balance is undefined (#4132)

# Motivation

The `WalletPageHeading` component has logic to show the account name and
balance in the layout title when they scroll out of the viewport (i.e.
no longer "intersect" with the viewport). The logic is such that if
there is no balance, it always puts the balance in the layout title,
even if it's not out of the viewport.
This seems backwards since then it renders as "0 undefined".
So I'm guessing it was intended the other way around, where if there is
no balance, it is never (rather than always) rendered in the title.

Note that currently we never pass an `undefined` balance to the
`WalletPageHeading` component, so I'm not even sure why this logic
exists, but we plan to make the wallet page accessible when not signed
in so then we do need `WalletPageHeading` to work with undefined
balance.

# Changes

1. Invert the logic for showing the balance in the title to how it was
(probably) intended.
2. Add a test.
3. Remove `waitFor` from the test. It's usually bad to use `waitFor` but
in this case it can't accomplish anything because the value of `title`
is determined before the call to `waitFor` and so can never change while
we wait.

# Tests

Unit test added.

# Todos

- [ ] Add entry to changelog (if necessary).
not necessary
---
 .../components/accounts/WalletPageHeading.svelte  |  9 +++++++--
 .../components/accounts/WalletPageHeading.spec.ts | 15 +++++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/src/lib/components/accounts/WalletPageHeading.svelte b/frontend/src/lib/components/accounts/WalletPageHeading.svelte
index 47becd0d23b..4531693023e 100644
--- a/frontend/src/lib/components/accounts/WalletPageHeading.svelte
+++ b/frontend/src/lib/components/accounts/WalletPageHeading.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { nonNullish, type TokenAmount, TokenAmountV2 } from "@dfinity/utils";
+  import {
+    isNullish,
+    nonNullish,
+    type TokenAmount,
+    TokenAmountV2,
+  } from "@dfinity/utils";
   import PageHeading from "../common/PageHeading.svelte";
   import { SkeletonText } from "@dfinity/gix-components";
   import AmountDisplay from "../ic/AmountDisplay.svelte";
@@ -34,7 +39,7 @@
     layoutTitleStore.set({
       title: $i18n.wallet.title,
       header:
-        intersecting && nonNullish(balance)
+        intersecting || isNullish(balance)
           ? $i18n.wallet.title
           : `${accountName} - ${formatTokenV2({
               value: balance,
diff --git a/frontend/src/tests/lib/components/accounts/WalletPageHeading.spec.ts b/frontend/src/tests/lib/components/accounts/WalletPageHeading.spec.ts
index 62f52c760f7..c0a950e36b7 100644
--- a/frontend/src/tests/lib/components/accounts/WalletPageHeading.spec.ts
+++ b/frontend/src/tests/lib/components/accounts/WalletPageHeading.spec.ts
@@ -6,7 +6,7 @@ import { WalletPageHeadingPo } from "$tests/page-objects/WalletPageHeading.page-
 import { JestPageObjectElement } from "$tests/page-objects/jest.page-object";
 import { Principal } from "@dfinity/principal";
 import { ICPToken, TokenAmount } from "@dfinity/utils";
-import { render, waitFor } from "@testing-library/svelte";
+import { render } from "@testing-library/svelte";
 import { get } from "svelte/store";
 
 describe("WalletPageHeading", () => {
@@ -106,9 +106,7 @@ describe("WalletPageHeading", () => {
     dispatchIntersecting({ element, intersecting });
 
     const title = get(layoutTitleStore);
-    await waitFor(() =>
-      expect(title).toEqual({ title: en.wallet.title, header: expectedHeader })
-    );
+    expect(title).toEqual({ title: en.wallet.title, header: expectedHeader });
   };
 
   it("should render account name and balance if title not intersecting viewport", async () => {
@@ -128,4 +126,13 @@ describe("WalletPageHeading", () => {
       accountName,
     });
   });
+
+  it("should render a static title if title is not intersecting viewport but balance is undefined", async () => {
+    await testTitle({
+      intersecting: true,
+      expectedHeader: en.wallet.title,
+      balance: undefined,
+      accountName,
+    });
+  });
 });