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 ( +
    + + + Data Hub + + + + +

    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 - - - - @@ -129,8 +129,8 @@ exports[`EntitySearch when initially loading the entity search component should `; exports[`EntitySearch when the "Search" button has been clicked should render the component with entities 1`] = ` -" - +" + @@ -392,10 +392,10 @@ exports[`EntitySearch when the "Search" button has been clicked should render th - - - - @@ -408,8 +408,8 @@ exports[`EntitySearch when the "Search" button has been clicked should render th `; exports[`EntitySearch when the company name filter is applied should render the component with filtered entities 1`] = ` -" - +" + @@ -631,10 +631,10 @@ exports[`EntitySearch when the company name filter is applied should render the - - - - @@ -647,8 +647,8 @@ exports[`EntitySearch when the company name filter is applied should render the `; exports[`EntitySearch when the company postcode filter is applied should render the component with filtered entities 1`] = ` -" - +" + @@ -870,10 +870,10 @@ exports[`EntitySearch when the company postcode filter is applied should render - - - - @@ -886,8 +886,8 @@ exports[`EntitySearch when the company postcode filter is applied should render `; exports[`EntitySearch when the the cannot find link has a callback should render the component 1`] = ` -" - +" + @@ -1131,9 +1131,9 @@ exports[`EntitySearch when the the cannot find link has a callback should render action 2 - - - + + + still cannot find @@ -1149,10 +1149,301 @@ exports[`EntitySearch when the the cannot find link has a callback should render - - - - + + + + + + +" +`; + +exports[`EntitySearch when there is a previously selected "Change" link which is clicked should render the component 1`] = ` +" + + +

    + previously selected + + + + Change + + + +

    +
    + + + +
    + + + + + + +
    + + + +
    + + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + + +
    + + + +
    + + + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + +
      + + +
    1. + + +
      + + +

      + + + +

      + Some company name +

      +
      +
      +
      +

      +
      +
      + + +
      + + Address + :  + + + 123 Fake Street, Brighton, BN1 4SE + +
      +
      +
      +
      +
      +
      +
    2. +
      +
      + + +
    3. + + +
      + + +

      + + + +

      + Some other company +

      +
      +
      +
      +

      +
      +
      + + +
      + + Address + :  + + + 123 ABC Road, Brighton, BN2 9QB + +
      +
      +
      +
      +
      +
      +
    4. +
      +
      +
    +
    +
    +
    + +
    + + +
    + + + + + + + cannot find summary + + + + + + + + +
    +
    + + + + + +
    +

    + + Try refining your search by taking the following actions: + +

    +
    +
    +
    +
    +
    +
    +
      +
    • + action 1 +
    • +
    • + action 2 +
    • +
    + + + + still cannot find + + + +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + +