From fd591f0c1fd7abaaf233259477538d3afb81fb5b Mon Sep 17 00:00:00 2001 From: brenopolanski Date: Thu, 13 Aug 2020 15:03:45 -0300 Subject: [PATCH 1/4] refactor: add the openExternal() electron to the link component --- src/app/components/Link/Link.stories.tsx | 8 +- src/app/components/Link/Link.test.tsx | 41 +- src/app/components/Link/Link.tsx | 23 +- .../Link/__snapshots__/Link.test.tsx.snap | 51 +- .../__snapshots__/Transactions.test.tsx.snap | 20 +- .../__snapshots__/Dashboard.test.tsx.snap | 350 ++++----- .../TransactionTable.test.tsx.snap | 20 +- .../__snapshots__/WalletDetails.test.tsx.snap | 700 +++++++----------- 8 files changed, 521 insertions(+), 692 deletions(-) diff --git a/src/app/components/Link/Link.stories.tsx b/src/app/components/Link/Link.stories.tsx index d3b2b5ac81..0fb07601f9 100644 --- a/src/app/components/Link/Link.stories.tsx +++ b/src/app/components/Link/Link.stories.tsx @@ -5,11 +5,11 @@ import { Link } from "./Link"; export default { title: "App / Components / Link" }; export const Default = () => Wallets; + export const External = () => ( - + ARK.io ); -export const WithTooltip = () => ( - -); + +export const WithTooltip = () => ; diff --git a/src/app/components/Link/Link.test.tsx b/src/app/components/Link/Link.test.tsx index 2c4d8d51d9..3a5027e721 100644 --- a/src/app/components/Link/Link.test.tsx +++ b/src/app/components/Link/Link.test.tsx @@ -1,44 +1,67 @@ +import electron from "electron"; import React from "react"; import { act, fireEvent, renderWithRouter } from "testing-library"; import { Link } from "./Link"; +jest.mock("electron", () => ({ + shell: { + openExternal: jest.fn(), + }, +})); + describe("Link", () => { it("should render", () => { - const { getByTestId, asFragment } = renderWithRouter(Test); + const { asFragment, getByTestId } = renderWithRouter(Test); expect(getByTestId("Link")).toHaveTextContent("Test"); expect(asFragment()).toMatchSnapshot(); }); it("should render external", () => { - const { getByTestId, asFragment } = renderWithRouter( - + const { getByTestId } = renderWithRouter( + ARK.io , ); expect(getByTestId("Link")).toHaveAttribute("rel", "noopener noreferrer"); - expect(getByTestId("Link")).toHaveAttribute("target", "_blank"); expect(getByTestId("Link__external")).toBeTruthy(); - expect(asFragment()).toMatchSnapshot(); }); it("should render external without children", () => { - const { getByTestId, asFragment } = renderWithRouter(); + const { asFragment, getByTestId } = renderWithRouter(); expect(getByTestId("Link__external")).toBeTruthy(); expect(asFragment()).toMatchSnapshot(); }); + it("should open an external link", () => { + const externalLink = "https://ark.io"; + const openExternalMock = jest.spyOn(electron.shell, "openExternal").mockImplementation(); + const { asFragment, getByTestId } = renderWithRouter(); + const link = getByTestId("Link"); + + act(() => { + fireEvent.click(link); + }); + expect(openExternalMock).toHaveBeenCalledWith(externalLink); + expect(asFragment()).toMatchSnapshot(); + }); + it("should render with tooltip", () => { - const { getByTestId, baseElement } = renderWithRouter( + const { asFragment, baseElement, getByTestId } = renderWithRouter( Test , ); + const link = getByTestId("Link"); act(() => { - fireEvent.mouseEnter(getByTestId("Link")); + fireEvent.mouseEnter(link); }); - expect(baseElement).toHaveTextContent("Custom Tooltip"); + + act(() => { + fireEvent.click(link); + }); + expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/src/app/components/Link/Link.tsx b/src/app/components/Link/Link.tsx index 6970624b52..e2481f8594 100644 --- a/src/app/components/Link/Link.tsx +++ b/src/app/components/Link/Link.tsx @@ -2,6 +2,7 @@ import Tippy from "@tippyjs/react"; import React from "react"; import { Link as RouterLink, LinkProps } from "react-router-dom"; import { styled } from "twin.macro"; +import { openExternal } from "utils/electron-utils"; import { Icon } from "../Icon"; @@ -22,17 +23,21 @@ const AnchorStyled = styled.a<{ isExternal: boolean }>` type AnchorProps = { isExternal?: boolean; + navigate?: () => void; } & React.AnchorHTMLAttributes; const Anchor = React.forwardRef( - ({ isExternal, children, target, rel, ...props }: AnchorProps, ref) => ( + ({ isExternal, children, rel, ...props }: AnchorProps, ref) => ( { + event.preventDefault(); + return props.navigate?.(); + }} {...props} > {children} @@ -57,7 +62,17 @@ type Props = { export const Link = ({ tooltip, ...props }: Props) => ( - + {props.isExternal ? ( + { + event.preventDefault(); + return openExternal(props.to); + }} + {...props} + /> + ) : ( + + )} ); diff --git a/src/app/components/Link/__snapshots__/Link.test.tsx.snap b/src/app/components/Link/__snapshots__/Link.test.tsx.snap index e427238e6f..2efcdd5b47 100644 --- a/src/app/components/Link/__snapshots__/Link.test.tsx.snap +++ b/src/app/components/Link/__snapshots__/Link.test.tsx.snap @@ -1,29 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Link should render 1`] = ` +exports[`Link should open an external link 1`] = ` - Test - - -`; - -exports[`Link should render external 1`] = ` - - - ARK.io
`; +exports[`Link should render 1`] = ` + + + Test + + +`; + exports[`Link should render external without children 1`] = `
`; + +exports[`Link should render with tooltip 1`] = ` + + + Test + + +`; diff --git a/src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap b/src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap index 244abbfb5f..83b412dac5 100644 --- a/src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap +++ b/src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap @@ -203,11 +203,10 @@ exports[`Transactions should render with with transactions 1`] = ` class="inline-block align-middle" >
Date: Thu, 13 Aug 2020 18:17:13 +0000 Subject: [PATCH 2/4] style: resolve style guide violations --- src/app/components/Link/Link.tsx | 2 +- .../Link/__snapshots__/Link.test.tsx.snap | 8 +- .../__snapshots__/Transactions.test.tsx.snap | 8 +- .../__snapshots__/Dashboard.test.tsx.snap | 140 ++++----- .../TransactionTable.test.tsx.snap | 8 +- .../__snapshots__/WalletDetails.test.tsx.snap | 280 +++++++++--------- 6 files changed, 223 insertions(+), 223 deletions(-) diff --git a/src/app/components/Link/Link.tsx b/src/app/components/Link/Link.tsx index e2481f8594..268ea3daf3 100644 --- a/src/app/components/Link/Link.tsx +++ b/src/app/components/Link/Link.tsx @@ -31,7 +31,7 @@ const Anchor = React.forwardRef( { diff --git a/src/app/components/Link/__snapshots__/Link.test.tsx.snap b/src/app/components/Link/__snapshots__/Link.test.tsx.snap index 2efcdd5b47..e90fabbefe 100644 --- a/src/app/components/Link/__snapshots__/Link.test.tsx.snap +++ b/src/app/components/Link/__snapshots__/Link.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Link should open an external link 1`] = ` @@ -37,7 +37,7 @@ exports[`Link should render 1`] = ` exports[`Link should render external without children 1`] = ` diff --git a/src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap b/src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap index 83b412dac5..66840cf0ac 100644 --- a/src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap +++ b/src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap @@ -203,7 +203,7 @@ exports[`Transactions should render with with transactions 1`] = ` class="inline-block align-middle" > Date: Thu, 13 Aug 2020 15:27:48 -0300 Subject: [PATCH 3/4] wip --- src/app/components/Link/Link.stories.tsx | 2 +- .../__snapshots__/Transactions.test.tsx.snap | 8 +- .../__snapshots__/Dashboard.test.tsx.snap | 140 ++++---- .../RepositoryModal.test.tsx.snap | 8 +- .../RepositoryLink/RepositoryLink.tsx | 2 +- .../RepositoryLink.test.tsx.snap | 2 +- .../TransactionRow/TransactionRow.tsx | 7 +- .../TransactionTable.test.tsx.snap | 8 +- .../components/WalletVote/WalletVote.tsx | 15 +- .../__snapshots__/WalletVote.test.tsx.snap | 30 +- .../__snapshots__/WalletDetails.test.tsx.snap | 316 +++++++++--------- 11 files changed, 289 insertions(+), 249 deletions(-) diff --git a/src/app/components/Link/Link.stories.tsx b/src/app/components/Link/Link.stories.tsx index 0fb07601f9..fd4a23a513 100644 --- a/src/app/components/Link/Link.stories.tsx +++ b/src/app/components/Link/Link.stories.tsx @@ -12,4 +12,4 @@ export const External = () => ( ); -export const WithTooltip = () => ; +export const WithTooltip = () => ; diff --git a/src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap b/src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap index 83b412dac5..cb0b79297b 100644 --- a/src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap +++ b/src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap @@ -206,7 +206,7 @@ exports[`Transactions should render with with transactions 1`] = ` class="sc-AxheI bALhgA inline-flex items-center font-semibold transition-colors duration-200 cursor-pointer text-theme-primary hover:text-theme-primary-dark hover:underline active:text-theme-primary-500" data-testid="TransactionRow__ID" rel="noopener noreferrer" - to="[object Object]" + to="https://explorer.ark.io/" >
{ -
+
{t(`PROFILE.MODAL_REPOSITORIES.${provider}`)} {url} diff --git a/src/domains/profile/pages/MyRegistrations/components/RepositoryModal/components/RepositoryLink/__snapshots__/RepositoryLink.test.tsx.snap b/src/domains/profile/pages/MyRegistrations/components/RepositoryModal/components/RepositoryLink/__snapshots__/RepositoryLink.test.tsx.snap index 06f85bdc60..fa457449c0 100644 --- a/src/domains/profile/pages/MyRegistrations/components/RepositoryModal/components/RepositoryLink/__snapshots__/RepositoryLink.test.tsx.snap +++ b/src/domains/profile/pages/MyRegistrations/components/RepositoryModal/components/RepositoryLink/__snapshots__/RepositoryLink.test.tsx.snap @@ -20,7 +20,7 @@ exports[`RepositoryLink should render properly 1`] = `
- +
diff --git a/src/domains/transaction/components/TransactionTable/__snapshots__/TransactionTable.test.tsx.snap b/src/domains/transaction/components/TransactionTable/__snapshots__/TransactionTable.test.tsx.snap index 509dfbf191..c56081dd4a 100644 --- a/src/domains/transaction/components/TransactionTable/__snapshots__/TransactionTable.test.tsx.snap +++ b/src/domains/transaction/components/TransactionTable/__snapshots__/TransactionTable.test.tsx.snap @@ -162,7 +162,7 @@ exports[`TransactionTable should render 1`] = ` class="sc-AxheI bALhgA inline-flex items-center font-semibold transition-colors duration-200 cursor-pointer text-theme-primary hover:text-theme-primary-dark hover:underline active:text-theme-primary-500" data-testid="TransactionRow__ID" rel="noopener noreferrer" - to="[object Object]" + to="https://explorer.ark.io/" >
{
-
+
{hasNoVotes ? (
@@ -47,12 +48,14 @@ export const WalletVote = ({ votes, onUnvote, defaultIsOpen }: Props) => { {t("WALLETS.PAGE_WALLET_DETAILS.VOTES.EMPTY.LABEL")} - - {t("WALLETS.PAGE_WALLET_DETAILS.VOTES.EMPTY.DESCRIPTION")} - +
) : ( diff --git a/src/domains/wallet/components/WalletVote/__snapshots__/WalletVote.test.tsx.snap b/src/domains/wallet/components/WalletVote/__snapshots__/WalletVote.test.tsx.snap index c5efaaf045..dbb41f3345 100644 --- a/src/domains/wallet/components/WalletVote/__snapshots__/WalletVote.test.tsx.snap +++ b/src/domains/wallet/components/WalletVote/__snapshots__/WalletVote.test.tsx.snap @@ -41,7 +41,7 @@ exports[`WalletVote should render 1`] = ` style="max-height: auto; height: auto; opacity: 1; overflow: auto;" >
Address Delegate - - You haven't voted for more than one delegate yet. + + You haven't voted for more than one delegate yet. + Learn more +
+ + redirect.svg + +
-
+
diff --git a/src/domains/wallet/pages/WalletDetails/__snapshots__/WalletDetails.test.tsx.snap b/src/domains/wallet/pages/WalletDetails/__snapshots__/WalletDetails.test.tsx.snap index 2c168700e3..735e288b77 100644 --- a/src/domains/wallet/pages/WalletDetails/__snapshots__/WalletDetails.test.tsx.snap +++ b/src/domains/wallet/pages/WalletDetails/__snapshots__/WalletDetails.test.tsx.snap @@ -769,7 +769,7 @@ exports[`WalletDetails should delete wallet 1`] = ` class="sc-fzozJi fCisHH inline-flex items-center font-semibold transition-colors duration-200 cursor-pointer text-theme-primary hover:text-theme-primary-dark hover:underline active:text-theme-primary-500" data-testid="TransactionRow__ID" rel="noopener noreferrer" - to="[object Object]" + to="https://explorer.ark.io/" >
Address Delegate - - You haven't voted for more than one delegate yet. + + You haven't voted for more than one delegate yet. + Learn more +
+ + redirect.svg + +
-
+
@@ -13921,7 +13937,7 @@ exports[`WalletDetails should render when wallet hasn't voted 1`] = ` class="sc-fzozJi fCisHH inline-flex items-center font-semibold transition-colors duration-200 cursor-pointer text-theme-primary hover:text-theme-primary-dark hover:underline active:text-theme-primary-500" data-testid="TransactionRow__ID" rel="noopener noreferrer" - to="[object Object]" + to="https://explorer.ark.io/" >
Date: Thu, 13 Aug 2020 18:38:06 +0000 Subject: [PATCH 4/4] style: resolve style guide violations --- .../__snapshots__/RepositoryModal.test.tsx.snap | 8 ++++---- .../components/RepositoryLink/RepositoryLink.tsx | 2 +- .../__snapshots__/RepositoryLink.test.tsx.snap | 2 +- .../wallet/components/WalletVote/WalletVote.tsx | 2 +- .../__snapshots__/WalletVote.test.tsx.snap | 6 +++--- .../__snapshots__/WalletDetails.test.tsx.snap | 12 ++++++------ 6 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/domains/profile/pages/MyRegistrations/components/RepositoryModal/__snapshots__/RepositoryModal.test.tsx.snap b/src/domains/profile/pages/MyRegistrations/components/RepositoryModal/__snapshots__/RepositoryModal.test.tsx.snap index d7ed60b207..343ee11f69 100644 --- a/src/domains/profile/pages/MyRegistrations/components/RepositoryModal/__snapshots__/RepositoryModal.test.tsx.snap +++ b/src/domains/profile/pages/MyRegistrations/components/RepositoryModal/__snapshots__/RepositoryModal.test.tsx.snap @@ -66,7 +66,7 @@ exports[`RepositoryModal should render empty state 1`] = `
{ -
+
{t(`PROFILE.MODAL_REPOSITORIES.${provider}`)} {url} diff --git a/src/domains/profile/pages/MyRegistrations/components/RepositoryModal/components/RepositoryLink/__snapshots__/RepositoryLink.test.tsx.snap b/src/domains/profile/pages/MyRegistrations/components/RepositoryModal/components/RepositoryLink/__snapshots__/RepositoryLink.test.tsx.snap index fa457449c0..06f85bdc60 100644 --- a/src/domains/profile/pages/MyRegistrations/components/RepositoryModal/components/RepositoryLink/__snapshots__/RepositoryLink.test.tsx.snap +++ b/src/domains/profile/pages/MyRegistrations/components/RepositoryModal/components/RepositoryLink/__snapshots__/RepositoryLink.test.tsx.snap @@ -20,7 +20,7 @@ exports[`RepositoryLink should render properly 1`] = `
{
-
+
{hasNoVotes ? (
diff --git a/src/domains/wallet/components/WalletVote/__snapshots__/WalletVote.test.tsx.snap b/src/domains/wallet/components/WalletVote/__snapshots__/WalletVote.test.tsx.snap index dbb41f3345..ee5b6930a6 100644 --- a/src/domains/wallet/components/WalletVote/__snapshots__/WalletVote.test.tsx.snap +++ b/src/domains/wallet/components/WalletVote/__snapshots__/WalletVote.test.tsx.snap @@ -41,7 +41,7 @@ exports[`WalletVote should render 1`] = ` style="max-height: auto; height: auto; opacity: 1; overflow: auto;" >