chore: Global drawers test utils

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

@@ -16,12 +16,12 @@ import * as awsuiWidgetPlugins from '../../../lib/components/internal/plugins/wi
 import { DrawerPayload as WidgetDrawerPayload } from '../../../lib/components/internal/plugins/widget/interfaces';
 import SplitPanel from '../../../lib/components/split-panel';
 import createWrapper from '../../../lib/components/test-utils/dom';
+import AppLayoutRuntimeWrapper from '../../../lib/components/test-utils/dom/internal/app-layout-drawers';
 import {
   describeEachAppLayout,
   findActiveDrawerLandmark,
   getActiveDrawerWidth,
   getBottomDrawerHeight,
-  getGlobalDrawersTestUtils,
   getGlobalDrawerWidth,
   manyDrawers,
   testDrawer,
@@ -45,7 +45,7 @@ jest.mock('@cloudscape-design/component-toolkit', () => ({
 async function renderComponent(jsx: React.ReactElement) {
   const { container, rerender, getByTestId, ...rest } = render(jsx);
   const wrapper = createWrapper(container).findAppLayout()!;
-  const globalDrawersWrapper = getGlobalDrawersTestUtils(wrapper);
+  const globalDrawersWrapper = new AppLayoutRuntimeWrapper(wrapper.getElement());
   await delay();
   return {
     wrapper,
@@ -1811,8 +1811,8 @@ describe('toolbar mode only features', () => {
 
           const outerLayout = createWrapper().find('[data-testid="first"]')!.findAppLayout()!;
           const innerLayout = createWrapper().find('[data-testid="second"]')!.findAppLayout()!;
-          const innerGlobalDrawers = getGlobalDrawersTestUtils(outerLayout);
-          const outerGlobalDrawers = getGlobalDrawersTestUtils(innerLayout);
+          const outerGlobalDrawers = new AppLayoutRuntimeWrapper(outerLayout.getElement());
+          const innerGlobalDrawers = new AppLayoutRuntimeWrapper(innerLayout.getElement());
 
           await delay();
 
@@ -1827,8 +1827,8 @@ describe('toolbar mode only features', () => {
 
           innerGlobalDrawers.findExpandedModeButtonByActiveDrawerId(drawerId)!.click();
 
-          expect(innerGlobalDrawers.isLayoutInDrawerExpandedMode()).toBe(false);
-          expect(outerGlobalDrawers.isLayoutInDrawerExpandedMode()).toBe(true);
+          expect(innerGlobalDrawers.isLayoutInDrawerExpandedMode()).toBe(true);
+          expect(outerGlobalDrawers.isLayoutInDrawerExpandedMode()).toBe(false);
 
           await waitFor(() =>
             expect(outerLayout.find(`.${skeletonStyles.navigation}`)!.getElement()).toHaveClass(skeletonStyles.hidden)

src/test-utils/dom/internal/app-layout-drawers.ts

@@ -0,0 +1,74 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { ComponentWrapper, ElementWrapper, usesDom } from '@cloudscape-design/test-utils-core/dom';
+
+import AppLayoutWrapper from '../app-layout';
+import ButtonWrapper from '../button';
+import ButtonGroupWrapper from '../button-group';
+
+import testutilStyles from '../../../app-layout/test-classes/styles.css.js';
+import globalDrawerStyles from '../../../app-layout/visual-refresh-toolbar/drawer/styles.css.js';
+import visualRefreshToolbarStyles from '../../../app-layout/visual-refresh-toolbar/skeleton/styles.css.js';
+
+export class AppLayoutDrawerWrapper extends ComponentWrapper {
+  @usesDom
+  isActive(): boolean {
+    return this.element.classList.contains(testutilStyles['active-drawer']);
+  }
+
+  @usesDom
+  isDrawerInExpandedMode(): boolean {
+    return this.element.classList.contains(globalDrawerStyles['drawer-expanded']);
+  }
+}
+
+export default class AppLayoutRuntimeWrapper extends AppLayoutWrapper {
+  findActiveDrawers(): Array<ElementWrapper> {
+    return this.findAllByClassName(testutilStyles['active-drawer']);
+  }
+
+  findDrawerById(id: string): AppLayoutDrawerWrapper | null {
+    const element = this.find(`[data-testid="awsui-app-layout-drawer-${id}"]`);
+    return element ? new AppLayoutDrawerWrapper(element.getElement()) : null;
+  }
+
+  findGlobalDrawersTriggers(): ElementWrapper<HTMLButtonElement>[] {
+    return this.findAllByClassName<HTMLButtonElement>(testutilStyles['drawers-trigger-global']);
+  }
+
+  findResizeHandleByActiveDrawerId(id: string): ElementWrapper | null {
+    return this.find(
+      `.${testutilStyles['active-drawer']}[data-testid="awsui-app-layout-drawer-${id}"] .${testutilStyles['drawers-slider']}`
+    );
+  }
+
+  findCloseButtonByActiveDrawerId(id: string): ButtonWrapper | null {
+    return this.findComponent(
+      `.${testutilStyles['active-drawer']}[data-testid="awsui-app-layout-drawer-${id}"]`,
+      ButtonGroupWrapper
+    )!.findButtonById('close');
+  }
+
+  findExpandedModeButtonByActiveDrawerId(id: string): ButtonWrapper | null {
+    return this.findComponent(
+      `.${testutilStyles['active-drawer']}[data-testid="awsui-app-layout-drawer-${id}"]`,
+      ButtonGroupWrapper
+    )!.findButtonById('expand');
+  }
+
+  findLeaveExpandedModeButtonInAIDrawer(): ElementWrapper | null {
+    return this.find(
+      `.${testutilStyles['active-drawer']} .${testutilStyles['active-ai-drawer-leave-expanded-mode-custom-button']}`
+    );
+  }
+
+  @usesDom
+  isLayoutInDrawerExpandedMode(): boolean {
+    return this.element.matches(`.${visualRefreshToolbarStyles['drawer-expanded-mode']}`);
+  }
+
+  findAiDrawerTrigger(): ElementWrapper | null {
+    return this.find(`.${testutilStyles['ai-drawer-toggle']}`);
+  }
+}