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

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,

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