explorer: Update tests

dusk-network · May 13, 2024 · 84d4070 · 84d4070
1 parent e2cb7a3
commit 84d4070
Show file tree

Hide file tree

Showing 31 changed files with 2,455 additions and 3,962 deletions.
diff --git a/explorer/src/lib/components/__tests__/Alert.spec.js b/explorer/src/lib/components/__tests__/Alert.spec.js
@@ -0,0 +1,50 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render } from "@testing-library/svelte";
+
+import { Alert } from "..";
+
+describe("Alert", () => {
+  const baseProps = {
+    error: null,
+    hasEmptyData: false,
+  };
+  const baseOptions = {
+    props: baseProps,
+    target: document.body,
+  };
+
+  afterEach(cleanup);
+
+  it("should render the `Alert` in the no data state", () => {
+    const hasEmptyData = true;
+    const { container } = render(Alert, {
+      ...baseOptions,
+      props: { ...baseProps, hasEmptyData },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should render the `Alert` in the error state", () => {
+    const error = new Error("error");
+    const { container } = render(Alert, {
+      ...baseOptions,
+      props: { ...baseProps, error },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should dispatch the `retry` event on button click", async () => {
+    const eventHandler = vi.fn();
+    const error = new Error("error");
+    const { component, getByRole } = render(Alert, {
+      ...baseOptions,
+      props: { ...baseProps, error },
+    });
+
+    component.$on("retry", eventHandler);
+    await fireEvent.click(getByRole("button"));
+    expect(eventHandler).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/explorer/src/lib/components/__tests__/BlockDetails.spec.js b/explorer/src/lib/components/__tests__/BlockDetails.spec.js
@@ -1,5 +1,7 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, render } from "@testing-library/svelte";
+import { apiBlock } from "$lib/mock-data";
+import { transformBlock } from "$lib/chain-info";
 import { BlockDetails } from "../";
 
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
@@ -9,36 +11,18 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({
 }));
 
 const baseProps = {
-  data: {
-    header: {
-      feespaid: 0,
-      hash: "2f37fec165e3891e6f6beb329f0262cd0538edcb478a3db2154381ecf45150aa",
-      height: 488911,
-      nextblockhash:
-        "b95069bdd0ff5b564f8fd6fafb01c6fa75ea69ef6b0325115c65da171538f214",
-      prevblockhash:
-        "64ea046bf4a86e692d79dd8dccffa2114e2dc2c82e2d6cd737da4aa818629b6d",
-      reward: 16000000000,
-      seed: "8e3b249b5d2915ab190630c2a2e5c5d42d9d2ed8dea5a3702797eae3651e809a4cc9809047fecc602e4aa865fdb2fe33",
-      statehash:
-        "fb4c93bcc64914203b4312cf09e02c230ed3bc013408b124d5679c6cf583efd8",
-      timestamp: "2024-04-16 09:26:17 +0000 UTC",
-      ts: 1,
-      version: "0",
-    },
-    transactions: {
-      data: [],
-      stats: {
-        averageGasPrice: 0,
-        gasLimit: 5000000000,
-        gasUsed: 0,
-      },
-    },
-  },
+  data: transformBlock(apiBlock.data.blocks[0]),
+  error: null,
+  loading: false,
 };
 
 describe("Block Details", () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date(2024, 4, 20));
   afterEach(cleanup);
+  afterAll(() => {
+    vi.useRealTimers();
+  });
 
   it("renders the Block Details component", () => {
     const { container } = render(BlockDetails, baseProps);

diff --git a/explorer/src/lib/components/__tests__/BlocksTable.spec.js b/explorer/src/lib/components/__tests__/BlocksTable.spec.js
@@ -0,0 +1,33 @@
+import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+import { apiBlocks } from "$lib/mock-data";
+import { transformBlock } from "$lib/chain-info";
+import { BlocksTable } from "..";
+import { mapWith, slice } from "lamb";
+
+const transformBlocks = mapWith(transformBlock);
+const data = slice(transformBlocks(apiBlocks.data.blocks), 0, 10);
+
+describe("Blocks Table", () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date(2024, 4, 20));
+  const baseProps = {
+    data: data,
+  };
+  const baseOptions = {
+    props: baseProps,
+    target: document.body,
+  };
+
+  afterEach(cleanup);
+
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+
+  it("should render the `BlocksTable` component", () => {
+    const { container } = render(BlocksTable, baseOptions);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/explorer/src/lib/components/__tests__/DataCard.spec.js b/explorer/src/lib/components/__tests__/DataCard.spec.js
@@ -0,0 +1,86 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render } from "@testing-library/svelte";
+
+import { renderWithSimpleContent } from "$lib/dusk/test-helpers";
+
+import { DataCard } from "..";
+
+describe("DataCard", () => {
+  const baseProps = {
+    button: { action: () => {}, label: "Button" },
+    data: null,
+    error: null,
+    loading: false,
+    title: "Title",
+  };
+  const baseOptions = {
+    props: baseProps,
+    target: document.body,
+  };
+
+  afterEach(cleanup);
+
+  it("should render the `DataCard` in the loading state", () => {
+    const loading = true;
+    const { container } = render(DataCard, {
+      ...baseOptions,
+      props: { ...baseProps, loading },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should render the `DataCard` in the error state", () => {
+    const error = new Error("error");
+    const { container } = render(DataCard, {
+      ...baseOptions,
+      props: { ...baseProps, error },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should render the `DataCard` in the no data state", () => {
+    const data = new Array(0);
+    const { container } = render(DataCard, {
+      ...baseOptions,
+      props: { ...baseProps, data },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should render the `DataCard` in the data state", () => {
+    const data = new Array(2);
+    const renderWithSlots = renderWithSimpleContent(DataCard, {
+      ...baseOptions,
+      props: { ...baseProps, data },
+    });
+
+    expect(renderWithSlots.container.firstChild).toMatchSnapshot();
+  });
+
+  it("should render the `DataCard` in the data state when loading is true", () => {
+    const data = new Array(2);
+    const loading = true;
+    const renderWithSlots = renderWithSimpleContent(DataCard, {
+      ...baseOptions,
+      props: { ...baseProps, data, loading },
+    });
+
+    expect(renderWithSlots.container.firstChild).toMatchSnapshot();
+  });
+
+  it("should pass the correct function to the button on click event", async () => {
+    const onClickMock = vi.fn();
+    const button = { action: onClickMock, label: "Back" };
+    const { getByRole } = render(DataCard, {
+      ...baseOptions,
+      props: { ...baseProps, button },
+    });
+
+    await fireEvent.click(getByRole("button"));
+
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/explorer/src/lib/components/__tests__/DataGuard.spec.js b/explorer/src/lib/components/__tests__/DataGuard.spec.js
@@ -0,0 +1,34 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/svelte";
+
+import { renderWithSimpleContent } from "$lib/dusk/test-helpers";
+
+import { DataGuard } from "..";
+
+describe("DataGuard", () => {
+  const baseProps = {
+    data: null,
+  };
+  const baseOptions = {
+    props: baseProps,
+    target: document.body,
+  };
+
+  afterEach(cleanup);
+
+  it("should render the `DataGuard` with the placeholder if no data is passed", () => {
+    const { container } = render(DataGuard, baseOptions);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("should render the `DataGuard` if data is present", () => {
+    const data = 1;
+    const renderWithSlots = renderWithSimpleContent(DataGuard, {
+      ...baseOptions,
+      props: { ...baseProps, data },
+    });
+
+    expect(renderWithSlots.container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/explorer/src/lib/components/__tests__/TransactionDetails.spec.js b/explorer/src/lib/components/__tests__/TransactionDetails.spec.js
@@ -1,5 +1,7 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, render } from "@testing-library/svelte";
+import { apiTransaction } from "$lib/mock-data";
+import { transformTransaction } from "$lib/chain-info";
 import { TransactionDetails } from "../";
 
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
@@ -9,27 +11,18 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({
 }));
 
 const baseProps = {
-  data: {
-    blockhash:
-      "42bb6382d5e7e4fe794c548a0bcf9634b8322aebb31e4f7eb5a16ea86a5ae933",
-    blockheight: 488582,
-    blocktimestamp: "2024-04-16 08:55:36 +0000 UTC",
-    blockts: 1,
-    contract: "Transfer",
-    feepaid: 292491,
-    gaslimit: 500000000,
-    gasprice: 1,
-    gasspent: 292491,
-    method: "transfer",
-    success: true,
-    txerror: "",
-    txid: "4e49cd5a2f8c6eb8b1f09700f06e5bfa3fbf25591c322eae59428c25d1c04a07",
-    txtype: "1",
-  },
+  data: transformTransaction(apiTransaction.data[0]),
+  error: null,
+  loading: false,
 };
 
 describe("Transaction Details", () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date(2024, 4, 20));
   afterEach(cleanup);
+  afterAll(() => {
+    vi.useRealTimers();
+  });
 
   it("renders the Transaction Details component", () => {
     const { container } = render(TransactionDetails, baseProps);

diff --git a/explorer/src/lib/components/__tests__/TransactionsTable.spec.js b/explorer/src/lib/components/__tests__/TransactionsTable.spec.js
@@ -0,0 +1,33 @@
+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 { TransactionsTable } from "..";
+import { mapWith, slice } from "lamb";
+
+const transformTransactions = mapWith(transformTransaction);
+const data = slice(transformTransactions(apiTransactions.data), 0, 10);
+
+describe("Transactions Table", () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date(2024, 4, 20));
+  const baseProps = {
+    data: data,
+  };
+  const baseOptions = {
+    props: baseProps,
+    target: document.body,
+  };
+
+  afterEach(cleanup);
+
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+
+  it("should render the `TransactionsTable` component", () => {
+    const { container } = render(TransactionsTable, baseOptions);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});