Skip to content

🧭 test: Cover ClickHouse Control Boundaries on the Sidebar Surface #17197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
berry-13 merged 2 commits into from
Oct 18, 2026
Merged

🧭 test: Cover ClickHouse Control Boundaries on the Sidebar Surface #17197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5c3e1dc
test: Cover ClickHouse Control Boundaries on the Sidebar Surface
berry-13 Oct 16, 2026
a714e8c
test: Measure the Sidebar Boundary Pairs Directly
berry-13 Oct 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions e2e/specs/mock/scenarios/clickhouse-sidebar-boundaries.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { resolve } from 'node:path';
import { expect, test } from '@playwright/test';
import { stripVTControlCharacters } from 'node:util';
import { inOneProject, repoRoot, run } from './lint.helpers';

/**
* Controls sit on the sidebar as well as the page, the panels and the dialog, so
* the ClickHouse boundary check measures `surface-sidebar` too. The sidebar holds
* Click UI's background, so its sub-floor boundary pairs are the page's, pinned by
* the same owner decision. The check runs the whole spec, so the pinning test
* compares the pins against the full matrix with the sidebar in it.
*/

const clientRoot = resolve(repoRoot, 'packages/client');
const JEST = resolve(repoRoot, 'node_modules/.bin/jest');
const SPEC = 'src/theme/themes/clickhouse.spec.tsx';

test.describe('ClickHouse control boundaries on the sidebar', () => {
test('the boundary and pinning checks hold with the sidebar canvas measured @scenario:clickhouse-sidebar-boundaries-measured', () => {
inOneProject();
test.setTimeout(180_000);

const result = run(JEST, [SPEC, '--maxWorkers=1', '--ci', '--verbose'], { cwd: clientRoot });
const output = stripVTControlCharacters(result.output);
expect(result.status, output).toBe(0);
expect(output.match(/✓ keeps control boundaries and rings at the 3:1 floor/g)).toHaveLength(2);
expect(output.match(/✓ pins every pair that sits below its floor/g)).toHaveLength(2);
Comment on lines +26 to +27

@chatgpt-codex-connector chatgpt-codex-connector Bot Oct 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Assert the sidebar measurement instead of old test names

This scenario also passes against the parent revision: both matched Jest titles already existed and passed before rgb-surface-sidebar was added to the boundary background list. Removing the sidebar entry together with its four pins would therefore still produce two matches for each title, so this scenario cannot catch the exact regression it claims to cover; assert a sidebar-specific measured pair or fixture instead.

AGENTS.md reference: AGENTS.md:L53-L53

Useful? React with 👍 / 👎.

@berry-13 berry-13 Oct 18, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in a714e8c: a sidebar-only test now measures the boundary tokens on rgb-surface-sidebar and requires exactly its two pinned pairs, and the scenario asserts that title in both modes; dropping the sidebar entry and pins makes it fail.

expect(
output.match(
/✓ measures control boundaries on the sidebar, below the floor only in its two/g,
),
).toHaveLength(2);
});
});
15 changes: 15 additions & 0 deletions packages/client/src/theme/themes/clickhouse.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,7 @@ const floorChecks = {
'rgb-surface-secondary',
'rgb-surface-tertiary',
'rgb-surface-dialog',
'rgb-surface-sidebar',
],
},
],
Expand Down Expand Up @@ -359,10 +360,12 @@ const clickUiBelowFloor: Record<ThemeMode, string[]> = {
'rgb-border-xheavy on rgb-surface-secondary: 1.90:1 (needs 3:1)',
'rgb-border-xheavy on rgb-surface-tertiary: 1.90:1 (needs 3:1)',
'rgb-border-xheavy on rgb-surface-dialog: 2.03:1 (needs 3:1)',
'rgb-border-xheavy on rgb-surface-sidebar: 2.03:1 (needs 3:1)',
'rgb-border-control on rgb-surface-primary: 1.24:1 (needs 3:1)',
'rgb-border-control on rgb-surface-secondary: 1.16:1 (needs 3:1)',
'rgb-border-control on rgb-surface-tertiary: 1.16:1 (needs 3:1)',
'rgb-border-control on rgb-surface-dialog: 1.24:1 (needs 3:1)',
'rgb-border-control on rgb-surface-sidebar: 1.24:1 (needs 3:1)',
'rgb-prose-bullet on rgb-surface-chat: 2.03:1 (needs 3:1)',
'rgb-prose-bullet on rgb-surface-primary: 2.03:1 (needs 3:1)',
'rgb-prose-bullet on rgb-presentation: 2.03:1 (needs 3:1)',
Expand Down Expand Up @@ -402,10 +405,12 @@ const clickUiBelowFloor: Record<ThemeMode, string[]> = {
'rgb-border-xheavy on rgb-surface-secondary: 1.44:1 (needs 3:1)',
'rgb-border-xheavy on rgb-surface-tertiary: 1.44:1 (needs 3:1)',
'rgb-border-xheavy on rgb-surface-dialog: 1.62:1 (needs 3:1)',
'rgb-border-xheavy on rgb-surface-sidebar: 1.62:1 (needs 3:1)',
'rgb-border-control on rgb-surface-primary: 1.50:1 (needs 3:1)',
'rgb-border-control on rgb-surface-secondary: 1.34:1 (needs 3:1)',
'rgb-border-control on rgb-surface-tertiary: 1.34:1 (needs 3:1)',
'rgb-border-control on rgb-surface-dialog: 1.50:1 (needs 3:1)',
'rgb-border-control on rgb-surface-sidebar: 1.50:1 (needs 3:1)',
'rgb-prose-bullet on rgb-surface-chat: 1.62:1 (needs 3:1)',
'rgb-prose-bullet on rgb-surface-primary: 1.62:1 (needs 3:1)',
'rgb-prose-bullet on rgb-presentation: 1.62:1 (needs 3:1)',
Expand Down Expand Up @@ -500,6 +505,16 @@ describe.each(modes)('clickhouse %s palette', (mode, theme) => {
expect(belowPinned(mode, theme, floorChecks.controlBoundaries)).toEqual([]);
});

it('measures control boundaries on the sidebar, below the floor only in its two pinned pairs', () => {
const sidebarPins = clickUiBelowFloor[mode].filter((pair) =>
pair.includes(' on rgb-surface-sidebar: '),
);
expect(sidebarPins).toHaveLength(2);
expect(below(theme, WCAG_NON_TEXT, boundaryTokens, ['rgb-surface-sidebar'])).toEqual(
sidebarPins,
);
});

it('keeps the unchecked switch track at the 3:1 floor against the thumb and the checked fill', () => {
expect(belowPinned(mode, theme, floorChecks.switchTrack)).toEqual([]);
});
Expand Down
Loading