Add test coverage

primer · Jun 27, 2024 · 057ff7c · 057ff7c
1 parent 8de3535
commit 057ff7c
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git 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
@@ -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()
+    })
+  })
 })