From 91c7b95c90172686546eb55d9f720259fbab3f94 Mon Sep 17 00:00:00 2001 From: ishaan Date: Fri, 1 Nov 2024 15:05:45 -0700 Subject: [PATCH] fix!: change default theme to be dark - Changed default theme setting to be dark. - Changed the theme.test.tsx file to reflect dark mode to be initial state for tests. --- src/theme/ThemeContext.tsx | 10 ++++++-- tests/theme/theme.test.tsx | 48 +++++++++++++++++++------------------- 2 files changed, 32 insertions(+), 26 deletions(-) diff --git a/src/theme/ThemeContext.tsx b/src/theme/ThemeContext.tsx index 028c1b0..8c8c010 100644 --- a/src/theme/ThemeContext.tsx +++ b/src/theme/ThemeContext.tsx @@ -11,13 +11,19 @@ interface ThemeContextType { export const ThemeContext = createContext({ toggleTheme: () => {}, - isDarkMode: false, + isDarkMode: true, }); export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children, }) => { - const [isDarkMode, setIsDarkMode] = useState(false); + const [isDarkMode, setIsDarkMode] = useState(() => { + if (typeof window !== 'undefined') { + const savedTheme = localStorage.getItem('theme'); + return savedTheme ? savedTheme === 'dark' : true; + } + return true; + }); useEffect(() => { const savedTheme = localStorage.getItem('theme'); diff --git a/tests/theme/theme.test.tsx b/tests/theme/theme.test.tsx index b71573a..ed4a3fd 100644 --- a/tests/theme/theme.test.tsx +++ b/tests/theme/theme.test.tsx @@ -50,9 +50,9 @@ describe('ThemeProvider functionality', () => { ); describe('Initial Render', () => { - it('renders in light mode by default when no theme is stored', () => { + it('renders in dark mode by default when no theme is stored', () => { renderWithThemeProvider(); - expect(screen.getByTestId('theme-mode')).toHaveTextContent('Light Mode'); + expect(screen.getByTestId('theme-mode')).toHaveTextContent('Dark Mode'); expect(localStorage.getItem('theme')).toBeNull(); }); @@ -74,27 +74,27 @@ describe('ThemeProvider functionality', () => { }); describe('Theme Toggle Functionality', () => { - it('toggles from light to dark mode', async () => { + it('toggles from dark to light mode', async () => { renderWithThemeProvider(); await act(async () => { fireEvent.click(screen.getByText('Toggle Theme')); }); - expect(screen.getByTestId('theme-mode')).toHaveTextContent('Dark Mode'); - expect(localStorage.getItem('theme')).toBe('dark'); + expect(screen.getByTestId('theme-mode')).toHaveTextContent('Light Mode'); + expect(localStorage.getItem('theme')).toBe('light'); }); - it('toggles from dark to light mode', async () => { - localStorage.setItem('theme', 'dark'); + it('toggles from light to dark mode', async () => { + localStorage.setItem('theme', 'light'); renderWithThemeProvider(); await act(async () => { fireEvent.click(screen.getByText('Toggle Theme')); }); - expect(screen.getByTestId('theme-mode')).toHaveTextContent('Light Mode'); - expect(localStorage.getItem('theme')).toBe('light'); + expect(screen.getByTestId('theme-mode')).toHaveTextContent('Dark Mode'); + expect(localStorage.getItem('theme')).toBe('dark'); }); it('persists theme choice across multiple toggles', async () => { @@ -103,31 +103,31 @@ describe('ThemeProvider functionality', () => { await act(async () => { fireEvent.click(screen.getByText('Toggle Theme')); }); - expect(localStorage.getItem('theme')).toBe('dark'); + expect(localStorage.getItem('theme')).toBe('light'); await act(async () => { fireEvent.click(screen.getByText('Toggle Theme')); }); - expect(localStorage.getItem('theme')).toBe('light'); + expect(localStorage.getItem('theme')).toBe('dark'); }); }); describe('Theme Properties', () => { - it('applies correct light theme properties', () => { + it('applies correct dark theme properties', () => { renderWithThemeProvider(); expect(screen.getByTestId('primary-color')).toHaveTextContent( - lightTheme.palette.primary.main + darkTheme.palette.primary.main ); expect(screen.getByTestId('background-color')).toHaveTextContent( - lightTheme.palette.background.default + darkTheme.palette.background.default ); expect(screen.getByTestId('text-color')).toHaveTextContent( - lightTheme.palette.text.primary + darkTheme.palette.text.primary ); }); - it('applies correct dark theme properties', async () => { + it('applies correct light theme properties after toggle', async () => { renderWithThemeProvider(); await act(async () => { @@ -135,13 +135,13 @@ describe('ThemeProvider functionality', () => { }); expect(screen.getByTestId('primary-color')).toHaveTextContent( - darkTheme.palette.primary.main + lightTheme.palette.primary.main ); expect(screen.getByTestId('background-color')).toHaveTextContent( - darkTheme.palette.background.default + lightTheme.palette.background.default ); expect(screen.getByTestId('text-color')).toHaveTextContent( - darkTheme.palette.text.primary + lightTheme.palette.text.primary ); }); @@ -149,21 +149,21 @@ describe('ThemeProvider functionality', () => { renderWithThemeProvider(); expect(screen.getByTestId('primary-color')).toHaveTextContent( - lightTheme.palette.primary.main + darkTheme.palette.primary.main ); await act(async () => { fireEvent.click(screen.getByText('Toggle Theme')); }); expect(screen.getByTestId('primary-color')).toHaveTextContent( - darkTheme.palette.primary.main + lightTheme.palette.primary.main ); await act(async () => { fireEvent.click(screen.getByText('Toggle Theme')); }); expect(screen.getByTestId('primary-color')).toHaveTextContent( - lightTheme.palette.primary.main + darkTheme.palette.primary.main ); }); }); @@ -171,7 +171,7 @@ describe('ThemeProvider functionality', () => { describe('Theme Context', () => { it('provides isDarkMode value through context', () => { renderWithThemeProvider(); - expect(screen.getByTestId('theme-mode')).toHaveTextContent('Light Mode'); + expect(screen.getByTestId('theme-mode')).toHaveTextContent('Dark Mode'); }); it('updates context value when theme changes', async () => { @@ -181,7 +181,7 @@ describe('ThemeProvider functionality', () => { fireEvent.click(screen.getByText('Toggle Theme')); }); - expect(screen.getByTestId('theme-mode')).toHaveTextContent('Dark Mode'); + expect(screen.getByTestId('theme-mode')).toHaveTextContent('Light Mode'); }); }); });