diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/bookmarks.tsx b/src/components/bookmarks.tsx index 0c7cf66..fafcead 100644 --- a/src/components/bookmarks.tsx +++ b/src/components/bookmarks.tsx @@ -1,3 +1,4 @@ +import { link } from "fs"; import styled from "styled-components"; import { Headline, @@ -14,7 +15,7 @@ const GroupContainer = styled.div` padding: 1rem 0; `; -const Bookmark = styled.a` +const BookmarkElement = styled.a` font-weight: 400; text-decoration: none; color: ${(props) => props.theme.accentColor}; @@ -29,6 +30,7 @@ const Bookmark = styled.a` export interface IBookmarkProps { name: string; url: string; + newTab?: boolean; } export interface IBookmarkGroupProps { @@ -40,6 +42,22 @@ export interface IBookmarkListProps { groups: Array; } +export const Bookmark = ({ name, url, newTab }: IBookmarkProps) => { + const linkAttrs = + newTab !== undefined && newTab + ? { + target: "_blank", + rel: "noopener noreferrer", + } + : {}; + + return ( + + {name} + + ); +}; + /** * Renders a given bookmark group * @param {IBookmarkGroupProps} props given props of the bookmark group @@ -49,10 +67,13 @@ export const BookmarkGroup = ({ name, items }: IBookmarkGroupProps) => ( {name} - {items.map(({ name, url }, index) => ( - - {name} - + {items.map(({ name, url, newTab }, index) => ( + ))} diff --git a/src/test/components/__snapshots__/bookmarks.spec.tsx.snap b/src/test/components/__snapshots__/bookmarks.spec.tsx.snap index 0a692f8..bdab497 100644 --- a/src/test/components/__snapshots__/bookmarks.spec.tsx.snap +++ b/src/test/components/__snapshots__/bookmarks.spec.tsx.snap @@ -1,5 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`BookmarkGroup snapshot test 1`] = `[Function]`; +exports[`tests rendering of Bookmark with newTab=false 1`] = `[Function]`; -exports[`BookmarkList snapshot test 1`] = `[Function]`; +exports[`tests rendering of Bookmark with newTab=true 1`] = `[Function]`; + +exports[`tests rendering of Bookmark without newTab 1`] = `[Function]`; + +exports[`tests rendering of BookmarkGroup 1`] = `[Function]`; + +exports[`tests rendering of BookmarkList 1`] = `[Function]`; diff --git a/src/test/components/bookmarks.spec.tsx b/src/test/components/bookmarks.spec.tsx index eb5d137..82cc419 100644 --- a/src/test/components/bookmarks.spec.tsx +++ b/src/test/components/bookmarks.spec.tsx @@ -1,5 +1,6 @@ import { render } from "@testing-library/react"; import BookmarkList, { + Bookmark, BookmarkGroup, IBookmarkGroupProps, IBookmarkListProps, @@ -19,7 +20,32 @@ const bookmarkListProps: IBookmarkListProps = { groups: [bookmarkGroupProps, bookmarkGroupProps], }; -it("BookmarkGroup snapshot test", () => { +it("tests rendering of Bookmark with newTab=true", () => { + let props = bookmarkGroupProps.items[0]; + const { asFragment } = render( + , + ); + + expect(asFragment).toMatchSnapshot(); +}); + +it("tests rendering of Bookmark with newTab=false", () => { + let props = bookmarkGroupProps.items[0]; + const { asFragment } = render( + , + ); + + expect(asFragment).toMatchSnapshot(); +}); + +it("tests rendering of Bookmark without newTab", () => { + let props = bookmarkGroupProps.items[0]; + const { asFragment } = render(); + + expect(asFragment).toMatchSnapshot(); +}); + +it("tests rendering of BookmarkGroup", () => { const { asFragment } = render( { expect(asFragment).toMatchSnapshot(); }); -it("BookmarkList snapshot test", () => { +it("tests rendering of BookmarkList", () => { const { asFragment } = render( , );