mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-19 06:04:05 +00:00
Claude
08436a6922
Follow up on the drawer polish, replacing things it hand-rolled with what the codebase already provides. Reuse - The navigation toggles now use the Switch component instead of ~30 lines of CSS mirroring it, which carried a comment admitting the metrics were kept in sync by hand. base-ui renders Switch.Root as a span, so the row can be a label wrapping a real control, the same shape the params editor already uses. The row stays clickable across its full width - Remove scrollbar-width and scrollbar-color from three drawers. index.scss already sets both on the universal selector, so these were not only redundant, they overrode the app wide thumb and track tokens with local values - Collect the user facing view names in one map in viewerConfig, and derive the navigation entries and the URL preset targets from it. The same nine labels had been written out in three places Simplify - NavigationMenuToggle composes NavigationMenuItem rather than repeating its markup and key handling, so a row reacts to input in one place only - ViewParamsSection consulted collapsible five times in a render. Absence of a toggle handler now represents a section which cannot collapse, and the header owns its two shapes - Share the small uppercase group heading through an eyebrow-label mixin, which was copied across four stylesheets Tests - Cover that a collapsed section keeps its values through apply. The form reads from the DOM, so unmounting collapsed fields would silently drop them, and no existing test caught that Also drops a comment claiming rows avoid being buttons because Space is a global hotkey. Measured against the app, the hotkey does not fire while the menu is open regardless of focus, so the rationale did not hold. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014L7R2LgjMSH2WQbiSP4uRn
39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
import { expect, test } from '@playwright/test';
|
|
|
|
test('View params configures timer view', async ({ page }) => {
|
|
await page.goto('/timer');
|
|
|
|
await expect(page.getByText('TIME NOW')).toBeInViewport();
|
|
|
|
await page.mouse.move(Math.random() * 100, Math.random() * 100);
|
|
await page.getByTestId('navigation__toggle-settings').click();
|
|
await page.locator('label').filter({ hasText: 'Hide Time NowHides the Time' }).locator('span').nth(2).click();
|
|
await page.getByTestId('apply-view-params').click();
|
|
|
|
await expect(page.getByText('TIME NOW', { exact: true })).not.toBeInViewport();
|
|
await expect(page).toHaveURL(/.*hideClock=true/);
|
|
});
|
|
|
|
/**
|
|
* The form gathers its values from the DOM, so a collapsed section has to stay mounted.
|
|
* Unmounting it would quietly drop everything the user set in it on the next apply.
|
|
*/
|
|
test('View params keeps the values of collapsed sections', async ({ page }) => {
|
|
// hideClock lives in the section we are about to collapse
|
|
await page.goto('/timer?hideClock=true');
|
|
await expect(page.getByText('TIME NOW', { exact: true })).not.toBeInViewport();
|
|
|
|
await page.mouse.move(Math.random() * 100, Math.random() * 100);
|
|
await page.getByTestId('navigation__toggle-settings').click();
|
|
|
|
const section = page.getByRole('button', { name: /Element visibility/ });
|
|
await expect(section).toHaveAttribute('aria-expanded', 'true');
|
|
await section.click();
|
|
await expect(section).toHaveAttribute('aria-expanded', 'false');
|
|
|
|
await page.getByTestId('apply-view-params').click();
|
|
|
|
await expect(page).toHaveURL(/.*hideClock=true/);
|
|
await expect(page.getByText('TIME NOW', { exact: true })).not.toBeInViewport();
|
|
});
|