test: bootstrap frontend Jest and strengthen view-only org inventory spec

frontend/jest.config.ts

@@ -0,0 +1,22 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  rootDir: 'src',
+  testEnvironment: 'jest-environment-jsdom',
+  testMatch: ['**/*.test.tsx', '**/*.test.ts'],
+  transform: {
+    '^.+\\.(t|j)sx?$': [
+      'ts-jest',
+      {
+        tsconfig: '<rootDir>/../tsconfig.jest.json',
+      },
+    ],
+  },
+  setupFilesAfterEnv: ['<rootDir>/../jest.setup.ts'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/$1',
+    'config/api': '<rootDir>/__mocks__/config/api.ts',
+  },
+};
+
+export default config;

frontend/jest.setup.ts

@@ -0,0 +1,9 @@
+import '@testing-library/jest-dom';
+import { configure } from '@testing-library/react';
+
+configure({ asyncUtilTimeout: 5000 });
+jest.setTimeout(15000);
+
+afterEach(() => {
+  window.sessionStorage.clear();
+});

frontend/package.json

@@ -19,6 +19,7 @@
     "preview": "vite preview",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "test": "jest --config jest.config.ts",
     "clean": "rm -rf build node_modules/.vite"
   },
   "devDependencies": {
@@ -36,6 +37,9 @@
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^30.4.1",
+    "ts-jest": "^29.4.5",
     "typescript": "^5.3.3",
     "vite": "^5.0.8"
   }

frontend/src/__mocks__/config/api.ts

@@ -0,0 +1 @@
+export const API_URL = 'http://localhost:3001';

frontend/src/pages/Inventory.editor-mode.test.tsx

@@ -12,10 +12,11 @@ const mockCreateOrgItem = jest.fn();
 const mockUpdateOrgItem = jest.fn();
 const mockSearchItems = jest.fn();
 const mockGetUserPermissions = jest.fn();
+const mockGetCategories = jest.fn();
 
 jest.mock('../services/inventory.service', () => ({
   inventoryService: {
-    getCategories: jest.fn().mockResolvedValue([]),
+    getCategories: (...args: unknown[]) => mockGetCategories(...args),
     getUserOrganizations: (...args: unknown[]) =>
       mockGetUserOrganizations(...args),
     getInventory: (...args: unknown[]) => mockGetInventory(...args),
@@ -65,6 +66,7 @@ const mockItem = {
 describe('Inventory editor mode inline controls', () => {
   beforeEach(() => {
     jest.resetAllMocks();
+    mockGetCategories.mockResolvedValue([]);
     mockGetInventory.mockResolvedValue({
       items: [mockItem],
       total: 1,
@@ -385,6 +387,11 @@ describe('Inventory editor mode inline controls', () => {
   });
 
   it('hides the add button for view-only org users but still shows org inventory', async () => {
+    const orgExclusiveItem = {
+      ...mockItem,
+      id: 'org-item-view',
+      itemName: 'Org Exclusive Item',
+    };
     mockGetUserOrganizations.mockResolvedValue([
       {
         id: 1,
@@ -395,6 +402,12 @@ describe('Inventory editor mode inline controls', () => {
       },
     ]);
     mockGetUserPermissions.mockResolvedValue(['can_view_org_inventory']);
+    mockGetOrgInventory.mockResolvedValue({
+      items: [orgExclusiveItem],
+      total: 1,
+      limit: 25,
+      offset: 0,
+    });
 
     render(
       <MemoryRouter initialEntries={['/inventory']}>
@@ -411,9 +424,10 @@ describe('Inventory editor mode inline controls', () => {
     fireEvent.click(await screen.findByText('Test Org'));
 
     await waitFor(() =>
-      expect(screen.getByText('Test Org')).toBeInTheDocument(),
+      expect(screen.getByText('Org Exclusive Item')).toBeInTheDocument(),
     );
 
+    expect(mockGetOrgInventory).toHaveBeenCalledWith(42, expect.any(Object));
     expect(
       screen.queryByRole('button', { name: 'Add org item' }),
     ).not.toBeInTheDocument();

frontend/tsconfig.jest.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": false,
+    "noEmit": false,
+    "jsx": "react-jsx"
+  }
+}