diff --git a/src/entity-search/CannotFindDetails.jsx b/src/entity-search/CannotFindDetails.jsx
index 0cca6c58..ffc0e1a8 100644
--- a/src/entity-search/CannotFindDetails.jsx
+++ b/src/entity-search/CannotFindDetails.jsx
@@ -17,7 +17,7 @@ const CannotFindDetails = ({ summary, actions, link }) => {
{actions.map(text =>
{text})}
{link.text}
diff --git a/src/entity-search/EntitySearch.jsx b/src/entity-search/EntitySearch.jsx
index 19f0a1fa..0428dbee 100644
--- a/src/entity-search/EntitySearch.jsx
+++ b/src/entity-search/EntitySearch.jsx
@@ -7,6 +7,7 @@ import { SPACING } from '@govuk-react/constants'
import CannotFindDetails from './CannotFindDetails'
import EntityList from './EntityList'
import EntityFilters from './EntityFilters'
+import PreviouslySelected from './PreviouslySelected'
import useFilter from './useFilter'
const StyledButton = styled(Button)`
@@ -14,10 +15,18 @@ const StyledButton = styled(Button)`
`
StyledButton.displayName = 'Search'
-const EntitySearch = ({ onEntitySearch, entities, entityFilters, cannotFind }) => {
+const EntitySearch = ({
+ previouslySelected,
+ entityFilters,
+ onEntitySearch,
+ entities,
+ cannotFind,
+}) => {
const { filters, setFilter } = useFilter()
return (
<>
+ {previouslySelected && }
+
{entities && entities.length ? (
@@ -48,6 +57,14 @@ EntitySearch.propTypes = {
onClick: PropTypes.func,
}).isRequired,
}).isRequired,
+ previouslySelected: PropTypes.shape({
+ text: PropTypes.string.isRequired,
+ onChangeClick: PropTypes.func.isRequired,
+ }),
+}
+
+EntitySearch.defaultProps = {
+ previouslySelected: null,
}
export default EntitySearch
diff --git a/src/entity-search/EntitySearch.stories.jsx b/src/entity-search/EntitySearch.stories.jsx
index 70e72827..0fa94635 100644
--- a/src/entity-search/EntitySearch.stories.jsx
+++ b/src/entity-search/EntitySearch.stories.jsx
@@ -17,10 +17,11 @@ const apiEndpointWithParameters = new RegExp(`${apiEndpoint}.+`)
mock.onPost(apiEndpoint).reply(200, companySearchFixture)
mock.onPost(apiEndpointWithParameters).reply(200, companySearchFixture)
-const EntitySearchForStorybook = ({ cannotFindLink }) => {
+const EntitySearchForStorybook = ({ previouslySelected, cannotFindLink }) => {
return (
{
}
EntitySearchForStorybook.propTypes = {
+ previouslySelected: {
+ text: PropTypes.string.isRequired,
+ onChangeClick: PropTypes.func.isRequired,
+ },
cannotFindLink: {
text: PropTypes.string.isRequired,
url: PropTypes.string,
@@ -51,6 +56,7 @@ EntitySearchForStorybook.propTypes = {
}
EntitySearchForStorybook.defaultProps = {
+ previouslySelected: null,
cannotFindLink: {
text: 'I still cannot find the company',
url: 'http://stillcannotfind.com',
@@ -99,3 +105,25 @@ storiesOf('EntitySearch', module)
)
})
+ .add('Data Hub company search with previously selected value and "Change" link', () => {
+ return (
+
+
+
+
+
+
+
+
+ Find the company
+ alert('Change previously selected'),
+ }}
+ />
+
+
+
+ )
+ })
diff --git a/src/entity-search/EntitySearch.test.jsx b/src/entity-search/EntitySearch.test.jsx
index 2b9be77e..9039d101 100644
--- a/src/entity-search/EntitySearch.test.jsx
+++ b/src/entity-search/EntitySearch.test.jsx
@@ -28,11 +28,15 @@ const flushPromises = () => {
})
}
-const wrapEntitySearch = (cannotFindLink = {
- url: 'http://stillcannotfind.com',
- text: 'still cannot find',
-}) => {
+const wrapEntitySearch = ({
+ previouslySelected,
+ cannotFindLink = {
+ url: 'http://stillcannotfind.com',
+ text: 'still cannot find',
+ },
+} = {}) => {
return mount( {
preventDefaultMock = jest.fn()
wrappedEntitySearch = wrapEntitySearch({
- text: 'still cannot find',
- onClick: onCannotFindLinkClick,
+ cannotFindLink: {
+ text: 'still cannot find',
+ onClick: onCannotFindLinkClick,
+ },
})
wrappedEntitySearch.find('Search').simulate('click')
@@ -138,7 +144,7 @@ describe('EntitySearch', () => {
wrappedEntitySearch.update()
wrappedEntitySearch
- .find('[href="#"]')
+ .find('[href="#cannot-find"]')
.at(1)
.simulate('click', { preventDefault: preventDefaultMock })
})
@@ -155,4 +161,45 @@ describe('EntitySearch', () => {
expect(onCannotFindLinkClick.mock.calls.length).toEqual(1)
})
})
+
+ describe('when there is a previously selected "Change" link which is clicked', () => {
+ let wrappedEntitySearch
+ let onChangeClick
+ let preventDefaultMock
+
+ beforeAll(async () => {
+ onChangeClick = jest.fn()
+ preventDefaultMock = jest.fn()
+
+ wrappedEntitySearch = wrapEntitySearch({
+ previouslySelected: {
+ onChangeClick,
+ text: 'previously selected',
+ },
+ })
+
+ wrappedEntitySearch.find('Search').simulate('click')
+
+ await act(flushPromises)
+
+ wrappedEntitySearch.update()
+
+ wrappedEntitySearch
+ .find('[href="#previously-selected"]')
+ .at(1)
+ .simulate('click', { preventDefault: preventDefaultMock })
+ })
+
+ test('should render the component', async () => {
+ expect(wrappedEntitySearch.debug()).toMatchSnapshot()
+ })
+
+ test('should prevent the default link action', async () => {
+ expect(preventDefaultMock.mock.calls.length).toEqual(1)
+ })
+
+ test('should call the onChangeClick event', async () => {
+ expect(onChangeClick.mock.calls.length).toEqual(1)
+ })
+ })
})
diff --git a/src/entity-search/PreviouslySelected.jsx b/src/entity-search/PreviouslySelected.jsx
new file mode 100644
index 00000000..b5d7338c
--- /dev/null
+++ b/src/entity-search/PreviouslySelected.jsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Link } from 'govuk-react'
+import styled from 'styled-components'
+import { SPACING } from '@govuk-react/constants'
+
+const StyledLink = styled(Link)`
+ margin-left: ${SPACING.SCALE_2};
+`
+
+const PreviouslySelected = ({ text, onChangeClick }) => {
+ const onClick = (e) => {
+ e.preventDefault()
+ onChangeClick()
+ }
+
+ return (
+
+ {text}
+ Change
+
+ )
+}
+
+PreviouslySelected.propTypes = {
+ text: PropTypes.string.isRequired,
+ onChangeClick: PropTypes.func.isRequired,
+}
+
+export default PreviouslySelected
diff --git a/src/entity-search/__snapshots__/EntitySearch.test.jsx.snap b/src/entity-search/__snapshots__/EntitySearch.test.jsx.snap
index e7f44004..a7efa540 100644
--- a/src/entity-search/__snapshots__/EntitySearch.test.jsx.snap
+++ b/src/entity-search/__snapshots__/EntitySearch.test.jsx.snap
@@ -1,8 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EntitySearch when initially loading the entity search component should render the component without entities 1`] = `
-"
-
+"
+
@@ -113,10 +113,10 @@ exports[`EntitySearch when initially loading the entity search component should
-
-
-
-