feat(settings): improve tooltips

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

Author: setchy

src/renderer/components/fields/Tooltip.test.tsx

@@ -1,6 +1,10 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { BaseStyles, ThemeProvider } from '@primer/react';
+
+import { mockSettings } from '../../__mocks__/state-mocks';
+import { AppContext } from '../../context/App';
 import { type ITooltip, Tooltip } from './Tooltip';
 
 describe('renderer/components/fields/Tooltip.tsx', () => {
@@ -10,19 +14,44 @@ describe('renderer/components/fields/Tooltip.tsx', () => {
   };
 
   it('should render', () => {
-    const tree = render(<Tooltip {...props} />);
-    expect(tree).toMatchSnapshot();
+    render(
+      <ThemeProvider>
+        <BaseStyles>
+          <AppContext.Provider
+            value={{
+              settings: mockSettings,
+            }}
+          >
+            <Tooltip {...props} />
+          </AppContext.Provider>
+        </BaseStyles>
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByTestId('tooltip-test')).toBeInTheDocument();
   });
 
   it('should display on mouse enter / leave', async () => {
-    render(<Tooltip {...props} />);
+    render(
+      <ThemeProvider>
+        <BaseStyles>
+          <AppContext.Provider
+            value={{
+              settings: mockSettings,
+            }}
+          >
+            <Tooltip {...props} />
+          </AppContext.Provider>
+        </BaseStyles>
+      </ThemeProvider>,
+    );
 
     const tooltipElement = screen.getByTestId('tooltip-test');
 
     await userEvent.hover(tooltipElement);
-    expect(tooltipElement).toMatchSnapshot();
+    expect(screen.queryByText(props.tooltip as string)).toBeInTheDocument();
 
     await userEvent.unhover(tooltipElement);
-    expect(tooltipElement).toMatchSnapshot();
+    expect(screen.queryByText(props.tooltip as string)).not.toBeInTheDocument();
   });
 });

src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap

@@ -1,6 +1,8 @@
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { BaseStyles, ThemeProvider } from '@primer/react';
+
 import { mockAuth, mockSettings } from '../../__mocks__/state-mocks';
 import { Constants } from '../../constants';
 import { AppContext } from '../../context/App';
@@ -323,15 +325,19 @@ describe('renderer/components/settings/NotificationSettings.tsx', () => {
 
     await act(async () => {
       render(
-        <AppContext.Provider
-          value={{
-            auth: mockAuth,
-            settings: mockSettings,
-            updateSetting,
-          }}
-        >
-          <NotificationSettings />
-        </AppContext.Provider>,
+        <ThemeProvider>
+          <BaseStyles>
+            <AppContext.Provider
+              value={{
+                auth: mockAuth,
+                settings: mockSettings,
+                updateSetting,
+              }}
+            >
+              <NotificationSettings />
+            </AppContext.Provider>
+          </BaseStyles>
+        </ThemeProvider>,
       );
     });