diff --git a/src/app-layout/__tests__/skeleton.test.tsx b/src/app-layout/__tests__/skeleton.test.tsx index 003ff85e15..40b7342830 100644 --- a/src/app-layout/__tests__/skeleton.test.tsx +++ b/src/app-layout/__tests__/skeleton.test.tsx @@ -7,7 +7,9 @@ import BreadcrumbGroup from '../../../lib/components/breadcrumb-group'; import { getFunnelKeySelector } from '../../../lib/components/internal/analytics/selectors'; import { describeEachAppLayout, renderComponent } from './utils'; +import testutilStyles from '../../../lib/components/app-layout/test-classes/styles.selectors.js'; import skeletonStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js'; +import toolbarStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/styles.selectors.js'; let widgetMockEnabled = false; function createWidgetizedComponentMock(Implementation: React.ComponentType, Skeleton: React.ComponentType) { @@ -64,7 +66,7 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, () => { tools="test tools" /> ); - expect(wrapper.findToolbar()).toBeFalsy(); + expect(wrapper.findToolbar()).toBeTruthy(); // Needed for SSR expect(wrapper.findNavigation()).toBeFalsy(); expect(wrapper.findBreadcrumbs()).toBeTruthy(); // Needed for SSR expect(wrapper.find(getFunnelKeySelector('funnel-name'))).toBeTruthy(); @@ -96,5 +98,13 @@ describeEachAppLayout({ themes: ['refresh-toolbar'] }, () => { rerender(); expect(wrapper.findByClassName(skeletonStyles['toolbar-container'])).toBeFalsy(); }); + + it('skeleton toolbar has correct classes for SSR compatibility', () => { + const { wrapper } = renderComponent(); + const toolbarContainer = wrapper.findByClassName(skeletonStyles['toolbar-container']); + expect(toolbarContainer).toBeTruthy(); + expect(toolbarContainer!.getElement()).toHaveClass(toolbarStyles['universal-toolbar']); + expect(toolbarContainer!.getElement()).toHaveClass(testutilStyles.toolbar); + }); }); }); diff --git a/src/app-layout/visual-refresh-toolbar/skeleton/slots.tsx b/src/app-layout/visual-refresh-toolbar/skeleton/slots.tsx index cdb1ac3402..e30153b7ab 100644 --- a/src/app-layout/visual-refresh-toolbar/skeleton/slots.tsx +++ b/src/app-layout/visual-refresh-toolbar/skeleton/slots.tsx @@ -7,6 +7,8 @@ import { BreadcrumbGroupImplementation } from '../../../breadcrumb-group/impleme import { BreadcrumbGroupProps } from '../../../breadcrumb-group/interfaces'; import { BreadcrumbsSlotContext } from '../contexts'; +import testutilStyles from '../../test-classes/styles.css.js'; +import toolbarStyles from '../toolbar/styles.css.js'; import styles from './styles.css.js'; interface ToolbarSlotProps { @@ -18,7 +20,7 @@ interface ToolbarSlotProps { export const ToolbarSlot = React.forwardRef(({ className, style, children }, ref) => (
} - className={clsx(styles['toolbar-container'], className)} + className={clsx(styles['toolbar-container'], toolbarStyles['universal-toolbar'], testutilStyles.toolbar, className)} style={{ insetBlockStart: style?.insetBlockStart ?? 0, ...style, diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx index 0910fc6b9e..c882bc1d0b 100644 --- a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx +++ b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx @@ -148,14 +148,9 @@ export function AppLayoutToolbarImplementation({ return (