explorer: compose Transactions page

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

@@ -5,6 +5,12 @@ import { transformBlock } from "$lib/chain-info";
 import { BlocksCard } from "..";
 import { mapWith, slice } from "lamb";
 
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  disconnect: vi.fn(),
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+}));
+
 const transformBlocks = mapWith(transformBlock);
 const data = slice(transformBlocks(apiBlocks.data.blocks), 0, 10);
 

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

@@ -0,0 +1,77 @@
+import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render } from "@testing-library/svelte";
+import { apiTransactions } from "$lib/mock-data";
+import { transformTransaction } from "$lib/chain-info";
+import { TransactionsCard } from "..";
+import { mapWith, slice } from "lamb";
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  disconnect: vi.fn(),
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+}));
+
+const transformTransactions = mapWith(transformTransaction);
+const data = slice(transformTransactions(apiTransactions.data), 0, 10);
+
+describe("Transactions Card", () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date(2024, 4, 20));
+  const baseProps = {
+    error: null,
+    loading: false,
+    txs: data,
+  };
+  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 is the card is in the loading state", () => {
+    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 = true;
+
+    const { container, getByRole } = render(TransactionsCard, {
+      ...baseOptions,
+      props: { ...baseProps, 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(container.firstChild).toMatchSnapshot();
+  });
+});