diff --git a/explorer/CHANGELOG.md b/explorer/CHANGELOG.md index 6e0e8ebf9a..48c66b3688 100644 --- a/explorer/CHANGELOG.md +++ b/explorer/CHANGELOG.md @@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Update Statistics Panel separator lines color [#2039] - Update Statistics Panel labels for clarity [#2034] - Update font-display to swap for custom fonts to improve performance [#2025] +- Optimize auto re-renders of relative times [#2059] ## [0.1.0] - 2024-07-24 @@ -34,6 +35,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 [#2036]: https://github.com/dusk-network/rusk/issues/2036 [#2037]: https://github.com/dusk-network/rusk/issues/2037 [#2039]: https://github.com/dusk-network/rusk/issues/2039 +[#2059]: https://github.com/dusk-network/rusk/issues/2059 diff --git a/explorer/src/lib/components/__tests__/BlocksList.spec.js b/explorer/src/lib/components/__tests__/BlocksList.spec.js index 16a9623cde..4062705614 100644 --- a/explorer/src/lib/components/__tests__/BlocksList.spec.js +++ b/explorer/src/lib/components/__tests__/BlocksList.spec.js @@ -1,14 +1,27 @@ import { afterAll, afterEach, describe, expect, it, vi } from "vitest"; import { cleanup, render } from "@testing-library/svelte"; -import { BlocksList } from ".."; +import { setPathIn } from "lamb"; + import { gqlBlock } from "$lib/mock-data"; import { transformBlock } from "$lib/chain-info"; +import { BlocksList } from ".."; + +/** @param {HTMLElement} container */ +function getTimeElement(container) { + return /** @type {HTMLTimeElement} */ (container.querySelector("time")); +} + describe("Blocks List", () => { vi.useFakeTimers(); vi.setSystemTime(new Date(2024, 4, 20)); - const baseProps = { data: transformBlock(gqlBlock.block) }; + const block = transformBlock(gqlBlock.block); + + /** @type {import("svelte").ComponentProps} */ + const baseProps = { data: block }; + + const timeRefreshInterval = 1000; afterEach(cleanup); @@ -21,4 +34,31 @@ describe("Blocks List", () => { expect(container.firstChild).toMatchSnapshot(); }); + + it("should auto-refresh relative times when the related prop is set to true", async () => { + const props = { + ...baseProps, + data: setPathIn(block, "header.date", new Date()), + }; + const { container, rerender } = render(BlocksList, props); + const timeElement = getTimeElement(container); + + expect(timeElement.innerHTML).toMatchInlineSnapshot(`"now"`); + + await vi.advanceTimersByTimeAsync(timeRefreshInterval * 3); + + expect(timeElement.innerHTML).toMatchInlineSnapshot(`"now"`); + + await rerender({ ...props, autoRefreshTime: true }); + + expect(timeElement.innerHTML).toMatchInlineSnapshot(`"3 seconds ago"`); + + await vi.advanceTimersByTimeAsync(timeRefreshInterval); + + expect(timeElement.innerHTML).toMatchInlineSnapshot(`"4 seconds ago"`); + + await vi.advanceTimersByTimeAsync(timeRefreshInterval); + + expect(timeElement.innerHTML).toMatchInlineSnapshot(`"5 seconds ago"`); + }); }); diff --git a/explorer/src/lib/components/__tests__/Rerender.spec.js b/explorer/src/lib/components/__tests__/Rerender.spec.js deleted file mode 100644 index 9865f82fbc..0000000000 --- a/explorer/src/lib/components/__tests__/Rerender.spec.js +++ /dev/null @@ -1,18 +0,0 @@ -import { afterEach, describe, expect, it } from "vitest"; -import { cleanup } from "@testing-library/svelte"; -import { Rerender } from ".."; - -import { renderWithSimpleContent } from "$lib/dusk/test-helpers"; - -describe("updates the slot content every second", () => { - const baseOptions = { - target: document.body, - }; - - afterEach(cleanup); - it("should render with slot data", () => { - const renderWithSlots = renderWithSimpleContent(Rerender, baseOptions); - - expect(renderWithSlots.container.firstChild).toMatchSnapshot(); - }); -}); diff --git a/explorer/src/lib/components/__tests__/TransactionsList.spec.js b/explorer/src/lib/components/__tests__/TransactionsList.spec.js index 0317405d2b..aaa2bc50fa 100644 --- a/explorer/src/lib/components/__tests__/TransactionsList.spec.js +++ b/explorer/src/lib/components/__tests__/TransactionsList.spec.js @@ -1,19 +1,30 @@ import { afterAll, afterEach, describe, expect, it, vi } from "vitest"; import { cleanup, render } from "@testing-library/svelte"; -import { TransactionsList } from ".."; + import { gqlTransaction } from "$lib/mock-data"; import { transformTransaction } from "$lib/chain-info"; +import { TransactionsList } from ".."; + +/** @param {HTMLElement} container */ +function getTimeElement(container) { + return /** @type {HTMLTimeElement} */ (container.querySelector("time")); +} + describe("Transactions List", () => { vi.useFakeTimers(); vi.setSystemTime(new Date(2024, 4, 20)); + const transaction = transformTransaction(gqlTransaction.tx); + /** @type {import("svelte").ComponentProps} */ const baseProps = { - data: transformTransaction(gqlTransaction.tx), + data: transaction, mode: "full", }; + const timeRefreshInterval = 1000; + afterEach(cleanup); afterAll(() => { @@ -36,4 +47,34 @@ describe("Transactions List", () => { expect(container.firstChild).toMatchSnapshot(); }); + + it("should auto-refresh relative times when the related prop is set to true", async () => { + const props = { + ...baseProps, + data: { + ...transaction, + date: new Date(), + }, + }; + const { container, rerender } = render(TransactionsList, props); + const timeElement = getTimeElement(container); + + expect(timeElement.innerHTML).toMatchInlineSnapshot(`"now"`); + + await vi.advanceTimersByTimeAsync(timeRefreshInterval * 3); + + expect(timeElement.innerHTML).toMatchInlineSnapshot(`"now"`); + + await rerender({ ...props, autoRefreshTime: true }); + + expect(timeElement.innerHTML).toMatchInlineSnapshot(`"3 seconds ago"`); + + await vi.advanceTimersByTimeAsync(timeRefreshInterval); + + expect(timeElement.innerHTML).toMatchInlineSnapshot(`"4 seconds ago"`); + + await vi.advanceTimersByTimeAsync(timeRefreshInterval); + + expect(timeElement.innerHTML).toMatchInlineSnapshot(`"5 seconds ago"`); + }); }); diff --git a/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap b/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap index 20115baa53..7d87b93a24 100644 --- a/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap +++ b/explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap @@ -140,13 +140,12 @@ exports[`Block Details > renders the Block Details component 1`] = ` class="details-list__definition" >
should disable the \`Show More\` button if there is no mo 1,365,454 - yesterday - + @@ -148,11 +149,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo 1,365,453 - yesterday - + @@ -207,11 +209,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo 1,365,452 - yesterday - + @@ -266,11 +269,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo 1,365,451 - yesterday - + @@ -325,11 +329,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo 1,365,450 - yesterday - + @@ -384,11 +389,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo 1,365,449 - yesterday - + @@ -443,11 +449,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo 1,365,448 - yesterday - + @@ -502,11 +509,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo 1,365,447 - yesterday - + @@ -561,11 +569,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo 1,365,446 - yesterday - + @@ -620,11 +629,12 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo 1,365,445 - yesterday - + @@ -706,7 +716,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo class="details-list__definition details-list__definition--table" >
renders the Transaction Details component with th class="details-list__definition" >
should disable the \`Show More\` button if there is 070280c695...94efca2a0e - 18 hours ago - + @@ -211,11 +212,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is 534f753d5a...5153259c00 - 18 hours ago - + @@ -285,11 +287,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is c6f13af20c...fc68ebb102 - 18 hours ago - + @@ -359,11 +362,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is 31c7dce26a...bf7bcb4c04 - 18 hours ago - + @@ -433,11 +437,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is 4fa6e913c0...9e4dd5510d - 18 hours ago - + @@ -507,11 +512,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is d1a7928a43...79ccdb2e04 - 18 hours ago - + @@ -581,11 +587,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is 004ca8683c...cff9718b06 - 18 hours ago - + @@ -655,11 +662,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is b5a77063e4...4496253a05 - 19 hours ago - + @@ -729,11 +737,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is b263d9d594...9d80b06e0b - 19 hours ago - + @@ -803,11 +812,12 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is b4525cb82f...f5275d7709 - 19 hours ago - + @@ -904,7 +914,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if there is class="details-list__definition details-list__definition--table" > @@ -966,11 +978,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component c6f13af20c...fc68ebb102 - 18 hours ago - + @@ -1019,11 +1032,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component 31c7dce26a...bf7bcb4c04 - 18 hours ago - + @@ -1072,11 +1086,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component 4fa6e913c0...9e4dd5510d - 18 hours ago - + @@ -1125,11 +1140,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component d1a7928a43...79ccdb2e04 - 18 hours ago - + @@ -1178,11 +1194,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component 004ca8683c...cff9718b06 - 18 hours ago - + @@ -1231,11 +1248,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component b5a77063e4...4496253a05 - 19 hours ago - + @@ -1284,11 +1302,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component b263d9d594...9d80b06e0b - 19 hours ago - + @@ -1337,11 +1356,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component b4525cb82f...f5275d7709 - 19 hours ago - + @@ -1449,11 +1469,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component 070280c695...94efca2a0e - 18 hours ago - + @@ -1523,11 +1544,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component 534f753d5a...5153259c00 - 18 hours ago - + @@ -1597,11 +1619,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component c6f13af20c...fc68ebb102 - 18 hours ago - + @@ -1671,11 +1694,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component 31c7dce26a...bf7bcb4c04 - 18 hours ago - + @@ -1745,11 +1769,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component 4fa6e913c0...9e4dd5510d - 18 hours ago - + @@ -1819,11 +1844,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component d1a7928a43...79ccdb2e04 - 18 hours ago - + @@ -1893,11 +1919,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component 004ca8683c...cff9718b06 - 18 hours ago - + @@ -1967,11 +1994,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component b5a77063e4...4496253a05 - 19 hours ago - + @@ -2041,11 +2069,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component b263d9d594...9d80b06e0b - 19 hours ago - + @@ -2115,11 +2144,12 @@ exports[`Transactions Table > should render the \`TransactionsTable\` component b4525cb82f...f5275d7709 - 19 hours ago - + diff --git a/explorer/src/lib/components/block-details/BlockDetails.svelte b/explorer/src/lib/components/block-details/BlockDetails.svelte index 66829b6be8..b1b99b0632 100644 --- a/explorer/src/lib/components/block-details/BlockDetails.svelte +++ b/explorer/src/lib/components/block-details/BlockDetails.svelte @@ -2,18 +2,12 @@ - -{#key updateFlag} - -{/key} diff --git a/explorer/src/lib/components/transaction-details/TransactionDetails.svelte b/explorer/src/lib/components/transaction-details/TransactionDetails.svelte index 3c7c0c02b8..fe23cd19a3 100644 --- a/explorer/src/lib/components/transaction-details/TransactionDetails.svelte +++ b/explorer/src/lib/components/transaction-details/TransactionDetails.svelte @@ -6,10 +6,9 @@ DataCard, DataGuard, ListItem, - Rerender, StaleDataNotice, } from "$lib/components"; - import { Badge, Card, Switch } from "$lib/dusk/components"; + import { Badge, Card, RelativeTime, Switch } from "$lib/dusk/components"; import { createValueFormatter } from "$lib/dusk/value"; import { createCurrencyFormatter, @@ -18,7 +17,6 @@ } from "$lib/dusk/currency"; import { calculateAdaptiveCharCount, - getRelativeTimeString, makeClassName, middleEllipsis, } from "$lib/dusk/string"; @@ -115,15 +113,15 @@ timestamp - diff --git a/explorer/src/lib/components/transactions-list/TransactionsList.svelte b/explorer/src/lib/components/transactions-list/TransactionsList.svelte index b2e3b88359..6ec8525a1a 100644 --- a/explorer/src/lib/components/transactions-list/TransactionsList.svelte +++ b/explorer/src/lib/components/transactions-list/TransactionsList.svelte @@ -3,26 +3,25 @@ + + + + The relative time now is {relativeTime} + + diff --git a/explorer/src/lib/dusk/components/__tests__/test-components/RerenderCounter.svelte b/explorer/src/lib/dusk/components/__tests__/test-components/RerenderCounter.svelte new file mode 100644 index 0000000000..c608d52571 --- /dev/null +++ b/explorer/src/lib/dusk/components/__tests__/test-components/RerenderCounter.svelte @@ -0,0 +1,12 @@ + + + + +{counter++} diff --git a/explorer/src/lib/dusk/components/__tests__/test-components/RerenderGenerateValue1.svelte b/explorer/src/lib/dusk/components/__tests__/test-components/RerenderGenerateValue1.svelte new file mode 100644 index 0000000000..68a5b33777 --- /dev/null +++ b/explorer/src/lib/dusk/components/__tests__/test-components/RerenderGenerateValue1.svelte @@ -0,0 +1,15 @@ + + + + + diff --git a/explorer/src/lib/dusk/components/__tests__/test-components/RerenderGenerateValue2.svelte b/explorer/src/lib/dusk/components/__tests__/test-components/RerenderGenerateValue2.svelte new file mode 100644 index 0000000000..10403bf58b --- /dev/null +++ b/explorer/src/lib/dusk/components/__tests__/test-components/RerenderGenerateValue2.svelte @@ -0,0 +1,16 @@ + + + + + + now the value is: {value} + diff --git a/explorer/src/lib/dusk/components/index.js b/explorer/src/lib/dusk/components/index.js index 0be65f3158..d3066574f1 100644 --- a/explorer/src/lib/dusk/components/index.js +++ b/explorer/src/lib/dusk/components/index.js @@ -6,6 +6,8 @@ export { default as Card } from "./card/Card.svelte"; export { default as Icon } from "./icon/Icon.svelte"; export { default as NavList } from "./nav-list/NavList.svelte"; export { default as ProgressBar } from "./progress-bar/ProgressBar.svelte"; +export { default as Rerender } from "./rerender/Rerender.svelte"; +export { default as RelativeTime } from "./relative-time/RelativeTime.svelte"; export { default as Select } from "./select/Select.svelte"; export { default as Switch } from "./switch/Switch.svelte"; export { default as Textbox } from "./textbox/Textbox.svelte"; diff --git a/explorer/src/lib/dusk/components/relative-time/RelativeTime.svelte b/explorer/src/lib/dusk/components/relative-time/RelativeTime.svelte new file mode 100644 index 0000000000..e7499faaac --- /dev/null +++ b/explorer/src/lib/dusk/components/relative-time/RelativeTime.svelte @@ -0,0 +1,31 @@ + + + + + diff --git a/explorer/src/lib/dusk/components/rerender/Rerender.svelte b/explorer/src/lib/dusk/components/rerender/Rerender.svelte new file mode 100644 index 0000000000..57d3f64fb7 --- /dev/null +++ b/explorer/src/lib/dusk/components/rerender/Rerender.svelte @@ -0,0 +1,47 @@ + + +{#key generateValue ? value : updateFlag} + {value} +{/key} diff --git a/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap b/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap index 2ed48dfe30..e1c66e3858 100644 --- a/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap +++ b/explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap @@ -137,11 +137,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a 1,365,454 - yesterday - + @@ -196,11 +197,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a 1,365,453 - yesterday - + @@ -255,11 +257,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a 1,365,452 - yesterday - + @@ -314,11 +317,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a 1,365,451 - yesterday - + @@ -373,11 +377,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a 1,365,450 - yesterday - + @@ -432,11 +437,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a 1,365,449 - yesterday - + @@ -491,11 +497,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a 1,365,448 - yesterday - + @@ -550,11 +557,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a 1,365,447 - yesterday - + @@ -609,11 +617,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a 1,365,446 - yesterday - + @@ -668,11 +677,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a 1,365,445 - yesterday - + @@ -727,11 +737,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a 1,365,444 - yesterday - + @@ -786,11 +797,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a 1,365,443 - yesterday - + @@ -845,11 +857,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a 1,365,442 - yesterday - + @@ -904,11 +917,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a 1,365,441 - yesterday - + @@ -963,11 +977,12 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a 1,365,440 - yesterday - + @@ -1049,7 +1064,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a class="details-list__definition details-list__definition--table" >