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.

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',

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(() => {

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();

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 () => {

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>

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();

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>
  );
 };

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');

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();

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();