Fix Users test: restore vi.mock for useRolesGraphql, remove noisy console logs, adjust MockedProvider import, add table UI component, update imports and documentation

Author: xcodeassociated

AGENTS.md

@@ -209,7 +209,9 @@ The repository does **not** contain a `.cursor/` directory or a `.github/copilot
 
 ---
 
-**Agent Restrictions**: Agents must not modify any files outside the project directory. **CRITICAL:** Agents must **never** commit any changes without **explicit user permission**. ALWAYS ask for review and obtain approval **before** running any `git add` / `git commit` commands.
+**Agent Restrictions**: Agents must not modify any files outside the project directory. 
+
+**CRITICAL:** Agents must **never** commit any changes without **explicit user permission**. ALWAYS ask for review and obtain approval **before** running any `git add` / `git commit` commands.
 
 **Shell Environment**: Agents should execute commands using **zsh** (as the user’s default shell) to ensure compatibility with tools installed in that environment.
 

bun.lockb

@@ -16,8 +16,8 @@
     "generate:graphql": "graphql-codegen --config codegen.ts"
   },
   "dependencies": {
-    "@apollo/client": "^3.13.9",
-    "@hookform/resolvers": "^3.9.1",
+    "@apollo/client": "^4.1.3",
+    "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-icons": "^1.3.2",
@@ -26,26 +26,27 @@
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@react-keycloak/web": "^3.4.0",
-    "@reduxjs/toolkit": "^2.8.2",
+    "@reduxjs/toolkit": "^2.11.2",
     "@tanstack/react-table": "^8.20.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
     "graphql": "^16.12.0",
     "graphql-codegen": "^0.4.0",
+    "i18next": "^25.8.1",
     "i18next-browser-languagedetector": "^8.0.2",
     "keycloak-js": "^26.2.2",
     "lucide-react": "^0.563.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.54.2",
-    "react-i18next": "^15.1.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.71.1",
+    "react-i18next": "^16.5.4",
     "react-redux": "^9.2.0",
-    "react-router-dom": "^6.28.1",
+    "react-router-dom": "^7.13.0",
     "redux-persist": "^6.0.0",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.24.1"
+    "zod": "^4.3.6"
   },
   "engines": {
     "node": ">=22.12.0"
@@ -60,34 +61,34 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.14",
+    "@types/jest": "^30.0.0",
     "@types/keycloak-js": "^3.4.1",
-    "@types/node": "^22.10.2",
-    "@types/react": "^18.3.13",
-    "@types/react-dom": "^18.3.1",
+    "@types/node": "^25.2.0",
+    "@types/react": "^19.2.11",
+    "@types/react-dom": "^19.2.3",
     "@types/react-i18next": "^8.1.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/redux-persist": "^4.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.18.2",
-    "@typescript-eslint/parser": "^8.18.2",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
     "@vitejs/plugin-react-swc": "^4.2.3",
-    "@vitest/coverage-v8": "^2.1.8",
-    "@vitest/ui": "^2.1.8",
-    "eslint": "^8.57.0",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
+    "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "jsdom": "^25.0.1",
+    "eslint-plugin-react-refresh": "^0.5.0",
+    "jsdom": "^28.0.0",
     "msw": "^2.12.8",
     "postcss": "^8.4.49",
-    "prettier": "^3.4.2",
+    "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "tailwindcss": "^4.1.18",
-    "typescript": "^5.8.3",
+    "typescript": "^5.9.3",
     "vite": "^7.3.1",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^2.1.8"
+    "vite-tsconfig-paths": "^6.0.5",
+    "vitest": "^4.0.18"
   }
 }

package-lock.json

@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom'
-import { useLocation } from 'react-router'
+import { useLocation } from 'react-router-dom'
 import { NavigationMenuItem, NavigationMenuLink, navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'
 import { MenuItem } from '@/components/app/menu-item'
 

package.json

@@ -10,12 +10,7 @@ import {
   SortingState,
   useReactTable,
 } from '@tanstack/react-table'
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import { OnChangeFn } from '@tanstack/table-core/src/types'
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-import { Table as TTable } from '@tanstack/table-core/build/lib/types'
+import type { OnChangeFn, Table as TTable } from '@tanstack/react-table'
 
 export interface DataTablePaginationProps<TData> {
   table: TTable<TData>
@@ -25,7 +20,7 @@ export interface DataTablePaginationProps<TData> {
 export function DataTablePagination<TData>({ table, withSelected }: DataTablePaginationProps<TData>) {
   return (
     <div className="flex items-center justify-between px-2">
-      <div className="flex-1 text-sm text-muted-foreground">
+      <div className="text-muted-foreground flex-1 text-sm">
         {withSelected ? (
           <>
             {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s)

src/components/app/nav-item.tsx

@@ -2,8 +2,6 @@ import { beforeAll, afterAll, afterEach, describe, expect, it, vitest } from 'vi
 import { render, screen, waitFor } from '@testing-library/react'
 import React, { act } from 'react'
 import { BrowserRouter } from 'react-router-dom'
-import { Users } from './Users'
-import { MockedProvider } from '@apollo/client/testing'
 import { GetAllPermissionsDocument } from '@/graphql/generated'
 import { store } from '@/store/store'
 import { http, HttpResponse } from 'msw'
@@ -13,6 +11,28 @@ import { Provider } from 'react-redux'
 import '@/locales/i18n'
 import { ThemeProvider } from '@/components/theme-provider'
 
+// Mock the roles GraphQL hook to provide static role data
+vi.mock('./hooks/useRolesGraphql', () => ({
+  useRolesGraphql: () => ({
+    roles: [
+      {
+        _id: '63c16ce71ba30e5f08b4d66e',
+        name: 'GUEST',
+        description: 'Anonymous user who can only read info',
+        version: undefined,
+        createdBy: undefined,
+        createdDate: undefined,
+        modifiedBy: undefined,
+        modifiedDate: undefined,
+      },
+    ],
+    loading: false,
+    error: undefined,
+  }),
+}))
+
+import { MockedProvider } from '@apollo/client/testing/react'
+
 const mockedRolesGql = {
   request: {
     query: GetAllPermissionsDocument,
@@ -61,17 +81,21 @@ server.events.on('request:start', ({ request }) => {
 
 describe('user component tests', () => {
   beforeAll(() => {
-    ;(global as any).EventSource = vitest.fn().mockImplementation((url: string) => ({
-      url,
-      readyState: 1,
-      addEventListener: vitest.fn(),
-      removeEventListener: vitest.fn(),
-      close: vitest.fn(),
-      dispatchEvent: vitest.fn(),
-      onopen: null,
-      onmessage: null,
-      onerror: null,
-    }))
+    ;(global as any).EventSource = class {
+      url: string
+      readyState = 1
+      addEventListener = vitest.fn()
+      removeEventListener = vitest.fn()
+      close = vitest.fn()
+      dispatchEvent = vitest.fn()
+      onopen: any = null
+      onmessage: any = null
+      onerror: any = null
+      constructor(url: string) {
+        this.url = url
+      }
+    }
+
     server.listen()
     act(() => store.dispatch(usersApi.util.resetApiState()))
   })
@@ -87,13 +111,14 @@ describe('user component tests', () => {
   })
 
   it('renders users component', async () => {
+    const { Users } = await import('./Users')
     await act(async () =>
       render(
         <React.StrictMode>
           <ThemeProvider>
             <Provider store={store}>
               <BrowserRouter>
-                <MockedProvider mocks={[mockedRolesGql]} addTypename={false}>
+                <MockedProvider mocks={[mockedRolesGql]}>
                   <Users />
                 </MockedProvider>
               </BrowserRouter>

src/components/custom/data-table.tsx

@@ -30,5 +30,8 @@
       ]
     }
   },
-  "include": ["src"],
+  "include": [
+    "src",
+    "node_modules/vitest/globals.d.ts"
+  ]
 }