Skip to content

Commit

Permalink
explorer: create StaleDataNotice
Browse files Browse the repository at this point in the history
  • Loading branch information
deuch13 committed Jul 26, 2024
1 parent 4d6aa1e commit 691d292
Show file tree
Hide file tree
Showing 13 changed files with 233 additions and 1 deletion.
5 changes: 5 additions & 0 deletions explorer/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

## [Unreleased]

### Added

- Implement warning for stale market data [#1892]

## [0.1.0] - 2024-07-24

### Added
Expand All @@ -16,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
<!-- ISSUES -->

[#2017]: https://github.com/dusk-network/rusk/issues/2017
[#1892]: https://github.com/dusk-network/rusk/issues/1892

<!-- VERSIONS -->

Expand Down
103 changes: 103 additions & 0 deletions explorer/src/lib/components/__tests__/StaleDataNotice.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import {
afterAll,
afterEach,
beforeEach,
describe,
expect,
it,
vi,
} from "vitest";
import { act, cleanup, render } from "@testing-library/svelte";
import { marketDataStore } from "$lib/stores";
import { StaleDataNotice } from "../";

const mockedReadableStore = await vi.hoisted(async () => {
const { mockReadableStore } = await import("$lib/dusk/test-helpers");
return mockReadableStore({
data: null,
error: null,
isLoading: false,
lastUpdate: null,
});
});

vi.mock("$lib/stores", async (importOriginal) => {
/** @type {MarketDataStore} */
const original = await importOriginal();

return {
...original,
marketDataStore: {
...mockedReadableStore,
isDataStale: vi.fn(() => false),
},
};
});

describe("StaleDataNotice", () => {
const initialState = structuredClone(
mockedReadableStore.getMockedStoreValue()
);

beforeEach(() => {
mockedReadableStore.setMockedStoreValue(initialState);
});

afterEach(cleanup);

afterAll(() => {
vi.doUnmock("$lib/stores");
});

it("does not render the Stale Data notice if data is not stale", () => {
mockedReadableStore.setMockedStoreValue({
...initialState,
data: { data: "some data" },
lastUpdate: new Date(),
});

const { container } = render(StaleDataNotice, { target: document.body });
expect(container.childElementCount).toBe(0);
});

it("renders the Stale Data notice if data is stale", async () => {
vi.useFakeTimers();
vi.setSystemTime(new Date(2024, 4, 20));

mockedReadableStore.setMockedStoreValue({
...initialState,
data: { data: "some data" },
lastUpdate: new Date(),
});

vi.mocked(marketDataStore.isDataStale).mockReturnValueOnce(true);

const { container } = render(StaleDataNotice, { target: document.body });

expect(container.firstChild).toMatchSnapshot();

vi.useRealTimers();
});

it("should react to data changes", async () => {
mockedReadableStore.setMockedStoreValue({
...initialState,
lastUpdate: null,
});

const { container } = render(StaleDataNotice, { target: document.body });

expect(container.childElementCount).toBe(0);

vi.mocked(marketDataStore.isDataStale).mockReturnValueOnce(true);

await act(() => {
mockedReadableStore.setMockedStoreValue({
...initialState,
lastUpdate: new Date(),
});
});

expect(container.firstChild).toHaveClass("dusk-icon");
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`StaleDataNotice > renders the Stale Data notice if data is stale 1`] = `
<svg
class="dusk-icon dusk-icon--size--normal"
data-tooltip-id="main-tooltip"
data-tooltip-place="top"
data-tooltip-text="Stale Data
Last Update: Mon, 20 May 2024 00:00:00 GMT"
data-tooltip-type="warning"
role="graphics-symbol"
viewBox="0 0 24 24"
>
<path
d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"
/>
</svg>
`;
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,8 @@ exports[`Transaction Details > renders the Transaction Details component 1`] = `
0.000290766 DUSK ($0.0001071037)
</dd>
<dt
class="details-list__term"
Expand Down Expand Up @@ -228,6 +230,8 @@ exports[`Transaction Details > renders the Transaction Details component 1`] = `
0.000000001 DUSK ($0.0000000004)
</dd>
<dt
class="details-list__term"
Expand Down Expand Up @@ -525,6 +529,8 @@ exports[`Transaction Details > renders the Transaction Details component with th
0.000290766 DUSK ($0.0001071037)
</dd>
<dt
class="details-list__term"
Expand Down Expand Up @@ -553,6 +559,8 @@ exports[`Transaction Details > renders the Transaction Details component with th
0.000000001 DUSK ($0.0000000004)
</dd>
<dt
class="details-list__term"
Expand Down
1 change: 1 addition & 0 deletions explorer/src/lib/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export { default as ListItem } from "./list-item/ListItem.svelte";
export { default as Navbar } from "./navbar/Navbar.svelte";
export { default as Rerender } from "./rerender/Rerender.svelte";
export { default as SearchNotification } from "./search-notification/SearchNotification.svelte";
export { default as StaleDataNotice } from "./stale-data-notice/StaleDataNotice.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";
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<script>
import { mdiAlertOutline } from "@mdi/js";
import { Icon } from "$lib/dusk/components";
import { marketDataStore } from "$lib/stores";
$: tooltipText = `Stale Data \nLast Update: ${$marketDataStore.lastUpdate?.toUTCString()}`;
$: isStaleData = $marketDataStore.lastUpdate && marketDataStore.isDataStale();
</script>
{#if isStaleData}
<Icon
path={mdiAlertOutline}
size="normal"
data-tooltip-id="main-tooltip"
data-tooltip-text={tooltipText}
data-tooltip-place="top"
data-tooltip-type="warning"
/>
{/if}
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
DataGuard,
ListItem,
Rerender,
StaleDataNotice,
} from "$lib/components";
import { Badge, Card, Switch } from "$lib/dusk/components";
import { createValueFormatter } from "$lib/dusk/value";
Expand Down Expand Up @@ -143,6 +144,7 @@
<DataGuard data={market?.currentPrice.usd}>
{`${feeFormatter(luxToDusk(data.feepaid))} DUSK (${currencyFormatter(luxToDusk(data.feepaid) * /** @type {number} */ (market?.currentPrice.usd))})`}
</DataGuard>
<StaleDataNotice />
</svelte:fragment>
</ListItem>

Expand All @@ -153,6 +155,7 @@
<DataGuard data={market?.currentPrice.usd}>
{`${feeFormatter(luxToDusk(data.gasprice))} DUSK (${currencyFormatter(luxToDusk(data.gasprice) * /** @type {number} */ (market?.currentPrice.usd))})`}
</DataGuard>
<StaleDataNotice />
</svelte:fragment>
</ListItem>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ exports[`StatisticsPanel > should render the StatisticsPanel, query for the nece
- - -
</span>
</div>
<span
Expand Down Expand Up @@ -60,6 +62,8 @@ exports[`StatisticsPanel > should render the StatisticsPanel, query for the nece
- - -
</span>
</div>
<span
Expand Down Expand Up @@ -94,6 +98,7 @@ exports[`StatisticsPanel > should render the StatisticsPanel, query for the nece
- - -
</span>
</div>
<span
Expand Down Expand Up @@ -123,6 +128,7 @@ exports[`StatisticsPanel > should render the StatisticsPanel, query for the nece
- - -
</span>
</div>
<span
Expand Down Expand Up @@ -157,6 +163,7 @@ exports[`StatisticsPanel > should render the StatisticsPanel, query for the nece
- - -
</span>
</div>
<span
Expand Down Expand Up @@ -186,6 +193,7 @@ exports[`StatisticsPanel > should render the StatisticsPanel, query for the nece
- - -
</span>
</div>
<span
Expand Down Expand Up @@ -220,6 +228,7 @@ exports[`StatisticsPanel > should render the StatisticsPanel, query for the nece
- - -
</span>
</div>
<span
Expand Down Expand Up @@ -249,6 +258,7 @@ exports[`StatisticsPanel > should render the StatisticsPanel, query for the nece
- - -
</span>
</div>
<span
Expand Down Expand Up @@ -1025,6 +1035,8 @@ exports[`StatisticsPanel > should render the StatisticsPanel, query for the nece
0.368
</div>
<span
Expand Down Expand Up @@ -1053,6 +1065,8 @@ exports[`StatisticsPanel > should render the StatisticsPanel, query for the nece
168M
</div>
<span
Expand Down Expand Up @@ -1086,6 +1100,7 @@ exports[`StatisticsPanel > should render the StatisticsPanel, query for the nece
58.2M
</div>
<span
Expand Down Expand Up @@ -1114,6 +1129,7 @@ exports[`StatisticsPanel > should render the StatisticsPanel, query for the nece
2.6M
</div>
<span
Expand Down Expand Up @@ -1147,6 +1163,7 @@ exports[`StatisticsPanel > should render the StatisticsPanel, query for the nece
487,596
</div>
<span
Expand Down Expand Up @@ -1175,6 +1192,7 @@ exports[`StatisticsPanel > should render the StatisticsPanel, query for the nece
10
</div>
<span
Expand Down Expand Up @@ -1208,6 +1226,7 @@ exports[`StatisticsPanel > should render the StatisticsPanel, query for the nece
945
</div>
<span
Expand Down Expand Up @@ -1236,6 +1255,7 @@ exports[`StatisticsPanel > should render the StatisticsPanel, query for the nece
34
</div>
<span
Expand Down
Loading

0 comments on commit 691d292

Please sign in to comment.