fix test

apps/app/src/client/components/NotAvailableForReadOnlyUser.spec.tsx

@@ -1,28 +1,48 @@
+import type { ReactNode } from 'react';
+
 import { render, screen } from '@testing-library/react';
+import { Provider } from 'jotai';
+import { useHydrateAtoms } from 'jotai/utils';
 import {
   describe, it, expect, vi,
 } from 'vitest';
 
+import { isRomUserAllowedToCommentAtom } from '~/states/server-configurations';
+
 import { NotAvailableIfReadOnlyUserNotAllowedToComment } from './NotAvailableForReadOnlyUser';
 
-const useIsReadOnlyUser = vi.hoisted(() => vi.fn().mockReturnValue({ data: true }));
-const useIsRomUserAllowedToComment = vi.hoisted(() => vi.fn().mockReturnValue({ data: true }));
+const useIsReadOnlyUser = vi.hoisted(() => vi.fn().mockReturnValue(true));
 
-vi.mock('~/stores-universal/context', () => ({
+vi.mock('~/states/context', () => ({
   useIsReadOnlyUser,
-  useIsRomUserAllowedToComment,
 }));
 
+vi.mock('react-disable', () => ({
+  Disable: ({ children, disabled }: { children: ReactNode; disabled: boolean }) => (
+    <div aria-hidden={disabled ? 'true' : undefined}>
+      {children}
+    </div>
+  ),
+}));
+
+const HydrateAtoms = ({ children, initialValues }: { children: ReactNode; initialValues: Array<[typeof isRomUserAllowedToCommentAtom, boolean]> }) => {
+  useHydrateAtoms(initialValues);
+  return <>{children}</>;
+};
+
 describe('NotAvailableForReadOnlyUser.tsx', () => {
 
   it('renders NotAvailable component as enable when user is read-only and comments by rom users is allowed', async() => {
-    useIsReadOnlyUser.mockReturnValue({ data: true });
-    useIsRomUserAllowedToComment.mockReturnValue({ data: true });
+    useIsReadOnlyUser.mockReturnValue(true);
 
     render(
-      <NotAvailableIfReadOnlyUserNotAllowedToComment>
-        <div data-testid="test-child">Test Child</div>
-      </NotAvailableIfReadOnlyUserNotAllowedToComment>,
+      <Provider>
+        <HydrateAtoms initialValues={[[isRomUserAllowedToCommentAtom, true]]}>
+          <NotAvailableIfReadOnlyUserNotAllowedToComment>
+            <div data-testid="test-child">Test Child</div>
+          </NotAvailableIfReadOnlyUserNotAllowedToComment>
+        </HydrateAtoms>
+      </Provider>,
     );
 
     // when
@@ -34,13 +54,16 @@ describe('NotAvailableForReadOnlyUser.tsx', () => {
   });
 
   it('renders NotAvailable component as disable when user is read-only and comments by rom users is not allowed', async() => {
-    useIsReadOnlyUser.mockReturnValue({ data: true });
-    useIsRomUserAllowedToComment.mockReturnValue({ data: false });
+    useIsReadOnlyUser.mockReturnValue(true);
 
     render(
-      <NotAvailableIfReadOnlyUserNotAllowedToComment>
-        <div data-testid="test-child">Test Child</div>
-      </NotAvailableIfReadOnlyUserNotAllowedToComment>,
+      <Provider>
+        <HydrateAtoms initialValues={[[isRomUserAllowedToCommentAtom, false]]}>
+          <NotAvailableIfReadOnlyUserNotAllowedToComment>
+            <div data-testid="test-child">Test Child</div>
+          </NotAvailableIfReadOnlyUserNotAllowedToComment>
+        </HydrateAtoms>
+      </Provider>,
     );
 
     // when
@@ -52,13 +75,16 @@ describe('NotAvailableForReadOnlyUser.tsx', () => {
   });
 
   it('renders NotAvailable component as enable when user is not read-only and comments by rom users is allowed', async() => {
-    useIsReadOnlyUser.mockReturnValue({ data: false });
-    useIsRomUserAllowedToComment.mockReturnValue({ data: true });
+    useIsReadOnlyUser.mockReturnValue(false);
 
     render(
-      <NotAvailableIfReadOnlyUserNotAllowedToComment>
-        <div data-testid="test-child">Test Child</div>
-      </NotAvailableIfReadOnlyUserNotAllowedToComment>,
+      <Provider>
+        <HydrateAtoms initialValues={[[isRomUserAllowedToCommentAtom, true]]}>
+          <NotAvailableIfReadOnlyUserNotAllowedToComment>
+            <div data-testid="test-child">Test Child</div>
+          </NotAvailableIfReadOnlyUserNotAllowedToComment>
+        </HydrateAtoms>
+      </Provider>,
     );
 
     // when
@@ -70,13 +96,16 @@ describe('NotAvailableForReadOnlyUser.tsx', () => {
   });
 
   it('renders NotAvailable component as enable when user is not read-only and comments by rom users is not allowed', async() => {
-    useIsReadOnlyUser.mockReturnValue({ data: false });
-    useIsRomUserAllowedToComment.mockReturnValue({ data: false });
+    useIsReadOnlyUser.mockReturnValue(false);
 
     render(
-      <NotAvailableIfReadOnlyUserNotAllowedToComment>
-        <div data-testid="test-child">Test Child</div>
-      </NotAvailableIfReadOnlyUserNotAllowedToComment>,
+      <Provider>
+        <HydrateAtoms initialValues={[[isRomUserAllowedToCommentAtom, false]]}>
+          <NotAvailableIfReadOnlyUserNotAllowedToComment>
+            <div data-testid="test-child">Test Child</div>
+          </NotAvailableIfReadOnlyUserNotAllowedToComment>
+        </HydrateAtoms>
+      </Provider>,
     );
 
     // when