Skip to content

Commit 710d9ac

Browse files
afonsojramosafonsojramos
authored
feat: remove gh icon & keep notifications icon (#587)
1 parent 7e2ddf7 commit 710d9ac

File tree

3 files changed

+58
-97
lines changed

3 files changed

+58
-97
lines changed

‎src/components/Sidebar.test.tsx‎

Lines changed: 41 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import * as React from 'react';
2-
import * as TestRenderer from 'react-test-renderer';
31
import { fireEvent, render } from '@testing-library/react';
2+
import { createMemoryHistory } from 'history';
3+
import * as React from 'react';
44
import { Router } from 'react-router';
55
import { MemoryRouter } from 'react-router-dom';
6-
import { createMemoryHistory } from 'history';
6+
import * as TestRenderer from 'react-test-renderer';
77

88
const { shell, ipcRenderer } = require('electron');
99

10-
import { Sidebar } from './Sidebar';
1110
import { mockSettings } from '../__mocks__/mock-state';
12-
import { AppContext } from '../context/App';
1311
import { mockedAccountNotifications } from '../__mocks__/mockedData';
12+
import { AppContext } from '../context/App';
13+
import { Sidebar } from './Sidebar';
1414

1515
describe('components/Sidebar.tsx', () => {
1616
const fetchNotifications = jest.fn();
@@ -102,18 +102,41 @@ describe('components/Sidebar.tsx', () => {
102102
);
103103
});
104104

105-
it('opens the gitify repo in browser', () => {
106-
const { getByLabelText } = render(
107-
<AppContext.Provider value={{ isLoggedIn: true, notifications: [] }}>
108-
<MemoryRouter>
109-
<Sidebar />
110-
</MemoryRouter>
111-
</AppContext.Provider>
112-
);
113-
fireEvent.click(getByLabelText('View project on GitHub'));
114-
expect(shell.openExternal).toHaveBeenCalledTimes(1);
115-
expect(shell.openExternal).toHaveBeenCalledWith(
116-
'https://github.com/manosim/gitify'
117-
);
105+
describe('should render the notifications icon', () => {
106+
it('when there are 0 notifications', () => {
107+
const { getByLabelText } = render(
108+
<AppContext.Provider value={{ isLoggedIn: true, notifications: [] }}>
109+
<MemoryRouter>
110+
<Sidebar />
111+
</MemoryRouter>
112+
</AppContext.Provider>
113+
);
114+
115+
const notificationsIcon = getByLabelText('0 Unread Notifications');
116+
expect(notificationsIcon.className).toContain('text-white');
117+
expect(notificationsIcon.childNodes.length).toBe(1);
118+
expect(notificationsIcon.childNodes[0].nodeName).toBe('svg');
119+
});
120+
121+
it('when there are more than 0 notifications', () => {
122+
const { getByLabelText } = render(
123+
<AppContext.Provider
124+
value={{
125+
isLoggedIn: true,
126+
notifications: mockedAccountNotifications,
127+
}}
128+
>
129+
<MemoryRouter>
130+
<Sidebar />
131+
</MemoryRouter>
132+
</AppContext.Provider>
133+
);
134+
135+
const notificationsIcon = getByLabelText('4 Unread Notifications');
136+
expect(notificationsIcon.className).toContain('text-green-500');
137+
expect(notificationsIcon.childNodes.length).toBe(2);
138+
expect(notificationsIcon.childNodes[0].nodeName).toBe('svg');
139+
expect(notificationsIcon.childNodes[1].nodeValue).toBe('4');
140+
});
118141
});
119142
});

‎src/components/Sidebar.tsx‎

Lines changed: 15 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import React, { useCallback, useContext, useMemo } from 'react';
2-
import { shell, ipcRenderer } from 'electron';
31
import * as Octicons from '@primer/octicons-react';
2+
import { ipcRenderer, shell } from 'electron';
3+
import React, { useCallback, useContext, useMemo } from 'react';
44
import { useHistory } from 'react-router-dom';
55

6+
import { Logo } from '../components/Logo';
67
import { AppContext } from '../context/App';
7-
import { Constants } from '../utils/constants';
88
import { IconCog } from '../icons/Cog';
9-
import { IconRefresh } from '../icons/Refresh';
10-
import { Logo } from '../components/Logo';
119
import { IconQuit } from '../icons/Quit';
10+
import { IconRefresh } from '../icons/Refresh';
11+
import { Constants } from '../utils/constants';
1212

1313
export const Sidebar: React.FC = () => {
1414
const history = useHistory();
@@ -46,16 +46,16 @@ export const Sidebar: React.FC = () => {
4646
onClick={onOpenBrowser}
4747
/>
4848

49-
{notificationsCount > 0 && (
50-
<div
51-
className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-green-500 text-xs font-extrabold cursor-pointer"
52-
onClick={onOpenGitHubNotifications}
53-
aria-label={`${notificationsCount} Unread Notifications`}
54-
>
55-
<Octicons.BellIcon size={12} />
56-
{notificationsCount}
57-
</div>
58-
)}
49+
<div
50+
className={`flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer ${
51+
notificationsCount > 0 ? 'text-green-500' : 'text-white'
52+
}`}
53+
onClick={onOpenGitHubNotifications}
54+
aria-label={`${notificationsCount} Unread Notifications`}
55+
>
56+
<Octicons.BellIcon size={12} />
57+
{notificationsCount > 0 && notificationsCount}
58+
</div>
5959
</div>
6060

6161
<div className="py-4 px-3">
@@ -88,14 +88,6 @@ export const Sidebar: React.FC = () => {
8888
<IconQuit className="w-3.5 h-3.5" />
8989
</button>
9090
)}
91-
92-
<div
93-
className={footerButtonClasses}
94-
onClick={onOpenBrowser}
95-
aria-label="View project on GitHub"
96-
>
97-
<Octicons.MarkGithubIcon size={15} />
98-
</div>
9991
</div>
10092
</div>
10193
);

‎src/components/__snapshots__/Sidebar.test.tsx.snap‎

Lines changed: 2 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
5353
</svg>
5454
<div
5555
aria-label="4 Unread Notifications"
56-
className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-green-500 text-xs font-extrabold cursor-pointer"
56+
className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
5757
onClick={[Function]}
5858
>
5959
<svg
@@ -114,33 +114,6 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
114114
</g>
115115
</svg>
116116
</button>
117-
<div
118-
aria-label="View project on GitHub"
119-
className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
120-
onClick={[Function]}
121-
>
122-
<svg
123-
aria-hidden="true"
124-
className="octicon"
125-
dangerouslySetInnerHTML={
126-
Object {
127-
"__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
128-
}
129-
}
130-
fill="currentColor"
131-
height={15}
132-
role="img"
133-
style={
134-
Object {
135-
"display": "inline-block",
136-
"userSelect": "none",
137-
"verticalAlign": "text-bottom",
138-
}
139-
}
140-
viewBox="0 0 16 16"
141-
width={15}
142-
/>
143-
</div>
144117
</div>
145118
</div>
146119
`;
@@ -198,7 +171,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
198171
</svg>
199172
<div
200173
aria-label="4 Unread Notifications"
201-
className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-green-500 text-xs font-extrabold cursor-pointer"
174+
className="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
202175
onClick={[Function]}
203176
>
204177
<svg
@@ -259,33 +232,6 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
259232
</g>
260233
</svg>
261234
</button>
262-
<div
263-
aria-label="View project on GitHub"
264-
className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
265-
onClick={[Function]}
266-
>
267-
<svg
268-
aria-hidden="true"
269-
className="octicon"
270-
dangerouslySetInnerHTML={
271-
Object {
272-
"__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\\"></path>",
273-
}
274-
}
275-
fill="currentColor"
276-
height={15}
277-
role="img"
278-
style={
279-
Object {
280-
"display": "inline-block",
281-
"userSelect": "none",
282-
"verticalAlign": "text-bottom",
283-
}
284-
}
285-
viewBox="0 0 16 16"
286-
width={15}
287-
/>
288-
</div>
289235
</div>
290236
</div>
291237
`;

0 commit comments

Comments
 (0)