Add tests for AuthContext, ModalContext and ThemeContext

app/src/contexts/ModalContext.test.tsx

@@ -0,0 +1,658 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import React from 'react';
+import { ModalProvider, useModalContext } from './ModalContext';
+
+// Helper wrapper component for testing
+const createWrapper = () => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <ModalProvider>{children}</ModalProvider>
+  );
+  Wrapper.displayName = 'ModalProviderTestWrapper';
+  return Wrapper;
+};
+
+describe('ModalContext', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('ModalProvider', () => {
+    it('provides modal context with initial false values', () => {
+      const wrapper = createWrapper();
+      const { result } = renderHook(() => useModalContext(), { wrapper });
+
+      expect(result.current.newFileModalVisible).toBe(false);
+      expect(result.current.deleteFileModalVisible).toBe(false);
+      expect(result.current.commitMessageModalVisible).toBe(false);
+      expect(result.current.settingsModalVisible).toBe(false);
+      expect(result.current.switchWorkspaceModalVisible).toBe(false);
+      expect(result.current.createWorkspaceModalVisible).toBe(false);
+    });
+
+    it('provides all setter functions', () => {
+      const wrapper = createWrapper();
+      const { result } = renderHook(() => useModalContext(), { wrapper });
+
+      expect(typeof result.current.setNewFileModalVisible).toBe('function');
+      expect(typeof result.current.setDeleteFileModalVisible).toBe('function');
+      expect(typeof result.current.setCommitMessageModalVisible).toBe(
+        'function'
+      );
+      expect(typeof result.current.setSettingsModalVisible).toBe('function');
+      expect(typeof result.current.setSwitchWorkspaceModalVisible).toBe(
+        'function'
+      );
+      expect(typeof result.current.setCreateWorkspaceModalVisible).toBe(
+        'function'
+      );
+    });
+
+    it('provides complete context interface', () => {
+      const wrapper = createWrapper();
+      const { result } = renderHook(() => useModalContext(), { wrapper });
+
+      const expectedKeys = [
+        'newFileModalVisible',
+        'setNewFileModalVisible',
+        'deleteFileModalVisible',
+        'setDeleteFileModalVisible',
+        'commitMessageModalVisible',
+        'setCommitMessageModalVisible',
+        'settingsModalVisible',
+        'setSettingsModalVisible',
+        'switchWorkspaceModalVisible',
+        'setSwitchWorkspaceModalVisible',
+        'createWorkspaceModalVisible',
+        'setCreateWorkspaceModalVisible',
+      ];
+
+      expectedKeys.forEach((key) => {
+        expect(key in result.current).toBe(true);
+      });
+    });
+  });
+
+  describe('useModalContext hook', () => {
+    it('throws error when used outside ModalProvider', () => {
+      // Suppress console.error for this test since we expect an error
+      const consoleSpy = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => {});
+
+      expect(() => {
+        renderHook(() => useModalContext());
+      }).toThrow('useModalContext must be used within a ModalProvider');
+
+      consoleSpy.mockRestore();
+    });
+
+    it('returns modal context when used within provider', () => {
+      const wrapper = createWrapper();
+      const { result } = renderHook(() => useModalContext(), { wrapper });
+
+      expect(result.current).toBeDefined();
+      expect(typeof result.current).toBe('object');
+    });
+
+    it('maintains function stability across re-renders', () => {
+      const wrapper = createWrapper();
+      const { result, rerender } = renderHook(() => useModalContext(), {
+        wrapper,
+      });
+
+      const initialSetters = {
+        setNewFileModalVisible: result.current.setNewFileModalVisible,
+        setDeleteFileModalVisible: result.current.setDeleteFileModalVisible,
+        setCommitMessageModalVisible:
+          result.current.setCommitMessageModalVisible,
+        setSettingsModalVisible: result.current.setSettingsModalVisible,
+        setSwitchWorkspaceModalVisible:
+          result.current.setSwitchWorkspaceModalVisible,
+        setCreateWorkspaceModalVisible:
+          result.current.setCreateWorkspaceModalVisible,
+      };
+
+      rerender();
+
+      expect(result.current.setNewFileModalVisible).toBe(
+        initialSetters.setNewFileModalVisible
+      );
+      expect(result.current.setDeleteFileModalVisible).toBe(
+        initialSetters.setDeleteFileModalVisible
+      );
+      expect(result.current.setCommitMessageModalVisible).toBe(
+        initialSetters.setCommitMessageModalVisible
+      );
+      expect(result.current.setSettingsModalVisible).toBe(
+        initialSetters.setSettingsModalVisible
+      );
+      expect(result.current.setSwitchWorkspaceModalVisible).toBe(
+        initialSetters.setSwitchWorkspaceModalVisible
+      );
+      expect(result.current.setCreateWorkspaceModalVisible).toBe(
+        initialSetters.setCreateWorkspaceModalVisible
+      );
+    });
+  });
+
+  describe('modal state management', () => {
+    describe('newFileModalVisible', () => {
+      it('can be set to true', () => {
+        const wrapper = createWrapper();
+        const { result } = renderHook(() => useModalContext(), { wrapper });
+
+        act(() => {
+          result.current.setNewFileModalVisible(true);
+        });
+
+        expect(result.current.newFileModalVisible).toBe(true);
+      });
+
+      it('can be toggled back to false', () => {
+        const wrapper = createWrapper();
+        const { result } = renderHook(() => useModalContext(), { wrapper });
+
+        act(() => {
+          result.current.setNewFileModalVisible(true);
+        });
+
+        act(() => {
+          result.current.setNewFileModalVisible(false);
+        });
+
+        expect(result.current.newFileModalVisible).toBe(false);
+      });
+
+      it('can be toggled multiple times', () => {
+        const wrapper = createWrapper();
+        const { result } = renderHook(() => useModalContext(), { wrapper });
+
+        act(() => {
+          result.current.setNewFileModalVisible(true);
+        });
+        expect(result.current.newFileModalVisible).toBe(true);
+
+        act(() => {
+          result.current.setNewFileModalVisible(false);
+        });
+        expect(result.current.newFileModalVisible).toBe(false);
+
+        act(() => {
+          result.current.setNewFileModalVisible(true);
+        });
+        expect(result.current.newFileModalVisible).toBe(true);
+      });
+    });
+
+    describe('deleteFileModalVisible', () => {
+      it('can be set to true', () => {
+        const wrapper = createWrapper();
+        const { result } = renderHook(() => useModalContext(), { wrapper });
+
+        act(() => {
+          result.current.setDeleteFileModalVisible(true);
+        });
+
+        expect(result.current.deleteFileModalVisible).toBe(true);
+      });
+
+      it('can be toggled back to false', () => {
+        const wrapper = createWrapper();
+        const { result } = renderHook(() => useModalContext(), { wrapper });
+
+        act(() => {
+          result.current.setDeleteFileModalVisible(true);
+        });
+
+        act(() => {
+          result.current.setDeleteFileModalVisible(false);
+        });
+
+        expect(result.current.deleteFileModalVisible).toBe(false);
+      });
+    });
+
+    describe('commitMessageModalVisible', () => {
+      it('can be set to true', () => {
+        const wrapper = createWrapper();
+        const { result } = renderHook(() => useModalContext(), { wrapper });
+
+        act(() => {
+          result.current.setCommitMessageModalVisible(true);
+        });
+
+        expect(result.current.commitMessageModalVisible).toBe(true);
+      });
+
+      it('can be toggled back to false', () => {
+        const wrapper = createWrapper();
+        const { result } = renderHook(() => useModalContext(), { wrapper });
+
+        act(() => {
+          result.current.setCommitMessageModalVisible(true);
+        });
+
+        act(() => {
+          result.current.setCommitMessageModalVisible(false);
+        });
+
+        expect(result.current.commitMessageModalVisible).toBe(false);
+      });
+    });
+
+    describe('settingsModalVisible', () => {
+      it('can be set to true', () => {
+        const wrapper = createWrapper();
+        const { result } = renderHook(() => useModalContext(), { wrapper });
+
+        act(() => {
+          result.current.setSettingsModalVisible(true);
+        });
+
+        expect(result.current.settingsModalVisible).toBe(true);
+      });
+
+      it('can be toggled back to false', () => {
+        const wrapper = createWrapper();
+        const { result } = renderHook(() => useModalContext(), { wrapper });
+
+        act(() => {
+          result.current.setSettingsModalVisible(true);
+        });
+
+        act(() => {
+          result.current.setSettingsModalVisible(false);
+        });
+
+        expect(result.current.settingsModalVisible).toBe(false);
+      });
+    });
+
+    describe('switchWorkspaceModalVisible', () => {
+      it('can be set to true', () => {
+        const wrapper = createWrapper();
+        const { result } = renderHook(() => useModalContext(), { wrapper });
+
+        act(() => {
+          result.current.setSwitchWorkspaceModalVisible(true);
+        });
+
+        expect(result.current.switchWorkspaceModalVisible).toBe(true);
+      });
+
+      it('can be toggled back to false', () => {
+        const wrapper = createWrapper();
+        const { result } = renderHook(() => useModalContext(), { wrapper });
+
+        act(() => {
+          result.current.setSwitchWorkspaceModalVisible(true);
+        });
+
+        act(() => {
+          result.current.setSwitchWorkspaceModalVisible(false);
+        });
+
+        expect(result.current.switchWorkspaceModalVisible).toBe(false);
+      });
+    });
+
+    describe('createWorkspaceModalVisible', () => {
+      it('can be set to true', () => {
+        const wrapper = createWrapper();
+        const { result } = renderHook(() => useModalContext(), { wrapper });
+
+        act(() => {
+          result.current.setCreateWorkspaceModalVisible(true);
+        });
+
+        expect(result.current.createWorkspaceModalVisible).toBe(true);
+      });
+
+      it('can be toggled back to false', () => {
+        const wrapper = createWrapper();
+        const { result } = renderHook(() => useModalContext(), { wrapper });
+
+        act(() => {
+          result.current.setCreateWorkspaceModalVisible(true);
+        });
+
+        act(() => {
+          result.current.setCreateWorkspaceModalVisible(false);
+        });
+
+        expect(result.current.createWorkspaceModalVisible).toBe(false);
+      });
+    });
+  });
+
+  describe('independent modal state', () => {
+    it('each modal state is independent', () => {
+      const wrapper = createWrapper();
+      const { result } = renderHook(() => useModalContext(), { wrapper });
+
+      // Set multiple modals to true
+      act(() => {
+        result.current.setNewFileModalVisible(true);
+        result.current.setDeleteFileModalVisible(true);
+        result.current.setSettingsModalVisible(true);
+      });
+
+      expect(result.current.newFileModalVisible).toBe(true);
+      expect(result.current.deleteFileModalVisible).toBe(true);
+      expect(result.current.settingsModalVisible).toBe(true);
+      expect(result.current.commitMessageModalVisible).toBe(false);
+      expect(result.current.switchWorkspaceModalVisible).toBe(false);
+      expect(result.current.createWorkspaceModalVisible).toBe(false);
+    });
+
+    it('setting one modal does not affect others', () => {
+      const wrapper = createWrapper();
+      const { result } = renderHook(() => useModalContext(), { wrapper });
+
+      // Set all modals to true first
+      act(() => {
+        result.current.setNewFileModalVisible(true);
+        result.current.setDeleteFileModalVisible(true);
+        result.current.setCommitMessageModalVisible(true);
+        result.current.setSettingsModalVisible(true);
+        result.current.setSwitchWorkspaceModalVisible(true);
+        result.current.setCreateWorkspaceModalVisible(true);
+      });
+
+      // Toggle one modal off
+      act(() => {
+        result.current.setNewFileModalVisible(false);
+      });
+
+      expect(result.current.newFileModalVisible).toBe(false);
+      expect(result.current.deleteFileModalVisible).toBe(true);
+      expect(result.current.commitMessageModalVisible).toBe(true);
+      expect(result.current.settingsModalVisible).toBe(true);
+      expect(result.current.switchWorkspaceModalVisible).toBe(true);
+      expect(result.current.createWorkspaceModalVisible).toBe(true);
+    });
+  });
+
+  describe('useState setter function behavior', () => {
+    it('handles function updater pattern', () => {
+      const wrapper = createWrapper();
+      const { result } = renderHook(() => useModalContext(), { wrapper });
+
+      // Test function updater for toggling
+      act(() => {
+        result.current.setNewFileModalVisible((prev) => !prev);
+      });
+
+      expect(result.current.newFileModalVisible).toBe(true);
+
+      act(() => {
+        result.current.setNewFileModalVisible((prev) => !prev);
+      });
+
+      expect(result.current.newFileModalVisible).toBe(false);
+    });
+
+    it('handles conditional updates with function updater', () => {
+      const wrapper = createWrapper();
+      const { result } = renderHook(() => useModalContext(), { wrapper });
+
+      // Set to true first
+      act(() => {
+        result.current.setSettingsModalVisible(true);
+      });
+
+      // Use function updater with condition
+      act(() => {
+        result.current.setSettingsModalVisible((prev) => (prev ? false : true));
+      });
+
+      expect(result.current.settingsModalVisible).toBe(false);
+    });
+
+    it('supports multiple rapid state updates', () => {
+      const wrapper = createWrapper();
+      const { result } = renderHook(() => useModalContext(), { wrapper });
+
+      act(() => {
+        result.current.setNewFileModalVisible(true);
+        result.current.setNewFileModalVisible(false);
+        result.current.setNewFileModalVisible(true);
+      });
+
+      expect(result.current.newFileModalVisible).toBe(true);
+    });
+  });
+
+  describe('provider nesting', () => {
+    it('inner provider creates independent context', () => {
+      const OuterWrapper = ({ children }: { children: React.ReactNode }) => (
+        <ModalProvider>{children}</ModalProvider>
+      );
+
+      const InnerWrapper = ({ children }: { children: React.ReactNode }) => (
+        <OuterWrapper>
+          <ModalProvider>{children}</ModalProvider>
+        </OuterWrapper>
+      );
+
+      const { result } = renderHook(() => useModalContext(), {
+        wrapper: InnerWrapper,
+      });
+
+      // Should work with nested providers (inner context takes precedence)
+      expect(result.current.newFileModalVisible).toBe(false);
+
+      act(() => {
+        result.current.setNewFileModalVisible(true);
+      });
+
+      expect(result.current.newFileModalVisible).toBe(true);
+    });
+  });
+
+  describe('context value structure', () => {
+    it('provides expected context interface', () => {
+      const wrapper = createWrapper();
+      const { result } = renderHook(() => useModalContext(), { wrapper });
+
+      const expectedBooleanValues = {
+        newFileModalVisible: false,
+        deleteFileModalVisible: false,
+        commitMessageModalVisible: false,
+        settingsModalVisible: false,
+        switchWorkspaceModalVisible: false,
+        createWorkspaceModalVisible: false,
+      };
+
+      // Check the boolean values
+      Object.entries(expectedBooleanValues).forEach(([key, value]) => {
+        expect(result.current[key as keyof typeof result.current]).toBe(value);
+      });
+
+      // Check the setter functions exist
+      expect(typeof result.current.setNewFileModalVisible).toBe('function');
+      expect(typeof result.current.setDeleteFileModalVisible).toBe('function');
+      expect(typeof result.current.setCommitMessageModalVisible).toBe(
+        'function'
+      );
+      expect(typeof result.current.setSettingsModalVisible).toBe('function');
+      expect(typeof result.current.setSwitchWorkspaceModalVisible).toBe(
+        'function'
+      );
+      expect(typeof result.current.setCreateWorkspaceModalVisible).toBe(
+        'function'
+      );
+    });
+
+    it('all boolean values have correct types', () => {
+      const wrapper = createWrapper();
+      const { result } = renderHook(() => useModalContext(), { wrapper });
+
+      expect(typeof result.current.newFileModalVisible).toBe('boolean');
+      expect(typeof result.current.deleteFileModalVisible).toBe('boolean');
+      expect(typeof result.current.commitMessageModalVisible).toBe('boolean');
+      expect(typeof result.current.settingsModalVisible).toBe('boolean');
+      expect(typeof result.current.switchWorkspaceModalVisible).toBe('boolean');
+      expect(typeof result.current.createWorkspaceModalVisible).toBe('boolean');
+    });
+
+    it('all setter functions have correct types', () => {
+      const wrapper = createWrapper();
+      const { result } = renderHook(() => useModalContext(), { wrapper });
+
+      expect(typeof result.current.setNewFileModalVisible).toBe('function');
+      expect(typeof result.current.setDeleteFileModalVisible).toBe('function');
+      expect(typeof result.current.setCommitMessageModalVisible).toBe(
+        'function'
+      );
+      expect(typeof result.current.setSettingsModalVisible).toBe('function');
+      expect(typeof result.current.setSwitchWorkspaceModalVisible).toBe(
+        'function'
+      );
+      expect(typeof result.current.setCreateWorkspaceModalVisible).toBe(
+        'function'
+      );
+    });
+  });
+
+  describe('performance considerations', () => {
+    it('does not cause unnecessary re-renders', () => {
+      const wrapper = createWrapper();
+      const { result, rerender } = renderHook(() => useModalContext(), {
+        wrapper,
+      });
+
+      const initialContext = result.current;
+
+      // Re-render without changing anything
+      rerender();
+
+      // All function references should be stable
+      expect(result.current.setNewFileModalVisible).toBe(
+        initialContext.setNewFileModalVisible
+      );
+      expect(result.current.setDeleteFileModalVisible).toBe(
+        initialContext.setDeleteFileModalVisible
+      );
+      expect(result.current.setCommitMessageModalVisible).toBe(
+        initialContext.setCommitMessageModalVisible
+      );
+      expect(result.current.setSettingsModalVisible).toBe(
+        initialContext.setSettingsModalVisible
+      );
+      expect(result.current.setSwitchWorkspaceModalVisible).toBe(
+        initialContext.setSwitchWorkspaceModalVisible
+      );
+      expect(result.current.setCreateWorkspaceModalVisible).toBe(
+        initialContext.setCreateWorkspaceModalVisible
+      );
+    });
+
+    it('maintains setter function stability after state changes', () => {
+      const wrapper = createWrapper();
+      const { result } = renderHook(() => useModalContext(), { wrapper });
+
+      const initialSetters = {
+        setNewFileModalVisible: result.current.setNewFileModalVisible,
+        setDeleteFileModalVisible: result.current.setDeleteFileModalVisible,
+      };
+
+      // Change some state
+      act(() => {
+        result.current.setNewFileModalVisible(true);
+        result.current.setDeleteFileModalVisible(true);
+      });
+
+      // Function references should still be the same
+      expect(result.current.setNewFileModalVisible).toBe(
+        initialSetters.setNewFileModalVisible
+      );
+      expect(result.current.setDeleteFileModalVisible).toBe(
+        initialSetters.setDeleteFileModalVisible
+      );
+    });
+  });
+
+  describe('real-world usage patterns', () => {
+    it('supports common modal workflow patterns', () => {
+      const wrapper = createWrapper();
+      const { result } = renderHook(() => useModalContext(), { wrapper });
+
+      // Typical workflow: open modal, perform action, close modal
+      act(() => {
+        result.current.setNewFileModalVisible(true);
+      });
+
+      expect(result.current.newFileModalVisible).toBe(true);
+
+      // User performs action (file creation), then modal closes
+      act(() => {
+        result.current.setNewFileModalVisible(false);
+      });
+
+      expect(result.current.newFileModalVisible).toBe(false);
+    });
+
+    it('supports opening multiple modals in sequence', () => {
+      const wrapper = createWrapper();
+      const { result } = renderHook(() => useModalContext(), { wrapper });
+
+      // Open new file modal
+      act(() => {
+        result.current.setNewFileModalVisible(true);
+      });
+
+      // Close new file modal, open settings
+      act(() => {
+        result.current.setNewFileModalVisible(false);
+        result.current.setSettingsModalVisible(true);
+      });
+
+      expect(result.current.newFileModalVisible).toBe(false);
+      expect(result.current.settingsModalVisible).toBe(true);
+
+      // Close settings, open workspace creation
+      act(() => {
+        result.current.setSettingsModalVisible(false);
+        result.current.setCreateWorkspaceModalVisible(true);
+      });
+
+      expect(result.current.settingsModalVisible).toBe(false);
+      expect(result.current.createWorkspaceModalVisible).toBe(true);
+    });
+
+    it('supports modal state reset pattern', () => {
+      const wrapper = createWrapper();
+      const { result } = renderHook(() => useModalContext(), { wrapper });
+
+      // Open multiple modals
+      act(() => {
+        result.current.setNewFileModalVisible(true);
+        result.current.setSettingsModalVisible(true);
+        result.current.setDeleteFileModalVisible(true);
+      });
+
+      // Reset all to false (like on route change or logout)
+      act(() => {
+        result.current.setNewFileModalVisible(false);
+        result.current.setSettingsModalVisible(false);
+        result.current.setDeleteFileModalVisible(false);
+        result.current.setCommitMessageModalVisible(false);
+        result.current.setSwitchWorkspaceModalVisible(false);
+        result.current.setCreateWorkspaceModalVisible(false);
+      });
+
+      expect(result.current.newFileModalVisible).toBe(false);
+      expect(result.current.settingsModalVisible).toBe(false);
+      expect(result.current.deleteFileModalVisible).toBe(false);
+      expect(result.current.commitMessageModalVisible).toBe(false);
+      expect(result.current.switchWorkspaceModalVisible).toBe(false);
+      expect(result.current.createWorkspaceModalVisible).toBe(false);
+    });
+  });
+});