diff --git a/src/components/Sidebar.test.tsx b/src/components/Sidebar.test.tsx
index 55039aa61..6f8fbea80 100644
--- a/src/components/Sidebar.test.tsx
+++ b/src/components/Sidebar.test.tsx
@@ -1,16 +1,16 @@
-import * as React from 'react';
-import * as TestRenderer from 'react-test-renderer';
import { fireEvent, render } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+import * as React from 'react';
import { Router } from 'react-router';
import { MemoryRouter } from 'react-router-dom';
-import { createMemoryHistory } from 'history';
+import * as TestRenderer from 'react-test-renderer';
const { shell, ipcRenderer } = require('electron');
-import { Sidebar } from './Sidebar';
import { mockSettings } from '../__mocks__/mock-state';
-import { AppContext } from '../context/App';
import { mockedAccountNotifications } from '../__mocks__/mockedData';
+import { AppContext } from '../context/App';
+import { Sidebar } from './Sidebar';
describe('components/Sidebar.tsx', () => {
const fetchNotifications = jest.fn();
@@ -102,18 +102,41 @@ describe('components/Sidebar.tsx', () => {
);
});
- it('opens the gitify repo in browser', () => {
- const { getByLabelText } = render(
-
-
-
-
-
- );
- fireEvent.click(getByLabelText('View project on GitHub'));
- expect(shell.openExternal).toHaveBeenCalledTimes(1);
- expect(shell.openExternal).toHaveBeenCalledWith(
- 'https://github.com/manosim/gitify'
- );
+ describe('should render the notifications icon', () => {
+ it('when there are 0 notifications', () => {
+ const { getByLabelText } = render(
+
+
+
+
+
+ );
+
+ const notificationsIcon = getByLabelText('0 Unread Notifications');
+ expect(notificationsIcon.className).toContain('text-white');
+ expect(notificationsIcon.childNodes.length).toBe(1);
+ expect(notificationsIcon.childNodes[0].nodeName).toBe('svg');
+ });
+
+ it('when there are more than 0 notifications', () => {
+ const { getByLabelText } = render(
+
+
+
+
+
+ );
+
+ const notificationsIcon = getByLabelText('4 Unread Notifications');
+ expect(notificationsIcon.className).toContain('text-green-500');
+ 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/Sidebar.tsx b/src/components/Sidebar.tsx
index be3364ff0..c0a404e15 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,14 +1,14 @@
-import React, { useCallback, useContext, useMemo } from 'react';
-import { shell, ipcRenderer } from 'electron';
import * as Octicons from '@primer/octicons-react';
+import { ipcRenderer, shell } from 'electron';
+import React, { useCallback, useContext, useMemo } from 'react';
import { useHistory } from 'react-router-dom';
+import { Logo } from '../components/Logo';
import { AppContext } from '../context/App';
-import { Constants } from '../utils/constants';
import { IconCog } from '../icons/Cog';
-import { IconRefresh } from '../icons/Refresh';
-import { Logo } from '../components/Logo';
import { IconQuit } from '../icons/Quit';
+import { IconRefresh } from '../icons/Refresh';
+import { Constants } from '../utils/constants';
export const Sidebar: React.FC = () => {
const history = useHistory();
@@ -46,16 +46,16 @@ export const Sidebar: React.FC = () => {
onClick={onOpenBrowser}
/>
- {notificationsCount > 0 && (
-
-
- {notificationsCount}
-
- )}
+ 0 ? 'text-green-500' : 'text-white'
+ }`}
+ onClick={onOpenGitHubNotifications}
+ aria-label={`${notificationsCount} Unread Notifications`}
+ >
+
+ {notificationsCount > 0 && notificationsCount}
+
@@ -88,14 +88,6 @@ export const Sidebar: React.FC = () => {
)}
-
-
-
-
-
-
`;
@@ -198,7 +171,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
-
-
`;