From 475ce3a0feb1537bcad033d3306d0a4fe865b242 Mon Sep 17 00:00:00 2001 From: Brian Faust Date: Wed, 19 Aug 2020 16:47:41 +0300 Subject: [PATCH 1/7] wip --- src/app/components/WalletListItem/WalletListItem.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/app/components/WalletListItem/WalletListItem.tsx b/src/app/components/WalletListItem/WalletListItem.tsx index 4ce51d795f..9fda32d54b 100644 --- a/src/app/components/WalletListItem/WalletListItem.tsx +++ b/src/app/components/WalletListItem/WalletListItem.tsx @@ -7,8 +7,10 @@ import { Avatar } from "app/components/Avatar"; import { Button } from "app/components/Button"; import { Circle } from "app/components/Circle"; import { Icon } from "app/components/Icon"; +import { useActiveProfile } from "app/hooks/env"; import React from "react"; import { useTranslation } from "react-i18next"; +import { useHistory } from "react-router-dom"; import { Dropdown } from "../Dropdown"; @@ -29,6 +31,8 @@ export const WalletListItem = ({ onAction, exchangeCurrency, }: WalletListItemProps) => { + const activeProfile = useActiveProfile(); + const history = useHistory(); const { t } = useTranslation(); const onDropdownAction = (action: any) => { @@ -53,7 +57,11 @@ export const WalletListItem = ({ const getIconColor = (type: string) => (type === "Starred" ? "text-theme-warning-400" : "text-theme-neutral-600"); return ( - + history.push(`/profiles/${activeProfile.id()}/wallets/${wallet.id()}`)} + data-testid={`WalletListItem__${wallet.address()}`} + >
From ee0b9e6d5cf2dfc96bb1808443e940038a69c854 Mon Sep 17 00:00:00 2001 From: Brian Faust Date: Wed, 19 Aug 2020 17:02:30 +0300 Subject: [PATCH 2/7] wip --- .../WalletListItem/WalletListItem.test.tsx | 55 +++++++++++++++---- .../WalletListItem.test.tsx.snap | 6 +- 2 files changed, 48 insertions(+), 13 deletions(-) diff --git a/src/app/components/WalletListItem/WalletListItem.test.tsx b/src/app/components/WalletListItem/WalletListItem.test.tsx index 1cc06022bd..c5087b0ebc 100644 --- a/src/app/components/WalletListItem/WalletListItem.test.tsx +++ b/src/app/components/WalletListItem/WalletListItem.test.tsx @@ -1,26 +1,41 @@ import { Wallet, WalletFlag } from "@arkecosystem/platform-sdk-profiles"; +import { createMemoryHistory } from "history"; import React from "react"; -import { act, env, fireEvent, render } from "testing-library"; +import { Route } from "react-router-dom"; +import { act, env, fireEvent, getDefaultProfileId, renderWithRouter } from "testing-library"; import { WalletListItem } from "./WalletListItem"; +const dashboardURL = `/profiles/${getDefaultProfileId()}/dashboard`; +const history = createMemoryHistory(); + let wallet: Wallet; describe("WalletListItem", () => { beforeAll(() => { - const profile = env.profiles().values()[0]; - wallet = profile.wallets().values()[0]; + history.push(dashboardURL); + }); + + beforeEach(() => { + const profile = env.profiles().findById(getDefaultProfileId()); + wallet = profile.wallets().findById("ac38fe6d-4b67-4ef1-85be-17c5f6841129"); wallet.data().set(WalletFlag.Starred, true); wallet.data().set(WalletFlag.Ledger, true); }); it("should render", () => { - const { container } = render( + const { container } = renderWithRouter( - + + +
, + { + routes: [dashboardURL], + history, + }, ); expect(container).toMatchSnapshot(); }); @@ -28,12 +43,18 @@ describe("WalletListItem", () => { it("should render a button if variant is 'singleAction'", () => { const actions = [{ label: "Option 1", value: "1" }]; - const { container, getByTestId } = render( + const { container, getByTestId } = renderWithRouter( - + + +
, + { + routes: [dashboardURL], + history, + }, ); expect(() => getByTestId("dropdown__toggle")).toThrow(/Unable to find an element by/); @@ -48,12 +69,18 @@ describe("WalletListItem", () => { { label: "Option 2", value: "2" }, ]; - const { getByTestId, container } = render( + const { getByTestId, container } = renderWithRouter( - + + +
, + { + routes: [dashboardURL], + history, + }, ); const toggle = getByTestId("dropdown__toggle"); act(() => { @@ -79,12 +106,18 @@ describe("WalletListItem", () => { { label: "Option 2", value: "2" }, ]; - const { getByTestId, container } = render( + const { getByTestId, container } = renderWithRouter( - + + +
, + { + routes: [dashboardURL], + history, + }, ); const toggle = getByTestId("dropdown__toggle"); act(() => { diff --git a/src/app/components/WalletListItem/__snapshots__/WalletListItem.test.tsx.snap b/src/app/components/WalletListItem/__snapshots__/WalletListItem.test.tsx.snap index fc4262ab9e..ad8bcccc3b 100644 --- a/src/app/components/WalletListItem/__snapshots__/WalletListItem.test.tsx.snap +++ b/src/app/components/WalletListItem/__snapshots__/WalletListItem.test.tsx.snap @@ -5,7 +5,8 @@ exports[`WalletListItem should render 1`] = `
Date: Wed, 19 Aug 2020 17:28:35 +0300 Subject: [PATCH 3/7] wip --- .../SearchWallet/SearchWallet.test.tsx | 30 +++++++++-- .../__snapshots__/SearchWallet.test.tsx.snap | 3 +- .../WalletBottomSheetMenu.test.tsx | 52 +++++++++++++++++-- .../WalletBottomSheetMenu.test.tsx.snap | 3 +- 4 files changed, 78 insertions(+), 10 deletions(-) diff --git a/src/domains/wallet/components/SearchWallet/SearchWallet.test.tsx b/src/domains/wallet/components/SearchWallet/SearchWallet.test.tsx index c0c7a9a8a5..66c261b868 100644 --- a/src/domains/wallet/components/SearchWallet/SearchWallet.test.tsx +++ b/src/domains/wallet/components/SearchWallet/SearchWallet.test.tsx @@ -1,14 +1,22 @@ import { Wallet, WalletSetting } from "@arkecosystem/platform-sdk-profiles"; +import { createMemoryHistory } from "history"; import React from "react"; -import { env, fireEvent, getDefaultProfileId, render, waitFor } from "testing-library"; +import { Route } from "react-router-dom"; +import { env, fireEvent, getDefaultProfileId, renderWithRouter, waitFor } from "testing-library"; import { translations } from "../../i18n"; import { SearchWallet } from "./SearchWallet"; +const history = createMemoryHistory(); +const dashboardURL = `/profiles/${getDefaultProfileId()}/dashboard`; let wallets: Wallet[]; describe("SearchWallet", () => { beforeAll(() => { + history.push(dashboardURL); + }); + + beforeEach(() => { const profile = env.profiles().findById(getDefaultProfileId()); wallets = [profile.wallets().findById("ac38fe6d-4b67-4ef1-85be-17c5f6841129")]; @@ -16,7 +24,15 @@ describe("SearchWallet", () => { }); it("should render", async () => { - const { asFragment, getByTestId } = render(); + const { asFragment, getByTestId } = renderWithRouter( + + + , + { + routes: [dashboardURL], + history, + }, + ); await waitFor(() => expect(getByTestId("modal__inner")).toHaveTextContent(translations.MODAL_SELECT_ACCOUNT.TITLE), @@ -30,7 +46,15 @@ describe("SearchWallet", () => { it("should handle close", () => { const onClose = jest.fn(); - const { getByTestId } = render(); + const { getByTestId } = renderWithRouter( + + + , + { + routes: [dashboardURL], + history, + }, + ); fireEvent.click(getByTestId("modal__close-btn")); expect(onClose).toHaveBeenCalled(); diff --git a/src/domains/wallet/components/SearchWallet/__snapshots__/SearchWallet.test.tsx.snap b/src/domains/wallet/components/SearchWallet/__snapshots__/SearchWallet.test.tsx.snap index 32a23c2178..929768a479 100644 --- a/src/domains/wallet/components/SearchWallet/__snapshots__/SearchWallet.test.tsx.snap +++ b/src/domains/wallet/components/SearchWallet/__snapshots__/SearchWallet.test.tsx.snap @@ -267,7 +267,8 @@ exports[`SearchWallet should render 1`] = ` role="rowgroup" >
{ + history.push(dashboardURL); + bip39GenerateMock = jest.spyOn(BIP39, "generate").mockReturnValue(passphrase); }); @@ -31,23 +38,58 @@ describe("WalletBottomSheetMenu", () => { }); it("should render", () => { - const { getByTestId, asFragment } = render(); + const { getByTestId, asFragment } = renderWithRouter( + + + , + { + routes: [dashboardURL], + history, + }, + ); + expect(getByTestId("WalletBottomSheetMenu")).toBeTruthy(); expect(asFragment()).toMatchSnapshot(); }); it("should show counter", () => { - const { getByTestId } = render(); + const { getByTestId } = renderWithRouter( + + + , + { + routes: [dashboardURL], + history, + }, + ); + expect(getByTestId("WalletBottomSheetMenu__counter")).toHaveTextContent(data.length.toString()); }); it("should be open", () => { - const { getByTestId } = render(); + const { getByTestId } = renderWithRouter( + + + , + { + routes: [dashboardURL], + history, + }, + ); + expect(getByTestId("Collapse")).toHaveAttribute("aria-hidden", "false"); }); it("should toggle", () => { - const { getByTestId } = render(); + const { getByTestId } = renderWithRouter( + + + , + { + routes: [dashboardURL], + history, + }, + ); act(() => { fireEvent.click(getByTestId("WalletBottomSheetMenu__toggle")); diff --git a/src/domains/wallet/components/WalletBottomSheetMenu/__snapshots__/WalletBottomSheetMenu.test.tsx.snap b/src/domains/wallet/components/WalletBottomSheetMenu/__snapshots__/WalletBottomSheetMenu.test.tsx.snap index 691e09b5b3..d83dd7cb15 100644 --- a/src/domains/wallet/components/WalletBottomSheetMenu/__snapshots__/WalletBottomSheetMenu.test.tsx.snap +++ b/src/domains/wallet/components/WalletBottomSheetMenu/__snapshots__/WalletBottomSheetMenu.test.tsx.snap @@ -215,7 +215,8 @@ exports[`WalletBottomSheetMenu should render 1`] = ` role="rowgroup" >
Date: Wed, 19 Aug 2020 14:38:30 +0000 Subject: [PATCH 4/7] style: resolve style guide violations --- .../__snapshots__/Wallets.test.tsx.snap | 6 +- .../__snapshots__/WalletDetails.test.tsx.snap | 60 ++++++++++++------- 2 files changed, 44 insertions(+), 22 deletions(-) diff --git a/src/domains/dashboard/components/Wallets/__snapshots__/Wallets.test.tsx.snap b/src/domains/dashboard/components/Wallets/__snapshots__/Wallets.test.tsx.snap index 5fbd653fff..846ea0f30e 100644 --- a/src/domains/dashboard/components/Wallets/__snapshots__/Wallets.test.tsx.snap +++ b/src/domains/dashboard/components/Wallets/__snapshots__/Wallets.test.tsx.snap @@ -611,7 +611,8 @@ exports[`Wallets should render with list view enabled as default 1`] = ` role="rowgroup" >
Date: Wed, 19 Aug 2020 18:17:07 +0300 Subject: [PATCH 5/7] wip --- src/app/components/WalletListItem/WalletListItem.test.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/components/WalletListItem/WalletListItem.test.tsx b/src/app/components/WalletListItem/WalletListItem.test.tsx index c5087b0ebc..43042666b7 100644 --- a/src/app/components/WalletListItem/WalletListItem.test.tsx +++ b/src/app/components/WalletListItem/WalletListItem.test.tsx @@ -24,7 +24,7 @@ describe("WalletListItem", () => { }); it("should render", () => { - const { container } = renderWithRouter( + const { container, getAllByTestId } = renderWithRouter( @@ -37,6 +37,8 @@ describe("WalletListItem", () => { history, }, ); + + expect(getAllByTestId(`WalletListItem__${wallet.address()}`)).toBeTruthy(); expect(container).toMatchSnapshot(); }); From ddef85cbdea572e23538bc176816aab35056d18e Mon Sep 17 00:00:00 2001 From: Brian Faust Date: Wed, 19 Aug 2020 18:49:31 +0300 Subject: [PATCH 6/7] wip --- .../components/WalletCard/WalletCard.test.tsx | 32 +- src/app/components/WalletCard/WalletCard.tsx | 82 ++- .../__snapshots__/WalletCard.test.tsx.snap | 558 +++++++++--------- .../WalletListItem/WalletListItem.test.tsx | 29 +- 4 files changed, 368 insertions(+), 333 deletions(-) diff --git a/src/app/components/WalletCard/WalletCard.test.tsx b/src/app/components/WalletCard/WalletCard.test.tsx index 8506125a3f..2845b5beac 100644 --- a/src/app/components/WalletCard/WalletCard.test.tsx +++ b/src/app/components/WalletCard/WalletCard.test.tsx @@ -1,13 +1,15 @@ -import { Wallet, WalletFlag, WalletSetting } from "@arkecosystem/platform-sdk-profiles"; +import { Profile, Wallet, WalletFlag, WalletSetting } from "@arkecosystem/platform-sdk-profiles"; import { createMemoryHistory } from "history"; import React from "react"; import { Route } from "react-router-dom"; -import { env, getDefaultProfileId, renderWithRouter } from "testing-library"; +import { act, env, fireEvent, getDefaultProfileId, renderWithRouter } from "testing-library"; import { WalletCard } from "./WalletCard"; const dashboardURL = `/profiles/${getDefaultProfileId()}/dashboard`; const history = createMemoryHistory(); + +let profile: Profile; let wallet: Wallet; describe("Wallet Card", () => { @@ -16,7 +18,7 @@ describe("Wallet Card", () => { }); beforeEach(() => { - const profile = env.profiles().findById(getDefaultProfileId()); + profile = env.profiles().findById(getDefaultProfileId()); wallet = profile.wallets().findById("ac38fe6d-4b67-4ef1-85be-17c5f6841129"); wallet.data().set(WalletFlag.Starred, true); wallet.data().set(WalletFlag.Ledger, true); @@ -81,4 +83,28 @@ describe("Wallet Card", () => { expect(container).toMatchSnapshot(); }); + + it("should click a wallet and redirect to it", () => { + const { getByTestId } = renderWithRouter( +
+ + + + + +
, + { + routes: [dashboardURL], + history, + }, + ); + + expect(history.location.pathname).toBe(`/profiles/${profile.id()}/dashboard`); + + act(() => { + fireEvent.click(getByTestId(`WalletCard__${wallet.address()}`)); + }); + + expect(history.location.pathname).toBe(`/profiles/${profile.id()}/wallets/${wallet.id()}`); + }); }); diff --git a/src/app/components/WalletCard/WalletCard.tsx b/src/app/components/WalletCard/WalletCard.tsx index 11ff662d7b..5f68cd18a7 100644 --- a/src/app/components/WalletCard/WalletCard.tsx +++ b/src/app/components/WalletCard/WalletCard.tsx @@ -8,7 +8,7 @@ import { Dropdown } from "app/components/Dropdown"; import { Icon } from "app/components/Icon"; import { useActiveProfile } from "app/hooks/env"; import React from "react"; -import { Link } from "react-router-dom"; +import { useHistory } from "react-router-dom"; import { Amount } from "../Amount"; @@ -38,6 +38,7 @@ export const WalletCard = ({ onSelect, }: WalletCardProps) => { const activeProfile = useActiveProfile(); + const history = useHistory(); if (isBlank) { return ( @@ -65,54 +66,49 @@ export const WalletCard = ({ const ticker = wallet!.network().currency.ticker; return ( - history.push(`/profiles/${activeProfile.id()}/wallets/${wallet?.id()}`)} data-testid={`WalletCard__${wallet?.address()}`} > -
- -
-
- -
-
- {wallet?.isLedger() && ( -
- -
- )} + +
+
+ +
+
+ {wallet?.isLedger() && ( +
+ +
+ )} - {wallet?.hasSyncedWithNetwork() && wallet?.isMultiSignature() && ( -
- -
- )} + {wallet?.hasSyncedWithNetwork() && wallet?.isMultiSignature() && ( +
+ +
+ )} - {wallet?.isStarred() && ( -
- -
- )} -
-
- - {coinName && } - - -
+ {wallet?.isStarred() && ( +
+ +
+ )} +
+
+ + {coinName && } + + +
-
-
-
- +
+
-
-
- + +
+
+
); }; diff --git a/src/app/components/WalletCard/__snapshots__/WalletCard.test.tsx.snap b/src/app/components/WalletCard/__snapshots__/WalletCard.test.tsx.snap index 5e49316fb3..4087c6c97a 100644 --- a/src/app/components/WalletCard/__snapshots__/WalletCard.test.tsx.snap +++ b/src/app/components/WalletCard/__snapshots__/WalletCard.test.tsx.snap @@ -2,146 +2,142 @@ exports[`Wallet Card should render 1`] = ` `; @@ -184,291 +180,283 @@ exports[`Wallet Card should render blank 1`] = ` exports[`Wallet Card should render with wallet data 1`] = ` `; exports[`Wallet Card should render with wallet data and optional icon 1`] = ` `; diff --git a/src/app/components/WalletListItem/WalletListItem.test.tsx b/src/app/components/WalletListItem/WalletListItem.test.tsx index 43042666b7..27f28b56b3 100644 --- a/src/app/components/WalletListItem/WalletListItem.test.tsx +++ b/src/app/components/WalletListItem/WalletListItem.test.tsx @@ -1,4 +1,4 @@ -import { Wallet, WalletFlag } from "@arkecosystem/platform-sdk-profiles"; +import { Profile, Wallet, WalletFlag } from "@arkecosystem/platform-sdk-profiles"; import { createMemoryHistory } from "history"; import React from "react"; import { Route } from "react-router-dom"; @@ -9,6 +9,7 @@ import { WalletListItem } from "./WalletListItem"; const dashboardURL = `/profiles/${getDefaultProfileId()}/dashboard`; const history = createMemoryHistory(); +let profile: Profile; let wallet: Wallet; describe("WalletListItem", () => { @@ -17,7 +18,7 @@ describe("WalletListItem", () => { }); beforeEach(() => { - const profile = env.profiles().findById(getDefaultProfileId()); + profile = env.profiles().findById(getDefaultProfileId()); wallet = profile.wallets().findById("ac38fe6d-4b67-4ef1-85be-17c5f6841129"); wallet.data().set(WalletFlag.Starred, true); wallet.data().set(WalletFlag.Ledger, true); @@ -137,4 +138,28 @@ describe("WalletListItem", () => { expect(container.querySelectorAll("ul").length).toEqual(0); }); + + it("should click a wallet and redirect to it", () => { + const { getByTestId } = renderWithRouter( + + + + + + +
, + { + routes: [dashboardURL], + history, + }, + ); + + expect(history.location.pathname).toBe(`/profiles/${profile.id()}/dashboard`); + + act(() => { + fireEvent.click(getByTestId(`WalletListItem__${wallet.address()}`)); + }); + + expect(history.location.pathname).toBe(`/profiles/${profile.id()}/wallets/${wallet.id()}`); + }); }); From 47fc45962f6c8c1838f50e1579d4aede31ac263f Mon Sep 17 00:00:00 2001 From: faustbrian Date: Wed, 19 Aug 2020 16:00:31 +0000 Subject: [PATCH 7/7] style: resolve style guide violations --- .../__snapshots__/Dashboard.test.tsx.snap | 2226 ++++++++--------- 1 file changed, 1081 insertions(+), 1145 deletions(-) diff --git a/src/domains/dashboard/pages/Dashboard/__snapshots__/Dashboard.test.tsx.snap b/src/domains/dashboard/pages/Dashboard/__snapshots__/Dashboard.test.tsx.snap index 7a3db4e0da..4dc1eb7106 100644 --- a/src/domains/dashboard/pages/Dashboard/__snapshots__/Dashboard.test.tsx.snap +++ b/src/domains/dashboard/pages/Dashboard/__snapshots__/Dashboard.test.tsx.snap @@ -601,225 +601,217 @@ exports[`Dashboard should fetch more transactions 1`] = ` class="swiper-slide" style="height: 185px;" > -
-
+
+
+
+
-
-
-