import { describe, expect, it } from '@jest/globals'; import { act, renderHook } from '@testing-library/react'; import type { FC, ReactNode } from 'react'; import { ThemeProvider, type ThemeProviderProps } from '../../providers'; import { useTheme } from './use-theme'; const createWrapper = ( Wrapper: FC, config: ThemeProviderProps ) => function CreatedWrapper({ children }: { children: ReactNode }) { return {children}; }; describe('useTheme', () => { it('should return the default value without provider and prevent update', () => { const defaultTheme = 'system'; const { result } = renderHook(() => useTheme()); expect(result.current.theme).toBe(defaultTheme); act(() => result.current.setTheme('dark')); expect(result.current.theme).toBe(defaultTheme); }); it('can update the value', () => { const defaultTheme = 'dark'; const { result } = renderHook(() => useTheme(), { wrapper: createWrapper(ThemeProvider, { attribute: 'magnam', defaultTheme, storageKey: 'repellat', }), }); expect(result.current.theme).toBe(defaultTheme); const newTheme = 'light'; act(() => result.current.setTheme(newTheme)); expect(result.current.theme).toBe(newTheme); }); it('can toggle the theme from dark to light', () => { const defaultTheme = 'dark'; const { result } = renderHook(() => useTheme(), { wrapper: createWrapper(ThemeProvider, { attribute: 'voluptatibus', defaultTheme, storageKey: 'qui', }), }); expect(result.current.theme).toBe(defaultTheme); act(() => result.current.toggleTheme()); expect(result.current.theme).toBe('light'); }); it('can toggle the theme from light to dark', () => { const defaultTheme = 'light'; const { result } = renderHook(() => useTheme(), { wrapper: createWrapper(ThemeProvider, { attribute: 'sed', defaultTheme, storageKey: 'ut', }), }); expect(result.current.theme).toBe(defaultTheme); act(() => result.current.toggleTheme()); expect(result.current.theme).toBe('dark'); }); }); .0'>stats

path: root/src/components/molecules/buttons/heading-button.tsx

blob: 0ed9a7691343d69008ed93ee510afc7816c9c115 (plain)