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 (