diff --git a/src/client/modules/Investments/EYBLeads/EYBLeadDetails.jsx b/src/client/modules/Investments/EYBLeads/EYBLeadDetails.jsx index 4cd3e466e32..9e316e61ee5 100644 --- a/src/client/modules/Investments/EYBLeads/EYBLeadDetails.jsx +++ b/src/client/modules/Investments/EYBLeads/EYBLeadDetails.jsx @@ -6,8 +6,8 @@ import { format } from '../../../utils/date' import urls from '../../../../lib/urls' import { EYBLeadResource } from '../../../components/Resource' import { EYBLeadLayout, NewWindowLink, SummaryTable } from '../../../components' -import { HIGH_VALUE_LABEL, LOW_VALUE_LABEL } from './constants' import { NOT_SET_TEXT } from '../../../../apps/companies/constants' +import { VALUES_VALUE_TO_LABEL_MAP } from './constants' const EYBLeadDetails = () => { const { eybLeadId } = useParams() @@ -37,9 +37,7 @@ const EYBLeadDetails = () => { )} { const tags = [ { - text: is_high_value ? 'HIGH VALUE' : 'LOW VALUE', - colour: is_high_value ? 'green' : 'orange', + text: VALUES_VALUE_TO_LABEL_MAP[is_high_value].toUpperCase(), + colour: is_high_value + ? TAG_COLOURS.GREEN + : is_high_value === false + ? TAG_COLOURS.ORANGE + : TAG_COLOURS.GREY, dataTest: 'value-label', }, ] diff --git a/test/functional/cypress/specs/investments/eyb-lead-details-spec.js b/test/functional/cypress/specs/investments/eyb-lead-details-spec.js index 64ab2bc303f..81fe7baaef7 100644 --- a/test/functional/cypress/specs/investments/eyb-lead-details-spec.js +++ b/test/functional/cypress/specs/investments/eyb-lead-details-spec.js @@ -5,7 +5,9 @@ import { import { investments } from '../../../../../src/lib/urls' import { eybLeadFaker } from '../../fakers/eyb-leads' import { NOT_SET_TEXT } from '../../../../../src/apps/companies/constants' +import { VALUES_VALUE_TO_LABEL_MAP } from '../../../../../src/client/modules/Investments/EYBLeads/constants' +const selectors = require('../../../../selectors/index') const urls = require('../../../../../src/lib/urls') const setup = (eybLead) => { @@ -264,4 +266,21 @@ describe('EYB lead details', () => { }) } ) + context('When viewing an EYB lead with high, low, and unknown values', () => { + const testCases = [true, false, null] + testCases.forEach((value) => { + const eybLead = eybLeadFaker({ is_high_value: value }) + it('should render the value field with the correct label', () => { + setup(eybLead) + cy.visit(investments.eybLeads.details(eybLead.id)) + cy.wait('@getEYBLeadDetails') + cy.get( + selectors.keyValueTable('eyb-lead-details-table').keyCell(2) + ).should('have.text', 'Value') + cy.get( + selectors.keyValueTable('eyb-lead-details-table').valueCell(2) + ).should('have.text', VALUES_VALUE_TO_LABEL_MAP[eybLead.is_high_value]) + }) + }) + }) }) diff --git a/test/functional/cypress/specs/investments/eyb-leads-spec.js b/test/functional/cypress/specs/investments/eyb-leads-spec.js index 7bd91287e8a..c15bb51c39f 100644 --- a/test/functional/cypress/specs/investments/eyb-leads-spec.js +++ b/test/functional/cypress/specs/investments/eyb-leads-spec.js @@ -15,6 +15,7 @@ import { import { investments } from '../../../../../src/lib/urls' import { format } from '../../../../../src/client/utils/date' import { eybLeadFaker } from '../../fakers/eyb-leads' +import { VALUES_VALUE_TO_LABEL_MAP } from '../../../../../src/client/modules/Investments/EYBLeads/constants' const EYB_RETRIEVE_API_ROUTE = '/api-proxy/v4/investment-lead/eyb' @@ -34,6 +35,8 @@ const HIGH_VALUE = 'high' const HIGH_VALUE_LABEL = 'High value' const LOW_VALUE = 'low' const LOW_VALUE_LABEL = 'Low value' +const UNKNOWN_VALUE = 'unknown' +const UNKNOWN_VALUE_LABEL = 'Unknown value' const COUNTRY_NAME_1 = 'Canada' const COUNTRY_ID_1 = '5daf72a6-5d95-e211-a939-e4115bead28a' const COUNTRY_NAME_2 = 'Brazil' @@ -52,6 +55,7 @@ const EYB_LEAD_LIST = Array( is_high_value: false, country: { name: COUNTRY_NAME_1, id: COUNTRY_ID_1 }, }), + eybLeadFaker({ triage_created: DATE_TIME_STRING, is_high_value: null }), eybLeadFaker({ triage_created: DATE_TIME_STRING, is_high_value: false }), eybLeadFaker({ triage_created: DATE_TIME_STRING, @@ -68,6 +72,7 @@ const PAYLOADS = { sectorFilter: { sector: SECTOR_ID }, highValueFilter: { value: HIGH_VALUE }, lowValueFilter: { value: LOW_VALUE }, + unknownValueFilter: { value: UNKNOWN_VALUE }, countryFilter: { country: COUNTRY_ID_1 }, } @@ -92,7 +97,8 @@ const getEYBLeadsBySectorId = (sectorId) => { const convertValueStringToBoolean = (value) => { if (value === 'high') return true if (value === 'low') return false - throw new Error('Invalid value: must be either "high" or "low"') + if (value === 'unknown') return null + throw new Error('Invalid value: must be either "high", "low", or "unknown"') } const getEYBLeadsByValue = (valueOfLead) => { @@ -174,11 +180,14 @@ describe('EYB leads collection page', () => { 'contain', `Location ${eybLead.proposed_investment_region.name}` ) - .should('contain', eybLead.is_high_value ? 'HIGH VALUE' : 'LOW VALUE') + .should( + 'contain', + VALUES_VALUE_TO_LABEL_MAP[eybLead.is_high_value].toUpperCase() + ) }) it('should display the other name when company is null for a collection item', () => { cy.get('[data-test="collection-item"]') - .eq(3) + .eq(4) .should('contain', COMPANY_NAME_DEFAULT) }) }) @@ -290,7 +299,7 @@ describe('EYB leads collection page', () => { }) context( - 'When filtering the EYB leads collection by value of leads (repeats test case for "high" and "low")', + 'When filtering the EYB leads collection by value of leads (repeats test case for "high", "low", and "unknown")', () => { const testCases = [ { @@ -311,6 +320,15 @@ describe('EYB leads collection page', () => { chipsLabel: LOW_VALUE_LABEL, expectedNumberOfResults: 3, }, + { + queryParamValue: UNKNOWN_VALUE, + expectedPayload: { + ...PAYLOADS.minimum, + ...PAYLOADS.unknownValueFilter, + }, + chipsLabel: UNKNOWN_VALUE_LABEL, + expectedNumberOfResults: 1, + }, ] testCases.forEach((testCase) => {