diff --git a/app/javascript/packages/document-capture/components/location-collection-item.spec.tsx b/app/javascript/packages/document-capture/components/location-collection-item.spec.tsx index 013d181f665..16d54ff419b 100644 --- a/app/javascript/packages/document-capture/components/location-collection-item.spec.tsx +++ b/app/javascript/packages/document-capture/components/location-collection-item.spec.tsx @@ -147,4 +147,44 @@ describe('LocationCollectionItem', () => { expect(sunHours).not.to.exist(); }); }); + + context('when handleSelect callback is not provided', () => { + it('renders the component without the button', () => { + const onClick = sinon.stub(); + const { container } = render( + , + ); + + expect(container.textContent).to.contain('in_person_proofing.body.location.location_button'); + }); + }); + + context('when handleSelect callback is provided', () => { + it('renders the component with the button', () => { + const { container } = render( + , + ); + + expect(container.textContent).to.not.contain( + 'in_person_proofing.body.location.location_button', + ); + }); + }); }); diff --git a/app/javascript/packages/document-capture/components/location-collection-item.tsx b/app/javascript/packages/document-capture/components/location-collection-item.tsx index 3cfc1ac2fd6..5d27d870685 100644 --- a/app/javascript/packages/document-capture/components/location-collection-item.tsx +++ b/app/javascript/packages/document-capture/components/location-collection-item.tsx @@ -4,7 +4,7 @@ import { useI18n } from '@18f/identity-react-i18n'; interface LocationCollectionItemProps { distance?: string; formattedCityStateZip: string; - handleSelect: (event: React.MouseEvent, selection: number) => void; + handleSelect?: (event: React.MouseEvent, selection: number) => void; name?: string; saturdayHours: string; selectId: number; @@ -60,24 +60,28 @@ function LocationCollectionItem({ {`${t('in_person_proofing.body.location.retail_hours_sun')} ${sundayHours}`} )} - handleSelect(event, selectId)} - type="submit" - > - {t('in_person_proofing.body.location.location_button')} - + {handleSelect && ( + handleSelect(event, selectId)} + type="submit" + > + {t('in_person_proofing.body.location.location_button')} + + )}
- { - handleSelect(event, selectId); - }} - type="submit" - > - {t('in_person_proofing.body.location.location_button')} - + {handleSelect && ( + { + handleSelect(event, selectId); + }} + type="submit" + > + {t('in_person_proofing.body.location.location_button')} + + )}