test: update test cases

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/buttons/PillButton.test.tsx

@@ -4,7 +4,7 @@ import { IconColor } from '../../types';
 import { type IPillButton, PillButton } from './PillButton';
 
 describe('renderer/components/buttons/PillButton.tsx', () => {
-  it('should render', () => {
+  it('should render with metric', () => {
     const props: IPillButton = {
       title: 'Mock Pill',
       metric: 1,
@@ -14,4 +14,14 @@ describe('renderer/components/buttons/PillButton.tsx', () => {
     const tree = render(<PillButton {...props} />);
     expect(tree).toMatchSnapshot();
   });
+
+  it('should render without metric', () => {
+    const props: IPillButton = {
+      title: 'Mock Pill',
+      icon: MarkGithubIcon,
+      color: IconColor.GREEN,
+    };
+    const tree = render(<PillButton {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
 });

src/renderer/components/buttons/PillButton.tsx

@@ -1,5 +1,8 @@
-import type { Icon } from '@primer/octicons-react';
 import type { FC } from 'react';
+
+import type { Icon } from '@primer/octicons-react';
+import { Octicon, Stack, Text } from '@primer/react';
+
 import { type IconColor, Size } from '../../types';
 
 export interface IPillButton {
@@ -17,12 +20,10 @@ export const PillButton: FC<IPillButton> = (props: IPillButton) => {
       type="button"
       className="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
     >
-      <props.icon
-        size={Size.XSMALL}
-        className={props.color}
-        aria-label={props.title}
-      />
-      {props.metric}
+      <Stack direction="horizontal" align="center" gap="condensed">
+        <Octicon icon={props.icon} size={Size.XSMALL} className={props.color} />
+        {props.metric && <Text>{props.metric}</Text>}
+      </Stack>
     </button>
   );
 };

src/renderer/components/buttons/__snapshots__/PillButton.test.tsx.snap

@@ -84,7 +84,7 @@ export const AccountNotifications: FC<IAccountNotifications> = (
           )}
           onClick={toggleAccountNotifications}
         >
-          <Tooltip text="Open profile" direction="s">
+          <Tooltip text="Open profile" direction="e">
             <Button
               variant="invisible"
               alignContent="center"

src/renderer/components/notifications/AccountNotifications.tsx

@@ -1,7 +1,7 @@
 import type { FC, MouseEvent } from 'react';
 
 import { FeedPersonIcon, MarkGithubIcon } from '@primer/octicons-react';
-import { Avatar, Tooltip } from '@primer/react';
+import { Avatar } from '@primer/react';
 
 import { IconColor, Opacity, Size } from '../../types';
 import type { Notification } from '../../typesGitHub';
@@ -29,21 +29,17 @@ export const NotificationFooter: FC<INotificationFooter> = ({
     <div className="flex flex-wrap items-center gap-1">
       <div className="mb-1">
         {notification.subject.user ? (
-          <Tooltip
-            text={`View profile: ${notification.subject.user.login}`}
-            direction="ne"
-          >
-            <Avatar
-              src={notification.subject.user.avatar_url}
-              size={Size.SMALL}
-              onClick={(event: MouseEvent<HTMLElement>) => {
-                // Don't trigger onClick of parent element.
-                event.stopPropagation();
-                openUserProfile(notification.subject.user);
-              }}
-              data-testid="view-profile"
-            />
-          </Tooltip>
+          <Avatar
+            title={`View profile: ${notification.subject.user.login}`}
+            src={notification.subject.user.avatar_url}
+            size={Size.SMALL}
+            onClick={(event: MouseEvent<HTMLElement>) => {
+              // Don't trigger onClick of parent element.
+              event.stopPropagation();
+              openUserProfile(notification.subject.user);
+            }}
+            data-testid="view-profile"
+          />
         ) : (
           <div>
             {notification.subject.type === 'RepositoryDependabotAlertsThread' ||

src/renderer/components/notifications/NotificationFooter.tsx

@@ -1,6 +1,6 @@
 import { type FC, type MouseEvent, useContext } from 'react';
 
-import { Avatar, Link, Stack, Tooltip } from '@primer/react';
+import { Avatar, Stack, Tooltip } from '@primer/react';
 
 import { AppContext } from '../../context/App';
 import { Size } from '../../types';
@@ -24,8 +24,7 @@ export const NotificationHeader: FC<INotificationHeader> = ({
   return (
     groupByDate && (
       <Tooltip text={`View repository: ${repoSlug}`} direction="se">
-        <Link
-          muted
+        <div
           onClick={(event: MouseEvent<HTMLElement>) => {
             // Don't trigger onClick of parent element.
             event.stopPropagation();
@@ -37,7 +36,7 @@ export const NotificationHeader: FC<INotificationHeader> = ({
             <Avatar src={repoAvatarUrl} size={Size.SMALL} />
             <span className="text-xs font-medium">{repoSlug}</span>
           </Stack>
-        </Link>
+        </div>
       </Tooltip>
     )
   );