test: update test cases

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

Author: setchy

src/renderer/components/settings/AppearanceSettings.test.tsx

@@ -90,31 +90,31 @@ describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => {
     });
 
     await act(async () => {
-      fireEvent.click(screen.getByLabelText('Zoom Out'));
+      fireEvent.click(screen.getByTestId('settings-zoom-out'));
       await zoomTimeout();
     });
 
     expect(updateSetting).toHaveBeenCalledTimes(1);
     expect(updateSetting).toHaveBeenCalledWith('zoomPercentage', 90);
 
     await act(async () => {
-      fireEvent.click(screen.getByLabelText('Zoom Out'));
+      fireEvent.click(screen.getByTestId('settings-zoom-out'));
       await zoomTimeout();
 
       expect(updateSetting).toHaveBeenCalledTimes(2);
       expect(updateSetting).toHaveBeenNthCalledWith(2, 'zoomPercentage', 80);
     });
 
     await act(async () => {
-      fireEvent.click(screen.getByLabelText('Zoom In'));
+      fireEvent.click(screen.getByTestId('settings-zoom-in'));
       await zoomTimeout();
 
       expect(updateSetting).toHaveBeenCalledTimes(3);
       expect(updateSetting).toHaveBeenNthCalledWith(3, 'zoomPercentage', 90);
     });
 
     await act(async () => {
-      fireEvent.click(screen.getByLabelText('Reset Zoom'));
+      fireEvent.click(screen.getByTestId('settings-zoom-reset'));
       await zoomTimeout();
 
       expect(updateSetting).toHaveBeenCalledTimes(4);
@@ -139,8 +139,6 @@ describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => {
       );
     });
 
-    await screen.findByLabelText('Detailed notifications');
-
     fireEvent.click(screen.getByLabelText('Detailed notifications'));
 
     expect(updateSetting).toHaveBeenCalledTimes(1);
@@ -164,8 +162,6 @@ describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => {
       );
     });
 
-    await screen.findByLabelText('Show notification metric pills');
-
     fireEvent.click(screen.getByLabelText('Show notification metric pills'));
 
     expect(updateSetting).toHaveBeenCalledTimes(1);
@@ -189,8 +185,6 @@ describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => {
       );
     });
 
-    await screen.findByLabelText('Show number');
-
     fireEvent.click(screen.getByLabelText('Show number'));
 
     expect(updateSetting).toHaveBeenCalledTimes(1);
@@ -216,8 +210,6 @@ describe('renderer/routes/components/settings/AppearanceSettings.tsx', () => {
       );
     });
 
-    await screen.findByLabelText('Show account header');
-
     fireEvent.click(screen.getByLabelText('Show account header'));
 
     expect(updateSetting).toHaveBeenCalledTimes(1);

src/renderer/components/settings/AppearanceSettings.tsx

@@ -13,8 +13,9 @@ import {
   TagIcon,
   XCircleIcon,
 } from '@primer/octicons-react';
-import { Button, ButtonGroup, IconButton, useTheme } from '@primer/react';
+import { Button, ButtonGroup, Tooltip, useTheme } from '@primer/react';
 import type { ColorModeWithAuto } from '@primer/react/lib/ThemeProvider';
+
 import { AppContext } from '../../context/App';
 import { Size, Theme } from '../../types';
 import { hasMultipleAccounts } from '../../utils/auth/utils';
