diff --git a/explorer/src/lib/components/__tests__/BlocksCard.spec.js b/explorer/src/lib/components/__tests__/BlocksCard.spec.js index e7ac63701c..87a9b7ab4e 100644 --- a/explorer/src/lib/components/__tests__/BlocksCard.spec.js +++ b/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); diff --git a/explorer/src/lib/components/__tests__/TransactionsCard.spec.js b/explorer/src/lib/components/__tests__/TransactionsCard.spec.js new file mode 100644 index 0000000000..d6e96198d3 --- /dev/null +++ b/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 = { + txs: data, + error: null, + loading: false, + }; + 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(); + }); +}); diff --git a/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap new file mode 100644 index 0000000000..f10bfcc1a0 --- /dev/null +++ b/explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap @@ -0,0 +1,2971 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Transactions Card > should disable the \`Show More\` button if there is no more data to display 1`] = ` +
+
+

+ 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 + + +
+
+ + + + + +
+`; + +exports[`Transactions Card > should disable the \`Show More\` button is the card is in the loading state 1`] = ` +
+
+

+ 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 + + +
+
+ + + + + +
+`; + +exports[`Transactions Card > should render the \`TransactionsCard\` component 1`] = ` +
+
+

+ 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 + + +
+
+ + + + + +
+`; diff --git a/explorer/src/lib/components/index.js b/explorer/src/lib/components/index.js index a32ac63af4..a231b8b92d 100644 --- a/explorer/src/lib/components/index.js +++ b/explorer/src/lib/components/index.js @@ -15,6 +15,7 @@ export { default as ListItem } from "./list-item/ListItem.svelte"; export { default as Navbar } from "./navbar/Navbar.svelte"; export { default as SearchNotification } from "./search-notification/SearchNotification.svelte"; export { default as TextboxAndButton } from "./textbox-and-button/TextboxAndButton.svelte"; +export { default as TransactionsCard } from "./transactions-card/TransactionsCard.svelte"; export { default as TransactionDetails } from "./transaction-details/TransactionDetails.svelte"; export { default as TransactionsList } from "./transactions-list/TransactionsList.svelte"; export { default as TransactionsTable } from "./transactions-table/TransactionsTable.svelte"; diff --git a/explorer/src/lib/components/transactions-card/TransactionsCard.css b/explorer/src/lib/components/transactions-card/TransactionsCard.css new file mode 100644 index 0000000000..080d250658 --- /dev/null +++ b/explorer/src/lib/components/transactions-card/TransactionsCard.css @@ -0,0 +1,5 @@ +.transactions-card__table, +.transactions-card__list { + max-height: 70dvh; + overflow-y: auto; +} diff --git a/explorer/src/lib/components/transactions-card/TransactionsCard.svelte b/explorer/src/lib/components/transactions-card/TransactionsCard.svelte new file mode 100644 index 0000000000..6a8a0cd070 --- /dev/null +++ b/explorer/src/lib/components/transactions-card/TransactionsCard.svelte @@ -0,0 +1,77 @@ + + + + + + loadMoreItems(), + disabled: isLoadMoreDisabled, + label: "Show More", + }} +> + {#if clientWidth > 768} + + {:else} +
+ {#each displayedTxs as tx (tx)} + + {/each} +
+ {/if} + diff --git a/explorer/src/routes/blocks/+page.svelte b/explorer/src/routes/blocks/+page.svelte index 23830bc30f..141ed89fc8 100644 --- a/explorer/src/routes/blocks/+page.svelte +++ b/explorer/src/routes/blocks/+page.svelte @@ -18,9 +18,7 @@ pollingDataStore.start(network); }); - onDestroy(() => { - pollingDataStore.stop(); - }); + onDestroy(pollingDataStore.stop);
diff --git a/explorer/src/routes/transactions/+page.svelte b/explorer/src/routes/transactions/+page.svelte index 16870c725c..ac1694596b 100644 --- a/explorer/src/routes/transactions/+page.svelte +++ b/explorer/src/routes/transactions/+page.svelte @@ -1,3 +1,31 @@ + +
-
All Transactions
+
diff --git a/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap deleted file mode 100644 index dbf68fff7f..0000000000 --- a/explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap +++ /dev/null @@ -1,14 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`Transactions > should render the Transactions page 1`] = ` -
-
-
- All Transactions -
-
- -
-`; diff --git a/explorer/src/routes/transactions/__tests__/page.spec.js b/explorer/src/routes/transactions/__tests__/page.spec.js deleted file mode 100644 index 953c16ef49..0000000000 --- a/explorer/src/routes/transactions/__tests__/page.spec.js +++ /dev/null @@ -1,11 +0,0 @@ -import { describe, expect, it } from "vitest"; -import { render } from "@testing-library/svelte"; -import Transactions from "../+page.svelte"; - -describe("Transactions", () => { - it("should render the Transactions page", () => { - const { container } = render(Transactions, {}); - - expect(container.firstChild).toMatchSnapshot(); - }); -});