From 906bade3e2464687149ca441d041901cff00e98b Mon Sep 17 00:00:00 2001 From: Shivam Rungta Date: Fri, 13 Feb 2026 16:13:18 +0100 Subject: [PATCH] refactor(app-layout): move theme validation after render setup in tests MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Improved test organization by moving validateThemeCompatibility calls to after component render and variable destructuring in 17 tests. Benefits: - Better code organization: setup → render → validate → test - Allows test setup code (registerDrawer, delay) to run for all themes - Validates component state after setup completes - More consistent test structure Pattern change: Before: registerDrawer(...) await delay() if (await validateThemeCompatibility(...)) return; const { wrapper } = await renderComponent(...) After: registerDrawer(...) await delay() const { wrapper } = await renderComponent(...) if (await validateThemeCompatibility(...)) return; This ensures drawer registration and delays execute for all themes, then validates the rendered state before proceeding with assertions. Tests affected: 17 tests in toolbar mode suite Net change: +142/-129 lines (formatting improvements) --- .../__tests__/runtime-drawers.test.tsx | 176 ++++++++++-------- 1 file changed, 94 insertions(+), 82 deletions(-) diff --git a/src/app-layout/__tests__/runtime-drawers.test.tsx b/src/app-layout/__tests__/runtime-drawers.test.tsx index cb6d5bb261..023ac346a4 100644 --- a/src/app-layout/__tests__/runtime-drawers.test.tsx +++ b/src/app-layout/__tests__/runtime-drawers.test.tsx @@ -1129,13 +1129,13 @@ describe('toolbar mode only features', () => { mountContent: container => (container.textContent = 'global drawer content 1'), }); + const renderProps = await renderComponent(); + const { globalDrawersWrapper } = renderProps; + if (await validateThemeCompatibility(theme, )) { return; } - const renderProps = await renderComponent(); - const { globalDrawersWrapper } = renderProps; - findDrawerTriggerById('global-drawer-1', renderProps)!.focus(); findDrawerTriggerById('global-drawer-1', renderProps)!.click(); expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.getElement()).toBeInTheDocument(); @@ -1154,11 +1154,12 @@ describe('toolbar mode only features', () => { preserveInactiveContent: true, }); + const renderProps = await renderComponent(); + const { globalDrawersWrapper } = renderProps; + if (await validateThemeCompatibility(theme, )) { return; } - const renderProps = await renderComponent(); - const { globalDrawersWrapper } = renderProps; expect(globalDrawersWrapper.findDrawerById('global-drawer-1')).toBeNull(); @@ -1187,13 +1188,13 @@ describe('toolbar mode only features', () => { preserveInactiveContent: true, }); + const renderProps = await renderComponent(); + const { globalDrawersWrapper } = renderProps; + if (await validateThemeCompatibility(theme, )) { return; } - const renderProps = await renderComponent(); - const { globalDrawersWrapper } = renderProps; - findDrawerTriggerById('global-drawer-1', renderProps)!.click(); await delay(); @@ -1208,12 +1209,12 @@ describe('toolbar mode only features', () => { test(`closes a drawer when closeDrawer is called (${type} drawer)`, async () => { registerDrawer({ ...drawerDefaults, resizable: true }); + const { wrapper } = await renderComponent(); + if (await validateThemeCompatibility(theme, )) { return; } - const { wrapper } = await renderComponent(); - if (type === 'global' && position !== 'bottom') { awsuiPlugins.appLayout.openDrawer('test'); } else { @@ -1236,10 +1237,6 @@ describe('toolbar mode only features', () => { }); test('should render trigger buttons for global drawers even if local drawers are not present', async () => { - if (await validateThemeCompatibility(theme, )) { - return; - } - const renderProps = await renderComponent(); registerDrawer({ @@ -1249,6 +1246,10 @@ describe('toolbar mode only features', () => { await delay(); + if (await validateThemeCompatibility(theme, )) { + return; + } + expect(findDrawerTriggerById('global1', renderProps)!.getElement()).toBeInTheDocument(); }); @@ -1260,10 +1261,11 @@ describe('toolbar mode only features', () => { onToggle: event => onToggle(event.detail), }); + const renderProps = await renderComponent(); + if (await validateThemeCompatibility(theme, )) { return; } - const renderProps = await renderComponent(); findDrawerTriggerById('global-drawer', renderProps)!.click(); expect(onToggle).toHaveBeenCalledWith({ isOpen: true, initiatedByUserAction: true }); @@ -1287,10 +1289,12 @@ describe('toolbar mode only features', () => { onHeaderActionClick: event => onHeaderActionClick(event.detail), }); + const renderProps = await renderComponent(); + if (await validateThemeCompatibility(theme, )) { return; } - const renderProps = await renderComponent(); + findDrawerTriggerById('global-drawer', renderProps)!.click(); findDrawerHeaderActionById('add', renderProps)!.click(); @@ -1319,11 +1323,13 @@ describe('toolbar mode only features', () => { ], }); + const renderProps = await renderComponent(); + const { wrapper } = renderProps; + if (await validateThemeCompatibility(theme, )) { return; } - const renderProps = await renderComponent(); - const { wrapper } = renderProps; + findDrawerTriggerById('global-drawer', renderProps)!.click(); expect(wrapper.find('[data-testid="custom-icon"]')).toBeTruthy(); expect(wrapper.find('[data-testid="custom-icon-pressed"]')).toBeTruthy(); @@ -1345,12 +1351,12 @@ describe('toolbar mode only features', () => { mountContent: container => (container.textContent = 'global drawer content 2'), }); + const { wrapper, globalDrawersWrapper } = await renderComponent(); + if (await validateThemeCompatibility(theme, )) { return; } - const { wrapper, globalDrawersWrapper } = await renderComponent(); - wrapper.findDrawerTriggerById('global-drawer-2')!.click(); wrapper.findDrawerTriggerById('global-drawer-1')!.click(); @@ -1366,12 +1372,12 @@ describe('toolbar mode only features', () => { mountContent: container => (container.textContent = 'global drawer content 1'), }); + const { wrapper, globalDrawersWrapper } = await renderComponent(); + if (await validateThemeCompatibility(theme, )) { return; } - const { wrapper, globalDrawersWrapper } = await renderComponent(); - wrapper.findDrawerTriggerById('global-drawer-1')!.click(); expect(globalDrawersWrapper.findDrawerById('global-drawer-1')!.getElement()).toBeInTheDocument(); @@ -1390,6 +1396,19 @@ describe('toolbar mode only features', () => { trigger: undefined, }); + const { globalDrawersWrapper, getByTestId } = await renderComponent( + + + + } + /> + ); + if ( await validateThemeCompatibility( theme, @@ -1408,19 +1427,6 @@ describe('toolbar mode only features', () => { return; } - const { globalDrawersWrapper, getByTestId } = await renderComponent( - - - - } - /> - ); - getByTestId('trigger-button').focus(); getByTestId('trigger-button').click(); @@ -1443,12 +1449,12 @@ describe('toolbar mode only features', () => { test('should not render a trigger button if registered drawer does not have a trigger prop', async () => { awsuiPlugins.appLayout.registerDrawer({ ...drawerDefaults, trigger: undefined }); + const { wrapper } = await renderComponent(); + if (await validateThemeCompatibility(theme, )) { return; } - const { wrapper } = await renderComponent(); - expect(wrapper.findDrawerTriggerById('test')).toBeFalsy(); awsuiPlugins.appLayout.openDrawer('test'); @@ -1469,10 +1475,11 @@ describe('toolbar mode only features', () => { onToggle: event => onToggle(event.detail), }); + await renderComponent(); + if (await validateThemeCompatibility(theme, )) { return; } - await renderComponent(); awsuiPlugins.appLayout.openDrawer('global-drawer', { initiatedByUserAction }); expect(onToggle).toHaveBeenCalledWith({ isOpen: true, initiatedByUserAction }); @@ -1483,12 +1490,12 @@ describe('toolbar mode only features', () => { describe('dynamically registered drawers with defaultActive: true', () => { test('should open if there are already open local drawer on the page', async () => { + const { wrapper, globalDrawersWrapper } = await renderComponent(); + if (await validateThemeCompatibility(theme, )) { return; } - const { wrapper, globalDrawersWrapper } = await renderComponent(); - wrapper.findDrawerTriggerById('security')!.click(); expect(wrapper.findActiveDrawer()!.getElement()).toHaveTextContent('Security'); @@ -1518,12 +1525,12 @@ describe('toolbar mode only features', () => { }); test('should not open if there are already global drawers opened by user action on the page', async () => { + const { wrapper, globalDrawersWrapper } = await renderComponent(); + if (await validateThemeCompatibility(theme, )) { return; } - const { wrapper, globalDrawersWrapper } = await renderComponent(); - wrapper.findDrawerTriggerById('security')!.click(); expect(wrapper.findActiveDrawer()!.getElement()).toHaveTextContent('Security'); @@ -1553,12 +1560,12 @@ describe('toolbar mode only features', () => { }); test('should not open if the maximum number (2) of global drawers is already open on the page', async () => { + const { wrapper, globalDrawersWrapper } = await renderComponent(); + if (await validateThemeCompatibility(theme, )) { return; } - const { wrapper, globalDrawersWrapper } = await renderComponent(); - wrapper.findDrawerTriggerById('security')!.click(); expect(wrapper.findActiveDrawer()!.getElement()).toHaveTextContent('Security'); @@ -1599,10 +1606,6 @@ describe('toolbar mode only features', () => { }); test('should open global bottom drawer by default when defaultActive is set', async () => { - if (await validateThemeCompatibility(theme, )) { - return; - } - const { globalDrawersWrapper } = await renderComponent(); awsuiWidgetPlugins.registerBottomDrawer({ @@ -1613,6 +1616,10 @@ describe('toolbar mode only features', () => { await delay(); + if (await validateThemeCompatibility(theme, )) { + return; + } + expect(globalDrawersWrapper.findDrawerById('global1')!.isActive()).toBe(true); }); }); @@ -1832,6 +1839,16 @@ describe('toolbar mode only features', () => { id: drawerId3Local, }); + const { wrapper, globalDrawersWrapper } = await renderComponent( + nav} + splitPanel={test content} + /> + ); + + await delay(); + if ( await validateThemeCompatibility( theme, @@ -1844,15 +1861,6 @@ describe('toolbar mode only features', () => { ) { return; } - const { wrapper, globalDrawersWrapper } = await renderComponent( - nav} - splitPanel={test content} - /> - ); - - await delay(); wrapper.findDrawerTriggerById(drawerId1)!.click(); wrapper.findDrawerTriggerById(drawerId2)!.click(); @@ -1933,14 +1941,14 @@ describe('toolbar mode only features', () => { }); } - if (await validateThemeCompatibility(theme, )) { - return; - } - const { wrapper, globalDrawersWrapper } = await renderComponent(); await delay(); + if (await validateThemeCompatibility(theme, )) { + return; + } + const buttonDropdown = wrapper.findDrawersOverflowTrigger(); buttonDropdown!.openDropdown(); @@ -1995,6 +2003,14 @@ describe('toolbar mode only features', () => { isExpandable: true, }); + await renderComponent( + } + /> + ); + if ( await validateThemeCompatibility( theme, @@ -2008,14 +2024,6 @@ describe('toolbar mode only features', () => { return; } - await renderComponent( - } - /> - ); - const outerLayout = createWrapper().find('[data-testid="first"]')!.findAppLayout()!; const innerLayout = createWrapper().find('[data-testid="second"]')!.findAppLayout()!; const innerGlobalDrawers = getGlobalDrawersTestUtils(outerLayout); @@ -2050,12 +2058,12 @@ describe('toolbar mode only features', () => { awsuiWidgetPlugins.registerLeftDrawer({ ...drawerDefaults, id: 'test2' }); awsuiWidgetPlugins.registerBottomDrawer({ ...drawerDefaults, id: 'bottom' }); + const { globalDrawersWrapper } = await renderComponent(); + if (await validateThemeCompatibility(theme, )) { return; } - const { globalDrawersWrapper } = await renderComponent(); - awsuiPlugins.appLayout.openDrawer('test'); awsuiPlugins.appLayout.openDrawer('test1'); awsuiWidgetPlugins.updateDrawer({ type: 'openDrawer', payload: { id: 'test2' } }); @@ -2104,9 +2112,6 @@ describe('toolbar mode only features', () => { }); test('calls onResize handler for bottom drawer', async () => { - if (await validateThemeCompatibility(theme, )) { - return; - } const { wrapper, globalDrawersWrapper, debug } = await renderComponent(); const onResize = jest.fn(); awsuiWidgetPlugins.registerBottomDrawer({ @@ -2117,6 +2122,10 @@ describe('toolbar mode only features', () => { await delay(); + if (await validateThemeCompatibility(theme, )) { + return; + } + wrapper.findDrawerTriggerById(drawerDefaults.id)!.click(); const handle = globalDrawersWrapper.findResizeHandleByActiveDrawerId(drawerDefaults.id)!; debug(handle.getElement()); @@ -2154,12 +2163,12 @@ describe('toolbar mode only features', () => { onToggle: event => onToggle(event.detail), }); + const { wrapper, globalDrawersWrapper } = await renderComponent(); + if (await validateThemeCompatibility(theme, )) { return; } - const { wrapper, globalDrawersWrapper } = await renderComponent(); - const buttonDropdown = wrapper.findDrawersOverflowTrigger(); expect(globalDrawersWrapper.findDrawerById(drawerIdWithToggle)).toBeFalsy(); @@ -2183,11 +2192,12 @@ describe('toolbar mode only features', () => { test('assigns correct ARIA roles when mixing global and regular drawers', async () => { registerGlobalDrawers(2); + const { wrapper } = await renderComponent(); if (await validateThemeCompatibility(theme, )) { return; } - const { wrapper } = await renderComponent(); + const buttonDropdown = wrapper.findDrawersOverflowTrigger(); buttonDropdown!.openDropdown(); @@ -2208,12 +2218,13 @@ describe('toolbar mode only features', () => { test('assigns menuitemcheckbox role to global drawers in overflow menu', async () => { registerGlobalDrawers(3); + // In mobile view, two drawers are visible in the toolbar, the others are placed in the overflow menu + const { wrapper, globalDrawersWrapper } = await renderComponent(); + if (await validateThemeCompatibility(theme, )) { return; } - // In mobile view, two drawers are visible in the toolbar, the others are placed in the overflow menu - const { wrapper, globalDrawersWrapper } = await renderComponent(); const buttonDropdown = wrapper.findDrawersOverflowTrigger(); expect(globalDrawersWrapper.findDrawerById('global-drawer2')).toBeFalsy(); @@ -2239,13 +2250,14 @@ describe('toolbar mode only features', () => { type: 'global', isExpandable: true, }); - if (await validateThemeCompatibility(theme, )) { - return; - } const { wrapper, globalDrawersWrapper } = await renderComponent(); await delay(); + if (await validateThemeCompatibility(theme, )) { + return; + } + wrapper.findDrawerTriggerById(drawerId)!.click(); expect(globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)).toBeFalsy(); });