diff --git a/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap new file mode 100644 index 0000000000..5744ab2ac0 --- /dev/null +++ b/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap @@ -0,0 +1,1217 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Blocks page > should render the Blocks page, start polling for blocks and stop the polling when unmounted 1`] = ` +
+
+
+
+

+ Blocks +

+ + + +
+ +

+ Loading... +

+ + +
+ + + + +
+ +
+`; + +exports[`Blocks page > should render the Blocks page, start polling for blocks and stop the polling when unmounted 2`] = ` +
+
+
+
+

+ Blocks +

+ + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ # Block + + Fee + + Txn(s) + + Rewards +
+ + 487,491 + + + + + + last month + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + + 16 Dusk + + +
+ + 487,490 + + + + + + last month + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + + 16 Dusk + + +
+ + 487,489 + + + + + + last month + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + + 16 Dusk + + +
+ + 487,488 + + + + + + last month + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + + 16 Dusk + + +
+ + 487,487 + + + + + + last month + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + + 16 Dusk + + +
+ + 487,486 + + + + + + last month + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + + 16 Dusk + + +
+ + 487,485 + + + + + + last month + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + + 16 Dusk + + +
+ + 487,484 + + + + + + last month + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + + 16 Dusk + + +
+ + 487,483 + + + + + + last month + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + + 16 Dusk + + +
+ + 487,482 + + + + + + last month + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + + 16 Dusk + + +
+ + 487,481 + + + + + + last month + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + + 16 Dusk + + +
+ + 487,480 + + + + + + last month + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + + 16 Dusk + + +
+ + 487,479 + + + + + + last month + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + + 16 Dusk + + +
+ + 487,478 + + + + + + last month + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + + 16 Dusk + + +
+ + 487,477 + + + + + + last month + + + + AVG: + + + 0 +
+ + + TOTAL: + + + 0 + 		+ 0 + + + 16 Dusk + + +
+
+ + + + + +
+ + + + +
+ +
+`; diff --git a/explorer/src/routes/blocks/__tests__/page.spec.js b/explorer/src/routes/blocks/__tests__/page.spec.js new file mode 100644 index 0000000000..11eaa99b97 --- /dev/null +++ b/explorer/src/routes/blocks/__tests__/page.spec.js @@ -0,0 +1,58 @@ +import { afterAll, afterEach, describe, expect, it, vi } from "vitest"; +import { cleanup, render } from "@testing-library/svelte"; +import { get } from "svelte/store"; + +import { duskAPI } from "$lib/services"; +import { transformBlock } from "$lib/chain-info"; +import { appStore } from "$lib/stores"; +import { apiBlocks } from "$lib/mock-data"; + +import Blocks from "../+page.svelte"; + +describe("Blocks page", () => { + vi.useFakeTimers(); + + const { fetchInterval, network } = get(appStore); + const getBlocksSpy = vi + .spyOn(duskAPI, "getBlocks") + .mockResolvedValue(apiBlocks.data.blocks.map(transformBlock)); + + afterEach(() => { + cleanup(); + getBlocksSpy.mockClear(); + }); + + afterAll(() => { + vi.useRealTimers(); + getBlocksSpy.mockRestore(); + }); + + it("should render the Blocks page, start polling for blocks and stop the polling when unmounted", async () => { + const { container, unmount } = render(Blocks); + + expect(container.firstChild).toMatchSnapshot(); + expect(getBlocksSpy).toHaveBeenCalledTimes(1); + expect(getBlocksSpy).toHaveBeenNthCalledWith(1, network); + + await vi.advanceTimersByTimeAsync(1); + + // snapshot with received data from APIs + expect(container.firstChild).toMatchSnapshot(); + + await vi.advanceTimersByTimeAsync(fetchInterval - 1); + + expect(getBlocksSpy).toHaveBeenCalledTimes(2); + expect(getBlocksSpy).toHaveBeenNthCalledWith(2, network); + + await vi.advanceTimersByTimeAsync(fetchInterval); + + expect(getBlocksSpy).toHaveBeenCalledTimes(3); + expect(getBlocksSpy).toHaveBeenNthCalledWith(3, network); + + unmount(); + + await vi.advanceTimersByTimeAsync(fetchInterval * 10); + + expect(getBlocksSpy).toHaveBeenCalledTimes(3); + }); +}); diff --git a/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap new file mode 100644 index 0000000000..33bce298df --- /dev/null +++ b/explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap @@ -0,0 +1,754 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Block Details > should render the Block Details page and query the necessary info 1`] = ` +
+
+
+
+
+

+ Block Details +

+ + + +
+ +

+ Loading... +

+ + +
+ + + + +
+ +
+
+
+

+ Transactions +

+ +
+ +

+ Loading... +

+ + +
+ + + + +
+
+ +
+`; + +exports[`Block Details > should render the Block Details page and query the necessary info 2`] = ` +
+
+
+
+
+

+ Block Details +

+ + + +
+ +
+
+ + + + + + + block hash +
+ +
+ bd5c99bb720b03500e89f103fe66113ba62f2e124ed9651563f38fd15977719f +
+ +
+ + + + + + + height +
+ +
+ + + + + + + + + + + 495,868 + + + + + + + + + + + +
+ +
+ + + + + + + timestamp +
+ +
+ +
+ +
+ + + + + + + transactions +
+ +
+ 2 +
+ +
+ + + + + + + block fees paid +
+ +
+ 0.000580718 + DUSK +
+ +
+ + + + + + + block reward +
+ +
+ 16 + DUSK +
+ +
+ + + + + + + block gas limit +
+ +
+ 5,000,000,000 +
+ +
+ + + + + + + gas used +
+ +
+ 580,718 + +
+
+
+ + +
+ +
+ + + + + + + average fee paid +
+ +
+ 0.000000001 + DUSK +
+ +
+ + + + + + + state root hash +
+ +
+ + 20bb0a677b93f084afadfd34bec3ac3feee33a020b81d9549afa2268e8543acb + +
+ +
+ + +
+ + + + +
+ +
+
+
+

+ Transactions +

+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Hash + + Gas + + Fee + + Status + + Type +
+ + bd5c99bb72...d15977719f + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.000290866 Dusk + + + + + success + + + + + transfer + + +
+ + bd5c99bb72...d15977719f + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.000289852 Dusk + + + + + success + + + + + transfer + + +
+
+ + + + + +
+ + + + +
+
+ +
+`; diff --git a/explorer/src/routes/blocks/block/__tests__/page.spec.js b/explorer/src/routes/blocks/block/__tests__/page.spec.js new file mode 100644 index 0000000000..8e63f14cb1 --- /dev/null +++ b/explorer/src/routes/blocks/block/__tests__/page.spec.js @@ -0,0 +1,45 @@ +import { afterAll, afterEach, describe, expect, it, vi } from "vitest"; +import { cleanup, render } from "@testing-library/svelte"; + +import { duskAPI } from "$lib/services"; +import { transformBlock } from "$lib/chain-info"; +import { apiBlock } from "$lib/mock-data"; + +import BlockDetails from "../+page.svelte"; + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + disconnect: vi.fn(), + observe: vi.fn(), + unobserve: vi.fn(), +})); + +describe("Block Details", () => { + vi.useFakeTimers(); + + const getBlockSpy = vi + .spyOn(duskAPI, "getBlock") + .mockResolvedValue(transformBlock(apiBlock.data.blocks[0])); + + afterEach(() => { + cleanup(); + getBlockSpy.mockClear(); + }); + + afterAll(() => { + vi.useRealTimers(); + getBlockSpy.mockRestore(); + }); + + it("should render the Block Details page and query the necessary info", async () => { + const { container } = render(BlockDetails); + + expect(container.firstChild).toMatchSnapshot(); + + expect(getBlockSpy).toHaveBeenCalledTimes(1); + + await vi.advanceTimersByTimeAsync(1); + + // snapshot with received data from APIs + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap new file mode 100644 index 0000000000..cad37e99db --- /dev/null +++ b/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap @@ -0,0 +1,1495 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Transactions page > should render the Transactions page, start polling for blocks and stop the polling when unmounted 1`] = ` +
+
+
+
+

+ Transactions +

+ + + +
+ +

+ Loading... +

+ + +
+ + + + +
+ +
+`; + +exports[`Transactions page > should render the Transactions page, start polling for blocks and stop the polling when unmounted 2`] = ` +
+
+
+
+

+ Transactions +

+ + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Hash + + Gas + + Fee + + Status + + Type +
+ + 3c6e4018cf...308e07bd2d + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.000290766 Dusk + + + + + success + + + + + transfer + + +
+ + 40d3e59a9b...5e8ade4d3b + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.000290053 Dusk + + + + + success + + + + + transfer + + +
+ + ea86c56ffa...8914074fe3 + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.000290219 Dusk + + + + + success + + + + + transfer + + +
+ + ea86c56ffa...8914074fe3 + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.00029046 Dusk + + + + + success + + + + + transfer + + +
+ + a85a0f5cc2...f0bb827312 + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.000291263 Dusk + + + + + success + + + + + transfer + + +
+ + 646bd535ae...67c1cb0906 + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.000290735 Dusk + + + + + success + + + + + transfer + + +
+ + fbcda951c6...4bec844f78 + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.000289627 Dusk + + + + + success + + + + + transfer + + +
+ + a90821aca4...11467eb9c6 + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.00029061 Dusk + + + + + success + + + + + transfer + + +
+ + 4db9e793b1...e2ab163e74 + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.000291347 Dusk + + + + + success + + + + + transfer + + +
+ + 47c9f1349f...e7ce5103db + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.000290416 Dusk + + + + + success + + + + + transfer + + +
+ + 4a62ff5839...6ad8084dca + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.000290006 Dusk + + + + + success + + + + + transfer + + +
+ + ce994d006c...966e9c1499 + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.000290424 Dusk + + + + + success + + + + + transfer + + +
+ + e852377c09...9e20371c77 + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.000290304 Dusk + + + + + success + + + + + transfer + + +
+ + d3d49fff7b...e944085bb8 + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.000290815 Dusk + + + + + success + + + + + transfer + + +
+ + a3f465cce5...82162bd94f + + + + + + last month + + + + PRICE: + + + 1 +
+ + + LIMIT: + + + 500,000,000 + 		+ + 0.000289437 Dusk + + + + + success + + + + + transfer + + +
+
+ + + + + +
+ + + + +
+ +
+`; diff --git a/explorer/src/routes/transactions/__tests__/page.spec.js b/explorer/src/routes/transactions/__tests__/page.spec.js new file mode 100644 index 0000000000..ca44460344 --- /dev/null +++ b/explorer/src/routes/transactions/__tests__/page.spec.js @@ -0,0 +1,58 @@ +import { afterAll, afterEach, describe, expect, it, vi } from "vitest"; +import { cleanup, render } from "@testing-library/svelte"; +import { get } from "svelte/store"; + +import { duskAPI } from "$lib/services"; +import { transformTransaction } from "$lib/chain-info"; +import { appStore } from "$lib/stores"; +import { apiTransactions } from "$lib/mock-data"; + +import Transactions from "../+page.svelte"; + +describe("Transactions page", () => { + vi.useFakeTimers(); + + const { fetchInterval, network } = get(appStore); + const getTransactionSpy = vi + .spyOn(duskAPI, "getTransactions") + .mockResolvedValue(apiTransactions.data.map(transformTransaction)); + + afterEach(() => { + cleanup(); + getTransactionSpy.mockClear(); + }); + + afterAll(() => { + vi.useRealTimers(); + getTransactionSpy.mockRestore(); + }); + + it("should render the Transactions page, start polling for blocks and stop the polling when unmounted", async () => { + const { container, unmount } = render(Transactions); + + expect(container.firstChild).toMatchSnapshot(); + expect(getTransactionSpy).toHaveBeenCalledTimes(1); + expect(getTransactionSpy).toHaveBeenNthCalledWith(1, network); + + await vi.advanceTimersByTimeAsync(1); + + // snapshot with received data from APIs + expect(container.firstChild).toMatchSnapshot(); + + await vi.advanceTimersByTimeAsync(fetchInterval - 1); + + expect(getTransactionSpy).toHaveBeenCalledTimes(2); + expect(getTransactionSpy).toHaveBeenNthCalledWith(2, network); + + await vi.advanceTimersByTimeAsync(fetchInterval); + + expect(getTransactionSpy).toHaveBeenCalledTimes(3); + expect(getTransactionSpy).toHaveBeenNthCalledWith(3, network); + + unmount(); + + await vi.advanceTimersByTimeAsync(fetchInterval * 10); + + expect(getTransactionSpy).toHaveBeenCalledTimes(3); + }); +}); diff --git a/explorer/src/routes/transactions/transaction/+page.svelte b/explorer/src/routes/transactions/transaction/+page.svelte index 63011b5e53..7a1235b3a0 100644 --- a/explorer/src/routes/transactions/transaction/+page.svelte +++ b/explorer/src/routes/transactions/transaction/+page.svelte @@ -5,7 +5,6 @@ import { appStore } from "$lib/stores"; import { createDataStore } from "$lib/dusk/svelte-stores"; import { onNetworkChange } from "$lib/lifecyles"; - import { onMount } from "svelte"; const dataStore = createDataStore(duskAPI.getTransaction); const payloadStore = createDataStore(duskAPI.getTransactionDetails); @@ -26,10 +25,6 @@ $: ({ data, error, isLoading } = $dataStore); $: ({ data: payloadData } = $payloadStore); $: ({ data: marketData } = $marketStore); - - onMount(() => { - getTransaction(); - });
diff --git a/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap new file mode 100644 index 0000000000..13e6dcc83c --- /dev/null +++ b/explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap @@ -0,0 +1,420 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Transaction Details > should render the Transaction details page and query the necessary info 1`] = ` +
+
+
+
+

+ Transaction Details +

+ + + +
+ +

+ Loading... +

+ + +
+ + + + +
+ +
+`; + +exports[`Transaction Details > should render the Transaction details page and query the necessary info 2`] = ` +
+
+
+
+

+ Transaction Details +

+ + + +
+ +
+
+ + + + + + + ID +
+ +
+ 4877687c2dbf154248d3ddee9ba0d81...431f39056f82a46819da041d4ac0e04 +
+ +
+ + + + + + + block height +
+ +
+ + 487,166 + + + +
+ +
+ + + + + + + Status +
+ +
+ + success + + +
+ +
+ + + + + + + timestamp +
+ +
+ +
+ +
+ + + + + + + type +
+ +
+ + transfer + + +
+ +
+ + + + + + + transaction fee +
+ +
+ 0.000290766 DUSK ($0.0001071037) + + + +
+ +
+ + + + + + + gas price +
+ +
+ 0.000000001 DUSK ($0.0000000004) + + + +
+ +
+ + + + + + + transaction gas limit +
+ +
+ 0.50 + DUSK +
+ +
+ + + + + + + gas spent +
+ +
+ 0.000290766 + DUSK +
+ +
+ + + + + + + payload + + +
+ +
+ +
+ +
+ +
+ + +
+ + + + +
+ +
+`; diff --git a/explorer/src/routes/transactions/transaction/__tests__/page.spec.js b/explorer/src/routes/transactions/transaction/__tests__/page.spec.js new file mode 100644 index 0000000000..ea1e18fc20 --- /dev/null +++ b/explorer/src/routes/transactions/transaction/__tests__/page.spec.js @@ -0,0 +1,64 @@ +import { afterAll, afterEach, describe, expect, it, vi } from "vitest"; +import { cleanup, render } from "@testing-library/svelte"; + +import { duskAPI } from "$lib/services"; +import { transformTransaction } from "$lib/chain-info"; +import { + apiMarketData, + apiTransaction, + apiTransactionDetails, +} from "$lib/mock-data"; + +import TransactionDetails from "../+page.svelte"; + +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + disconnect: vi.fn(), + observe: vi.fn(), + unobserve: vi.fn(), +})); + +describe("Transaction Details", () => { + vi.useFakeTimers(); + + const getTransactionSpy = vi + .spyOn(duskAPI, "getTransaction") + .mockResolvedValue(transformTransaction(apiTransaction.data[0])); + const getPayloadSpy = vi + .spyOn(duskAPI, "getTransactionDetails") + .mockResolvedValue(apiTransactionDetails.data.json); + const getMarketDataSpy = vi + .spyOn(duskAPI, "getMarketData") + .mockResolvedValue({ + currentPrice: apiMarketData.market_data.current_price, + marketCap: apiMarketData.market_data.market_cap, + }); + + afterEach(() => { + cleanup(); + getTransactionSpy.mockClear(); + getPayloadSpy.mockClear(); + getMarketDataSpy.mockClear(); + }); + + afterAll(() => { + vi.useRealTimers(); + getTransactionSpy.mockRestore(); + getPayloadSpy.mockRestore(); + getMarketDataSpy.mockRestore(); + }); + + it("should render the Transaction details page and query the necessary info", async () => { + const { container } = render(TransactionDetails); + + expect(container.firstChild).toMatchSnapshot(); + + expect(getTransactionSpy).toHaveBeenCalledTimes(1); + expect(getPayloadSpy).toHaveBeenCalledTimes(1); + expect(getMarketDataSpy).toHaveBeenCalledTimes(1); + + await vi.advanceTimersByTimeAsync(1); + + // snapshot with received data from APIs + expect(container.firstChild).toMatchSnapshot(); + }); +});