fix(dashboard): use toHaveStyleRule and getByTestId in droptarget test

Replace CSSOM scan with @emotion/jest toHaveStyleRule matcher using
the target option to verify the .empty-droptarget rule on StyledHeader.
Switch from container.querySelector to getByTestId for consistency
with other tests in this file.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Joe Li
2026-05-02 17:14:47 -07:00
parent 0b442ef9ae
commit 3fe59024ef

View File

@@ -496,7 +496,7 @@ test('should apply min-height to the top-level tab drop target so tabs can be dr
(fetchFaveStar as jest.Mock).mockReturnValue({ type: 'mock-action' });
(setActiveTab as jest.Mock).mockReturnValue({ type: 'mock-action' });
const { container } = render(<DashboardBuilder />, {
const { getByTestId } = render(<DashboardBuilder />, {
useRedux: true,
store: storeWithState({
...mockState,
@@ -507,33 +507,22 @@ test('should apply min-height to the top-level tab drop target so tabs can be dr
useTheme: true,
});
const headerWrapper = container.querySelector(
'[data-test="dashboard-header-wrapper"]',
);
expect(headerWrapper).toBeInTheDocument();
const headerWrapper = getByTestId('dashboard-header-wrapper');
// The Droppable inside the header should have the empty-droptarget class
// when there are no top-level tabs and edit mode is active. Without this
// class (and its associated min-height CSS rule), the drop target has zero
// height and users cannot drag tabs onto dashboards that already have
// content.
const droptarget = headerWrapper!.querySelector('.empty-droptarget');
const droptarget = headerWrapper.querySelector('.empty-droptarget');
expect(droptarget).toBeInTheDocument();
// Verify the StyledHeader CSS defines min-height for .empty-droptarget.
// getComputedStyle doesn't work in jsdom for styled-components injected
// styles, so we check the CSSOM directly.
const allRules = Array.from(document.styleSheets).flatMap(sheet => {
try {
return Array.from(sheet.cssRules).map(rule => rule.cssText);
} catch {
return [];
}
});
const emptyDroptargetRule = allRules.find(
rule => rule.includes('.empty-droptarget') && rule.includes('min-height'),
expect(headerWrapper).toHaveStyleRule(
'min-height',
expect.stringMatching(/\S+/),
{ target: '.empty-droptarget' },
);
expect(emptyDroptargetRule).toBeDefined();
});
test('should maintain layout when switching between tabs', async () => {