From a4739bddc1683917da9cae1420b3d342b98a98b4 Mon Sep 17 00:00:00 2001 From: Albert Date: Mon, 10 Nov 2025 01:30:11 +0000 Subject: [PATCH] test: Update theme tests for SegmentedControl in profile dropdown MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- tests/magnitude/02-theme.mag.ts | 192 +++++++++++++++++++++++--------- 1 file changed, 140 insertions(+), 52 deletions(-) diff --git a/tests/magnitude/02-theme.mag.ts b/tests/magnitude/02-theme.mag.ts index 3d9f917..453e5e4 100644 --- a/tests/magnitude/02-theme.mag.ts +++ b/tests/magnitude/02-theme.mag.ts @@ -1,38 +1,86 @@ import { test } from 'magnitude-test'; -test('Theme toggle switches between light and dark modes', async (agent) => { - // Act: Navigate to the homepage - await agent.act('Navigate to the homepage'); +const TEST_HANDLE = process.env.TEST_BLUESKY_HANDLE; +const TEST_PASSWORD = process.env.TEST_BLUESKY_PASSWORD; - // Check: Verify the page loads with a theme - await agent.check('The page has either a light or dark background'); +if (!TEST_HANDLE || !TEST_PASSWORD) { + throw new Error('TEST_BLUESKY_HANDLE and TEST_BLUESKY_PASSWORD must be set in .env'); +} - // Act: Click the theme toggle button - await agent.act('Click the theme toggle button'); +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"'); - // Wait for theme transition - await agent.act('Wait for 1 second'); + // Act: Open the profile dropdown menu + await agent.act('Click on the profile avatar or "Profile" button'); - // Check: Verify the theme has changed - await agent.check('The background color has changed to the opposite theme'); + // 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)'); +}); - // Act: Click the theme toggle button again - await agent.act('Click the theme toggle button'); +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"'); - // Wait for theme transition - await agent.act('Wait for 1 second'); + // 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 the theme has changed back - await agent.check('The background color has changed back to the original theme'); + // 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: Navigate to the homepage - await agent.act('Navigate to the homepage'); + // 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: 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'); + // 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'); @@ -42,12 +90,20 @@ test('Light mode displays correct colors', async (agent) => { }); test('Dark mode displays correct colors', async (agent) => { - // Act: Navigate to the homepage - await agent.act('Navigate to the homepage'); + // 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: 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'); + // 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'); @@ -57,12 +113,20 @@ test('Dark mode displays correct colors', async (agent) => { }); test('Theme persists across page refreshes', async (agent) => { - // Act: Navigate to the homepage - await agent.act('Navigate to the homepage'); + // 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('If the background is dark, click the theme toggle button'); - 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'); + await agent.act('Wait for 500 milliseconds'); // 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'); // Act: Switch to dark mode - await agent.act('Click the theme toggle button'); - await agent.act('Wait for 1 second'); + 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'); @@ -84,12 +149,20 @@ test('Theme persists across page refreshes', async (agent) => { }); test('Theme affects all UI components', async (agent) => { - // Act: Navigate to the homepage - await agent.act('Navigate to the homepage'); + // 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: Ensure light mode - await agent.act('If the background is dark, click the theme toggle button'); - await agent.act('Wait for 1 second'); + // 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'); @@ -97,8 +170,9 @@ test('Theme affects all UI components', async (agent) => { 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'); + 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'); @@ -106,21 +180,35 @@ test('Theme affects all UI components', async (agent) => { 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'); +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: Ensure light mode - await agent.act('If the background is dark, click the theme toggle button'); - await agent.act('Wait for 1 second'); + // 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 icon shows moon (indicating can switch to dark) - await agent.check('The theme toggle button shows a moon icon'); + // 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 the theme toggle button'); - await agent.act('Wait for 1 second'); + await agent.act('Click on the profile avatar'); + await agent.act('Click the moon icon in the theme selector'); - // Check: Verify icon shows sun (indicating can switch to light) - await agent.check('The theme toggle button shows a sun icon'); + // 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'); });