Merge pull request #106 from uktrade/feature/entity-search-entity-click

Add search result onClick event to entity search component

src/entity-search/EntityList.jsx

@@ -30,6 +30,7 @@ const StyledEntity = styled('div')`
     }
   }
 `
+StyledEntity.displayName = 'StyledEntity'
 
 const StyledHeading = styled(H3)`
   margin: 0;
@@ -51,22 +52,20 @@ const StyledMetaItem = styled('div')`
   }
 `
 
-const EntityList = ({ entities }) => {
+const EntityList = ({ entities, onEntityClick }) => {
   return (
     <StyledEntityList>
-      {entities.map(({ heading, meta }) => {
+      {entities.map((entity) => {
         return (
           <StyledEntityListItem key={uniqueId()}>
-            <StyledEntity key={uniqueId()}>
-              <StyledHeading>{heading}</StyledHeading>
-              {Object.keys(meta).map((metaKey) => {
-                return (
-                  <StyledMetaItem key={uniqueId()}>
-                    <span>{metaKey}:</span>
-                    <span>{meta[metaKey]}</span>
-                  </StyledMetaItem>
-                )
-              })}
+            <StyledEntity key={uniqueId()} onClick={() => onEntityClick(entity)}>
+              <StyledHeading>{entity.heading}</StyledHeading>
+              {Object.keys(entity.meta).map(metaKey => (
+                <StyledMetaItem key={uniqueId()}>
+                  <span>{metaKey}:</span>
+                  <span>{entity.meta[metaKey]}</span>
+                </StyledMetaItem>
+              ))}
             </StyledEntity>
           </StyledEntityListItem>
         )
@@ -80,6 +79,7 @@ EntityList.propTypes = {
     heading: PropTypes.string.isRequired,
     meta: PropTypes.object.isRequired,
   })).isRequired,
+  onEntityClick: PropTypes.func.isRequired,
 }
 
 export default EntityList

src/entity-search/EntitySearch.jsx

@@ -21,6 +21,7 @@ const EntitySearch = ({
   onEntitySearch,
   entities,
   cannotFind,
+  onEntityClick,
 }) => {
   const { filters, setFilter } = useFilter()
   return (
@@ -31,7 +32,7 @@ const EntitySearch = ({
 
       {entities && entities.length ? (
         <>
-          <EntityList entities={entities} />
+          <EntityList entities={entities} onEntityClick={onEntityClick} />
           <CannotFindDetails {...cannotFind} />
         </>
       ) : null}
@@ -61,6 +62,7 @@ EntitySearch.propTypes = {
     text: PropTypes.string.isRequired,
     onChangeClick: PropTypes.func.isRequired,
   }),
+  onEntityClick: PropTypes.func.isRequired,
 }
 
 EntitySearch.defaultProps = {

src/entity-search/EntitySearch.stories.jsx

@@ -44,6 +44,7 @@ const EntitySearchForStorybook = ({ previouslySelected, cannotFindLink }) => {
         ],
         link: cannotFindLink,
       }}
+      onEntityClick={entity => alert(`Selected ${JSON.stringify(entity)}`)}
     />
   )
 }

src/entity-search/EntitySearch.test.jsx

@@ -32,6 +32,7 @@ const wrapEntitySearch = ({
     url: 'http://stillcannotfind.com',
     text: 'still cannot find',
   },
+  onEntityClick = () => console.log('entity clicked'),
 } = {}) => {
   return mount(<EntitySearchWithDataProvider
     previouslySelected={previouslySelected}
@@ -52,6 +53,7 @@ const wrapEntitySearch = ({
       ],
       link: cannotFindLink,
     }}
+    onEntityClick={onEntityClick}
   />)
 }
 
@@ -200,4 +202,42 @@ describe('EntitySearch', () => {
       expect(onChangeClick.mock.calls.length).toEqual(1)
     })
   })
+
+  describe('when the first entity search result is clicked', () => {
+    let wrappedEntitySearch
+    let onEntityClick
+
+    beforeAll(async () => {
+      onEntityClick = jest.fn()
+
+      wrappedEntitySearch = wrapEntitySearch({
+        onEntityClick,
+      })
+
+      wrappedEntitySearch.find('Search').simulate('click')
+
+      await act(flushPromises)
+
+      wrappedEntitySearch.update()
+
+      wrappedEntitySearch
+        .find('StyledEntity')
+        .at(0)
+        .simulate('click')
+    })
+
+    test('should render the component', async () => {
+      expect(wrappedEntitySearch.debug()).toMatchSnapshot()
+    })
+
+    test('should call the onEntityClick event', async () => {
+      expect(onEntityClick.mock.calls.length).toEqual(1)
+      expect(onEntityClick.mock.calls[0][0]).toEqual({
+        heading: 'Some company name',
+        meta: {
+          Address: '123 Fake Street, Brighton, BN1 4SE',
+        },
+      })
+    })
+  })
 })