42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
|
import { fireEvent, render, screen } from '@testing-library/react';
|
|
import AppearanceToggleDropdown from '../appearance-dropdown';
|
|
import { AppearanceProvider } from '@/hooks/use-appearance';
|
|
|
|
const matchMediaStub = (matches = false) => ({
|
|
matches,
|
|
media: '(prefers-color-scheme: dark)',
|
|
onchange: null,
|
|
addEventListener: vi.fn(),
|
|
removeEventListener: vi.fn(),
|
|
addListener: vi.fn(),
|
|
removeListener: vi.fn(),
|
|
dispatchEvent: vi.fn(),
|
|
});
|
|
|
|
describe('AppearanceToggleDropdown', () => {
|
|
beforeEach(() => {
|
|
Object.defineProperty(window, 'matchMedia', {
|
|
writable: true,
|
|
value: vi.fn().mockImplementation(() => matchMediaStub(false)),
|
|
});
|
|
localStorage.setItem('theme', 'light');
|
|
document.documentElement.classList.remove('dark');
|
|
});
|
|
|
|
it('toggles the document class to dark mode', () => {
|
|
render(
|
|
<AppearanceProvider>
|
|
<AppearanceToggleDropdown />
|
|
</AppearanceProvider>,
|
|
);
|
|
|
|
const button = screen.getByRole('button');
|
|
fireEvent.click(button);
|
|
|
|
expect(document.documentElement.classList.contains('dark')).toBe(true);
|
|
expect(localStorage.getItem('theme')).toBe('dark');
|
|
});
|
|
});
|