Increase UI Test Coverage (#360)

* Fix unit test axios import and update tests to disable retries. * Update all tests to disable retries. * Remove unnecessary notification bar condition. * Add tests for more filter coverage. Update tests to ensure filters available before selecting. * Remove jest max workers config. * Add new build. * Fix unit test console error. * Remove unnecessary try catch blocks on home api calls. Add unit tests for additional home api coverage. * Remove duplicate server status code. Add unit tests for apps section. * Remove unnecessary table row check. Update unit tests to better mock state props. * Update jest config max workers back to 1.
nebari-dev · Jun 28, 2024 · 9335283 · 9335283
1 parent 0602d92
commit 9335283
Show file tree

Hide file tree

Showing 21 changed files with 488 additions and 274 deletions.
diff --git a/jhub_apps/static/js/index.js b/jhub_apps/static/js/index.js
diff --git a/ui/jest.config.ts b/ui/jest.config.ts
@@ -27,7 +27,7 @@ const config: JestConfigWithTsJest = {
     '!src/App.tsx',
     '!src/main.tsx',
     '!src/store.ts',
-    '!src/utils/axios.ts',
+    '!src/utils/*axios.ts',
     '!**/*.d.ts',
     '!**/types.ts',
     '!**/index.ts',

diff --git a/ui/src/components/app-card/app-card.test.tsx b/ui/src/components/app-card/app-card.test.tsx
@@ -8,7 +8,13 @@ import { RecoilRoot } from 'recoil';
 import AppCard from './app-card';
 
 describe('AppCard', () => {
-  const queryClient = new QueryClient();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
   const mock = new MockAdapter(axios);
 
   beforeAll(() => {

diff --git a/ui/src/components/app-form/app-form.test.tsx b/ui/src/components/app-form/app-form.test.tsx
@@ -17,7 +17,13 @@ describe('AppForm', () => {
     value: jest.fn(),
   });
 
-  const queryClient = new QueryClient();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
   const mock = new MockAdapter(axios);
   beforeAll(() => {
     mock.reset();

diff --git a/ui/src/components/app-sharing/app-sharing.test.tsx b/ui/src/components/app-sharing/app-sharing.test.tsx
@@ -7,7 +7,13 @@ import { AppSharing } from '..';
 import { currentUser as defaultUser } from '../../store';
 
 describe('AppSharing', () => {
-  const queryClient = new QueryClient();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
   beforeEach(() => {
     queryClient.clear();
   });
@@ -113,6 +119,8 @@ describe('AppSharing', () => {
   });
 
   test('Adds permissions to table', async () => {
+    const setUserPermissionMock = jest.fn();
+    const setGroupPermissionMock = jest.fn();
     const { baseElement, getByText } = render(
       <RecoilRoot initializeState={({ set }) => set(defaultUser, currentUser)}>
         <QueryClientProvider client={queryClient}>
@@ -123,8 +131,8 @@ describe('AppSharing', () => {
             }}
             isPublic={false}
             setIsPublic={jest.fn()}
-            setCurrentUserPermissions={jest.fn()}
-            setCurrentGroupPermissions={jest.fn()}
+            setCurrentUserPermissions={setUserPermissionMock}
+            setCurrentGroupPermissions={setGroupPermissionMock}
           />
         </QueryClientProvider>
       </RecoilRoot>,
@@ -140,13 +148,32 @@ describe('AppSharing', () => {
       });
       const listbox = baseElement.querySelector('.MuiAutocomplete-listbox');
       await act(async () => {
-        listbox?.querySelector('li')?.click();
+        const listItems = listbox?.querySelectorAll('li');
+        listItems?.forEach((item) => {
+          item.click();
+        });
       });
       const button = getByText('Share');
       await act(async () => {
         button.click();
       });
     }
+
+    expect(setUserPermissionMock).toHaveBeenCalledWith(expect.any(Function));
+    const userMockUpdater = setUserPermissionMock.mock.calls[0][0];
+    expect(userMockUpdater(['existing_user_permission'])).toEqual([
+      'user1',
+      'user2',
+      'user3',
+    ]);
+
+    expect(setGroupPermissionMock).toHaveBeenCalledWith(expect.any(Function));
+    const groupMockUpdater = setGroupPermissionMock.mock.calls[0][0];
+    expect(groupMockUpdater(['existing_user_permission'])).toEqual([
+      'group1',
+      'group2',
+      'superadmin',
+    ]);
   });
 
   test('removes existing permission', async () => {

diff --git a/ui/src/components/app-sharing/app-sharing.tsx b/ui/src/components/app-sharing/app-sharing.tsx
@@ -276,60 +276,61 @@ export const AppSharing = ({
                   <TableContainer>
                     <Table aria-label="Individuals and Groups" size="small">
                       <TableBody>
-                        {(rowsPerPage > 0
-                          ? currentItems.slice(
-                              page * rowsPerPage,
-                              page * rowsPerPage + rowsPerPage,
-                            )
-                          : currentItems
-                        ).map((item) => (
-                          <TableRow
-                            key={item.name}
-                            sx={{
-                              '&:last-child td, &:last-child th': { border: 0 },
-                            }}
-                          >
-                            <TableCell
-                              component="td"
-                              scope="row"
-                              sx={{ fontSize: '16px' }}
+                        {currentItems
+                          .slice(
+                            page * rowsPerPage,
+                            page * rowsPerPage + rowsPerPage,
+                          )
+                          .map((item) => (
+                            <TableRow
+                              key={item.name}
+                              sx={{
+                                '&:last-child td, &:last-child th': {
+                                  border: 0,
+                                },
+                              }}
                             >
-                              {item.name}{' '}
-                              {item.type === 'group' ? (
-                                <span style={{ fontWeight: 600 }}>
-                                  {' '}
-                                  (Group)
-                                </span>
-                              ) : (
-                                <></>
-                              )}
-                            </TableCell>
-                            <TableCell align="right">
-                              <Button
-                                variant="text"
-                                color="error"
-                                size="small"
-                                sx={{ fontWeight: '600', fontSize: '14px' }}
-                                onClick={() => {
-                                  setCurrentItems((prev) =>
-                                    prev.filter((i) => i.name !== item.name),
-                                  );
-                                  if (item.type === 'group') {
-                                    setCurrentGroupPermissions((prev) =>
-                                      prev.filter((i) => i !== item.name),
-                                    );
-                                  } else {
-                                    setCurrentUserPermissions((prev) =>
-                                      prev.filter((i) => i !== item.name),
-                                    );
-                                  }
-                                }}
+                              <TableCell
+                                component="td"
+                                scope="row"
+                                sx={{ fontSize: '16px' }}
                               >
-                                Remove
-                              </Button>
-                            </TableCell>
-                          </TableRow>
-                        ))}
+                                {item.name}{' '}
+                                {item.type === 'group' ? (
+                                  <span style={{ fontWeight: 600 }}>
+                                    {' '}
+                                    (Group)
+                                  </span>
+                                ) : (
+                                  <></>
+                                )}
+                              </TableCell>
+                              <TableCell align="right">
+                                <Button
+                                  variant="text"
+                                  color="error"
+                                  size="small"
+                                  sx={{ fontWeight: '600', fontSize: '14px' }}
+                                  onClick={() => {
+                                    setCurrentItems((prev) =>
+                                      prev.filter((i) => i.name !== item.name),
+                                    );
+                                    if (item.type === 'group') {
+                                      setCurrentGroupPermissions((prev) =>
+                                        prev.filter((i) => i !== item.name),
+                                      );
+                                    } else {
+                                      setCurrentUserPermissions((prev) =>
+                                        prev.filter((i) => i !== item.name),
+                                      );
+                                    }
+                                  }}
+                                >
+                                  Remove
+                                </Button>
+                              </TableCell>
+                            </TableRow>
+                          ))}
                       </TableBody>
                       <TableFooter>
                         <TableRow>

diff --git a/ui/src/components/navigation/navigation.test.tsx b/ui/src/components/navigation/navigation.test.tsx
@@ -15,7 +15,13 @@ import { Navigation } from '..';
 import { currentUser as defaultUser } from '../../store';
 import { theme } from '../../theme/theme';
 describe('Navigation', () => {
-  const queryClient = new QueryClient();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
   const mock = new MockAdapter(axios);
   beforeAll(() => {
     mock.reset();

diff --git a/ui/src/components/notification-bar/notification-bar.tsx b/ui/src/components/notification-bar/notification-bar.tsx
@@ -23,13 +23,9 @@ export const NotificationBar = ({
 }: NotificationBarProps): React.ReactElement => {
   return (
     <div className="alert-wrapper">
-      {message ? (
-        <Alert id="alert-notification" severity={severity} onClose={onClose}>
-          {message}
-        </Alert>
-      ) : (
-        <></>
-      )}
+      <Alert id="alert-notification" severity={severity} onClose={onClose}>
+        {message}
+      </Alert>
     </div>
   );
 };

diff --git a/ui/src/components/status-chip/status-chip.test.tsx b/ui/src/components/status-chip/status-chip.test.tsx
@@ -1,6 +1,7 @@
 import { apps } from '@src/data/api';
 import '@testing-library/jest-dom';
 import { render, waitFor } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
 import { RecoilRoot } from 'recoil';
 import { StatusChip } from '..';
 
@@ -82,7 +83,9 @@ describe('StatusChip', () => {
       '.MuiIconButton-root',
     ) as HTMLButtonElement;
     if (stopButton) {
-      stopButton.click();
+      act(() => {
+        stopButton.click();
+      });
     }
     waitFor(() => {
       const stopModal = baseElement.querySelector('.MuiDialog-root');

diff --git a/ui/src/pages/create-app/create-app.test.tsx b/ui/src/pages/create-app/create-app.test.tsx
@@ -8,7 +8,13 @@ import { RecoilRoot } from 'recoil';
 import { CreateApp } from './create-app';
 
 describe('CreateApp', () => {
-  const queryClient = new QueryClient();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
   const mock = new MockAdapter(axios);
   beforeAll(() => {
     mock.reset();

diff --git a/ui/src/pages/edit-app/edit-app.test.tsx b/ui/src/pages/edit-app/edit-app.test.tsx
@@ -8,7 +8,13 @@ import { RecoilRoot } from 'recoil';
 import { EditApp } from './edit-app';
 
 describe('EditApp', () => {
-  const queryClient = new QueryClient();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
   const mock = new MockAdapter(axios);
   beforeAll(() => {
     mock.reset();