From 5e0d054c2844214629ab4977c2aa17fb8a94d36d Mon Sep 17 00:00:00 2001 From: Kieran Hall Date: Sun, 11 Aug 2024 23:04:26 +0200 Subject: [PATCH] Add DashboardMenu component Resolves #2074 --- .../DashboardNav/DashboardNav.svelte | 72 +++ .../components/__tests__/DashboardNav.spec.js | 106 ++++ .../__snapshots__/DashboardNav.spec.js.snap | 493 ++++++++++++++++++ web-wallet/src/lib/components/components.d.ts | 10 + web-wallet/src/lib/components/index.js | 1 + .../routes/components-showcase/+page.svelte | 2 + .../components-showcase/DashboardNavs.svelte | 41 ++ 7 files changed, 725 insertions(+) create mode 100644 web-wallet/src/lib/components/DashboardNav/DashboardNav.svelte create mode 100644 web-wallet/src/lib/components/__tests__/DashboardNav.spec.js create mode 100644 web-wallet/src/lib/components/__tests__/__snapshots__/DashboardNav.spec.js.snap create mode 100644 web-wallet/src/lib/components/components.d.ts create mode 100644 web-wallet/src/routes/components-showcase/DashboardNavs.svelte diff --git a/web-wallet/src/lib/components/DashboardNav/DashboardNav.svelte b/web-wallet/src/lib/components/DashboardNav/DashboardNav.svelte new file mode 100644 index 0000000000..cf57fe369e --- /dev/null +++ b/web-wallet/src/lib/components/DashboardNav/DashboardNav.svelte @@ -0,0 +1,72 @@ + + + + + + + diff --git a/web-wallet/src/lib/components/__tests__/DashboardNav.spec.js b/web-wallet/src/lib/components/__tests__/DashboardNav.spec.js new file mode 100644 index 0000000000..03edd46600 --- /dev/null +++ b/web-wallet/src/lib/components/__tests__/DashboardNav.spec.js @@ -0,0 +1,106 @@ +import { afterEach, describe, expect, it } from "vitest"; +import { cleanup, render } from "@testing-library/svelte"; +import { DashboardNav } from ".."; +import { mdiPlusBoxOutline, mdiSwapHorizontal, mdiTimerSand } from "@mdi/js"; + +describe("DashboardNav", () => { + const baseProps = { + items: [ + { + href: "#", + id: "item-1", + label: "Something", + }, + { + href: "#", + icons: [], + id: "item-2", + label: "Send", + }, + { + href: "#", + icons: [{ path: mdiTimerSand }], + id: "item-3", + label: "Receive", + }, + { + href: "#", + icons: [ + { path: mdiTimerSand }, + { path: mdiSwapHorizontal }, + { path: mdiPlusBoxOutline }, + ], + id: "item-4", + label: "Stake", + }, + ], + }; + const baseOptions = { + props: baseProps, + target: document.body, + }; + + afterEach(cleanup); + + it("renders the DashboardNav component", () => { + const { container } = render(DashboardNav, baseOptions); + + expect(container.firstChild).toMatchSnapshot(); + }); + + it("should pass additional class names and attributes to the rendered element", async () => { + const props = { + ...baseProps, + className: "foo bar", + }; + const { container, rerender } = render(DashboardNav, { + ...baseOptions, + props, + }); + + expect(container.firstChild).toHaveClass("foo bar"); + + await rerender({ + ...props, + className: "qux", + }); + + expect(container.firstChild).toHaveClass("qux"); + }); + + it("should not display icons if the item's icons array is undefined", () => { + const { container } = render(DashboardNav, baseProps); + + expect( + container.querySelector( + ".dashboard-nav-list > li:nth-child(1) > .dashboard-nav-list__item > .dashboard-nav-item-icons" + ) + ).toBeNull(); + + expect(container.firstChild).toMatchSnapshot(); + }); + + it("should not display icons if the item's icon array is empty", () => { + const { container } = render(DashboardNav, baseProps); + + expect( + container.querySelector( + ".dashboard-nav-list > li:nth-child(2) > .dashboard-nav-list__item > .dashboard-nav-item-icons" + ) + ).toBeNull(); + + expect(container.firstChild).toMatchSnapshot(); + }); + + it("should display icons if the item's icon array is present", () => { + const { container } = render(DashboardNav, baseProps); + + expect( + container.querySelector( + ".dashboard-nav-list > li:nth-child(3) > .dashboard-nav-list__item > .dashboard-nav-item-icons" + ) + ).toBeTruthy(); + + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/web-wallet/src/lib/components/__tests__/__snapshots__/DashboardNav.spec.js.snap b/web-wallet/src/lib/components/__tests__/__snapshots__/DashboardNav.spec.js.snap new file mode 100644 index 0000000000..628a0a937b --- /dev/null +++ b/web-wallet/src/lib/components/__tests__/__snapshots__/DashboardNav.spec.js.snap @@ -0,0 +1,493 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`DashboardNav > renders the DashboardNav component 1`] = ` + +`; + +exports[`DashboardNav > should display icons if the item's icon array is present 1`] = ` + +`; + +exports[`DashboardNav > should not display icons if the item's icon array is empty 1`] = ` + +`; + +exports[`DashboardNav > should not display icons if the item's icons array is undefined 1`] = ` + +`; diff --git a/web-wallet/src/lib/components/components.d.ts b/web-wallet/src/lib/components/components.d.ts new file mode 100644 index 0000000000..28addedaa3 --- /dev/null +++ b/web-wallet/src/lib/components/components.d.ts @@ -0,0 +1,10 @@ +type DashboardNavItem = { + href: string; + icons?: DashboardNavItemIconProp[]; + id: string; + label: string; +}; + +type DashboardNavItemIconProp = { + path: string; +}; diff --git a/web-wallet/src/lib/components/index.js b/web-wallet/src/lib/components/index.js index 8acf0b5a4a..cb7aecd03a 100644 --- a/web-wallet/src/lib/components/index.js +++ b/web-wallet/src/lib/components/index.js @@ -5,6 +5,7 @@ export { default as AppImage } from "./AppImage/AppImage.svelte"; export { default as Balance } from "./Balance/Balance.svelte"; export { default as ContractOperations } from "./ContractOperations/ContractOperations.svelte"; export { default as ContractStatusesList } from "./ContractStatusesList/ContractStatusesList.svelte"; +export { default as DashboardNav } from "./DashboardNav/DashboardNav.svelte"; export { default as ExistingWalletNotice } from "./ExistingWalletNotice/ExistingWalletNotice.svelte"; export { default as GasControls } from "./GasControls/GasControls.svelte"; export { default as GasFee } from "./GasFee/GasFee.svelte"; diff --git a/web-wallet/src/routes/components-showcase/+page.svelte b/web-wallet/src/routes/components-showcase/+page.svelte index 719188735c..a495767f35 100644 --- a/web-wallet/src/routes/components-showcase/+page.svelte +++ b/web-wallet/src/routes/components-showcase/+page.svelte @@ -8,6 +8,7 @@ import Buttons from "./Buttons.svelte"; import Cards from "./Cards.svelte"; import Checkboxes from "./Checkboxes.svelte"; + import DashboardNavs from "./DashboardNavs.svelte"; import ExclusiveChoices from "./ExclusiveChoices.svelte"; import ProgressBars from "./ProgressBars.svelte"; import Selects from "./Selects.svelte"; @@ -28,6 +29,7 @@ Buttons: Buttons, Cards: Cards, Checkboxes: Checkboxes, + "Dashboard Navs": DashboardNavs, "Exclusive Choices": ExclusiveChoices, "Progress bars": ProgressBars, Selects: Selects, diff --git a/web-wallet/src/routes/components-showcase/DashboardNavs.svelte b/web-wallet/src/routes/components-showcase/DashboardNavs.svelte new file mode 100644 index 0000000000..89f28714da --- /dev/null +++ b/web-wallet/src/routes/components-showcase/DashboardNavs.svelte @@ -0,0 +1,41 @@ + + + + +
+ +