47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
// frontend/src/App.test.tsx
|
|
|
|
import { render, waitFor } from '@testing-library/react';
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
|
import App from './App';
|
|
|
|
// Setup mocks
|
|
const localStorageMock = {
|
|
getItem: vi.fn(),
|
|
setItem: vi.fn(),
|
|
removeItem: vi.fn(),
|
|
clear: vi.fn(),
|
|
theme: 'light',
|
|
};
|
|
|
|
const fetchMock = vi.fn(() =>
|
|
Promise.resolve({
|
|
ok: true,
|
|
json: () => Promise.resolve({}),
|
|
})
|
|
);
|
|
|
|
// Use Vitest's stubGlobal for type-safe environment mocking
|
|
vi.stubGlobal('localStorage', localStorageMock);
|
|
vi.stubGlobal('fetch', fetchMock);
|
|
|
|
describe('App Component', () => {
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
document.documentElement.classList.remove('dark');
|
|
document.documentElement.style.backgroundColor = '';
|
|
});
|
|
|
|
it('renders the App and applies the light theme by default', async () => {
|
|
render(<App />);
|
|
|
|
// 1. Verify your synchronous theme logic
|
|
expect(document.documentElement.style.backgroundColor).toBe('rgb(250, 250, 250)');
|
|
expect(document.documentElement.classList.contains('dark')).toBe(false);
|
|
expect(localStorageMock.setItem).toHaveBeenCalledWith('theme', 'light');
|
|
|
|
// 2. Wait for the asynchronous fetch to finish so React doesn't complain
|
|
await waitFor(() => {
|
|
expect(fetchMock).toHaveBeenCalled();
|
|
});
|
|
});
|
|
}); |