chore: Adds badge tests

cloudscape-design · Aug 7, 2023 · a595316 · a595316
1 parent e4e91c1
commit a595316
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 1 deletion.
diff --git a/src/app-layout/__tests__/desktop.test.tsx b/src/app-layout/__tests__/desktop.test.tsx
@@ -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 iconStyles from '../../../lib/components/icon/styles.css.js';
 import customCssProps from '../../../lib/components/internal/generated/custom-css-properties';
 import { KeyCode } from '../../internal/keycode';
 import { useVisualRefresh } from '../../../lib/components/internal/hooks/use-visual-mode';
@@ -296,6 +297,11 @@ describe('Classic only features', () => {
     act(() => wrapper.findDrawersTriggers()![0].click());
     expect(wrapper.findActiveDrawer()!.getElement().style.width).toBe('500px');
   });
+
+  test('should render badge when defined', () => {
+    const { wrapper } = renderComponent(<AppLayout contentType="form" {...manyDrawers} />);
+    expect(wrapper.findDrawersTriggers()[0]!.getElement().children[0]).toHaveClass(iconStyles.badge);
+  });
 });
 
 describe('VR only features', () => {
@@ -311,4 +317,10 @@ describe('VR only features', () => {
     act(() => wrapper.findDrawersTriggers()![0].click());
     expect(wrapper.findActiveDrawer()!.getElement()).toHaveClass(styles['with-motion']);
   });
+
+  test('should render badge when defined', () => {
+    const { wrapper } = renderComponent(<AppLayout contentType="form" {...manyDrawers} />);
+
+    expect(wrapper.findDrawersTriggers()[0]!.getElement()).toHaveClass(visualRefreshStyles.badge);
+  });
 });
diff --git a/src/app-layout/__tests__/mobile.test.tsx b/src/app-layout/__tests__/mobile.test.tsx
@@ -9,14 +9,17 @@ import {
   renderComponent,
   singleDrawer,
   singleDrawerOpen,
+  manyDrawers,
   splitPanelI18nStrings,
 } from './utils';
 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 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';
+
 import visualRefreshRefactoredStyles from '../../../lib/components/app-layout/visual-refresh/styles.css.js';
 import { findUpUntil } from '../../../lib/components/internal/utils/dom';
 
@@ -354,4 +357,9 @@ describeEachThemeAppLayout(true, theme => {
     expect(wrapper.findDrawersTriggers()![0].getElement()).toHaveAttribute('aria-label', 'Security trigger button');
     expect(wrapper.findDrawersMobileTriggersContainer()!.getElement()).toHaveAttribute('aria-label', 'Drawers');
   });
+
+  test('should render badge when defined', () => {
+    const { wrapper } = renderComponent(<AppLayout contentType="form" {...manyDrawers} />);
+    expect(wrapper.findDrawersTriggers()[0]!.getElement().children[0]).toHaveClass(iconStyles.badge);
+  });
 });
diff --git a/src/app-layout/__tests__/utils.tsx b/src/app-layout/__tests__/utils.tsx
@@ -145,6 +145,7 @@ export const manyDrawers: Required<InternalDrawerProps> = {
           resizeHandle: 'Security resize handle',
         },
         content: <span>Security</span>,
+        badge: true,
         id: 'security',
         trigger: {
           iconName: 'security',

diff --git a/src/app-layout/drawer/index.tsx b/src/app-layout/drawer/index.tsx
@@ -203,6 +203,7 @@ export const DrawerTriggersBar = ({
           .indexOf(drawers.activeDrawerId) !== -1
       );
     }
+    return false;
   };
 
   const getDrawerItems = () => {

diff --git a/src/app-layout/visual-refresh/drawers.tsx b/src/app-layout/visual-refresh/drawers.tsx
@@ -272,7 +272,8 @@ function DesktopTriggers() {
   }
 
   const overflowItemHasBadge = () => {
-    const overflowItems = getDrawerItems().slice(1, getDrawerItems().length);
+    const overflowItems = drawers?.items.slice(getIndexOfOverflowItem(), drawers.items.length);
+
     return (overflowItems && overflowItems.filter(item => item.badge).length > 0) || false;
   };