diff --git a/ui/tests/unit/components/ui/code-editor-usage-contract.test.ts b/ui/tests/unit/components/ui/code-editor-usage-contract.test.ts index 7175b8d8..57c638c6 100644 --- a/ui/tests/unit/components/ui/code-editor-usage-contract.test.ts +++ b/ui/tests/unit/components/ui/code-editor-usage-contract.test.ts @@ -29,6 +29,27 @@ const boundedConsumers = [ }, ] as const; +const boundedLayoutContracts = [ + { + file: 'src/components/profiles/editor/index.tsx', + snippets: [ + 'min-h-0 flex-1 grid grid-cols-[40%_60%] divide-x overflow-hidden', + 'flex min-h-0 min-w-0 flex-col overflow-hidden', + ], + }, + { + file: 'src/components/cliproxy/provider-editor/index.tsx', + snippets: [ + 'min-h-0 flex-1 grid grid-cols-[40%_60%] divide-x overflow-hidden', + 'flex min-h-0 min-w-0 flex-col overflow-hidden', + ], + }, + { + file: 'src/pages/api.tsx', + snippets: ['flex min-h-0 flex-1 flex-col min-w-0 overflow-hidden'], + }, +] as const; + describe('bounded CodeEditor consumers', () => { it.each(boundedConsumers)('$file opts into fill-parent mode for every bounded editor', ({ file, @@ -39,4 +60,15 @@ describe('bounded CodeEditor consumers', () => { expect(matches).toHaveLength(expectedCount); }); + + it.each(boundedLayoutContracts)( + '$file keeps bounded editor ancestors shrinkable', + ({ file, snippets }) => { + const source = readFileSync(resolve(process.cwd(), file), 'utf8'); + + for (const snippet of snippets) { + expect(source).toContain(snippet); + } + } + ); }); diff --git a/ui/tests/unit/components/ui/code-editor.test.tsx b/ui/tests/unit/components/ui/code-editor.test.tsx index 3a8d71cc..67e8b4c8 100644 --- a/ui/tests/unit/components/ui/code-editor.test.tsx +++ b/ui/tests/unit/components/ui/code-editor.test.tsx @@ -20,9 +20,10 @@ describe('CodeEditor', () => { ); const viewport = container.querySelector('[data-slot="code-editor-viewport"]'); + const root = container.firstElementChild; expect(viewport).toBeInTheDocument(); - expect(viewport).toHaveStyle({ height: '100%' }); + expect(root).toHaveStyle({ height: '100%' }); expect(viewport).not.toContainElement(screen.getByText('Valid JSON')); }); @@ -40,8 +41,9 @@ describe('CodeEditor', () => { const viewport = container.querySelector('[data-slot="code-editor-viewport"]'); const textarea = container.querySelector('textarea'); + const root = container.firstElementChild; - expect(viewport).toHaveStyle({ height: 'calc(60vh - 120px)' }); + expect(root).toHaveStyle({ height: 'calc(60vh - 120px)' }); expect(textarea).toBeDisabled(); expect(viewport).not.toContainElement(screen.getByText('(Read-only)')); });