diff --git a/src/app/components/Link/Link.stories.tsx b/src/app/components/Link/Link.stories.tsx index d3b2b5ac81..fd4a23a513 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..268ea3daf3 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..e90fabbefe 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`] = ` - - - Test - - -`; - -exports[`Link should render external 1`] = ` +exports[`Link should open an external link 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..dd58c0d4c9 100644 --- a/src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap +++ b/src/domains/dashboard/components/Transactions/__snapshots__/Transactions.test.tsx.snap @@ -205,9 +205,8 @@ exports[`Transactions should render with with transactions 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 8ec573b5d6..1da46b19dd 100644 --- a/src/domains/transaction/components/TransactionTable/__snapshots__/TransactionTable.test.tsx.snap +++ b/src/domains/transaction/components/TransactionTable/__snapshots__/TransactionTable.test.tsx.snap @@ -161,9 +161,8 @@ exports[`TransactionTable should render 1`] = `
{ {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..ee5b6930a6 100644 --- a/src/domains/wallet/components/WalletVote/__snapshots__/WalletVote.test.tsx.snap +++ b/src/domains/wallet/components/WalletVote/__snapshots__/WalletVote.test.tsx.snap @@ -452,17 +452,33 @@ exports[`WalletVote should render without votes 1`] = ` > 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 4834ecfaf5..65affdaf74 100644 --- a/src/domains/wallet/pages/WalletDetails/__snapshots__/WalletDetails.test.tsx.snap +++ b/src/domains/wallet/pages/WalletDetails/__snapshots__/WalletDetails.test.tsx.snap @@ -768,9 +768,8 @@ exports[`WalletDetails should delete wallet 1`] = `
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 + +
- +
@@ -13980,9 +13936,8 @@ exports[`WalletDetails should render when wallet hasn't voted 1`] = `