diff --git a/src/app-layout/__integ__/app-layout-focus-delegation.test.ts b/src/app-layout/__integ__/app-layout-focus-delegation.test.ts index e310d40404..238edd56a3 100644 --- a/src/app-layout/__integ__/app-layout-focus-delegation.test.ts +++ b/src/app-layout/__integ__/app-layout-focus-delegation.test.ts @@ -7,6 +7,8 @@ import createWrapper from '../../../lib/components/test-utils/selectors'; import { viewports } from './constants'; import { getUrlParams, testIf, Theme } from './utils'; +import splitPanelTestUtilStyles from '../../../lib/components/split-panel/test-classes/styles.selectors.js'; + const wrapper = createWrapper().findAppLayout(); interface SetupTestObj { @@ -59,7 +61,11 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme => await page.keys(['Tab', 'Tab']); await expect(page.isFocused(wrapper.findSplitPanel().findCloseButton().toSelector())).resolves.toBe(true); await page.keys('Enter'); - await expect(page.isFocused(wrapper.findSplitPanel().findOpenButton().toSelector())).resolves.toBe(true); + const openButton = + mobile || theme === 'refresh-toolbar' + ? wrapper.findSplitPanel().findByClassName(splitPanelTestUtilStyles['open-button']) + : wrapper.findSplitPanelOpenButton(); + await expect(page.isFocused(openButton.toSelector())).resolves.toBe(true); await page.keys('Enter'); await expect(page.isFocused(wrapper.findSplitPanel().findSlider().toSelector())).resolves.toBe(true); }, diff --git a/src/app-layout/__integ__/toolbar-tooltips/app-layout-toolbar-split-panel-trigger-tooltip.test.ts b/src/app-layout/__integ__/toolbar-tooltips/app-layout-toolbar-split-panel-trigger-tooltip.test.ts index 01f26def4a..acad26bebb 100644 --- a/src/app-layout/__integ__/toolbar-tooltips/app-layout-toolbar-split-panel-trigger-tooltip.test.ts +++ b/src/app-layout/__integ__/toolbar-tooltips/app-layout-toolbar-split-panel-trigger-tooltip.test.ts @@ -16,6 +16,12 @@ describe('refresh-toolbar', () => { const tooltipSelector = wrapper.findDrawerTriggerTooltip().toSelector(); const expectedTooltipText = 'Open panel'; + const assertSplitPanelTriggerFocusedWithTooltip = async (page: AppLayoutDrawersPage) => { + await expect(page.isFocused(splitPanelTriggerSelector)).resolves.toBe(true); + await expect(page.getText(tooltipSelector)).resolves.toBe(expectedTooltipText); + await expect(page.getElementsCount(tooltipSelector)).resolves.toBe(1); + }; + describe.each(['bottom', 'side'] as const)('splitPanelPosition=%s', splitPanelPosition => { test( 'Shows tooltip correctly on split panel trigger for mouse interactions', @@ -57,24 +63,21 @@ describe('refresh-toolbar', () => { ); test( - 'Shows tooltip correctly for split panel trigger for keyboard (tab) interactions', + 'Shows and hides tooltip correctly for split panel trigger for keyboard (tab) interactions', setupTest({ theme, size, splitPanelPosition }, async (page: AppLayoutDrawersPage) => { await expect(page.isExisting(tooltipSelector)).resolves.toBe(false); - await page.click(splitPanelTriggerSelector); - - await expect(page.isFocused(wrapper.findSplitPanel().findSlider().toSelector())).resolves.toBeTruthy(); + // Focus split panel trigger + await page.click(wrapper.findToolbar().toSelector()); await page.keys(['Tab', 'Tab']); - await page.isFocused(wrapper.findSplitPanel().findCloseButton().toSelector()); - await page.keys('Enter'); + await assertSplitPanelTriggerFocusedWithTooltip(page); + // Focus breadcrumbs + await page.keys(['Shift', 'Tab']); await expect(page.isExisting(tooltipSelector)).resolves.toBe(false); - //navigate away from slide panel - await page.keys(['Shift', 'Tab', 'Null']); // to last breadcrumb - be aware if breadcrumb has tooltip - //navigate back to drawer trigger + // Navigate back to split panel trigger await page.keys(['Tab']); - await expect(page.isFocused(splitPanelTriggerSelector)).resolves.toBeTruthy(); - await await expect(page.getText(tooltipSelector)).resolves.toBe(expectedTooltipText); - await expect(page.getElementsCount(tooltipSelector)).resolves.toBe(1); - await page.keys(['Shift', 'Tab', 'Null']); + await assertSplitPanelTriggerFocusedWithTooltip(page); + // Open the split panel + await page.keys('Enter'); await expect(page.isExisting(tooltipSelector)).resolves.toBe(false); }) ); @@ -83,19 +86,10 @@ describe('refresh-toolbar', () => { 'Removes tooltip from split panel trigger on escape key press after showing from keyboard event', setupTest({ theme, size, splitPanelPosition }, async (page: AppLayoutDrawersPage) => { await expect(page.isExisting(tooltipSelector)).resolves.toBe(false); - await page.click(splitPanelTriggerSelector); - await expect(page.isFocused(wrapper.findSplitPanel().findSlider().toSelector())).resolves.toBeTruthy(); - await expect(page.isExisting(tooltipSelector)).resolves.toBe(false); - await page.click(splitPanelTriggerSelector); - await expect(page.isExisting(tooltipSelector)).resolves.toBe(false); - //navigate away from slide panel - await page.keys(['Shift', 'Tab', 'Null']); // to last breadcrumb - be aware if breadcrumb has tooltip - await expect(page.isExisting(tooltipSelector)).resolves.toBe(false); - //navigate back to drawer trigger - await page.keys(['Tab']); - await expect(page.isFocused(splitPanelTriggerSelector)).resolves.toBeTruthy(); - await expect(page.getText(tooltipSelector)).resolves.toBe(expectedTooltipText); - await expect(page.getElementsCount(tooltipSelector)).resolves.toBe(1); + // Focus split panel trigger + await page.click(wrapper.findToolbar().toSelector()); + await page.keys(['Tab', 'Tab']); + await assertSplitPanelTriggerFocusedWithTooltip(page); await page.keys('Escape'); await expect(page.isExisting(tooltipSelector)).resolves.toBe(false); }) diff --git a/src/app-layout/__tests__/split-panel.test.tsx b/src/app-layout/__tests__/split-panel.test.tsx index 71b99025ea..b9660a738b 100644 --- a/src/app-layout/__tests__/split-panel.test.tsx +++ b/src/app-layout/__tests__/split-panel.test.tsx @@ -12,6 +12,8 @@ import { describeEachAppLayout, renderComponent, splitPanelI18nStrings } from '. import applayoutTools from '../../../lib/components/app-layout/visual-refresh/styles.selectors.js'; import { AppLayoutWrapper } from '../../../lib/components/test-utils/dom'; +import testUtilStyles from '../../../lib/components/split-panel/test-classes/styles.selectors.js'; + const defaultSplitPanel = ( test content @@ -135,7 +137,11 @@ describeEachAppLayout({ sizes: ['desktop'] }, ({ theme }) => { ); wrapper.findSplitPanelOpenButton()!.click(); wrapper.findSplitPanel()!.findCloseButton()!.click(); - expect(wrapper.findSplitPanelOpenButton()!.getElement()).toHaveFocus(); + const button = + position === 'side' + ? wrapper.findSplitPanelOpenButton() + : wrapper.findSplitPanel()!.findByClassName(testUtilStyles['open-button']); + expect(button!.getElement()).toHaveFocus(); }); test(`Moves focus to the slider when focusSplitPanel() is called`, () => { diff --git a/src/app-layout/__tests__/widget-compatibility.test.tsx b/src/app-layout/__tests__/widget-compatibility.test.tsx index 309f5a3a7c..22dac4385f 100644 --- a/src/app-layout/__tests__/widget-compatibility.test.tsx +++ b/src/app-layout/__tests__/widget-compatibility.test.tsx @@ -105,14 +105,14 @@ test('renders visual refresh toolbar with navigation using legacy props', () => expect(onNavigationToggle).toHaveBeenCalled(); }); -test('renders visual refresh toolbar with split panel using toolbarProps', () => { +test('renders visual refresh toolbar with split panel trigger using toolbarProps', () => { const onSplitPanelToggle = jest.fn(); renderNewAppLayout({ toolbarProps: { onSplitPanelToggle } }); wrapper.findByClassName(splitPanelTestUtilStyles['open-button'])!.click(); expect(onSplitPanelToggle).toHaveBeenCalled(); }); -test('renders visual refresh toolbar with split panel using legacy props', () => { +test('renders visual refresh toolbar with split panel trigger using legacy props', () => { const onSplitPanelToggle = jest.fn(); renderLegacyAppLayout({ appLayoutInternals: { onSplitPanelToggle } }); wrapper.findByClassName(splitPanelTestUtilStyles['open-button'])!.click(); diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx index cd4a9f8818..ab33be3945 100644 --- a/src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx +++ b/src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx @@ -110,6 +110,7 @@ export function DrawerTriggers({ const toolsOnlyMode = drawers.length === 1 && drawers[0].id === TOOLS_DRAWER_ID; const globalDrawersStartIndex = drawers.length; const hasOpenDrawer = !!activeDrawerId || (splitPanelPosition === 'side' && splitPanelOpen); + const splitPanelResolvedPosition = splitPanelToggleProps?.position; return (