chore: improve tests and snapshots

gitify-app · Dec 6, 2023 · 47abced · 47abced
1 parent 4757dc5
commit 47abced
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 50 deletions.
diff --git a/src/components/fields/Checkbox.tsx b/src/components/fields/Checkbox.tsx
@@ -27,7 +27,9 @@ export const FieldCheckbox = (props: IFieldCheckbox) => {
         <label
           htmlFor={props.name}
           className="font-medium text-gray-700 dark:text-gray-200"
-          style={{ textDecoration: props.disabled && 'line-through' }}
+          style={
+            props.disabled ? { textDecoration: 'line-through' } : undefined
+          }
         >
           {props.label}
         </label>

diff --git a/src/routes/Settings.test.tsx b/src/routes/Settings.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import TestRenderer, { act } from 'react-test-renderer';
@@ -313,20 +313,14 @@ describe('routes/Settings.tsx', () => {
   });
 
   it('should be able to enable colors', async () => {
-    let getByLabelText;
-    let findByLabelText;
-
     jest.spyOn(apiRequests, 'apiRequestAuth').mockResolvedValue({
       headers: {
         'x-oauth-scopes': Constants.AUTH_SCOPE.join(', '),
       },
     } as unknown as AxiosResponse);
 
     await act(async () => {
-      const {
-        getByLabelText: getByLabelTextLocal,
-        findByLabelText: findByLabelTextLocal,
-      } = render(
+      render(
         <AppContext.Provider
           value={{
             settings: mockSettings,
@@ -339,45 +333,63 @@ describe('routes/Settings.tsx', () => {
           </MemoryRouter>
         </AppContext.Provider>,
       );
-      getByLabelText = getByLabelTextLocal;
-      findByLabelText = findByLabelTextLocal;
     });
 
-    await findByLabelText('Use GitHub-like state colors');
+    await screen.findByLabelText('Use GitHub-like state colors');
 
-    fireEvent.click(getByLabelText('Use GitHub-like state colors'));
+    fireEvent.click(screen.getByLabelText('Use GitHub-like state colors'));
 
     expect(updateSetting).toHaveBeenCalledTimes(1);
     expect(updateSetting).toHaveBeenCalledWith('colors', true);
   });
 
-  it('should not be able to disable colors', async () => {
-    let queryByLabelText;
-
+  it('should not be able to enable colors', async () => {
     jest.spyOn(apiRequests, 'apiRequestAuth').mockResolvedValue({
       headers: {
         'x-oauth-scopes': 'read:user, notifications',
       },
     } as unknown as AxiosResponse);
 
     await act(async () => {
-      const { queryByLabelText: queryByLabelLocal } = render(
+      render(
         <AppContext.Provider
           value={{
             settings: mockSettings,
             accounts: mockAccounts,
+            updateSetting,
           }}
         >
           <MemoryRouter>
             <SettingsRoute />
           </MemoryRouter>
         </AppContext.Provider>,
       );
-      queryByLabelText = queryByLabelLocal;
     });
 
     expect(
-      queryByLabelText('Use GitHub-like state colors (requires re-auth)'),
-    ).toBeDefined();
+      screen
+        .getByLabelText('Use GitHub-like state colors (requires repo scope)')
+        .closest('input'),
+    ).toHaveProperty('disabled', true);
+
+    // click the checkbox
+    fireEvent.click(
+      screen.getByLabelText(
+        'Use GitHub-like state colors (requires repo scope)',
+      ),
+    );
+
+    // check if the checkbox is still unchecked
+    expect(
+      screen.getByLabelText(
+        'Use GitHub-like state colors (requires repo scope)',
+      ),
+    ).not.toBe('checked');
+
+    expect(
+      screen.getByLabelText(
+        'Use GitHub-like state colors (requires repo scope)',
+      ).parentNode.parentNode,
+    ).toMatchSnapshot();
   });
 });
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`routes/Settings.tsx should not be able to enable colors 1`] = `
+<div
+  class="flex items-start mt-1 mb-3"
+>
+  <div
+    class="flex items-center h-5"
+  >
+    <input
+      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+      disabled=""
+      id="colors"
+      type="checkbox"
+    />
+  </div>
+  <div
+    class="ml-3 text-sm"
+  >
+    <label
+      class="font-medium text-gray-700 dark:text-gray-200"
+      for="colors"
+      style="text-decoration: line-through;"
+    >
+      Use GitHub-like state colors (requires repo scope)
+    </label>
+  </div>
+</div>
+`;
+
 exports[`routes/Settings.tsx should render itself & its children 1`] = `
 <div
   className="flex flex-1 flex-col dark:bg-gray-dark dark:text-white"
@@ -140,11 +168,6 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         <label
           className="font-medium text-gray-700 dark:text-gray-200"
           htmlFor="colors"
-          style={
-            {
-              "textDecoration": false,
-            }
-          }
         >
           Use GitHub-like state colors
         </label>
@@ -170,11 +193,6 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         <label
           className="font-medium text-gray-700 dark:text-gray-200"
           htmlFor="showOnlyParticipating"
-          style={
-            {
-              "textDecoration": undefined,
-            }
-          }
         >
           Show only participating
         </label>
@@ -200,11 +218,6 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         <label
           className="font-medium text-gray-700 dark:text-gray-200"
           htmlFor="playSound"
-          style={
-            {
-              "textDecoration": undefined,
-            }
-          }
         >
           Play sound
         </label>
@@ -230,11 +243,6 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         <label
           className="font-medium text-gray-700 dark:text-gray-200"
           htmlFor="showNotifications"
-          style={
-            {
-              "textDecoration": undefined,
-            }
-          }
         >
           Show notifications
         </label>
@@ -260,11 +268,6 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         <label
           className="font-medium text-gray-700 dark:text-gray-200"
           htmlFor="onClickMarkAsRead"
-          style={
-            {
-              "textDecoration": undefined,
-            }
-          }
         >
           Mark as read on click
         </label>
@@ -290,11 +293,6 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         <label
           className="font-medium text-gray-700 dark:text-gray-200"
           htmlFor="openAtStartUp"
-          style={
-            {
-              "textDecoration": undefined,
-            }
-          }
         >
           Open at startup
         </label>