Albert
a4739bddc1
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>
215 lines
9.4 KiB
TypeScript
215 lines
9.4 KiB
TypeScript
import { test } from 'magnitude-test';
|
|
|
|
const TEST_HANDLE = process.env.TEST_BLUESKY_HANDLE;
|
|
const TEST_PASSWORD = process.env.TEST_BLUESKY_PASSWORD;
|
|
|
|
if (!TEST_HANDLE || !TEST_PASSWORD) {
|
|
throw new Error('TEST_BLUESKY_HANDLE and TEST_BLUESKY_PASSWORD must be set in .env');
|
|
}
|
|
|
|
test('Theme selector in profile dropdown has three options', async (agent) => {
|
|
// 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"');
|
|
|
|
// Act: Open the profile dropdown menu
|
|
await agent.act('Click on the profile avatar or "Profile" button');
|
|
|
|
// Check: Verify the theme selector is visible with three options
|
|
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)');
|
|
});
|
|
|
|
test('Theme can be changed between light, dark, and auto modes', async (agent) => {
|
|
// 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"');
|
|
|
|
// Act: Open profile dropdown and select light mode
|
|
await agent.act('Click on the profile avatar');
|
|
await agent.act('Click the sun icon in the theme selector');
|
|
|
|
// Check: Verify light mode is active
|
|
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) => {
|
|
// 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"');
|
|
|
|
// Act: Set to light mode via profile dropdown
|
|
await agent.act('Click on the profile avatar');
|
|
await agent.act('Click the sun icon in the theme selector');
|
|
await agent.act('Wait for 500 milliseconds');
|
|
|
|
// 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: 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"');
|
|
|
|
// Act: Set to dark mode via profile dropdown
|
|
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 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: 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"');
|
|
|
|
// Act: Set to light mode
|
|
await agent.act('Click on the profile avatar');
|
|
await agent.act('Click the sun icon in the theme selector');
|
|
await agent.act('Wait for 500 milliseconds');
|
|
|
|
// 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 on the profile avatar');
|
|
await agent.act('Click the moon icon in the theme selector');
|
|
await agent.act('Wait for 500 milliseconds');
|
|
|
|
// 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: 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"');
|
|
|
|
// Act: Set to light mode
|
|
await agent.act('Click on the profile avatar');
|
|
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
|
|
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 on the profile avatar');
|
|
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
|
|
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 selector correctly indicates selected theme', async (agent) => {
|
|
// 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"');
|
|
|
|
// Act: Set to light mode
|
|
await agent.act('Click on the profile avatar');
|
|
await agent.act('Click the sun icon in the theme selector');
|
|
|
|
// Check: Verify sun icon is highlighted/selected
|
|
await agent.check('The sun icon button appears selected or 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');
|
|
|
|
// Check: Verify moon icon is highlighted/selected
|
|
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');
|
|
});
|