chore: Expanded mode test closing scenario

Author: georgylobko

src/app-layout/__tests__/runtime-drawers.test.tsx

@@ -1443,54 +1443,84 @@ describe('toolbar mode only features', () => {
             })
           );
         });
-      });
 
-      test('only one drawer could be in expanded mode. all other panels should be closed', async () => {
-        const drawerId1 = 'global-drawer1';
-        const drawerId2 = 'global-drawer2';
-        const drawerId3Local = 'local-drawer';
-        awsuiPlugins.appLayout.registerDrawer({
-          ...drawerDefaults,
-          id: drawerId1,
-          type: 'global',
-          isExpandable: true,
-        });
-        awsuiPlugins.appLayout.registerDrawer({
-          ...drawerDefaults,
-          id: drawerId2,
-          type: 'global',
-          isExpandable: true,
-        });
-        awsuiPlugins.appLayout.registerDrawer({
-          ...drawerDefaults,
-          id: drawerId3Local,
-        });
-        const { wrapper, globalDrawersWrapper } = await renderComponent(
-          <AppLayout navigationOpen={true} navigation={<div>nav</div>} />
-        );
+        test('only one drawer could be in expanded mode. all other panels should be closed', async () => {
+          const drawerId1 = 'global-drawer1';
+          const drawerId2 = 'global-drawer2';
+          const drawerId3Local = 'local-drawer';
+          awsuiPlugins.appLayout.registerDrawer({
+            ...drawerDefaults,
+            id: drawerId1,
+            type: 'global',
+            isExpandable: true,
+          });
+          awsuiPlugins.appLayout.registerDrawer({
+            ...drawerDefaults,
+            id: drawerId2,
+            type,
+            isExpandable: true,
+          });
+          awsuiPlugins.appLayout.registerDrawer({
+            ...drawerDefaults,
+            id: drawerId3Local,
+          });
+          const renderProps = await renderComponent(<AppLayout navigationOpen={true} navigation={<div>nav</div>} />);
+          const { wrapper, globalDrawersWrapper } = renderProps;
 
-        await delay();
+          await delay();
 
-        wrapper.findDrawerTriggerById(drawerId1)!.click();
-        wrapper.findDrawerTriggerById(drawerId2)!.click();
-        wrapper.findDrawerTriggerById(drawerId3Local)!.click();
+          wrapper.findDrawerTriggerById(drawerId1)!.click();
+          findDrawerTriggerById(drawerId2, renderProps)!.click();
+          wrapper.findDrawerTriggerById(drawerId3Local)!.click();
 
-        expect(wrapper.findDrawerTriggerById(drawerId1)!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
-        expect(wrapper.findDrawerTriggerById(drawerId2)!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
-        expect(wrapper.findDrawerTriggerById(drawerId3Local)!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
-        expect(wrapper.findNavigationToggle()!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
-        expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(false);
-        expect(globalDrawersWrapper.findDrawerById(drawerId1)!.isDrawerInExpandedMode()).toBe(false);
+          expect(wrapper.findDrawerTriggerById(drawerId1)!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
+          // because the trigger button for the AI drawer gets hidden when it's expanded
+          if (type === 'global') {
+            expect(wrapper.findDrawerTriggerById(drawerId2)!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
+          }
+          expect(wrapper.findDrawerTriggerById(drawerId3Local)!.getElement()).toHaveClass(
+            toolbarTriggerStyles.selected
+          );
+          expect(wrapper.findNavigationToggle()!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
+          expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(false);
+          expect(globalDrawersWrapper.findDrawerById(drawerId1)!.isDrawerInExpandedMode()).toBe(false);
 
-        globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId1)!.click();
+          globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId1)!.click();
 
-        expect(globalDrawersWrapper.findDrawerById(drawerId1)!.isDrawerInExpandedMode()).toBe(true);
-        expect(wrapper.findDrawerTriggerById(drawerId1)!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
-        expect(wrapper.findDrawerTriggerById(drawerId2)!.getElement()).not.toHaveClass(toolbarTriggerStyles.selected);
-        expect(wrapper.findDrawerTriggerById(drawerId3Local)!.getElement()).not.toHaveClass(
-          toolbarTriggerStyles.selected
-        );
-        expect(wrapper.findNavigationToggle()!.getElement()).not.toHaveClass(toolbarTriggerStyles.selected);
+          expect(globalDrawersWrapper.findDrawerById(drawerId1)!.isDrawerInExpandedMode()).toBe(true);
+          expect(wrapper.findDrawerTriggerById(drawerId1)!.getElement()).toHaveClass(toolbarTriggerStyles.selected);
+          // because the trigger button for the AI drawer gets hidden when it's expanded
+          if (type === 'global') {
+            expect(wrapper.findDrawerTriggerById(drawerId2)!.getElement()).not.toHaveClass(
+              toolbarTriggerStyles.selected
+            );
+          }
+          expect(wrapper.findDrawerTriggerById(drawerId3Local)!.getElement()).not.toHaveClass(
+            toolbarTriggerStyles.selected
+          );
+          expect(wrapper.findNavigationToggle()!.getElement()).not.toHaveClass(toolbarTriggerStyles.selected);
+        });
+
+        test('should quit expanded mode when a drawer in expanded mode is closed', async () => {
+          const drawerId = 'global-drawer';
+          awsuiPlugins.appLayout.registerDrawer({
+            ...drawerDefaults,
+            id: drawerId,
+            type,
+            isExpandable: true,
+          });
+          const renderProps = await renderComponent(<AppLayout />);
+          const { globalDrawersWrapper } = renderProps;
+
+          await delay();
+
+          findDrawerTriggerById(drawerId, renderProps)!.click();
+          globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.click();
+          expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(true);
+          expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(true);
+          globalDrawersWrapper.findCloseButtonByActiveDrawerId(drawerId)!.click();
+          expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(false);
+        });
       });
 
       test.each(['expanded', 'split-panel', 'global-drawer', 'local-drawer', 'nav'] as const)(
@@ -1637,26 +1667,6 @@ describe('toolbar mode only features', () => {
         expect(globalDrawersWrapper.findDrawerById(drawerId1)!.isDrawerInExpandedMode()).toBe(false);
       });
 
-      test('should quit expanded mode when a drawer in expanded mode is closed', async () => {
-        const drawerId = 'global-drawer';
-        awsuiPlugins.appLayout.registerDrawer({
-          ...drawerDefaults,
-          id: drawerId,
-          type: 'global',
-          isExpandable: true,
-        });
-        const { wrapper, globalDrawersWrapper } = await renderComponent(<AppLayout />);
-
-        await delay();
-
-        wrapper.findDrawerTriggerById(drawerId)!.click();
-        globalDrawersWrapper.findExpandedModeButtonByActiveDrawerId(drawerId)!.click();
-        expect(globalDrawersWrapper.findDrawerById(drawerId)!.isDrawerInExpandedMode()).toBe(true);
-        expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(true);
-        wrapper.findDrawerTriggerById(drawerId)!.click();
-        expect(globalDrawersWrapper.isLayoutInDrawerExpandedMode()).toBe(false);
-      });
-
       describe('nested app layouts', () => {
         test('should apply expanded drawer mode only for inner AppLayout and hide nav for the outer AppLayout', async () => {
           const drawerId = 'global-drawer';