add unit tests

lib/VersionHistory/components/VersionCheckbox/VersionCheckbox.test.js

@@ -0,0 +1,39 @@
+import {
+  render,
+  screen,
+} from '@testing-library/react';
+
+import { VersionViewContext } from '../../VersionViewContext';
+import { VersionCheckbox } from './VersionCheckbox';
+
+const defaultProps = {
+  label: 'Test Label',
+  name: 'testName',
+};
+
+const renderVersionCheckbox = (props = {}, contextValue = {}) => {
+  return render(
+    <VersionViewContext.Provider value={contextValue}>
+      <VersionCheckbox
+        {...defaultProps}
+        {...props}
+      />
+    </VersionViewContext.Provider>,
+  );
+};
+
+describe('VersionCheckbox', () => {
+  it('renders with marked label when name is in context paths', () => {
+    renderVersionCheckbox({}, { paths: ['testName'] });
+
+    screen.debug();
+
+    expect(screen.getByText('Test Label').closest('mark')).toBeInTheDocument();
+  });
+
+  it('renders with normal label when name is not in context paths', () => {
+    renderVersionCheckbox({}, { paths: ['otherName'] });
+
+    expect(screen.getByText('Test Label').closest('mark')).not.toBeInTheDocument();
+  });
+});

lib/VersionHistory/components/VersionKeyValue/VersionKeyValue.test.js

@@ -0,0 +1,64 @@
+import {
+  render,
+  screen,
+} from '@testing-library/react';
+
+import { VersionViewContext } from '../../VersionViewContext';
+import { VersionKeyValue } from './VersionKeyValue';
+
+const defaultProps = {
+  label: 'Test Label',
+  value: 'Test Value',
+  name: 'testName',
+};
+
+const renderComponent = (props = {}, contextValue = {}) => {
+  return render(
+    <VersionViewContext.Provider value={contextValue}>
+      <VersionKeyValue
+        {...defaultProps}
+        {...props}
+      />
+    </VersionViewContext.Provider>,
+  );
+};
+
+describe('VersionKeyValue', () => {
+  it('should render label and value', () => {
+    renderComponent();
+
+    expect(screen.getByText('Test Label')).toBeInTheDocument();
+    expect(screen.getByText('Test Value')).toBeInTheDocument();
+  });
+
+  it('should render NoValue when value is not provided', () => {
+    renderComponent({ value: undefined });
+
+    expect(screen.getByText('Test Label')).toBeInTheDocument();
+    expect(screen.getByText('stripes-components.noValue.noValueSet')).toBeInTheDocument();
+  });
+
+  it('should highlight updated value', () => {
+    renderComponent({ name: 'testName' }, { paths: ['testName'] });
+
+    expect(screen.getByText('Test Value').closest('mark')).toBeInTheDocument();
+  });
+
+  it('should not highlight non-updated value', () => {
+    renderComponent({}, { paths: ['anotherName'] });
+
+    expect(screen.getByText('Test Value').closest('mark')).not.toBeInTheDocument();
+  });
+
+  it('should highlight updated value for multiple fields', () => {
+    renderComponent({ multiple: true }, { paths: ['testName[0]'] });
+
+    expect(screen.getByText('Test Value').closest('mark')).toBeInTheDocument();
+  });
+
+  it('should not highlight non-updated value for multiple fields', () => {
+    renderComponent({ multiple: true }, { paths: ['anotherName[0]'] });
+
+    expect(screen.getByText('Test Value').closest('mark')).not.toBeInTheDocument();
+  });
+});

lib/VersionHistory/components/VersionView/VersionView.test.js

@@ -0,0 +1,52 @@
+import {
+  render,
+  screen,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import VersionView from './VersionView';
+
+const defaultProps = {
+  children: <div>Version Content</div>,
+  id: 'test-id',
+  isLoading: false,
+  onClose: jest.fn(),
+  tags: [{ id: 'tag1' }, { id: 'tag2' }],
+  versionId: 'version1',
+  dismissible: true,
+};
+
+const renderComponent = (props = {}) => render(
+  <VersionView
+    {...defaultProps}
+    {...props}
+  />,
+);
+
+describe('VersionView', () => {
+  it('should render loading pane when isLoading is true', () => {
+    renderComponent({ isLoading: true });
+
+    expect(screen.queryByText('Version Content')).not.toBeInTheDocument();
+  });
+
+  it('should render children when version exists and is not loading', () => {
+    renderComponent();
+
+    expect(screen.getByText('Version Content')).toBeInTheDocument();
+  });
+
+  it('should render no version message when version does not exist', () => {
+    renderComponent({ versionId: null });
+
+    expect(screen.getByText('stripes-acq-components.versionHistory.noVersion')).toBeInTheDocument();
+  });
+
+  it('should call onClose when Pane onClose is triggered', async () => {
+    renderComponent();
+
+    await userEvent.click(screen.getByRole('button', { name: 'stripes-components.closeItem' }));
+
+    expect(defaultProps.onClose).toHaveBeenCalled();
+  });
+});

lib/hooks/useLineHoldings/useLineHoldings.js

@@ -11,9 +11,9 @@ export const useLineHoldings = (holdingIds) => {
 
   const query = useQuery(
     [namespace, holdingIds],
-    () => {
+    ({ signal }) => {
       return batchRequest(
-        ({ params: searchParams }) => ky.get(HOLDINGS_API, { searchParams }).json(),
+        ({ params: searchParams }) => ky.get(HOLDINGS_API, { searchParams, signal }).json(),
         holdingIds,
       );
     },

lib/hooks/useOrganization/useOrganization.test.js

@@ -11,8 +11,6 @@ import { VENDORS_API } from '../../constants';
 import { useOrganization } from './useOrganization';
 
 const queryClient = new QueryClient();
-
-// eslint-disable-next-line react/prop-types
 const wrapper = ({ children }) => (
   <QueryClientProvider client={queryClient}>
     {children}
@@ -42,6 +40,6 @@ describe('useOrganization', () => {
     await waitFor(() => !result.current.isLoading);
 
     expect(result.current.organization).toEqual(organization);
-    expect(mockGet).toHaveBeenCalledWith(`${VENDORS_API}/${organization.id}`);
+    expect(mockGet).toHaveBeenCalledWith(`${VENDORS_API}/${organization.id}`, expect.any(Object));
   });
 });

lib/hooks/useUsersBatch/useUsersBatch.js

@@ -25,9 +25,9 @@ export const useUsersBatch = (userIds, options = {}) => {
     isLoading,
   } = useQuery(
     [namespace, userIds],
-    async () => {
+    async ({ signal }) => {
       const response = await batchRequest(
-        ({ params: searchParams }) => ky.get(USERS_API, { searchParams }).json(),
+        ({ params: searchParams }) => ky.get(USERS_API, { searchParams, signal }).json(),
         userIds,
       );
 

lib/hooks/useUsersBatch/useUsersBatch.test.js

@@ -10,8 +10,6 @@ import { USERS_API } from '../../constants';
 import { useUsersBatch } from './useUsersBatch';
 
 const queryClient = new QueryClient();
-
-// eslint-disable-next-line react/prop-types
 const wrapper = ({ children }) => (
   <QueryClientProvider client={queryClient}>
     {children}
@@ -45,6 +43,7 @@ describe('useUsersBatch', () => {
       searchParams: expect.objectContaining({
         query: userIds.map(id => `id==${id}`).join(' or '),
       }),
+      signal: expect.any(AbortSignal),
     });
   });
 });