diff --git a/packages/html-reporter/src/chip.css b/packages/html-reporter/src/chip.css index f37aff953b642..513fe4ff40c7f 100644 --- a/packages/html-reporter/src/chip.css +++ b/packages/html-reporter/src/chip.css @@ -23,7 +23,7 @@ background-color: var(--color-canvas-subtle); padding: 0 8px; border-bottom: none; - margin-top: 12px; + margin: 12px 0 0; color: inherit; font: inherit; font-weight: 600; diff --git a/packages/html-reporter/src/chip.spec.ts b/packages/html-reporter/src/chip.spec.ts index 69d6444dbfb57..c48a9b79b635d 100644 --- a/packages/html-reporter/src/chip.spec.ts +++ b/packages/html-reporter/src/chip.spec.ts @@ -50,10 +50,13 @@ test('body render prop is rendered', async ({ mount }) => { await expect(component.getByText('Chip children')).toBeVisible(); }); -test('chip without setExpanded is not a button', async ({ mount }) => { +test('chip without setExpanded is a heading', async ({ mount }) => { const component = await mount('chip/NotExpandable'); await expect(component.getByRole('button')).toHaveCount(0); - await expect(component.getByText('Body')).toBeVisible(); + await expect(component).toMatchAriaSnapshot(` + - heading "Title" [level=2] + - region: Body + `); }); test('expand collapse with the keyboard', async ({ mount, page }) => { diff --git a/packages/html-reporter/src/chip.tsx b/packages/html-reporter/src/chip.tsx index 1a6926e36c28b..b206188cab1fe 100644 --- a/packages/html-reporter/src/chip.tsx +++ b/packages/html-reporter/src/chip.tsx @@ -47,9 +47,9 @@ export const Chip: React.FC<{ onClick={() => setExpanded(!expanded)} title={title}> {headerContent} - :
+ :

{headerContent} -

} + } {(!setExpanded || expanded) &&
{children} {body && body()} diff --git a/tests/playwright-test/reporter-html.spec.ts b/tests/playwright-test/reporter-html.spec.ts index 9ce7ac74a2569..3c0a31e733247 100644 --- a/tests/playwright-test/reporter-html.spec.ts +++ b/tests/playwright-test/reporter-html.spec.ts @@ -3431,7 +3431,7 @@ for (const useIntermediateMergeReport of [true, false] as const) { await expect(page.getByRole('link', { name: 'Speedboard' })).toHaveAttribute('aria-selected', 'true'); await expect(page).toMatchAriaSnapshot(` - - text: /Slowest Tests/ + - heading "Slowest Tests" [level=2] - region: - list: - listitem: @@ -3455,7 +3455,7 @@ for (const useIntermediateMergeReport of [true, false] as const) { `); await page.getByText('foo').first().click(); await expect(page).toMatchAriaSnapshot(` - - text: /Slowest Tests/ + - heading "Slowest Tests" [level=2] `); await page.getByRole('link', { name: 'Failed' }).click();