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 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 class="details-list__definition details-list__definition--table" >