From c49db7a351d3685cf36684d470eda9f20c232e06 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Wed, 19 Jun 2024 08:16:55 -0400 Subject: [PATCH 1/5] refactor: logo icon --- src/components/Sidebar.tsx | 4 +- .../LogoIcon.test.tsx} | 10 +- .../{Logo.tsx => icons/LogoIcon.tsx} | 6 +- .../__snapshots__/LogoIcon.test.tsx.snap | 303 ++++++++++++++++++ src/routes/Login.tsx | 4 +- 5 files changed, 315 insertions(+), 12 deletions(-) rename src/components/{Logo.test.tsx => icons/LogoIcon.test.tsx} (66%) rename src/components/{Logo.tsx => icons/LogoIcon.tsx} (96%) create mode 100644 src/components/icons/__snapshots__/LogoIcon.test.tsx.snap diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 6e64fea0d..49ac15b99 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -8,7 +8,6 @@ import { } from '@primer/octicons-react'; import { type FC, useContext, useMemo } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; -import { Logo } from '../components/Logo'; import { AppContext } from '../context/App'; import { quitApp } from '../utils/comms'; import { @@ -19,6 +18,7 @@ import { } from '../utils/links'; import { getNotificationCount } from '../utils/notifications'; import { SidebarButton } from './buttons/SidebarButton'; +import { LogoIcon } from './icons/LogoIcon'; export const Sidebar: FC = () => { const navigate = useNavigate(); @@ -54,7 +54,7 @@ export const Sidebar: FC = () => { onClick={() => openGitifyRepository()} data-testid="gitify-logo" > - + { +describe('components/icons/LogoIcon.tsx', () => { it('renders correctly (light)', () => { - const tree = render(); + const tree = render(); expect(tree).toMatchSnapshot(); }); it('renders correctly(dark)', () => { - const tree = render(); + const tree = render(); expect(tree).toMatchSnapshot(); }); it('should click on the logo', () => { const onClick = jest.fn(); - render(); + render(); fireEvent.click(screen.getByLabelText('Gitify Logo')); diff --git a/src/components/Logo.tsx b/src/components/icons/LogoIcon.tsx similarity index 96% rename from src/components/Logo.tsx rename to src/components/icons/LogoIcon.tsx index e76a777bd..f2554d47e 100644 --- a/src/components/Logo.tsx +++ b/src/components/icons/LogoIcon.tsx @@ -1,6 +1,6 @@ import type { FC } from 'react'; -interface ILogo { +interface ILogoIcon { isDark?: boolean; onClick?: () => void; className?: string; @@ -12,12 +12,12 @@ const LIGHT_GRADIENT_END = '#FFFFFF'; const DARK_GRADIENT_START = '#22283B'; const DARK_GRADIENT_END = '#555B6E'; -export const Logo: FC = ({ +export const LogoIcon: FC = ({ isDark, onClick, className = '', ...props -}: ILogo) => ( +}: ILogoIcon) => ( onClick?.()} diff --git a/src/components/icons/__snapshots__/LogoIcon.test.tsx.snap b/src/components/icons/__snapshots__/LogoIcon.test.tsx.snap new file mode 100644 index 000000000..cda17c7f9 --- /dev/null +++ b/src/components/icons/__snapshots__/LogoIcon.test.tsx.snap @@ -0,0 +1,303 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/icons/LogoIcon.tsx renders correctly (light) 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ + + + + + + + + + + +
+ , + "container":
+ + + + + + + + + + + +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`components/icons/LogoIcon.tsx renders correctly(dark) 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ + + + + + + + + + + +
+ , + "container":
+ + + + + + + + + + + +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; diff --git a/src/routes/Login.tsx b/src/routes/Login.tsx index 539fc3c78..141517a85 100644 --- a/src/routes/Login.tsx +++ b/src/routes/Login.tsx @@ -1,8 +1,8 @@ import { KeyIcon, PersonIcon } from '@primer/octicons-react'; import { type FC, useContext, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; -import { Logo } from '../components/Logo'; import { Button } from '../components/buttons/Button'; +import { LogoIcon } from '../components/icons/LogoIcon'; import { AppContext } from '../context/App'; import { showWindow } from '../utils/comms'; @@ -28,7 +28,7 @@ export const LoginRoute: FC = () => { return (
- +
GitHub Notifications
on your menu bar. From 7999552aae49a33e4a956ed912143bf8542455ca Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Wed, 19 Jun 2024 08:17:24 -0400 Subject: [PATCH 2/5] refactor: logo icon --- .../__snapshots__/Logo.test.tsx.snap | 303 ------------------ 1 file changed, 303 deletions(-) delete mode 100644 src/components/__snapshots__/Logo.test.tsx.snap diff --git a/src/components/__snapshots__/Logo.test.tsx.snap b/src/components/__snapshots__/Logo.test.tsx.snap deleted file mode 100644 index 7fef5f92e..000000000 --- a/src/components/__snapshots__/Logo.test.tsx.snap +++ /dev/null @@ -1,303 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`components/Logo.tsx renders correctly (light) 1`] = ` -{ - "asFragment": [Function], - "baseElement": -
- - - - - - - - - - - -
- , - "container":
- - - - - - - - - - - -
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; - -exports[`components/Logo.tsx renders correctly(dark) 1`] = ` -{ - "asFragment": [Function], - "baseElement": -
- - - - - - - - - - - -
- , - "container":
- - - - - - - - - - - -
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; From 0d32c3f30abd79fbfcf5ec0c95449958ea920f0d Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Wed, 19 Jun 2024 12:53:20 -0400 Subject: [PATCH 3/5] use size --- src/routes/Login.tsx | 2 +- src/routes/__snapshots__/Login.test.tsx.snap | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/routes/Login.tsx b/src/routes/Login.tsx index 141517a85..7d63d5921 100644 --- a/src/routes/Login.tsx +++ b/src/routes/Login.tsx @@ -28,7 +28,7 @@ export const LoginRoute: FC = () => { return (
- +
GitHub Notifications
on your menu bar. diff --git a/src/routes/__snapshots__/Login.test.tsx.snap b/src/routes/__snapshots__/Login.test.tsx.snap index f9aef48be..0ba2c8e21 100644 --- a/src/routes/__snapshots__/Login.test.tsx.snap +++ b/src/routes/__snapshots__/Login.test.tsx.snap @@ -10,7 +10,7 @@ exports[`routes/Login.tsx should render itself & its children 1`] = ` > Date: Thu, 20 Jun 2024 00:45:50 +0100 Subject: [PATCH 4/5] chore: add `size` prop to LogoIcon --- src/components/Sidebar.tsx | 4 +- .../AccountNotifications.test.tsx.snap | 8 +- .../__snapshots__/Sidebar.test.tsx.snap | 16 +- src/components/icons/LogoIcon.test.tsx | 10 +- src/components/icons/LogoIcon.tsx | 9 +- .../__snapshots__/LogoIcon.test.tsx.snap | 177 ++++++++++++++++-- src/routes/Login.tsx | 2 +- 7 files changed, 193 insertions(+), 33 deletions(-) diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 49ac15b99..7548f79f9 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -49,12 +49,12 @@ export const Sidebar: FC = () => {
@@ -303,11 +303,11 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi focusable="false" height="14" style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;" - viewBox="0 0 12 12" + viewBox="0 0 16 16" width="14" > diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap index a4e4df9bf..e16d94651 100644 --- a/src/components/__snapshots__/Sidebar.test.tsx.snap +++ b/src/components/__snapshots__/Sidebar.test.tsx.snap @@ -12,14 +12,14 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in) class="flex flex-1 flex-col items-center py-4" > ) : (
- +
)}
{reason.title}
diff --git a/src/components/Sidebar.test.tsx b/src/components/Sidebar.test.tsx index 93b6b1d54..66ebbf244 100644 --- a/src/components/Sidebar.test.tsx +++ b/src/components/Sidebar.test.tsx @@ -3,6 +3,7 @@ import { MemoryRouter } from 'react-router-dom'; import { mockAccountNotifications } from '../__mocks__/notifications-mocks'; import { mockSettings } from '../__mocks__/state-mocks'; import { AppContext } from '../context/App'; +import { IconColor } from '../types'; import * as comms from '../utils/comms'; import { Sidebar } from './Sidebar'; @@ -252,7 +253,7 @@ describe('components/Sidebar.tsx', () => { ); const notificationsIcon = screen.getByTitle('4 Unread Notifications'); - expect(notificationsIcon.className).toContain('text-green-500'); + expect(notificationsIcon.className).toContain(IconColor.GREEN); expect(notificationsIcon.childNodes.length).toBe(2); expect(notificationsIcon.childNodes[0].nodeName).toBe('svg'); expect(notificationsIcon.childNodes[1].nodeValue).toBe('4'); diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap index fa2df90e4..9d8d7d200 100644 --- a/src/components/__snapshots__/NotificationRow.test.tsx.snap +++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap @@ -75,7 +75,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil class="flex" >