-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature/CLS2-651-add-location-tag-search-results (#6352)
* updated company typeahead to show region and country * switch to camel case for prop * added component test
- Loading branch information
1 parent
9ad1b01
commit 67fd1b2
Showing
4 changed files
with
212 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
src/client/components/Form/elements/__stories__/FieldCompaniesTypeahead.stories.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import React from 'react' | ||
|
||
import FieldCompaniesTypeahead from '../FieldCompaniesTypeahead' | ||
import Form from '../../../Form' | ||
|
||
const options = [ | ||
{ | ||
value: '379f390a-e083-4a2c-9cea-e3b9a08606a7', | ||
label: 'Company A', | ||
isInList: true, | ||
ukRegion: { name: 'Bristol' }, | ||
}, | ||
{ | ||
value: '8dcd2bb8-dc73-4a42-8655-4ae42d4d3c5a', | ||
label: 'Company B', | ||
ukRegion: { name: 'Cardiff' }, | ||
}, | ||
{ | ||
value: 'a6f39399-5bf4-46cb-a686-826f73e9f0ca', | ||
label: 'Company C', | ||
address: { country: { name: 'France' } }, | ||
}, | ||
] | ||
|
||
export const mockLoadOptions = (query = '') => | ||
new Promise((resolve) => | ||
query && query.length | ||
? setTimeout( | ||
resolve, | ||
200, | ||
options.filter(({ label }) => | ||
label.toLowerCase().includes(query.toLowerCase()) | ||
) | ||
) | ||
: resolve([]) | ||
) | ||
|
||
export default { | ||
title: 'Form/Form Elements/FieldCompaniesTypeahead', | ||
excludeStories: ['mockLoadOptions'], | ||
parameters: { | ||
component: FieldCompaniesTypeahead, | ||
}, | ||
} | ||
|
||
export const Default = () => ( | ||
<Form | ||
id="fieldCompaniesTypeaheadExample" | ||
analyticsFormName="fieldCompaniesTypeaheadExample" | ||
submissionTaskName="Submit Form example" | ||
> | ||
{() => ( | ||
<> | ||
<FieldCompaniesTypeahead name="company" loadOptions={mockLoadOptions} /> | ||
</> | ||
)} | ||
</Form> | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
84 changes: 84 additions & 0 deletions
84
test/component/cypress/specs/components/Form/FieldCompaniesTypeahead.cy.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
import React from 'react' | ||
|
||
import { | ||
FieldCompaniesTypeahead, | ||
Form, | ||
} from '../../../../../../src/client/components' | ||
|
||
import DataHubProvider from '../../provider' | ||
|
||
const options = [ | ||
{ | ||
value: '379f390a-e083-4a2c-9cea-e3b9a08606a7', | ||
label: 'Company A', | ||
isInList: true, | ||
ukRegion: { name: 'Bristol' }, | ||
}, | ||
{ | ||
value: '8dcd2bb8-dc73-4a42-8655-4ae42d4d3c5a', | ||
label: 'Company B', | ||
ukRegion: { name: 'Cardiff' }, | ||
}, | ||
{ | ||
value: 'a6f39399-5bf4-46cb-a686-826f73e9f0ca', | ||
label: 'Company C', | ||
address: { country: { name: 'France' } }, | ||
}, | ||
] | ||
|
||
const mockLoadOptions = (query = '') => | ||
new Promise((resolve) => | ||
resolve( | ||
options.filter(({ label }) => | ||
label.toLowerCase().includes(query.toLowerCase()) | ||
) | ||
) | ||
) | ||
|
||
describe('FieldCompaniesTypeahead', () => { | ||
const Component = (props) => ( | ||
<DataHubProvider> | ||
<Form id="export-form"> | ||
<FieldCompaniesTypeahead | ||
name="companies" | ||
loadOptions={mockLoadOptions} | ||
{...props} | ||
/> | ||
</Form> | ||
</DataHubProvider> | ||
) | ||
|
||
beforeEach(() => cy.mount(<Component />)) | ||
|
||
const searchForCompany = (name) => { | ||
cy.get('[data-test="field-companies"]') | ||
.find('input') | ||
.click() | ||
.clear() | ||
.type(name) | ||
} | ||
|
||
context('When the company is in a list', () => { | ||
it('the label should tell the user this', () => { | ||
searchForCompany('Company A') | ||
cy.get('[data-test="typeahead-menu-option"]').should( | ||
'contain', | ||
'(in your company lists)' | ||
) | ||
}) | ||
}) | ||
|
||
context('When the company is in a uk region', () => { | ||
it('the tag should contain the region name and UK', () => { | ||
searchForCompany('Company B') | ||
cy.get('[data-test="location-tag"]').should('contain', 'Cardiff') | ||
}) | ||
}) | ||
|
||
context('When the company is not in a uk region', () => { | ||
it('the tag should contain the country name', () => { | ||
searchForCompany('Company C') | ||
cy.get('[data-test="location-tag"]').should('contain', 'France') | ||
}) | ||
}) | ||
}) |