feat: adding tooltips and tests to visual-refresh-toolbar (#2650)

cloudscape-design · Sep 19, 2024 · 661b396 · 661b396
1 parent 2acf704
commit 661b396
Show file tree

Hide file tree

Showing 14 changed files with 1,005 additions and 84 deletions.
diff --git a/pages/app-layout/utils/drawer-ids.ts b/pages/app-layout/utils/drawer-ids.ts
@@ -0,0 +1,13 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export const drawerIds = {
+  security: 'security',
+  proHelp: 'pro-help',
+  links: 'links',
+  test1: 'test-1',
+  test2: 'test-2',
+  test3: 'test-3',
+  test4: 'test-4',
+  test5: 'test-5',
+  test6: 'test-6',
+};
diff --git a/pages/app-layout/utils/drawers.tsx b/pages/app-layout/utils/drawers.tsx
@@ -4,6 +4,8 @@ import React from 'react';
 
 import { AppLayoutProps, Drawer, SpaceBetween } from '~components';
 
+import { drawerIds } from './drawer-ids';
+
 import styles from '../styles.scss';
 
 const getAriaLabels = (title: string, badge: boolean) => {
@@ -31,7 +33,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
   {
     ariaLabels: getAriaLabels('Security', false),
     content: <Security />,
-    id: 'security',
+    id: drawerIds.security,
     resizable: true,
     onResize: (event: any) => {
       // A drawer implementer may choose to listen to THEIR drawer's
@@ -48,7 +50,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
     content: <Drawer header={<h2>Pro help</h2>}>Pro help.</Drawer>,
     badge: true,
     defaultSize: 600,
-    id: 'pro-help',
+    id: drawerIds.proHelp,
     trigger: {
       iconName: 'contact',
     },
@@ -58,7 +60,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
     resizable: true,
     defaultSize: 500,
     content: <Drawer header={<h2>Links</h2>}>Links.</Drawer>,
-    id: 'links',
+    id: drawerIds.links,
     trigger: {
       iconName: 'share',
     },
@@ -67,7 +69,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
     ariaLabels: getAriaLabels('Test 1', true),
     content: <Drawer header={<h2>Test 1</h2>}>Test 1.</Drawer>,
     badge: true,
-    id: 'test-1',
+    id: drawerIds.test1,
     trigger: {
       iconName: 'contact',
     },
@@ -77,7 +79,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
     resizable: true,
     defaultSize: 500,
     content: <Drawer header={<h2>Test 2</h2>}>Test 2.</Drawer>,
-    id: 'test-2',
+    id: drawerIds.test2,
     trigger: {
       iconName: 'share',
     },
@@ -86,7 +88,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
     ariaLabels: getAriaLabels('Test 3', true),
     content: <Drawer header={<h2>Test 3</h2>}>Test 3.</Drawer>,
     badge: true,
-    id: 'test-3',
+    id: drawerIds.test3,
     trigger: {
       iconName: 'contact',
     },
@@ -96,7 +98,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
     resizable: true,
     defaultSize: 500,
     content: <Drawer header={<h2>Test 4</h2>}>Test 4.</Drawer>,
-    id: 'test-4',
+    id: drawerIds.test4,
     trigger: {
       iconName: 'edit',
     },
@@ -106,7 +108,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
     resizable: true,
     defaultSize: 500,
     content: <Drawer header={<h2>Test 5</h2>}>Test 5.</Drawer>,
-    id: 'test-5',
+    id: drawerIds.test5,
     trigger: {
       iconName: 'add-plus',
     },
@@ -116,7 +118,7 @@ export const drawerItems: Array<AppLayoutProps.Drawer> = [
     resizable: true,
     defaultSize: 500,
     content: <Drawer header={<h2>Test 6</h2>}>Test 6.</Drawer>,
-    id: 'test-6',
+    id: drawerIds.test6,
     trigger: {
       iconName: 'call',
     },

diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap
@@ -729,7 +729,7 @@ Each Drawer is an item in the drawers wrapper with the following properties:
 - \`iconSvg\` (React.ReactNode) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)
 
 #### DrawerAriaLabels
-- \`drawerName\` (string) - Label for the drawer itself.
+- \`drawerName\` (string) - Label for the drawer itself, and for the drawer trigger button tooltip text.
 - \`closeButton\` (string) - (Optional) Label for the close button.
 - \`triggerButton\` (string) - (Optional) Label for the trigger button.
 - \`resizeHandle\` (string) - (Optional) Label for the resize handle.

diff --git a/src/app-layout/__integ__/app-layout-focus-delegation.test.ts b/src/app-layout/__integ__/app-layout-focus-delegation.test.ts
@@ -139,6 +139,8 @@ describe.each(['classic', 'visual-refresh', 'visual-refresh-toolbar'] as const)(
         setupTest(
           async page => {
             await page.click(wrapper.findSplitPanel().findOpenButton().toSelector());
+            await expect(page.isExisting(wrapper.findSplitPanel().toSelector())).resolves.toBeTruthy();
+            await page.keys('Escape'); //escape tooltip from still hovering over open trigger button
             await page.click(wrapper.findSplitPanel().findPreferencesButton().toSelector());
             await page.keys(['Tab', 'Left', 'Tab', 'Tab', 'Enter']);
             await expect(page.isFocused(wrapper.findSplitPanel().findPreferencesButton().toSelector())).resolves.toBe(
@@ -311,7 +313,6 @@ describe.each(['classic', 'visual-refresh', 'visual-refresh-toolbar'] as const)(
               await page.click(wrapper.findContentRegion().findContainer().toSelector());
               await page.click(wrapper.findActiveDrawerCloseButton().toSelector());
               await expect(page.isFocused(infoLink)).resolves.toBe(false);
-
               await expect(page.isFocused(wrapper.findDrawerTriggerById('pro-help').toSelector())).resolves.toBe(true);
             },
             { pageName: 'with-drawers', theme, mobile }