Fix benefits hub landing page showing TOC with only one section (#1842)

Author: pwolfert

src/components/benefitsHub/template.test.tsx

@@ -250,7 +250,7 @@ describe('BenefitsHub with valid data', () => {
     expect(instagramLink.href).toBe('https://www.instagram.com/deptvetaffairs')
   })
 
-  test('renders on-this-page component when spokes exist', () => {
+  test('renders on-this-page component when more than one spoke exists', () => {
     const mockSpokes = [
       {
         type: 'paragraph--list_of_link_teasers' as const,
@@ -274,6 +274,28 @@ describe('BenefitsHub with valid data', () => {
           },
         ],
       },
+      {
+        type: 'paragraph--list_of_link_teasers' as const,
+        id: 'spoke-2',
+        entityId: 3,
+        title: 'More health topics',
+        isHubPage: true,
+        linkTeasers: [
+          {
+            type: 'paragraph--link_teaser' as const,
+            id: 'teaser-2',
+            entityId: 4,
+            uri: '/health-care/cost/',
+            title: 'Health care costs',
+            options: [],
+            summary: 'Learn about costs',
+            isHubPage: true,
+            componentParams: {
+              sectionHeader: 'More health topics',
+            },
+          },
+        ],
+      },
     ]
 
     render(
@@ -288,12 +310,51 @@ describe('BenefitsHub with valid data', () => {
       />
     )
 
-    // Check that the va-on-this-page element is rendered
-    const onThisPageElement = document.querySelector('va-on-this-page')
-    expect(onThisPageElement).toBeInTheDocument()
+    expect(document.querySelector('va-on-this-page')).toBeInTheDocument()
+  })
+
+  test('does not render on-this-page component when only one spoke exists', () => {
+    const mockSpokes = [
+      {
+        type: 'paragraph--list_of_link_teasers' as const,
+        id: 'spoke-1',
+        entityId: 1,
+        title: 'Get VA health care',
+        isHubPage: true,
+        linkTeasers: [
+          {
+            type: 'paragraph--link_teaser' as const,
+            id: 'teaser-1',
+            entityId: 2,
+            uri: '/health-care/apply/',
+            title: 'Apply for health care',
+            options: [],
+            summary: 'Apply for VA health care benefits',
+            isHubPage: true,
+            componentParams: {
+              sectionHeader: 'Get VA health care',
+            },
+          },
+        ],
+      },
+    ]
+
+    render(
+      <BenefitsHub
+        {...mockBenefitsData}
+        title={'Benefits Hub with One Spoke'}
+        intro={'Testing with a single spoke.'}
+        spokes={mockSpokes}
+        fieldLinks={null}
+        connectWithUs={null}
+        relatedLinks={null}
+      />
+    )
+
+    expect(document.querySelector('va-on-this-page')).not.toBeInTheDocument()
   })
 
-  test('does not render on-this-page component when no spokes exist', () => {
+  test('does not render on-this-page component when spokes is empty', () => {
     render(
       <BenefitsHub
         {...mockBenefitsData}
@@ -306,9 +367,7 @@ describe('BenefitsHub with valid data', () => {
       />
     )
 
-    // Check that the va-on-this-page element is not rendered when spokes is empty
-    const onThisPageElement = document.querySelector('va-on-this-page')
-    expect(onThisPageElement).not.toBeInTheDocument()
+    expect(document.querySelector('va-on-this-page')).not.toBeInTheDocument()
   })
 
   test('does not render on-this-page component when spokes is null', () => {
@@ -321,9 +380,7 @@ describe('BenefitsHub with valid data', () => {
       />
     )
 
-    // Check that the va-on-this-page element is not rendered when spokes is null
-    const onThisPageElement = document.querySelector('va-on-this-page')
-    expect(onThisPageElement).not.toBeInTheDocument()
+    expect(document.querySelector('va-on-this-page')).not.toBeInTheDocument()
   })
   test('renders BenefitsHub component with relatedLinks', () => {
     const mockRelatedLinks = {

src/components/benefitsHub/template.tsx

@@ -47,7 +47,7 @@ export function BenefitsHub({
           dangerouslySetInnerHTML={{ __html: intro }}
         />
       )}
-      {spokes?.length > 0 && <va-on-this-page></va-on-this-page>}
+      {spokes?.length > 1 && <va-on-this-page></va-on-this-page>}
       {alert && <AlertBlock {...alert} />}
       {spokes?.map((spokeSection) => (
         <div key={spokeSection.id}>