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

test: Update theme tests for SegmentedControl in profile dropdown

Browse Source 
Changes:
- Updated all theme tests to reflect new UI where theme selector is in profile dropdown
- Tests now use three-option SegmentedControl (light/dark/auto) instead of toggle button
- Added authentication flow to tests since profile dropdown requires login
- Updated test assertions to check for icon-based selection (sun, moon, desktop)
- Tests cover all three modes: light, dark, and auto/system preference
- Verify selected state indication in SegmentedControl
- Updated persistence tests to work with new UI flow

All theme tests now accurately test the current implementation.

🤖 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 01:30:11 +00:00
parent 57d5405c41
commit a4739bddc1
1 changed files with 140 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,38 +1,86 @@
import { test } from 'magnitude-test'; import { test } from 'magnitude-test';
test('Theme toggle switches between light and dark modes', async (agent) => { const TEST_HANDLE = process.env.TEST_BLUESKY_HANDLE;
// Act: Navigate to the homepage const TEST_PASSWORD = process.env.TEST_BLUESKY_PASSWORD;
await agent.act('Navigate to the homepage');
// Check: Verify the page loads with a theme if (!TEST_HANDLE || !TEST_PASSWORD) {
await agent.check('The page has either a light or dark background'); throw new Error('TEST_BLUESKY_HANDLE and TEST_BLUESKY_PASSWORD must be set in .env');
}
// Act: Click the theme toggle button test('Theme selector in profile dropdown has three options', async (agent) => {
await agent.act('Click the theme toggle button'); // Act: Log in first (theme selector is in authenticated area)
await agent.act('Navigate to /login');
await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
await agent.act('Click the "Log in with Bluesky" button');
await agent.check('The page URL contains "bsky.social"');
await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
await agent.act('Click the submit/authorize button');
await agent.check('The page URL contains "/chat"');
// Wait for theme transition // Act: Open the profile dropdown menu
await agent.act('Wait for 1 second'); await agent.act('Click on the profile avatar or "Profile" button');
// Check: Verify the theme has changed // Check: Verify the theme selector is visible with three options
await agent.check('The background color has changed to the opposite theme'); await agent.check('A "Theme" label is visible in the dropdown menu');
await agent.check('A segmented control with three icon buttons is visible');
await agent.check('A sun icon button is visible (for light mode)');
await agent.check('A moon icon button is visible (for dark mode)');
await agent.check('A desktop/monitor icon button is visible (for system/auto mode)');
});
// Act: Click the theme toggle button again test('Theme can be changed between light, dark, and auto modes', async (agent) => {
await agent.act('Click the theme toggle button'); // Act: Log in
await agent.act('Navigate to /login');
await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
await agent.act('Click the "Log in with Bluesky" button');
await agent.check('The page URL contains "bsky.social"');
await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
await agent.act('Click the submit/authorize button');
await agent.check('The page URL contains "/chat"');
// Wait for theme transition // Act: Open profile dropdown and select light mode
await agent.act('Wait for 1 second'); await agent.act('Click on the profile avatar');
await agent.act('Click the sun icon in the theme selector');
// Check: Verify the theme has changed back // Check: Verify light mode is active
await agent.check('The background color has changed back to the original theme'); await agent.check('The page has a light background color');
await agent.check('The sun icon button appears selected/highlighted');
// Act: Switch to dark mode
await agent.act('Click on the profile avatar');
await agent.act('Click the moon icon in the theme selector');
await agent.act('Wait for 500 milliseconds');
// Check: Verify dark mode is active
await agent.check('The page has a dark background color');
await agent.check('The moon icon button appears selected/highlighted');
// Act: Switch to auto/system mode
await agent.act('Click on the profile avatar');
await agent.act('Click the desktop icon in the theme selector');
await agent.act('Wait for 500 milliseconds');
// Check: Verify auto mode is selected
await agent.check('The desktop icon button appears selected/highlighted');
}); });
test('Light mode displays correct colors', async (agent) => { test('Light mode displays correct colors', async (agent) => {
// Act: Navigate to the homepage // Act: Log in
await agent.act('Navigate to the homepage'); await agent.act('Navigate to /login');
await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
await agent.act('Click the "Log in with Bluesky" button');
await agent.check('The page URL contains "bsky.social"');
await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
await agent.act('Click the submit/authorize button');
await agent.check('The page URL contains "/chat"');
// Act: Ensure we're in light mode by toggling if needed // Act: Set to light mode via profile dropdown
await agent.act('If the background is dark, click the theme toggle button'); await agent.act('Click on the profile avatar');
await agent.act('Wait for 1 second'); await agent.act('Click the sun icon in the theme selector');
await agent.act('Wait for 500 milliseconds');
// Check: Verify light mode colors // Check: Verify light mode colors
await agent.check('The page has a light background color'); await agent.check('The page has a light background color');
@@ -42,12 +90,20 @@ test('Light mode displays correct colors', async (agent) => {
}); });
test('Dark mode displays correct colors', async (agent) => { test('Dark mode displays correct colors', async (agent) => {
// Act: Navigate to the homepage // Act: Log in
await agent.act('Navigate to the homepage'); await agent.act('Navigate to /login');
await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
await agent.act('Click the "Log in with Bluesky" button');
await agent.check('The page URL contains "bsky.social"');
await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
await agent.act('Click the submit/authorize button');
await agent.check('The page URL contains "/chat"');
// Act: Ensure we're in dark mode by toggling if needed // Act: Set to dark mode via profile dropdown
await agent.act('If the background is light, click the theme toggle button'); await agent.act('Click on the profile avatar');
await agent.act('Wait for 1 second'); await agent.act('Click the moon icon in the theme selector');
await agent.act('Wait for 500 milliseconds');
// Check: Verify dark mode colors // Check: Verify dark mode colors
await agent.check('The page has a dark background color'); await agent.check('The page has a dark background color');
@@ -57,12 +113,20 @@ test('Dark mode displays correct colors', async (agent) => {
}); });
test('Theme persists across page refreshes', async (agent) => { test('Theme persists across page refreshes', async (agent) => {
// Act: Navigate to the homepage // Act: Log in
await agent.act('Navigate to the homepage'); await agent.act('Navigate to /login');
await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
await agent.act('Click the "Log in with Bluesky" button');
await agent.check('The page URL contains "bsky.social"');
await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
await agent.act('Click the submit/authorize button');
await agent.check('The page URL contains "/chat"');
// Act: Set to light mode // Act: Set to light mode
await agent.act('If the background is dark, click the theme toggle button'); await agent.act('Click on the profile avatar');
await agent.act('Wait for 1 second'); await agent.act('Click the sun icon in the theme selector');
await agent.act('Wait for 500 milliseconds');
// Act: Refresh the page // Act: Refresh the page
await agent.act('Refresh the page'); await agent.act('Refresh the page');
@@ -72,8 +136,9 @@ test('Theme persists across page refreshes', async (agent) => {
await agent.check('The page still has a light background color'); await agent.check('The page still has a light background color');
// Act: Switch to dark mode // Act: Switch to dark mode
await agent.act('Click the theme toggle button'); await agent.act('Click on the profile avatar');
await agent.act('Wait for 1 second'); await agent.act('Click the moon icon in the theme selector');
await agent.act('Wait for 500 milliseconds');
// Act: Refresh the page again // Act: Refresh the page again
await agent.act('Refresh the page'); await agent.act('Refresh the page');
@@ -84,12 +149,20 @@ test('Theme persists across page refreshes', async (agent) => {
}); });
test('Theme affects all UI components', async (agent) => { test('Theme affects all UI components', async (agent) => {
// Act: Navigate to the homepage // Act: Log in
await agent.act('Navigate to the homepage'); await agent.act('Navigate to /login');
await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
await agent.act('Click the "Log in with Bluesky" button');
await agent.check('The page URL contains "bsky.social"');
await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
await agent.act('Click the submit/authorize button');
await agent.check('The page URL contains "/chat"');
// Act: Ensure light mode // Act: Set to light mode
await agent.act('If the background is dark, click the theme toggle button'); await agent.act('Click on the profile avatar');
await agent.act('Wait for 1 second'); await agent.act('Click the sun icon in the theme selector');
await agent.act('Wait for 500 milliseconds');
// Check: Verify all components use light theme // Check: Verify all components use light theme
await agent.check('The navigation sidebar uses light colors'); await agent.check('The navigation sidebar uses light colors');
@@ -97,8 +170,9 @@ test('Theme affects all UI components', async (agent) => {
await agent.check('All buttons and inputs use light theme styling'); await agent.check('All buttons and inputs use light theme styling');
// Act: Switch to dark mode // Act: Switch to dark mode
await agent.act('Click the theme toggle button'); await agent.act('Click on the profile avatar');
await agent.act('Wait for 1 second'); await agent.act('Click the moon icon in the theme selector');
await agent.act('Wait for 500 milliseconds');
// Check: Verify all components use dark theme // Check: Verify all components use dark theme
await agent.check('The navigation sidebar uses dark colors'); await agent.check('The navigation sidebar uses dark colors');
@@ -106,21 +180,35 @@ test('Theme affects all UI components', async (agent) => {
await agent.check('All buttons and inputs use dark theme styling'); await agent.check('All buttons and inputs use dark theme styling');
}); });
test('Theme toggle icon changes based on current theme', async (agent) => { test('Theme selector correctly indicates selected theme', async (agent) => {
// Act: Navigate to the homepage // Act: Log in
await agent.act('Navigate to the homepage'); await agent.act('Navigate to /login');
await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
await agent.act('Click the "Log in with Bluesky" button');
await agent.check('The page URL contains "bsky.social"');
await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
await agent.act('Click the submit/authorize button');
await agent.check('The page URL contains "/chat"');
// Act: Ensure light mode // Act: Set to light mode
await agent.act('If the background is dark, click the theme toggle button'); await agent.act('Click on the profile avatar');
await agent.act('Wait for 1 second'); await agent.act('Click the sun icon in the theme selector');
// Check: Verify icon shows moon (indicating can switch to dark) // Check: Verify sun icon is highlighted/selected
await agent.check('The theme toggle button shows a moon icon'); await agent.check('The sun icon button appears selected or highlighted');
// Act: Switch to dark mode // Act: Switch to dark mode
await agent.act('Click the theme toggle button'); await agent.act('Click on the profile avatar');
await agent.act('Wait for 1 second'); await agent.act('Click the moon icon in the theme selector');
// Check: Verify icon shows sun (indicating can switch to light) // Check: Verify moon icon is highlighted/selected
await agent.check('The theme toggle button shows a sun icon'); await agent.check('The moon icon button appears selected or highlighted');
// Act: Switch to auto mode
await agent.act('Click on the profile avatar');
await agent.act('Click the desktop icon in the theme selector');
// Check: Verify desktop icon is highlighted/selected
await agent.check('The desktop icon button appears selected or highlighted');
}); });