chore: Updates drawers tests

src/app-layout/__integ__/app-layout-drawers.test.ts

@@ -16,7 +16,7 @@ class AppLayoutDrawersPage extends BasePageObject {
   }
 
   async dragResizerTo({ x: targetX, y: targetY }: { x: number; y: number }) {
-    const resizerSelector = wrapper.findDrawersSlider().toSelector();
+    const resizerSelector = wrapper.findActiveDrawerResizeHandle().toSelector();
     const resizerBox = await this.getBoundingBox(resizerSelector);
     await this.browser.performActions([
       {
@@ -61,7 +61,7 @@ for (const visualRefresh of [true, false]) {
       setupTest({ visualRefresh }, async page => {
         await page.openPanel();
         await page.keys(['Enter']);
-        await expect(page.isFocused(wrapper.findDrawersSlider().toSelector())).resolves.toBe(true);
+        await expect(page.isFocused(wrapper.findActiveDrawerResizeHandle().toSelector())).resolves.toBe(true);
 
         const { width } = await page.getDrawerSize();
         await page.keys(['ArrowLeft']);
@@ -74,10 +74,10 @@ for (const visualRefresh of [true, false]) {
       'hides the resize handle on mobile',
       setupTest({ visualRefresh }, async page => {
         await page.openPanel();
-        await expect(page.isExisting(wrapper.findDrawersSlider().toSelector())).resolves.toBe(true);
+        await expect(page.isExisting(wrapper.findActiveDrawerResizeHandle().toSelector())).resolves.toBe(true);
 
         await page.setWindowSize(viewports.mobile);
-        await expect(page.isExisting(wrapper.findDrawersSlider().toSelector())).resolves.toBe(false);
+        await expect(page.isExisting(wrapper.findActiveDrawerResizeHandle().toSelector())).resolves.toBe(false);
       })
     );
 

src/app-layout/__integ__/runtime-drawers.test.ts

@@ -72,7 +72,7 @@ for (const visualRefresh of [true, false]) {
 
         await expect(page.getText('[data-testid="current-size"]')).resolves.toEqual('resized: false');
 
-        await page.dragAndDrop(wrapper.findDrawersSlider().toSelector(), -200);
+        await page.dragAndDrop(wrapper.findActiveDrawerResizeHandle().toSelector(), -200);
         await expect(page.getText('[data-testid="current-size"]')).resolves.toEqual('resized: true');
       })
     );

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

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import { act } from '@testing-library/react';
+import { act, screen } from '@testing-library/react';
 
 import {
   describeEachThemeAppLayout,
@@ -17,6 +17,7 @@ import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
 import styles from '../../../lib/components/app-layout/styles.css.js';
 import notificationStyles from '../../../lib/components/app-layout/notifications/styles.css.js';
 import visualRefreshStyles from '../../../lib/components/app-layout/visual-refresh/styles.css.js';
+import drawerStyles from '../../../lib/components/app-layout/drawer/styles.css.js';
 import iconStyles from '../../../lib/components/icon/styles.css.js';
 import customCssProps from '../../../lib/components/internal/generated/custom-css-properties';
 import { KeyCode } from '../../internal/keycode';
@@ -150,34 +151,19 @@ describeEachThemeAppLayout(false, () => {
     });
   });
 
-  test('should render drawers desktop triggers container', () => {
-    const { wrapper } = renderComponent(<AppLayout contentType="form" {...singleDrawer} />);
-
-    expect(wrapper.findDrawersMobileTriggersContainer()).toBeFalsy();
-    expect(wrapper.findDrawersDesktopTriggersContainer()).toBeTruthy();
-  });
-
   test('should render an active drawer', () => {
     const { wrapper } = renderComponent(<AppLayout contentType="form" {...singleDrawerOpen} />);
 
-    expect(wrapper.findDrawersMobileTriggersContainer()).toBeFalsy();
-    expect(wrapper.findDrawersDesktopTriggersContainer()).toBeTruthy();
     expect(wrapper.findActiveDrawer()).toBeTruthy();
   });
 
-  test('Does not add a label to the toggle and landmark when they are not defined', () => {
-    const { wrapper } = renderComponent(<AppLayout contentType="form" {...drawerWithoutLabels} />);
-    expect(wrapper.findDrawersTriggers()![0].getElement()).not.toHaveAttribute('aria-label');
-    expect(wrapper.findDrawersDesktopTriggersContainer()!.getElement()).not.toHaveAttribute('aria-label');
-  });
-
   test('Adds labels to toggle button and landmark when defined', () => {
     const { wrapper } = renderComponent(<AppLayout contentType="form" {...singleDrawer} />);
     expect(wrapper.findDrawerTriggerById('security')!.getElement()).toHaveAttribute(
       'aria-label',
       'Security trigger button'
     );
-    expect(wrapper.findDrawersDesktopTriggersContainer()!.getElement()).toHaveAttribute('aria-label', 'Drawers');
+    expect(screen.getByLabelText('Drawers')).not.toBeNull();
   });
 
   test(`should toggle drawer on click`, () => {
@@ -192,7 +178,7 @@ describeEachThemeAppLayout(false, () => {
     const { wrapper } = renderComponent(<AppLayout contentType="form" {...resizableDrawer} />);
 
     wrapper.findDrawerTriggerById('security')!.click();
-    expect(wrapper.findDrawersSlider()!.getElement()).toHaveFocus();
+    expect(wrapper.findActiveDrawerResizeHandle()!.getElement()).toHaveFocus();
   });
 
   test('should change size via keyboard events on slider handle', () => {
@@ -205,7 +191,7 @@ describeEachThemeAppLayout(false, () => {
       },
     };
     const { wrapper } = renderComponent(<AppLayout contentType="form" {...drawers} />);
-    wrapper.findDrawersSlider()!.keydown(KeyCode.left);
+    wrapper.findActiveDrawerResizeHandle()!.keydown(KeyCode.left);
 
     expect(onResize).toHaveBeenCalledWith({ size: expect.any(Number), id: 'security' });
   });
@@ -226,10 +212,10 @@ describeEachThemeAppLayout(false, () => {
       },
     };
     const { wrapper } = renderComponent(<AppLayout contentType="form" {...drawersOpen} />);
-    wrapper.findDrawersSlider()!.fireEvent(new MouseEvent('pointerdown', { bubbles: true }));
+    wrapper.findActiveDrawerResizeHandle()!.fireEvent(new MouseEvent('pointerdown', { bubbles: true }));
     const resizeEvent = new MouseEvent('pointermove', { bubbles: true });
-    wrapper.findDrawersSlider()!.fireEvent(resizeEvent);
-    wrapper.findDrawersSlider()!.fireEvent(new MouseEvent('pointerup', { bubbles: true }));
+    wrapper.findActiveDrawerResizeHandle()!.fireEvent(resizeEvent);
+    wrapper.findActiveDrawerResizeHandle()!.fireEvent(new MouseEvent('pointerup', { bubbles: true }));
 
     expect(onResize).toHaveBeenCalledWith({ size: expect.any(Number), id: 'security' });
     expect(onDrawerItemResize).toHaveBeenCalledWith({ size: expect.any(Number), id: 'security' });
@@ -239,7 +225,7 @@ describeEachThemeAppLayout(false, () => {
     const { wrapper } = renderComponent(<AppLayout contentType="form" {...resizableDrawer} />);
 
     wrapper.findDrawerTriggerById('security')!.click();
-    expect(wrapper.findDrawersSlider()!.getElement()).toHaveAttribute('aria-valuenow', '0');
+    expect(wrapper.findActiveDrawerResizeHandle()!.getElement()).toHaveAttribute('aria-valuenow', '0');
   });
 
   test('should render overflow item when expected', () => {
@@ -303,17 +289,25 @@ describe('Classic only features', () => {
 
   test(`should toggle single drawer on click of container`, () => {
     const { wrapper } = renderComponent(<AppLayout contentType="form" toolsHide={true} {...singleDrawer} />);
-    act(() => wrapper.findDrawersDesktopTriggersContainer()!.click());
+    act(() => screen.getByLabelText('Drawers').click());
     expect(wrapper.findActiveDrawer()).toBeTruthy();
-    act(() => wrapper.findDrawersDesktopTriggersContainer()!.click());
+    act(() => screen.getByLabelText('Drawers').click());
     expect(wrapper.findActiveDrawer()).toBeFalsy();
   });
 
   test(`should not toggle many drawers on click of container`, () => {
     const { wrapper } = renderComponent(<AppLayout contentType="form" toolsHide={true} {...manyDrawers} />);
-    act(() => wrapper.findDrawersDesktopTriggersContainer()!.click());
+    act(() => screen.getByLabelText('Drawers').click());
     expect(wrapper.findActiveDrawer()).toBeFalsy();
   });
+
+  test('Does not add a label to the toggle and landmark when they are not defined', () => {
+    const { wrapper } = renderComponent(<AppLayout contentType="form" {...drawerWithoutLabels} />);
+    expect(wrapper.findDrawersTriggers()![0].getElement()).not.toHaveAttribute('aria-label');
+    expect(wrapper.findByClassName(drawerStyles['drawer-triggers-wrapper'])!.getElement()).not.toHaveAttribute(
+      'aria-label'
+    );
+  });
 });
 
 describe('VR only features', () => {
@@ -335,4 +329,12 @@ describe('VR only features', () => {
 
     expect(wrapper.findByClassName(visualRefreshStyles.badge)!.getElement()).toBeInTheDocument();
   });
+
+  test('Does not add a label to the toggle and landmark when they are not defined', () => {
+    const { wrapper } = renderComponent(<AppLayout contentType="form" {...drawerWithoutLabels} />);
+    expect(wrapper.findDrawersTriggers()![0].getElement()).not.toHaveAttribute('aria-label');
+    expect(
+      wrapper.findByClassName(visualRefreshStyles['drawers-desktop-triggers-container'])!.getElement()
+    ).not.toHaveAttribute('aria-label');
+  });
 });

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

@@ -83,14 +83,17 @@ describeEachAppLayout(size => {
     const { wrapper } = await renderComponent(<AppLayout contentType="form" {...drawers} />);
 
     wrapper.findDrawerTriggerById('security')!.click();
-    expect(wrapper.findDrawersSlider()).toBeFalsy();
+    expect(wrapper.findActiveDrawerResizeHandle()).toBeFalsy();
 
     wrapper.findDrawerTriggerById('security-resizable')!.click();
     if (size === 'desktop') {
-      expect(wrapper.findDrawersSlider()).toBeTruthy();
-      expect(wrapper.findDrawersSlider()!.getElement()).toHaveAttribute('aria-label', 'Security resize handle');
+      expect(wrapper.findActiveDrawerResizeHandle()).toBeTruthy();
+      expect(wrapper.findActiveDrawerResizeHandle()!.getElement()).toHaveAttribute(
+        'aria-label',
+        'Security resize handle'
+      );
     } else {
-      expect(wrapper.findDrawersSlider()).toBeFalsy();
+      expect(wrapper.findActiveDrawerResizeHandle()).toBeFalsy();
     }
   });
 });

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

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useState } from 'react';
 import { act } from 'react-dom/test-utils';
+import { screen } from '@testing-library/react';
 import {
   describeEachThemeAppLayout,
   drawerWithoutLabels,
@@ -16,6 +17,7 @@ import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
 import SplitPanel from '../../../lib/components/split-panel';
 import { AppLayoutWrapper } from '../../../lib/components/test-utils/dom';
 import styles from '../../../lib/components/app-layout/styles.css.js';
+import drawersMobileStyles from '../../../lib/components/app-layout/mobile-toolbar/styles.css.js';
 import toolbarStyles from '../../../lib/components/app-layout/mobile-toolbar/styles.css.js';
 import iconStyles from '../../../lib/components/icon/styles.css.js';
 import testUtilsStyles from '../../../lib/components/app-layout/test-classes/styles.css.js';
@@ -52,6 +54,10 @@ function AppLayoutWithControlledNavigation({
 describeEachThemeAppLayout(true, theme => {
   // In refactored Visual Refresh different styles are used compared to Classic
   const mobileBarClassName = theme === 'refresh' ? testUtilsStyles['mobile-bar'] : toolbarStyles['mobile-bar'];
+  const drawerBarClassName =
+    theme === 'refresh'
+      ? visualRefreshRefactoredStyles['drawers-mobile-triggers-container']
+      : drawersMobileStyles['drawers-container'];
   const blockBodyScrollClassName =
     theme === 'refresh' ? visualRefreshRefactoredStyles['block-body-scroll'] : toolbarStyles['block-body-scroll'];
   const unfocusableClassName = theme === 'refresh' ? visualRefreshRefactoredStyles.unfocusable : styles.unfocusable;
@@ -419,38 +425,30 @@ describeEachThemeAppLayout(true, theme => {
     });
   });
 
-  test('should render drawers mobile triggers container', () => {
-    const { wrapper } = renderComponent(<AppLayout contentType="form" {...singleDrawer} />);
-
-    expect(wrapper.findDrawersDesktopTriggersContainer()).toBeFalsy();
-    expect(wrapper.findDrawersMobileTriggersContainer()).toBeTruthy();
-  });
-
   test('should render an active drawer', () => {
     const { wrapper } = renderComponent(<AppLayout contentType="form" {...singleDrawerOpen} />);
 
-    expect(wrapper.findDrawersMobileTriggersContainer()).toBeTruthy();
-    expect(wrapper.findDrawersDesktopTriggersContainer()).toBeFalsy();
     expect(wrapper.findActiveDrawer()).toBeTruthy();
   });
 
-  test('Does not add a label to the toggle and landmark when they are not defined', () => {
-    const { wrapper } = renderComponent(<AppLayout contentType="form" {...drawerWithoutLabels} />);
-    expect(wrapper.findDrawerTriggerById('security')!.getElement()).not.toHaveAttribute('aria-label');
-    expect(wrapper.findDrawersMobileTriggersContainer()!.getElement()).not.toHaveAttribute('aria-label');
-  });
-
   test('Adds labels to toggle button and landmark when defined', () => {
     const { wrapper } = renderComponent(<AppLayout contentType="form" {...singleDrawer} />);
     expect(wrapper.findDrawerTriggerById('security')!.getElement()).toHaveAttribute(
       'aria-label',
       'Security trigger button'
     );
-    expect(wrapper.findDrawersMobileTriggersContainer()!.getElement()).toHaveAttribute('aria-label', 'Drawers');
+    expect(screen.getByLabelText('Drawers')).not.toBeNull();
   });
 
   test('should render badge when defined', () => {
     const { wrapper } = renderComponent(<AppLayout contentType="form" {...manyDrawers} />);
     expect(wrapper.findDrawerTriggerById('security')!.getElement().children[0]).toHaveClass(iconStyles.badge);
   });
+
+  test('Does not add a label to the toggle and landmark when they are not defined', () => {
+    const { wrapper } = renderComponent(<AppLayout contentType="form" {...drawerWithoutLabels} />);
+    const findDrawersToolbar = () => wrapper.findByClassName(drawerBarClassName);
+    expect(wrapper.findDrawerTriggerById('security')!.getElement()).not.toHaveAttribute('aria-label');
+    expect(findDrawersToolbar()!.getElement()).not.toHaveAttribute('aria-label');
+  });
 });

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

@@ -111,14 +111,14 @@ describeEachAppLayout(size => {
     const { wrapper } = await renderComponent(<AppLayout />);
 
     wrapper.findDrawerTriggerById(drawerDefaults.id)!.click();
-    expect(wrapper.findDrawersSlider()).toBeFalsy();
+    expect(wrapper.findActiveDrawerResizeHandle()).toBeFalsy();
 
     wrapper.findDrawerTriggerById('test-resizable')!.click();
     if (size === 'desktop') {
-      expect(wrapper.findDrawersSlider()).toBeTruthy();
-      expect(wrapper.findDrawersSlider()!.getElement()).toHaveAttribute('aria-label', 'drawer resize');
+      expect(wrapper.findActiveDrawerResizeHandle()).toBeTruthy();
+      expect(wrapper.findActiveDrawerResizeHandle()!.getElement()).toHaveAttribute('aria-label', 'drawer resize');
     } else {
-      expect(wrapper.findDrawersSlider()).toBeFalsy();
+      expect(wrapper.findActiveDrawerResizeHandle()).toBeFalsy();
     }
   });
 

src/app-layout/drawer/index.tsx

@@ -216,10 +216,7 @@ export const DrawerTriggersBar = ({ isMobile, topOffset, bottomOffset, drawers }
         }}
       >
         {!isMobile && (
-          <aside
-            aria-label={drawers?.ariaLabel}
-            className={clsx(styles['drawer-triggers-wrapper'], testutilStyles['drawers-desktop-triggers-container'])}
-          >
+          <aside aria-label={drawers?.ariaLabel} className={clsx(styles['drawer-triggers-wrapper'])}>
             <>
               {visibleItems.map((item, index) => {
                 return (

src/app-layout/mobile-toolbar/index.tsx

@@ -126,10 +126,7 @@ export function MobileToolbar({
         />
       )}
       {drawers && (
-        <aside
-          aria-label={drawers.ariaLabel}
-          className={clsx(styles['drawers-container'], testutilStyles['drawers-mobile-triggers-container'])}
-        >
+        <aside aria-label={drawers.ariaLabel} className={clsx(styles['drawers-container'])}>
           {visibleItems.map((item, index) => (
             <div
               className={clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer'])}

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

@@ -42,12 +42,6 @@
 .disable-body-scroll-root {
   /* used in tests */
 }
-.drawers-desktop-triggers-container {
-  /* used in tests */
-}
-.drawers-mobile-triggers-container {
-  /* used in tests */
-}
 .drawers-trigger {
   /* used in tests */
 }

src/app-layout/visual-refresh/drawers.tsx

@@ -199,14 +199,10 @@ function DesktopTriggers() {
 
   return (
     <aside
-      className={clsx(
-        styles['drawers-desktop-triggers-container'],
-        testutilStyles['drawers-desktop-triggers-container'],
-        {
-          [styles['has-multiple-triggers']]: hasMultipleTriggers,
-          [styles['has-open-drawer']]: hasOpenDrawer,
-        }
-      )}
+      className={clsx(styles['drawers-desktop-triggers-container'], {
+        [styles['has-multiple-triggers']]: hasMultipleTriggers,
+        [styles['has-open-drawer']]: hasOpenDrawer,
+      })}
       aria-label={drawersAriaLabel}
       ref={triggersContainerRef}
     >
@@ -310,13 +306,9 @@ export function MobileTriggers() {
   return (
     <aside
       aria-hidden={hasDrawerViewportOverlay}
-      className={clsx(
-        styles['drawers-mobile-triggers-container'],
-        testutilStyles['drawers-mobile-triggers-container'],
-        {
-          [styles.unfocusable]: hasDrawerViewportOverlay,
-        }
-      )}
+      className={clsx(styles['drawers-mobile-triggers-container'], {
+        [styles.unfocusable]: hasDrawerViewportOverlay,
+      })}
       aria-label={drawersAriaLabel}
     >
       {visibleItems.map(item => (

src/test-utils/dom/app-layout/index.ts

@@ -55,14 +55,6 @@ export default class AppLayoutWrapper extends ComponentWrapper {
     return this.findByClassName<HTMLButtonElement>(testutilStyles['active-drawer-close-button']);
   }
 
-  findDrawersDesktopTriggersContainer(): ElementWrapper | null {
-    return this.findByClassName(testutilStyles['drawers-desktop-triggers-container']);
-  }
-
-  findDrawersMobileTriggersContainer(): ElementWrapper | null {
-    return this.findByClassName(testutilStyles['drawers-mobile-triggers-container']);
-  }
-
   findDrawersTriggers(): ElementWrapper<HTMLButtonElement>[] {
     return this.findAllByClassName<HTMLButtonElement>(testutilStyles['drawers-trigger']);
   }
@@ -71,7 +63,7 @@ export default class AppLayoutWrapper extends ComponentWrapper {
     return this.find(`.${testutilStyles['drawers-trigger']}[data-testid="awsui-app-layout-trigger-${id}"]`);
   }
 
-  findDrawersSlider(): ElementWrapper | null {
+  findActiveDrawerResizeHandle(): ElementWrapper | null {
     return this.findByClassName(testutilStyles['drawers-slider']);
   }
 }