ponderants/app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test: Add comprehensive theme switching tests

Browse Source 
Added extensive Magnitude tests for light/dark mode functionality:
- Theme toggle switches between modes
- Light mode color verification
- Dark mode color verification
- Theme persistence across page refreshes
- Theme affects all UI components uniformly
- Theme toggle icon updates correctly

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Albert
2025-11-10 00:26:43 +00:00
parent d7f5988a4f
commit aa60098690
1 changed files with 118 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
tests/magnitude/02-theme.mag.ts
View File

@@ -1,21 +1,126 @@
import { test } from 'magnitude-test';
test('Mantine theme is applied correctly', async (agent) => {
test('Theme toggle switches between light and dark modes', async (agent) => {
// Act: Navigate to the homepage
await agent.act('Navigate to the homepage');
// Check: Verify the Mantine components are rendered
await agent.check('The text "Ponderants" is visible as a title');
await agent.check('A "Test Button" is visible on the screen');
// Check: Verify the page loads with a theme
await agent.check('The page has either a light or dark background');
// Check: Verify the theme is applied.
// We check that the page uses a dark background with grayscale styling
await agent.check(
'The page has a dark background with light text, consistent with a grayscale dark theme'
);
// Act: Click the theme toggle button
await agent.act('Click the theme toggle button');
// Check: Verify the Paper component is rendered with its themed styles
await agent.check(
'The page content is inside a "Paper" component with a border'
);
// Wait for theme transition
await agent.act('Wait for 1 second');
// Check: Verify the theme has changed
await agent.check('The background color has changed to the opposite theme');
// Act: Click the theme toggle button again
await agent.act('Click the theme toggle button');
// Wait for theme transition
await agent.act('Wait for 1 second');
// Check: Verify the theme has changed back
await agent.check('The background color has changed back to the original theme');
});
test('Light mode displays correct colors', async (agent) => {
// Act: Navigate to the homepage
await agent.act('Navigate to the homepage');
// Act: Ensure we're in light mode by toggling if needed
await agent.act('If the background is dark, click the theme toggle button');
await agent.act('Wait for 1 second');
// Check: Verify light mode colors
await agent.check('The page has a light background color');
await agent.check('The sidebar has a light background');
await agent.check('The text is dark colored for readability');
await agent.check('The borders are subtle and light-colored');
});
test('Dark mode displays correct colors', async (agent) => {
// Act: Navigate to the homepage
await agent.act('Navigate to the homepage');
// Act: Ensure we're in dark mode by toggling if needed
await agent.act('If the background is light, click the theme toggle button');
await agent.act('Wait for 1 second');
// Check: Verify dark mode colors
await agent.check('The page has a dark background color');
await agent.check('The sidebar has a dark background');
await agent.check('The text is light colored for readability');
await agent.check('The borders are dark-colored');
});
test('Theme persists across page refreshes', async (agent) => {
// Act: Navigate to the homepage
await agent.act('Navigate to the homepage');
// Act: Set to light mode
await agent.act('If the background is dark, click the theme toggle button');
await agent.act('Wait for 1 second');
// Act: Refresh the page
await agent.act('Refresh the page');
await agent.act('Wait for the page to load');
// Check: Verify light mode persisted
await agent.check('The page still has a light background color');
// Act: Switch to dark mode
await agent.act('Click the theme toggle button');
await agent.act('Wait for 1 second');
// Act: Refresh the page again
await agent.act('Refresh the page');
await agent.act('Wait for the page to load');
// Check: Verify dark mode persisted
await agent.check('The page still has a dark background color');
});
test('Theme affects all UI components', async (agent) => {
// Act: Navigate to the homepage
await agent.act('Navigate to the homepage');
// Act: Ensure light mode
await agent.act('If the background is dark, click the theme toggle button');
await agent.act('Wait for 1 second');
// Check: Verify all components use light theme
await agent.check('The navigation sidebar uses light colors');
await agent.check('The main content area uses light colors');
await agent.check('All buttons and inputs use light theme styling');
// Act: Switch to dark mode
await agent.act('Click the theme toggle button');
await agent.act('Wait for 1 second');
// Check: Verify all components use dark theme
await agent.check('The navigation sidebar uses dark colors');
await agent.check('The main content area uses dark colors');
await agent.check('All buttons and inputs use dark theme styling');
});
test('Theme toggle icon changes based on current theme', async (agent) => {
// Act: Navigate to the homepage
await agent.act('Navigate to the homepage');
// Act: Ensure light mode
await agent.act('If the background is dark, click the theme toggle button');
await agent.act('Wait for 1 second');
// Check: Verify icon shows moon (indicating can switch to dark)
await agent.check('The theme toggle button shows a moon icon');
// Act: Switch to dark mode
await agent.act('Click the theme toggle button');
await agent.act('Wait for 1 second');
// Check: Verify icon shows sun (indicating can switch to light)
await agent.check('The theme toggle button shows a sun icon');
});