@@ -97,34 +98,46 @@ export const AppearanceSettings: FC = () => {
         </label>
 
         <ButtonGroup>
-          <IconButton
-            aria-label="Zoom out"
-            icon={DashIcon}
+          <Button
             size="small"
             onClick={() =>
               zoomPercentage > 0 &&
               webFrame.setZoomLevel(zoomPercentageToLevel(zoomPercentage - 10))
             }
-          />
-          <Button aria-label="Zoom Percentage" size="small" disabled>
+            data-testid="settings-zoom-out"
+          >
+            <Tooltip text="Zoom out">
+              <DashIcon size={Size.SMALL} />
+            </Tooltip>
+          </Button>
+
+          <Button aria-label="Zoom percentage" size="small" disabled>
             {zoomPercentage.toFixed(0)}%
           </Button>
-          <IconButton
-            aria-label="Zoom in"
-            icon={PlusIcon}
+
+          <Button
             size="small"
             onClick={() =>
               zoomPercentage < 120 &&
               webFrame.setZoomLevel(zoomPercentageToLevel(zoomPercentage + 10))
             }
-          />
-          <IconButton
-            aria-label="Reset zoom level"
-            icon={XCircleIcon}
+            data-testid="settings-zoom-in"
+          >
+            <Tooltip text="Zoom in">
+              <PlusIcon size={Size.SMALL} />
+            </Tooltip>
+          </Button>
+
+          <Button
             size="small"
             variant="danger"
             onClick={() => webFrame.setZoomLevel(0)}
-          />
+            data-testid="settings-zoom-reset"
+          >
+            <Tooltip text="Reset zoom">
+              <XCircleIcon size={Size.SMALL} />
+            </Tooltip>
+          </Button>
         </ButtonGroup>
       </div>
 

src/renderer/components/settings/SettingsFooter.test.tsx

@@ -46,7 +46,7 @@ describe('renderer/routes/components/settings/SettingsFooter.tsx', () => {
         );
       });
 
-      expect(screen.getByLabelText('app-version')).toMatchSnapshot();
+      expect(screen.getByTestId('settings-release-notes')).toMatchSnapshot();
     });
 
     it('should show development app version', async () => {
@@ -70,7 +70,7 @@ describe('renderer/routes/components/settings/SettingsFooter.tsx', () => {
         );
       });
 
-      expect(screen.getByLabelText('app-version')).toMatchSnapshot();
+      expect(screen.getByTestId('settings-release-notes')).toMatchSnapshot();
     });
   });
 
@@ -98,7 +98,7 @@ describe('renderer/routes/components/settings/SettingsFooter.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByTitle('View release notes'));
+    fireEvent.click(screen.getByTestId('settings-release-notes'));
 
     expect(openExternalLinkMock).toHaveBeenCalledTimes(1);
     expect(openExternalLinkMock).toHaveBeenCalledWith(
@@ -122,7 +122,8 @@ describe('renderer/routes/components/settings/SettingsFooter.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByTitle('Accounts'));
+    fireEvent.click(screen.getByTestId('settings-accounts'));
+
     expect(mockNavigate).toHaveBeenCalledWith('/accounts');
   });
 
@@ -144,7 +145,8 @@ describe('renderer/routes/components/settings/SettingsFooter.tsx', () => {
       );
     });
 
-    fireEvent.click(screen.getByLabelText('Quit Gitify'));
+    fireEvent.click(screen.getByTestId('settings-quit'));
+
     expect(quitAppMock).toHaveBeenCalledTimes(1);
   });
 });

src/renderer/components/settings/SettingsFooter.tsx

@@ -26,7 +26,10 @@ export const SettingsFooter: FC = () => {
     <div className="flex items-center justify-between bg-gray-200 px-4 py-1 text-sm dark:bg-gray-darker">
       <Stack direction="horizontal">
         <Tooltip text="View release notes" direction="n">
-          <Button onClick={() => openGitifyReleaseNotes(appVersion)}>
+          <Button
+            onClick={() => openGitifyReleaseNotes(appVersion)}
+            data-testid="settings-release-notes"
+          >
             Gitify {appVersion}
           </Button>
         </Tooltip>
@@ -40,6 +43,7 @@ export const SettingsFooter: FC = () => {
             onClick={() => {
               navigate('/accounts');
             }}
+            data-testid="settings-accounts"
           />
         </Tooltip>
 
@@ -51,6 +55,7 @@ export const SettingsFooter: FC = () => {
             onClick={() => {
               quitApp();
             }}
+            data-testid="settings-quit"
           />
         </Tooltip>
       </Stack>