diff --git a/frontend/src/v2/__tests__/v2Primitives.test.tsx b/frontend/src/v2/__tests__/v2Primitives.test.tsx index fc037f79c..92a4bda88 100644 --- a/frontend/src/v2/__tests__/v2Primitives.test.tsx +++ b/frontend/src/v2/__tests__/v2Primitives.test.tsx @@ -37,4 +37,25 @@ describe('D223 primitives', () => { expect(screen.getByLabelText('Drawer example')).toBeInTheDocument(); expect(screen.getByRole('heading', { name: 'Drawer title' })).toBeInTheDocument(); }); + + test('the page renders the columns, empty state, tiles and popover', () => { + render(); + expect(screen.getByText('Todo')).toBeInTheDocument(); + expect(screen.getByText('Doing')).toBeInTheDocument(); + expect(screen.getByText('Nothing in progress')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Settings' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Add' })).toBeInTheDocument(); + expect(screen.getByLabelText('Popover example')).toBeInTheDocument(); + expect(screen.getByText('Popover title')).toBeInTheDocument(); + }); + + test('the dashed Add tile keeps a visible keyboard focus ring', () => { + expect(css).toMatch(/\.v2p-tile\.add:focus-visible\s*\{[^}]*box-shadow:[^;]*--v2-accent/); + }); + + test('the showcase pane scrolls, so the long page is not clipped', () => { + expect(css).toMatch(/\.v2p-pane--scroll\s*\{[^}]*overflow-y:\s*auto/); + render(); + expect(screen.getByLabelText('Primitives')).toHaveClass('v2p-pane--scroll'); + }); }); diff --git a/frontend/src/v2/primitives/V2PrimitivesPage.tsx b/frontend/src/v2/primitives/V2PrimitivesPage.tsx index 7f129b996..12f717e0c 100644 --- a/frontend/src/v2/primitives/V2PrimitivesPage.tsx +++ b/frontend/src/v2/primitives/V2PrimitivesPage.tsx @@ -9,7 +9,7 @@ const V2PrimitivesPage: React.FC = () => (
+ +
columns, empty state
+
+
+
Todo 1
+
+
+
task-731P1
+
Empty state and popover from the artboard
+
+
+
+
+
Doing 0
+
+
+ Nothing in progress + A claimed task shows up here. +
+
+
+
+ +
tiles, popover
+
+ + +
+
+
Popover title
+

Shown inline here. On the live pages it floats over its anchor.

+