From 5f58ee7c724dace052e374bb33562d22e9c8d6d6 Mon Sep 17 00:00:00 2001
From: Kate Higa <16447748+khiga8@users.noreply.github.com>
Date: Thu, 27 Jun 2024 09:42:15 -0400
Subject: [PATCH] Add test coverage

---
 .../react/src/NavList/NavList.stories.tsx     |  1 -
 packages/react/src/NavList/NavList.test.tsx   | 40 +++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/NavList/NavList.stories.tsx b/packages/react/src/NavList/NavList.stories.tsx
index d52123521c60..a168666b32e2 100644
--- a/packages/react/src/NavList/NavList.stories.tsx
+++ b/packages/react/src/NavList/NavList.stories.tsx
@@ -265,7 +265,6 @@ export const WithTrailingAction = () => {
           </NavList.Item>
           <NavList.Item>
             Item 3
-            <NavList.TrailingAction label="This should not be rendered" icon={BookIcon} />
             <NavList.SubNav>
               <NavList.Item href="#">
                 Sub item 1
diff --git a/packages/react/src/NavList/NavList.test.tsx b/packages/react/src/NavList/NavList.test.tsx
index 3344738d5254..ffcca312d8a5 100644
--- a/packages/react/src/NavList/NavList.test.tsx
+++ b/packages/react/src/NavList/NavList.test.tsx
@@ -2,6 +2,7 @@ import {render, fireEvent} from '@testing-library/react'
 import React from 'react'
 import {ThemeProvider, SSRProvider} from '..'
 import {NavList} from './NavList'
+import {FeatureFlags} from '../FeatureFlags'
 
 type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode}
 
@@ -348,4 +349,43 @@ describe('NavList.Item with NavList.SubNav', () => {
     const currentLink = queryByRole('link', {name: 'Current'})
     expect(currentLink).toBeVisible()
   })
+
+  describe('TrailingAction', () => {
+    function NavListWithSubNavAndTrailingAction() {
+      return (
+        <FeatureFlags flags={{primer_react_action_list_item_as_button: true}}>
+          <NavList>
+            <NavList.Item href="#">
+              Item
+              <NavList.TrailingAction label="This should not be rendered" />
+              <NavList.SubNav>
+                <NavList.Item href="#">
+                  Sub Item 1
+                  <NavList.TrailingAction label="Trailing Action for Sub Item 1" />
+                </NavList.Item>
+                <NavList.Item href="#">Sub Item 2</NavList.Item>
+              </NavList.SubNav>
+            </NavList.Item>
+          </NavList>
+        </FeatureFlags>
+      )
+    }
+
+    it('does not render TrailingAction alongside SubNav', async () => {
+      const {queryByRole} = render(<NavListWithSubNavAndTrailingAction />)
+
+      const trailingAction = queryByRole('button', {name: 'This should not be rendered'})
+      expect(trailingAction).toBeNull()
+    })
+
+    it('supports TrailingAction within an Item inside SubNav', async () => {
+      const {getByRole, queryByRole} = render(<NavListWithSubNavAndTrailingAction />)
+
+      const itemWithSubNav = getByRole('button', {name: 'Item'})
+      fireEvent.click(itemWithSubNav)
+
+      expect(queryByRole('link', {name: 'Sub Item 1'})).toBeVisible()
+      expect(queryByRole('button', {name: 'Trailing Action for Sub Item 1'})).toBeVisible()
+    })
+  })
 })