web-wallet: update tests and snapshots

dusk-network · Sep 3, 2024 · 4889f7d · 4889f7d
1 parent 1876fe9
commit 4889f7d
Show file tree

Hide file tree

Showing 35 changed files with 822 additions and 883 deletions.
diff --git a/web-wallet/src/lib/components/__tests__/AppAnchor.spec.js b/web-wallet/src/lib/components/__tests__/AppAnchor.spec.js
@@ -23,7 +23,7 @@ describe("AppAnchor", () => {
     const renderA = renderWithSimpleContent(AppAnchor, baseOptions);
     const anchorA = renderA.getByRole("link");
 
-    expect(renderA.container.firstChild).toMatchSnapshot();
+    expect(renderA.container).toMatchSnapshot();
     expect(anchorA).toHaveAttribute("href", `${base}${baseProps.href}`);
     expect(anchorA).toHaveClass("foo bar");
     expect(anchorA).toHaveAttribute("id", baseProps.id);

diff --git a/web-wallet/src/lib/components/__tests__/Balance.spec.js b/web-wallet/src/lib/components/__tests__/Balance.spec.js
@@ -20,14 +20,13 @@ describe("Balance", () => {
 
   it("renders the Balance component", () => {
     const { container } = render(Balance, baseOptions);
-
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should update the Balance component when the props change", async () => {
     const { container, rerender } = render(Balance, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
 
     await rerender({
       fiatCurrency: "EUR",
@@ -37,7 +36,7 @@ describe("Balance", () => {
       tokens: 4000000,
     });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should pass additional class names and attributes to the rendered element", async () => {
@@ -48,41 +47,42 @@ describe("Balance", () => {
     };
     const { container, rerender } = render(Balance, { ...baseOptions, props });
 
-    expect(container.firstChild).toHaveClass("foo bar");
-    expect(container.firstChild).toHaveAttribute("id", "balance");
+    expect(container.lastChild).toHaveClass("foo bar");
+    expect(container.lastChild).toHaveAttribute("id", "balance");
 
     await rerender({
       ...props,
       className: "qux",
       id: "new-balance",
     });
 
-    expect(container.firstChild).toHaveClass("qux");
-    expect(container.firstChild).toHaveAttribute("id", "new-balance");
+    expect(container.lastChild).toHaveClass("qux");
+    expect(container.lastChild).toHaveAttribute("id", "new-balance");
   });
 
   it("should not display the fiat value if the fiat price is `undefined`", () => {
     const props = skipIn(baseProps, ["fiatPrice"]);
     const { container } = render(Balance, { ...baseOptions, props });
 
     expect(container.querySelector(".dusk-balance__fiat--visible")).toBeNull();
-    expect(container.firstChild).toMatchSnapshot();
+
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should not display the fiat value if there are no tokens", () => {
     const props = { ...baseProps, tokens: 0 };
     const { container } = render(Balance, { ...baseOptions, props });
 
     expect(container.querySelector(".dusk-balance__fiat--visible")).toBeNull();
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should display the usage indicator if there are shielded tokens", () => {
     const props = { ...baseProps, shieldedTokensPercentage: 50, tokens: 100 };
     const { container } = render(Balance, { ...baseOptions, props });
 
     expect(container.querySelector(".dusk-balance__usage")).toBeInTheDocument();
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should not display the usage indicator if there are no shielded tokens", () => {
@@ -92,6 +92,6 @@ describe("Balance", () => {
     expect(
       container.querySelector(".dusk-balance__usage")
     ).not.toBeInTheDocument();
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/components/__tests__/ContractOperations.spec.js b/web-wallet/src/lib/components/__tests__/ContractOperations.spec.js
@@ -48,7 +48,7 @@ describe("ContractOperations", () => {
   it("should render the `ContractOperations` component", () => {
     const { container } = render(ContractOperations, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should be able to render the component without items", () => {
@@ -58,7 +58,7 @@ describe("ContractOperations", () => {
     };
     const { container } = render(ContractOperations, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should use a default icon if the operation is not on the known list", () => {
@@ -75,7 +75,7 @@ describe("ContractOperations", () => {
     };
     const { container } = render(ContractOperations, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it('should dispatch a "operationChange" event when a operation button is clicked', () => {

diff --git a/web-wallet/src/lib/components/__tests__/ContractStatusesList.spec.js b/web-wallet/src/lib/components/__tests__/ContractStatusesList.spec.js
@@ -30,7 +30,7 @@ describe("ContractStatusesList", () => {
   it("should render the `ContractStatusesList` component", () => {
     const { container } = render(ContractStatusesList, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should be able to render the component without items", () => {
@@ -43,6 +43,6 @@ describe("ContractStatusesList", () => {
       props,
     });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/components/__tests__/DashboardNav.spec.js b/web-wallet/src/lib/components/__tests__/DashboardNav.spec.js
@@ -45,7 +45,7 @@ describe("DashboardNav", () => {
   it("renders the DashboardNav component", () => {
     const { container } = render(DashboardNav, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should pass additional class names and attributes to the rendered element", async () => {
@@ -58,14 +58,14 @@ describe("DashboardNav", () => {
       props,
     });
 
-    expect(container.firstChild).toHaveClass("foo bar");
+    expect(container.lastChild).toHaveClass("foo bar");
 
     await rerender({
       ...props,
       className: "qux",
     });
 
-    expect(container.firstChild).toHaveClass("qux");
+    expect(container.lastChild).toHaveClass("qux");
   });
 
   it("should not display icons if the item's icons array is undefined", () => {
@@ -77,7 +77,7 @@ describe("DashboardNav", () => {
       )
     ).toBeNull();
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should not display icons if the item's icon array is empty", () => {
@@ -89,7 +89,7 @@ describe("DashboardNav", () => {
       )
     ).toBeNull();
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should display icons if the item's icon array is present", () => {
@@ -101,6 +101,6 @@ describe("DashboardNav", () => {
       )
     ).toBeTruthy();
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/components/__tests__/GasSettings.spec.js b/web-wallet/src/lib/components/__tests__/GasSettings.spec.js
@@ -32,7 +32,7 @@ describe("GasSettings", () => {
   it("renders the GasSettings component closed", () => {
     const { container } = render(GasSettings, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("renders the GasSettings component opened", async () => {
@@ -42,7 +42,7 @@ describe("GasSettings", () => {
 
     await fireEvent.click(next);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it('checks "gasSettings" event is dispatched on click with the correct event data', async () => {

diff --git a/web-wallet/src/lib/components/__tests__/OperationResult.spec.js b/web-wallet/src/lib/components/__tests__/OperationResult.spec.js
@@ -30,7 +30,7 @@ describe("OperationResult", () => {
   it("should be able to render the `OperationResult` component in a pending state", () => {
     const { container } = render(OperationResult, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept a custom message for the pending state", () => {
@@ -40,15 +40,15 @@ describe("OperationResult", () => {
     };
     const { container } = render(OperationResult, { ...baseOptions, props });
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should be able to render the `OperationResult` in a successful state", async () => {
     const { container } = render(OperationResult, baseOptions);
 
     await vi.advanceTimersByTimeAsync(delay);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept a custom message for the successful state", async () => {
@@ -61,7 +61,7 @@ describe("OperationResult", () => {
 
     await vi.advanceTimersByTimeAsync(delay);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should call the `onBeforeLeave` function when the home button is clicked", async () => {
@@ -86,7 +86,7 @@ describe("OperationResult", () => {
 
     await vi.advanceTimersByTimeAsync(delay);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept a custom message for the failure state", async () => {
@@ -100,6 +100,6 @@ describe("OperationResult", () => {
 
     await vi.advanceTimersByTimeAsync(delay);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/components/__tests__/ScanQR.spec.js b/web-wallet/src/lib/components/__tests__/ScanQR.spec.js
@@ -18,6 +18,6 @@ describe("ScanQR", () => {
   it("renders the ScanQR component", () => {
     const { container } = render(ScanQR, baseOptions);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 });
diff --git a/web-wallet/src/lib/components/__tests__/Stake.spec.js b/web-wallet/src/lib/components/__tests__/Stake.spec.js
@@ -88,7 +88,7 @@ describe("Stake", () => {
 
     const { container } = render(Stake, options);
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should render the Stake component", () => {
@@ -101,7 +101,7 @@ describe("Stake", () => {
       baseProps.minAllowedStake.toString()
     );
     expect(amountInput.getAttribute("max")).toBe(maxSpendable.toString());
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should disable the next button if the stake amount is invalid on mount", async () => {
@@ -161,7 +161,7 @@ describe("Stake", () => {
 
     await fireEvent.click(getByRole("button", { name: "Next" }));
 
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   describe("Stake operation", () => {

diff --git a/web-wallet/src/lib/components/__tests__/UsageIndicator.spec.js b/web-wallet/src/lib/components/__tests__/UsageIndicator.spec.js
@@ -25,19 +25,19 @@ describe("UsageIndicator", () => {
     const { container, rerender } = render(UsageIndicator, baseOptions);
 
     expect(getPercentages()).toStrictEqual(["45", "55"]);
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
 
     await rerender({ value: 80 });
 
     expect(getPercentages()).toStrictEqual(["80", "20"]);
-    expect(container.firstChild).toMatchSnapshot();
+    expect(container.lastChild).toMatchSnapshot();
   });
 
   it("should accept additional class names", () => {
     const props = { ...baseProps, className: "foo bar" };
     const { container } = render(UsageIndicator, { ...baseOptions, props });
 
-    expect(container.firstChild).toHaveClass("usage-indicator foo bar");
+    expect(container.lastChild).toHaveClass("usage-indicator foo bar");
   });
 
   it("should round decimal values at two decimals", async () => {

diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/AppAnchor.spec.js.snap
@@ -1,13 +1,22 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`AppAnchor > should render an \`Anchor\` with the base path prepended to the \`href\` attribute, if the \`href\` represents an absolute URL 1`] = `
-<a
-  class="dusk-anchor dusk-anchor--on-surface foo bar"
-  href="/some-base-path/setup"
-  id="some-id"
->
-  <span>
-    some text
-  </span>
-</a>
+<body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
+  <a
+    class="dusk-anchor dusk-anchor--on-surface foo bar"
+    href="/some-base-path/setup"
+    id="some-id"
+  >
+    <span>
+      some text
+    </span>
+  </a>
+  
+</body>
 `;
diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/GasControls.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/GasControls.spec.js.snap
@@ -2,6 +2,12 @@
 
 exports[`GasControls > should render the \`GasControls\` component 1`] = `
 <body>
+  <iframe
+    id="w3m-iframe"
+    src="https://secure.walletconnect.org/sdk?projectId=b5303e1c8374b100fbb7f181884fef28"
+    style="position: fixed; z-index: 999999; display: none; animation-delay: 0s, 50ms; border-bottom-left-radius: clamp(0px, var(--wui-border-radius-l), 44px); border-bottom-right-radius: clamp(0px, var(--wui-border-radius-l), 44px);"
+  />
+  <w3m-modal />
   <label
     class="gas-control svelte-14slcjg"
   >