Merge pull request #1730 from dusk-network/feature-1721

explorer: compose Transactions page

explorer/src/lib/components/__tests__/BlocksCard.spec.js

@@ -1,18 +1,24 @@
 import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
-import { cleanup, fireEvent, render } from "@testing-library/svelte";
+import { cleanup, render } from "@testing-library/svelte";
 import { apiBlocks } from "$lib/mock-data";
 import { transformBlock } from "$lib/chain-info";
 import { BlocksCard } from "..";
-import { mapWith, slice } from "lamb";
+import { compose, mapWith, take } from "lamb";
 
-const transformBlocks = mapWith(transformBlock);
-const data = slice(transformBlocks(apiBlocks.data.blocks), 0, 10);
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  disconnect: vi.fn(),
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+}));
+
+const getTenBlocks = compose(mapWith(transformBlock), take(10));
+const data = getTenBlocks(apiBlocks.data.blocks);
 
 describe("Blocks Card", () => {
   vi.useFakeTimers();
   vi.setSystemTime(new Date(2024, 4, 20));
   const baseProps = {
-    blocks: data,
+    blocks: null,
     error: null,
     loading: false,
   };
@@ -47,24 +53,15 @@ describe("Blocks Card", () => {
   });
 
   it("should disable the `Show More` button if there is no more data to display", async () => {
-    const loading = true;
+    const loading = false;
+    const blocks = data;
 
     const { container, getByRole } = render(BlocksCard, {
       ...baseOptions,
-      props: { ...baseProps, loading },
+      props: { ...baseProps, blocks, loading },
     });
 
-    const button = getByRole("button");
-
-    const showMoreIncrement = 15;
-
-    const clicks = Math.ceil(data.length / showMoreIncrement) - 1;
-
-    Array.from({ length: clicks }).forEach(async () => {
-      await fireEvent.click(button);
-    });
-
-    expect(button).toBeDisabled();
+    expect(getByRole("button")).toBeDisabled();
 
     expect(container.firstChild).toMatchSnapshot();
   });

explorer/src/lib/components/__tests__/TransactionsCard.spec.js

@@ -0,0 +1,68 @@
+import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import { apiTransactions } from "$lib/mock-data";
+import { transformTransaction } from "$lib/chain-info";
+import { TransactionsCard } from "..";
+import { compose, mapWith, take } from "lamb";
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  disconnect: vi.fn(),
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+}));
+
+const getTenTransactions = compose(mapWith(transformTransaction), take(10));
+const data = getTenTransactions(apiTransactions.data);
+
+describe("Transactions Card", () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date(2024, 4, 20));
+  const baseProps = {
+    error: null,
+    loading: false,
+    txs: null,
+  };
+  const baseOptions = {
+    props: baseProps,
+    target: document.body,
+  };
+
+  afterEach(cleanup);
+
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+
+  it("should render the `TransactionsCard` component", () => {
+    const { container } = render(TransactionsCard, baseOptions);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should disable the `Show More` button if the card is in the loading state", async () => {
+    const loading = true;
+
+    const { container, getByRole } = render(TransactionsCard, {
+      ...baseOptions,
+      props: { ...baseProps, loading },
+    });
+
+    expect(getByRole("button")).toBeDisabled();
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should disable the `Show More` button if there is no more data to display", async () => {
+    const loading = false;
+    const txs = data;
+
+    const { container, getByRole } = render(TransactionsCard, {
+      ...baseOptions,
+      props: { ...baseProps, loading, txs },
+    });
+
+    expect(getByRole("button")).toBeDisabled();
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});