Fix tests

Author: jperals

src/app-layout/__tests__/toolbar.test.tsx

@@ -7,6 +7,7 @@ import { describeEachAppLayout, manyDrawers, renderComponent } from './utils';
 
 import AppLayout from '../../../lib/components/app-layout';
 import SplitPanel from '../../../lib/components/split-panel';
+import testUtilsStyles from '../../../lib/components/app-layout/test-classes/styles.css.js';
 
 // no-op function to suppress controllability warnings
 function noop() {}
@@ -39,7 +40,9 @@ describe('toolbar mode only features', () => {
         <AppLayout splitPanel={<SplitPanel header="Testing">Dummy for testing</SplitPanel>} />
       );
       expect(wrapper.findToolbar()).toBeTruthy();
-      expect(wrapper.findToolbar()!.getElement()).toContainElement(wrapper.findSplitPanelOpenButton()!.getElement());
+      expect(wrapper.findToolbar()!.getElement()).toContainElement(
+        wrapper.findByClassName(testUtilsStyles['split-panel-trigger'])!.getElement()
+      );
     });
 
     test('renders toolbar with split panel trigger in active state', () => {
@@ -51,8 +54,9 @@ describe('toolbar mode only features', () => {
         />
       );
       expect(wrapper.findToolbar()).toBeTruthy();
-      expect(wrapper.findToolbar()!.getElement()).toContainElement(wrapper.findSplitPanelOpenButton()!.getElement());
-      expect(wrapper.findSplitPanelOpenButton()!.getElement()).toHaveAttribute('aria-expanded', 'true');
+      const splitPanelTrigger = wrapper.findByClassName(testUtilsStyles['split-panel-trigger'])!.getElement();
+      expect(wrapper.findToolbar()!.getElement()).toContainElement(splitPanelTrigger);
+      expect(splitPanelTrigger).toHaveAttribute('aria-expanded', 'true');
     });
 
     // skip on desktop because requires element queries to work

src/app-layout/__tests__/widget-compatibility.test.tsx

@@ -108,13 +108,13 @@ test('renders visual refresh toolbar with navigation using legacy props', () =>
 test('renders visual refresh toolbar with split panel using toolbarProps', () => {
   const onSplitPanelToggle = jest.fn();
   renderNewAppLayout({ toolbarProps: { onSplitPanelToggle } });
-  wrapper.findByClassName(splitPanelTestUtilStyles['open-button'])!.click();
+  wrapper.findByClassName(splitPanelTestUtilStyles['split-panel-trigger'])!.click();
   expect(onSplitPanelToggle).toHaveBeenCalled();
 });
 
 test('renders visual refresh toolbar with split panel using legacy props', () => {
   const onSplitPanelToggle = jest.fn();
   renderLegacyAppLayout({ appLayoutInternals: { onSplitPanelToggle } });
-  wrapper.findByClassName(splitPanelTestUtilStyles['open-button'])!.click();
+  wrapper.findByClassName(testUtilsStyles['split-panel-trigger'])!.click();
   expect(onSplitPanelToggle).toHaveBeenCalled();
 });

src/app-layout/test-classes/styles.scss

@@ -19,6 +19,7 @@
 .drawers-trigger,
 .drawers-trigger-global,
 .drawers-trigger-with-badge,
+.split-panel-trigger,
 .active-drawer,
 .active-drawer-close-button,
 .overflow-menu,

src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx

@@ -136,9 +136,10 @@ export function DrawerTriggers({
               className={clsx(
                 styles['drawers-trigger'],
                 testutilStyles['drawers-trigger'],
+                testutilStyles['split-panel-trigger'],
                 splitPanelResolvedPosition === 'side' && splitPanelTestUtilStyles['open-button']
               )}
-              iconName={splitPanelToggleProps.position === 'side' ? 'view-vertical' : 'view-horizontal'}
+              iconName={splitPanelResolvedPosition === 'side' ? 'view-vertical' : 'view-horizontal'}
               onClick={() => onSplitPanelToggle?.()}
               selected={splitPanelToggleProps.active}
               ref={splitPanelResolvedPosition === 'side' ? splitPanelFocusRef : undefined}