mirror of
https://github.com/lordmathis/lemma.git
synced 2025-11-07 00:14:25 +00:00
Add tests for AuthContext, ModalContext and ThemeContext
This commit is contained in:
825
app/src/contexts/AuthContext.test.tsx
Normal file
825
app/src/contexts/AuthContext.test.tsx
Normal file
@@ -0,0 +1,825 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { renderHook, act, waitFor } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import { AuthProvider, useAuth } from './AuthContext';
|
||||
import { UserRole, type User } from '@/types/models';
|
||||
|
||||
// Set up mocks before imports are used
|
||||
vi.mock('@/api/auth', () => {
|
||||
return {
|
||||
login: vi.fn(),
|
||||
logout: vi.fn(),
|
||||
refreshToken: vi.fn(),
|
||||
getCurrentUser: vi.fn(),
|
||||
};
|
||||
});
|
||||
|
||||
vi.mock('@mantine/notifications', () => {
|
||||
return {
|
||||
notifications: {
|
||||
show: vi.fn(),
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
// Import the mocks after they've been defined
|
||||
import {
|
||||
login as mockLogin,
|
||||
logout as mockLogout,
|
||||
refreshToken as mockRefreshToken,
|
||||
getCurrentUser as mockGetCurrentUser,
|
||||
} from '@/api/auth';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
|
||||
// Get reference to the mocked notifications.show function
|
||||
const mockNotificationsShow = notifications.show as unknown as ReturnType<
|
||||
typeof vi.fn
|
||||
>;
|
||||
|
||||
// Mock user data
|
||||
const mockUser: User = {
|
||||
id: 1,
|
||||
email: 'test@example.com',
|
||||
displayName: 'Test User',
|
||||
role: UserRole.Editor,
|
||||
createdAt: '2024-01-01T00:00:00Z',
|
||||
lastWorkspaceId: 1,
|
||||
};
|
||||
|
||||
// Helper wrapper component for testing
|
||||
const createWrapper = () => {
|
||||
const Wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<AuthProvider>{children}</AuthProvider>
|
||||
);
|
||||
Wrapper.displayName = 'AuthProviderTestWrapper';
|
||||
return Wrapper;
|
||||
};
|
||||
|
||||
describe('AuthContext', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe('AuthProvider initialization', () => {
|
||||
it('initializes with null user and loading state', () => {
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Not authenticated')
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
expect(result.current.user).toBeNull();
|
||||
expect(result.current.loading).toBe(true);
|
||||
expect(result.current.initialized).toBe(false);
|
||||
});
|
||||
|
||||
it('provides all expected functions', () => {
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Not authenticated')
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
expect(typeof result.current.login).toBe('function');
|
||||
expect(typeof result.current.logout).toBe('function');
|
||||
expect(typeof result.current.refreshToken).toBe('function');
|
||||
expect(typeof result.current.refreshUser).toBe('function');
|
||||
});
|
||||
|
||||
it('loads current user on mount when authenticated', async () => {
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockResolvedValue(
|
||||
mockUser
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
|
||||
expect(result.current.user).toEqual(mockUser);
|
||||
expect(result.current.loading).toBe(false);
|
||||
expect(mockGetCurrentUser).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('handles initialization error gracefully', async () => {
|
||||
const consoleSpy = vi
|
||||
.spyOn(console, 'error')
|
||||
.mockImplementation(() => {});
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Network error')
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
|
||||
expect(result.current.user).toBeNull();
|
||||
expect(result.current.loading).toBe(false);
|
||||
expect(consoleSpy).toHaveBeenCalledWith(
|
||||
'Failed to initialize auth:',
|
||||
expect.any(Error)
|
||||
);
|
||||
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
describe('useAuth hook', () => {
|
||||
it('throws error when used outside AuthProvider', () => {
|
||||
const consoleSpy = vi
|
||||
.spyOn(console, 'error')
|
||||
.mockImplementation(() => {});
|
||||
|
||||
expect(() => {
|
||||
renderHook(() => useAuth());
|
||||
}).toThrow('useAuth must be used within an AuthProvider');
|
||||
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('returns auth context when used within provider', async () => {
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Not authenticated')
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
|
||||
expect(result.current).toBeDefined();
|
||||
expect(typeof result.current).toBe('object');
|
||||
});
|
||||
|
||||
it('maintains function stability across re-renders', async () => {
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Not authenticated')
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result, rerender } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
|
||||
const initialFunctions = {
|
||||
login: result.current.login,
|
||||
logout: result.current.logout,
|
||||
refreshToken: result.current.refreshToken,
|
||||
refreshUser: result.current.refreshUser,
|
||||
};
|
||||
|
||||
rerender();
|
||||
|
||||
expect(result.current.login).toBe(initialFunctions.login);
|
||||
expect(result.current.logout).toBe(initialFunctions.logout);
|
||||
expect(result.current.refreshToken).toBe(initialFunctions.refreshToken);
|
||||
expect(result.current.refreshUser).toBe(initialFunctions.refreshUser);
|
||||
});
|
||||
});
|
||||
|
||||
describe('login functionality', () => {
|
||||
beforeEach(() => {
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Not authenticated')
|
||||
);
|
||||
});
|
||||
|
||||
it('logs in user successfully', async () => {
|
||||
(mockLogin as ReturnType<typeof vi.fn>).mockResolvedValue(mockUser);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
|
||||
let loginResult: boolean | undefined;
|
||||
await act(async () => {
|
||||
loginResult = await result.current.login(
|
||||
'test@example.com',
|
||||
'password123'
|
||||
);
|
||||
});
|
||||
|
||||
expect(loginResult).toBe(true);
|
||||
expect(result.current.user).toEqual(mockUser);
|
||||
expect(mockLogin).toHaveBeenCalledWith('test@example.com', 'password123');
|
||||
expect(mockNotificationsShow).toHaveBeenCalledWith({
|
||||
title: 'Success',
|
||||
message: 'Logged in successfully',
|
||||
color: 'green',
|
||||
});
|
||||
});
|
||||
|
||||
it('handles login failure with error message', async () => {
|
||||
const consoleSpy = vi
|
||||
.spyOn(console, 'error')
|
||||
.mockImplementation(() => {});
|
||||
(mockLogin as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Invalid credentials')
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
|
||||
let loginResult: boolean | undefined;
|
||||
await act(async () => {
|
||||
loginResult = await result.current.login(
|
||||
'test@example.com',
|
||||
'wrongpassword'
|
||||
);
|
||||
});
|
||||
|
||||
expect(loginResult).toBe(false);
|
||||
expect(result.current.user).toBeNull();
|
||||
expect(consoleSpy).toHaveBeenCalledWith(
|
||||
'Login failed:',
|
||||
expect.any(Error)
|
||||
);
|
||||
expect(mockNotificationsShow).toHaveBeenCalledWith({
|
||||
title: 'Error',
|
||||
message: 'Invalid credentials',
|
||||
color: 'red',
|
||||
});
|
||||
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('handles login failure with generic message', async () => {
|
||||
const consoleSpy = vi
|
||||
.spyOn(console, 'error')
|
||||
.mockImplementation(() => {});
|
||||
(mockLogin as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
'Network error'
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
|
||||
let loginResult: boolean | undefined;
|
||||
await act(async () => {
|
||||
loginResult = await result.current.login(
|
||||
'test@example.com',
|
||||
'password123'
|
||||
);
|
||||
});
|
||||
|
||||
expect(loginResult).toBe(false);
|
||||
expect(mockNotificationsShow).toHaveBeenCalledWith({
|
||||
title: 'Error',
|
||||
message: 'Login failed',
|
||||
color: 'red',
|
||||
});
|
||||
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('handles multiple login attempts', async () => {
|
||||
(mockLogin as ReturnType<typeof vi.fn>)
|
||||
.mockRejectedValueOnce(new Error('First attempt failed'))
|
||||
.mockResolvedValueOnce(mockUser);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
|
||||
// First attempt fails
|
||||
let firstResult: boolean | undefined;
|
||||
await act(async () => {
|
||||
firstResult = await result.current.login(
|
||||
'test@example.com',
|
||||
'wrongpassword'
|
||||
);
|
||||
});
|
||||
|
||||
expect(firstResult).toBe(false);
|
||||
expect(result.current.user).toBeNull();
|
||||
|
||||
// Second attempt succeeds
|
||||
let secondResult: boolean | undefined;
|
||||
await act(async () => {
|
||||
secondResult = await result.current.login(
|
||||
'test@example.com',
|
||||
'correctpassword'
|
||||
);
|
||||
});
|
||||
|
||||
expect(secondResult).toBe(true);
|
||||
expect(result.current.user).toEqual(mockUser);
|
||||
});
|
||||
});
|
||||
|
||||
describe('logout functionality', () => {
|
||||
it('logs out user successfully', async () => {
|
||||
// Start with authenticated user
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockResolvedValue(
|
||||
mockUser
|
||||
);
|
||||
(mockLogout as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.user).toEqual(mockUser);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
await result.current.logout();
|
||||
});
|
||||
|
||||
expect(result.current.user).toBeNull();
|
||||
expect(mockLogout).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('clears user state even when logout API fails', async () => {
|
||||
const consoleSpy = vi
|
||||
.spyOn(console, 'error')
|
||||
.mockImplementation(() => {});
|
||||
// Start with authenticated user
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockResolvedValue(
|
||||
mockUser
|
||||
);
|
||||
(mockLogout as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Logout failed')
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.user).toEqual(mockUser);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
await result.current.logout();
|
||||
});
|
||||
|
||||
expect(result.current.user).toBeNull();
|
||||
expect(consoleSpy).toHaveBeenCalledWith(
|
||||
'Logout failed:',
|
||||
expect.any(Error)
|
||||
);
|
||||
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('handles logout when user is already null', async () => {
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Not authenticated')
|
||||
);
|
||||
(mockLogout as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
await result.current.logout();
|
||||
});
|
||||
|
||||
expect(result.current.user).toBeNull();
|
||||
expect(mockLogout).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('refreshToken functionality', () => {
|
||||
it('refreshes token successfully', async () => {
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Not authenticated')
|
||||
);
|
||||
(mockRefreshToken as ReturnType<typeof vi.fn>).mockResolvedValue(true);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
|
||||
let refreshResult: boolean | undefined;
|
||||
await act(async () => {
|
||||
refreshResult = await result.current.refreshToken();
|
||||
});
|
||||
|
||||
expect(refreshResult).toBe(true);
|
||||
expect(mockRefreshToken).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('handles token refresh failure and logs out user', async () => {
|
||||
const consoleSpy = vi
|
||||
.spyOn(console, 'error')
|
||||
.mockImplementation(() => {});
|
||||
// Start with authenticated user
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockResolvedValue(
|
||||
mockUser
|
||||
);
|
||||
(mockRefreshToken as ReturnType<typeof vi.fn>).mockResolvedValue(false);
|
||||
(mockLogout as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.user).toEqual(mockUser);
|
||||
});
|
||||
|
||||
let refreshResult: boolean | undefined;
|
||||
await act(async () => {
|
||||
refreshResult = await result.current.refreshToken();
|
||||
});
|
||||
|
||||
expect(refreshResult).toBe(false);
|
||||
expect(result.current.user).toBeNull();
|
||||
expect(mockLogout).toHaveBeenCalledTimes(1);
|
||||
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('handles token refresh API error and logs out user', async () => {
|
||||
const consoleSpy = vi
|
||||
.spyOn(console, 'error')
|
||||
.mockImplementation(() => {});
|
||||
// Start with authenticated user
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockResolvedValue(
|
||||
mockUser
|
||||
);
|
||||
(mockRefreshToken as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Refresh failed')
|
||||
);
|
||||
(mockLogout as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.user).toEqual(mockUser);
|
||||
});
|
||||
|
||||
let refreshResult: boolean | undefined;
|
||||
await act(async () => {
|
||||
refreshResult = await result.current.refreshToken();
|
||||
});
|
||||
|
||||
expect(refreshResult).toBe(false);
|
||||
expect(result.current.user).toBeNull();
|
||||
expect(consoleSpy).toHaveBeenCalledWith(
|
||||
'Token refresh failed:',
|
||||
expect.any(Error)
|
||||
);
|
||||
expect(mockLogout).toHaveBeenCalledTimes(1);
|
||||
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
describe('refreshUser functionality', () => {
|
||||
it('refreshes user data successfully', async () => {
|
||||
// Start with authenticated user
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockResolvedValue(
|
||||
mockUser
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.user).toEqual(mockUser);
|
||||
});
|
||||
|
||||
// Mock updated user data
|
||||
const updatedUser = { ...mockUser, displayName: 'Updated User' };
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockResolvedValue(
|
||||
updatedUser
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
await result.current.refreshUser();
|
||||
});
|
||||
|
||||
expect(result.current.user).toEqual(updatedUser);
|
||||
expect(mockGetCurrentUser).toHaveBeenCalledTimes(2); // Once on init, once on refresh
|
||||
});
|
||||
|
||||
it('handles user refresh failure', async () => {
|
||||
const consoleSpy = vi
|
||||
.spyOn(console, 'error')
|
||||
.mockImplementation(() => {});
|
||||
// Start with authenticated user
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockResolvedValue(
|
||||
mockUser
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.user).toEqual(mockUser);
|
||||
});
|
||||
|
||||
// Mock refresh failure
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Refresh user failed')
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
await result.current.refreshUser();
|
||||
});
|
||||
|
||||
// User should remain the same after failed refresh
|
||||
expect(result.current.user).toEqual(mockUser);
|
||||
expect(consoleSpy).toHaveBeenCalledWith(
|
||||
'Failed to refresh user data:',
|
||||
expect.any(Error)
|
||||
);
|
||||
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
describe('authentication state transitions', () => {
|
||||
it('transitions from unauthenticated to authenticated', async () => {
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Not authenticated')
|
||||
);
|
||||
(mockLogin as ReturnType<typeof vi.fn>).mockResolvedValue(mockUser);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
|
||||
expect(result.current.user).toBeNull();
|
||||
|
||||
await act(async () => {
|
||||
await result.current.login('test@example.com', 'password123');
|
||||
});
|
||||
|
||||
expect(result.current.user).toEqual(mockUser);
|
||||
});
|
||||
|
||||
it('transitions from authenticated to unauthenticated', async () => {
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockResolvedValue(
|
||||
mockUser
|
||||
);
|
||||
(mockLogout as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.user).toEqual(mockUser);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
await result.current.logout();
|
||||
});
|
||||
|
||||
expect(result.current.user).toBeNull();
|
||||
});
|
||||
|
||||
it('handles user data updates while authenticated', async () => {
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockResolvedValue(
|
||||
mockUser
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.user).toEqual(mockUser);
|
||||
});
|
||||
|
||||
// Simulate user profile update
|
||||
const updatedUser = { ...mockUser, displayName: 'Updated Name' };
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockResolvedValue(
|
||||
updatedUser
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
await result.current.refreshUser();
|
||||
});
|
||||
|
||||
expect(result.current.user).toEqual(updatedUser);
|
||||
});
|
||||
});
|
||||
|
||||
describe('context value structure', () => {
|
||||
it('provides expected context interface', async () => {
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Not authenticated')
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
|
||||
// Check boolean and object values
|
||||
expect(result.current.user).toBeNull();
|
||||
expect(result.current.loading).toBe(false);
|
||||
expect(result.current.initialized).toBe(true);
|
||||
|
||||
// Check function types
|
||||
expect(typeof result.current.login).toBe('function');
|
||||
expect(typeof result.current.logout).toBe('function');
|
||||
expect(typeof result.current.refreshToken).toBe('function');
|
||||
expect(typeof result.current.refreshUser).toBe('function');
|
||||
});
|
||||
|
||||
it('provides correct context when authenticated', async () => {
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockResolvedValue(
|
||||
mockUser
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
|
||||
// Check boolean and object values
|
||||
expect(result.current.user).toEqual(mockUser);
|
||||
expect(result.current.loading).toBe(false);
|
||||
expect(result.current.initialized).toBe(true);
|
||||
|
||||
// Check function types
|
||||
expect(typeof result.current.login).toBe('function');
|
||||
expect(typeof result.current.logout).toBe('function');
|
||||
expect(typeof result.current.refreshToken).toBe('function');
|
||||
expect(typeof result.current.refreshUser).toBe('function');
|
||||
});
|
||||
});
|
||||
|
||||
describe('loading states', () => {
|
||||
it('shows loading during initialization', () => {
|
||||
let resolveGetCurrentUser: (value: User) => void;
|
||||
const pendingPromise = new Promise<User>((resolve) => {
|
||||
resolveGetCurrentUser = resolve;
|
||||
});
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
pendingPromise
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
expect(result.current.loading).toBe(true);
|
||||
expect(result.current.initialized).toBe(false);
|
||||
|
||||
act(() => {
|
||||
resolveGetCurrentUser!(mockUser);
|
||||
});
|
||||
});
|
||||
|
||||
it('clears loading after initialization completes', async () => {
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockResolvedValue(
|
||||
mockUser
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.loading).toBe(false);
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
it('clears loading after initialization fails', async () => {
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Init failed')
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.loading).toBe(false);
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('error handling', () => {
|
||||
it('handles network errors during login', async () => {
|
||||
const consoleSpy = vi
|
||||
.spyOn(console, 'error')
|
||||
.mockImplementation(() => {});
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Not authenticated')
|
||||
);
|
||||
(mockLogin as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Network unavailable')
|
||||
);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
const success = await result.current.login(
|
||||
'test@example.com',
|
||||
'password123'
|
||||
);
|
||||
expect(success).toBe(false);
|
||||
});
|
||||
|
||||
expect(mockNotificationsShow).toHaveBeenCalledWith({
|
||||
title: 'Error',
|
||||
message: 'Network unavailable',
|
||||
color: 'red',
|
||||
});
|
||||
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('handles invalid user data during initialization', async () => {
|
||||
const consoleSpy = vi
|
||||
.spyOn(console, 'error')
|
||||
.mockImplementation(() => {});
|
||||
// Use a more precise type for testing
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockResolvedValue({
|
||||
invalid: 'user',
|
||||
} as unknown as User);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
|
||||
expect(result.current.user).toEqual({ invalid: 'user' });
|
||||
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
describe('concurrent operations', () => {
|
||||
it('handles concurrent login attempts', async () => {
|
||||
(mockGetCurrentUser as ReturnType<typeof vi.fn>).mockRejectedValue(
|
||||
new Error('Not authenticated')
|
||||
);
|
||||
(mockLogin as ReturnType<typeof vi.fn>).mockResolvedValue(mockUser);
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useAuth(), { wrapper });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(result.current.initialized).toBe(true);
|
||||
});
|
||||
|
||||
// Make concurrent login calls
|
||||
const [result1, result2] = await act(async () => {
|
||||
return Promise.all([
|
||||
result.current.login('test@example.com', 'password123'),
|
||||
result.current.login('test@example.com', 'password123'),
|
||||
]);
|
||||
});
|
||||
|
||||
expect(result1).toBe(true);
|
||||
expect(result2).toBe(true);
|
||||
expect(result.current.user).toEqual(mockUser);
|
||||
expect(mockLogin).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
});
|
||||
});
|
||||
658
app/src/contexts/ModalContext.test.tsx
Normal file
658
app/src/contexts/ModalContext.test.tsx
Normal file
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
401
app/src/contexts/ThemeContext.test.tsx
Normal file
401
app/src/contexts/ThemeContext.test.tsx
Normal file
@@ -0,0 +1,401 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { renderHook, act } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import { ThemeProvider, useTheme } from './ThemeContext';
|
||||
import type { MantineColorScheme } from '@mantine/core';
|
||||
|
||||
// Mock Mantine's color scheme hook
|
||||
const mockSetColorScheme = vi.fn();
|
||||
const mockUseMantineColorScheme = vi.fn();
|
||||
|
||||
vi.mock('@mantine/core', () => ({
|
||||
useMantineColorScheme: (): {
|
||||
colorScheme: MantineColorScheme | undefined;
|
||||
setColorScheme?: (scheme: MantineColorScheme) => void;
|
||||
} =>
|
||||
mockUseMantineColorScheme() as {
|
||||
colorScheme: MantineColorScheme | undefined;
|
||||
setColorScheme?: (scheme: MantineColorScheme) => void;
|
||||
},
|
||||
}));
|
||||
|
||||
// Helper wrapper component for testing
|
||||
const createWrapper = (initialColorScheme: MantineColorScheme = 'light') => {
|
||||
mockUseMantineColorScheme.mockReturnValue({
|
||||
colorScheme: initialColorScheme,
|
||||
setColorScheme: mockSetColorScheme,
|
||||
});
|
||||
|
||||
const Wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<ThemeProvider>{children}</ThemeProvider>
|
||||
);
|
||||
Wrapper.displayName = 'ThemeProviderTestWrapper';
|
||||
return Wrapper;
|
||||
};
|
||||
|
||||
describe('ThemeContext', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe('ThemeProvider', () => {
|
||||
it('provides theme context with light scheme by default', () => {
|
||||
const wrapper = createWrapper('light');
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
expect(result.current.colorScheme).toBe('light');
|
||||
expect(typeof result.current.updateColorScheme).toBe('function');
|
||||
});
|
||||
|
||||
it('provides theme context with dark scheme', () => {
|
||||
const wrapper = createWrapper('dark');
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
expect(result.current.colorScheme).toBe('dark');
|
||||
expect(typeof result.current.updateColorScheme).toBe('function');
|
||||
});
|
||||
|
||||
it('provides theme context with auto scheme', () => {
|
||||
const wrapper = createWrapper('auto');
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
expect(result.current.colorScheme).toBe('auto');
|
||||
expect(typeof result.current.updateColorScheme).toBe('function');
|
||||
});
|
||||
|
||||
it('calls useMantineColorScheme hook', () => {
|
||||
const wrapper = createWrapper('light');
|
||||
renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
expect(mockUseMantineColorScheme).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('useTheme hook', () => {
|
||||
it('throws error when used outside ThemeProvider', () => {
|
||||
// Suppress console.error for this test since we expect an error
|
||||
const consoleSpy = vi
|
||||
.spyOn(console, 'error')
|
||||
.mockImplementation(() => {});
|
||||
|
||||
expect(() => {
|
||||
renderHook(() => useTheme());
|
||||
}).toThrow('useTheme must be used within a ThemeProvider');
|
||||
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('returns current color scheme from Mantine', () => {
|
||||
const wrapper = createWrapper('dark');
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
expect(result.current.colorScheme).toBe('dark');
|
||||
});
|
||||
|
||||
it('provides updateColorScheme function', () => {
|
||||
const wrapper = createWrapper('light');
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
expect(typeof result.current.updateColorScheme).toBe('function');
|
||||
});
|
||||
|
||||
it('maintains function stability across re-renders', () => {
|
||||
const wrapper = createWrapper('light');
|
||||
const { result, rerender } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
const initialUpdateFunction = result.current.updateColorScheme;
|
||||
|
||||
rerender();
|
||||
|
||||
expect(result.current.updateColorScheme).toBe(initialUpdateFunction);
|
||||
});
|
||||
});
|
||||
|
||||
describe('updateColorScheme functionality', () => {
|
||||
it('calls setColorScheme when updateColorScheme is invoked', () => {
|
||||
const wrapper = createWrapper('light');
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
act(() => {
|
||||
result.current.updateColorScheme('dark');
|
||||
});
|
||||
|
||||
expect(mockSetColorScheme).toHaveBeenCalledWith('dark');
|
||||
});
|
||||
|
||||
it('handles switching from light to dark', () => {
|
||||
const wrapper = createWrapper('light');
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
act(() => {
|
||||
result.current.updateColorScheme('dark');
|
||||
});
|
||||
|
||||
expect(mockSetColorScheme).toHaveBeenCalledWith('dark');
|
||||
expect(mockSetColorScheme).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('handles switching from dark to light', () => {
|
||||
const wrapper = createWrapper('dark');
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
act(() => {
|
||||
result.current.updateColorScheme('light');
|
||||
});
|
||||
|
||||
expect(mockSetColorScheme).toHaveBeenCalledWith('light');
|
||||
expect(mockSetColorScheme).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('handles switching to auto scheme', () => {
|
||||
const wrapper = createWrapper('light');
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
act(() => {
|
||||
result.current.updateColorScheme('auto');
|
||||
});
|
||||
|
||||
expect(mockSetColorScheme).toHaveBeenCalledWith('auto');
|
||||
});
|
||||
|
||||
it('handles multiple color scheme changes', () => {
|
||||
const wrapper = createWrapper('light');
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
act(() => {
|
||||
result.current.updateColorScheme('dark');
|
||||
});
|
||||
|
||||
act(() => {
|
||||
result.current.updateColorScheme('auto');
|
||||
});
|
||||
|
||||
act(() => {
|
||||
result.current.updateColorScheme('light');
|
||||
});
|
||||
|
||||
expect(mockSetColorScheme).toHaveBeenCalledTimes(3);
|
||||
expect(mockSetColorScheme).toHaveBeenNthCalledWith(1, 'dark');
|
||||
expect(mockSetColorScheme).toHaveBeenNthCalledWith(2, 'auto');
|
||||
expect(mockSetColorScheme).toHaveBeenNthCalledWith(3, 'light');
|
||||
});
|
||||
|
||||
it('calls setColorScheme immediately without batching', () => {
|
||||
const wrapper = createWrapper('light');
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
// Multiple synchronous calls
|
||||
act(() => {
|
||||
result.current.updateColorScheme('dark');
|
||||
result.current.updateColorScheme('auto');
|
||||
result.current.updateColorScheme('light');
|
||||
});
|
||||
|
||||
expect(mockSetColorScheme).toHaveBeenCalledTimes(3);
|
||||
});
|
||||
});
|
||||
|
||||
describe('color scheme reactivity', () => {
|
||||
it('reflects color scheme changes from Mantine', () => {
|
||||
// Start with light
|
||||
mockUseMantineColorScheme.mockReturnValue({
|
||||
colorScheme: 'light',
|
||||
setColorScheme: mockSetColorScheme,
|
||||
});
|
||||
|
||||
const wrapper = createWrapper('light');
|
||||
const { result, rerender } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
expect(result.current.colorScheme).toBe('light');
|
||||
|
||||
// Simulate Mantine color scheme change
|
||||
mockUseMantineColorScheme.mockReturnValue({
|
||||
colorScheme: 'dark',
|
||||
setColorScheme: mockSetColorScheme,
|
||||
});
|
||||
|
||||
rerender();
|
||||
|
||||
expect(result.current.colorScheme).toBe('dark');
|
||||
});
|
||||
|
||||
it('maintains function reference when color scheme changes', () => {
|
||||
mockUseMantineColorScheme.mockReturnValue({
|
||||
colorScheme: 'light',
|
||||
setColorScheme: mockSetColorScheme,
|
||||
});
|
||||
|
||||
const wrapper = createWrapper('light');
|
||||
const { result, rerender } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
const initialUpdateFunction = result.current.updateColorScheme;
|
||||
|
||||
// Change color scheme
|
||||
mockUseMantineColorScheme.mockReturnValue({
|
||||
colorScheme: 'dark',
|
||||
setColorScheme: mockSetColorScheme,
|
||||
});
|
||||
|
||||
rerender();
|
||||
|
||||
expect(result.current.updateColorScheme).toBe(initialUpdateFunction);
|
||||
});
|
||||
});
|
||||
|
||||
describe('context value structure', () => {
|
||||
it('provides expected context interface', () => {
|
||||
const wrapper = createWrapper('light');
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
expect(result.current).toEqual({
|
||||
colorScheme: 'light',
|
||||
updateColorScheme: expect.any(Function) as unknown,
|
||||
});
|
||||
});
|
||||
|
||||
it('context value has correct types', () => {
|
||||
const wrapper = createWrapper('dark');
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
expect(typeof result.current.colorScheme).toBe('string');
|
||||
expect(typeof result.current.updateColorScheme).toBe('function');
|
||||
});
|
||||
});
|
||||
|
||||
describe('provider nesting', () => {
|
||||
it('works with nested providers (inner provider takes precedence)', () => {
|
||||
mockUseMantineColorScheme.mockReturnValue({
|
||||
colorScheme: 'dark',
|
||||
setColorScheme: mockSetColorScheme,
|
||||
});
|
||||
|
||||
const NestedWrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<ThemeProvider>
|
||||
<ThemeProvider>{children}</ThemeProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
const { result } = renderHook(() => useTheme(), {
|
||||
wrapper: NestedWrapper,
|
||||
});
|
||||
|
||||
expect(result.current.colorScheme).toBe('dark');
|
||||
expect(typeof result.current.updateColorScheme).toBe('function');
|
||||
});
|
||||
});
|
||||
|
||||
describe('edge cases', () => {
|
||||
it('handles undefined color scheme gracefully by falling back to light theme', () => {
|
||||
mockUseMantineColorScheme.mockReturnValue({
|
||||
colorScheme: undefined,
|
||||
setColorScheme: mockSetColorScheme,
|
||||
});
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
// Should fallback to 'light' theme rather than being undefined
|
||||
expect(result.current.colorScheme).toBe('light');
|
||||
expect(typeof result.current.updateColorScheme).toBe('function');
|
||||
});
|
||||
|
||||
it('handles missing setColorScheme function', () => {
|
||||
mockUseMantineColorScheme.mockReturnValue({
|
||||
colorScheme: 'light',
|
||||
setColorScheme: undefined,
|
||||
});
|
||||
|
||||
const wrapper = createWrapper();
|
||||
|
||||
// Should not throw during render
|
||||
expect(() => {
|
||||
renderHook(() => useTheme(), { wrapper });
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it('handles updateColorScheme with same color scheme', () => {
|
||||
const wrapper = createWrapper('light');
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
act(() => {
|
||||
result.current.updateColorScheme('light'); // Same as current
|
||||
});
|
||||
|
||||
expect(mockSetColorScheme).toHaveBeenCalledWith('light');
|
||||
});
|
||||
});
|
||||
|
||||
describe('integration with Mantine', () => {
|
||||
it('properly integrates with useMantineColorScheme', () => {
|
||||
const mockMantineHook = {
|
||||
colorScheme: 'dark' as MantineColorScheme,
|
||||
setColorScheme: mockSetColorScheme,
|
||||
};
|
||||
|
||||
mockUseMantineColorScheme.mockReturnValue(mockMantineHook);
|
||||
|
||||
const wrapper = createWrapper('dark');
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
expect(result.current.colorScheme).toBe('dark');
|
||||
|
||||
act(() => {
|
||||
result.current.updateColorScheme('light');
|
||||
});
|
||||
|
||||
expect(mockSetColorScheme).toHaveBeenCalledWith('light');
|
||||
});
|
||||
|
||||
it('reflects all Mantine color scheme options', () => {
|
||||
const colorSchemes: MantineColorScheme[] = ['light', 'dark', 'auto'];
|
||||
|
||||
colorSchemes.forEach((scheme) => {
|
||||
mockUseMantineColorScheme.mockReturnValue({
|
||||
colorScheme: scheme,
|
||||
setColorScheme: mockSetColorScheme,
|
||||
});
|
||||
|
||||
const wrapper = createWrapper(scheme);
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
expect(result.current.colorScheme).toBe(scheme);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('performance', () => {
|
||||
it('does not cause unnecessary re-renders', () => {
|
||||
const wrapper = createWrapper('light');
|
||||
const { result, rerender } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
const initialResult = result.current;
|
||||
|
||||
// Re-render without changing anything
|
||||
rerender();
|
||||
|
||||
// Function reference should be stable
|
||||
expect(result.current.updateColorScheme).toBe(
|
||||
initialResult.updateColorScheme
|
||||
);
|
||||
});
|
||||
|
||||
it('useCallback optimization works correctly', () => {
|
||||
const wrapper = createWrapper('light');
|
||||
const { result } = renderHook(() => useTheme(), { wrapper });
|
||||
|
||||
const updateFunction1 = result.current.updateColorScheme;
|
||||
|
||||
// Trigger a re-render by calling updateColorScheme
|
||||
act(() => {
|
||||
result.current.updateColorScheme('dark');
|
||||
});
|
||||
|
||||
// Function should still be the same reference due to useCallback
|
||||
expect(result.current.updateColorScheme).toBe(updateFunction1);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -22,13 +22,16 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
|
||||
|
||||
const updateColorScheme = useCallback(
|
||||
(newTheme: MantineColorScheme): void => {
|
||||
setColorScheme(newTheme);
|
||||
if (setColorScheme) {
|
||||
setColorScheme(newTheme);
|
||||
}
|
||||
},
|
||||
[setColorScheme]
|
||||
);
|
||||
|
||||
// Ensure colorScheme is never undefined by falling back to light theme
|
||||
const value: ThemeContextType = {
|
||||
colorScheme,
|
||||
colorScheme: colorScheme || 'light',
|
||||
updateColorScheme,
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user