From a5953165f176de441ca4282c861d124fd87a5570 Mon Sep 17 00:00:00 2001
From: Katie George <katiegeo@amazon.com>
Date: Mon, 7 Aug 2023 14:03:19 -0700
Subject: [PATCH] chore: Adds badge tests

---
 src/app-layout/__tests__/desktop.test.tsx | 12 ++++++++++++
 src/app-layout/__tests__/mobile.test.tsx  |  8 ++++++++
 src/app-layout/__tests__/utils.tsx        |  1 +
 src/app-layout/drawer/index.tsx           |  1 +
 src/app-layout/visual-refresh/drawers.tsx |  3 ++-
 5 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/app-layout/__tests__/desktop.test.tsx b/src/app-layout/__tests__/desktop.test.tsx
index d6292c8578..27433a14e2 100644
--- 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
index f98dde0193..d142b3249d 100644
--- a/src/app-layout/__tests__/mobile.test.tsx
+++ b/src/app-layout/__tests__/mobile.test.tsx
@@ -9,6 +9,7 @@ import {
   renderComponent,
   singleDrawer,
   singleDrawerOpen,
+  manyDrawers,
   splitPanelI18nStrings,
 } from './utils';
 import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
@@ -16,7 +17,9 @@ 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
index 10777a271c..6ed714ba0a 100644
--- 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
index 191f523e9a..add9d656db 100644
--- 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
index b60341bed6..ecc094a150 100644
--- 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;
   };