From 84c3c0145481405501ddaa1f93423f98b06f9592 Mon Sep 17 00:00:00 2001 From: Christopher Date: Mon, 16 Dec 2024 18:12:26 +0000 Subject: [PATCH 1/4] Tweak the Great transformers slightly to match the original implementation --- .../Companies/CompanyActivity/constants.js | 6 +++ .../Companies/CompanyActivity/transformers.js | 38 ++++++++++--------- .../TableCards/ActivityCards/transformers.js | 21 +++++----- src/client/modules/Companies/utils.js | 2 +- 4 files changed, 37 insertions(+), 30 deletions(-) diff --git a/src/client/modules/Companies/CompanyActivity/constants.js b/src/client/modules/Companies/CompanyActivity/constants.js index fe32be83e6..8b0dbe85c2 100644 --- a/src/client/modules/Companies/CompanyActivity/constants.js +++ b/src/client/modules/Companies/CompanyActivity/constants.js @@ -71,3 +71,9 @@ export const NEW_ORDER_TAG = { colour: 'grey', dataTest: 'order-kind-label', } + +export const GREAT_EXPORT_TAG = { + text: 'great.gov.uk', + colour: TAGS.ACTIVITY_LABELS.KIND, + dataTest: 'great-kind-label', +} diff --git a/src/client/modules/Companies/CompanyActivity/transformers.js b/src/client/modules/Companies/CompanyActivity/transformers.js index 4ebe2b8afd..469051fc41 100644 --- a/src/client/modules/Companies/CompanyActivity/transformers.js +++ b/src/client/modules/Companies/CompanyActivity/transformers.js @@ -1,7 +1,12 @@ import React from 'react' import Link from '@govuk-react/link' -import { TAGS, NEW_PROJECT_TAG, NEW_ORDER_TAG } from './constants' +import { + TAGS, + NEW_PROJECT_TAG, + NEW_ORDER_TAG, + GREAT_EXPORT_TAG, +} from './constants' import urls from '../../../../lib/urls' import { formatDate, DATE_FORMAT_MEDIUM } from '../../../utils/date-utils' import { truncateData } from '../utils' @@ -291,38 +296,37 @@ export const transformOrderToListItem = (activity) => { } export const transformGreatExportEnquiryToListItem = (activity) => { - const great = activity.great_export_enquiry + const greatExportEnquiry = activity.great_export_enquiry + const contact = greatExportEnquiry.contact return { - id: great.id, + id: greatExportEnquiry.id, metadata: [ - { label: 'Date', value: formatDate(activity.date, DATE_FORMAT_MEDIUM) }, { - label: 'Contact', - value: formattedContacts([great.contact]), + label: '', + value: truncateData(greatExportEnquiry.data_enquiry), }, + { label: 'Date', value: formatDate(activity.date, DATE_FORMAT_MEDIUM) }, { - label: 'Comment', - value: truncateData(great.data_enquiry), + label: 'Contact', + value: contact.name.length && contact.name, }, + { label: 'Job title', value: contact?.job_title }, + { label: 'Email', value: greatExportEnquiry.meta_email_address }, ].filter(({ value }) => Boolean(value)), tags: [ { text: 'great.gov.uk Enquiry', - colour: TAGS.ACTIVITY_LABELS.KIND, - dataTest: 'great-kind-label', + colour: TAGS.ACTIVITY_LABELS.THEME, + dataTest: 'great-theme-label', }, { - text: 'service', + text: 'Export', colour: TAGS.ACTIVITY_LABELS.SERVICE, dataTest: 'great-service-label', }, - { - text: 'great.gov.uk', - colour: TAGS.ACTIVITY_LABELS.THEME, - dataTest: 'great-theme-label', - }, + GREAT_EXPORT_TAG, ].filter(({ text }) => Boolean(text)), - headingText: `Enquiry ` + truncateData(great.meta_subject, 35), + headingText: `Enquiry ` + truncateData(greatExportEnquiry.meta_subject, 35), } } diff --git a/src/client/modules/Companies/CompanyOverview/TableCards/ActivityCards/transformers.js b/src/client/modules/Companies/CompanyOverview/TableCards/ActivityCards/transformers.js index 208b05d88c..0459e25083 100644 --- a/src/client/modules/Companies/CompanyOverview/TableCards/ActivityCards/transformers.js +++ b/src/client/modules/Companies/CompanyOverview/TableCards/ActivityCards/transformers.js @@ -2,6 +2,7 @@ import { TAGS, NEW_PROJECT_TAG, NEW_ORDER_TAG, + GREAT_EXPORT_TAG, } from '../../../CompanyActivity/constants' import { isDateInFuture } from '../../../../../utils/date' import { formatDate, DATE_FORMAT_MEDIUM } from '../../../../../utils/date-utils' @@ -171,20 +172,16 @@ export const transformOrderToListItem = (activity) => { } export const transformGreatExportEnquiryToListItem = (activity) => { - const great = activity.great_export_enquiry + const greatExportEnquiry = activity.great_export_enquiry return { - id: great.id, + id: greatExportEnquiry.id, date: formatDate(activity.date, DATE_FORMAT_MEDIUM), - - tags: [ - { - text: 'great.gov.uk Enquiry', - colour: TAGS.ACTIVITY_LABELS.KIND, - dataTest: 'great-kind-label', - }, - ].filter(({ text }) => Boolean(text)), - headingText: truncateData(great.meta_subject, 35), - summary: `Enquirer ${great.contact.first_name} ${great.contact.last_name}`, + tags: [GREAT_EXPORT_TAG].filter(({ text }) => Boolean(text)), + headingText: truncateData(greatExportEnquiry.meta_subject, 35), + summary: + greatExportEnquiry.contact.name.length > 0 + ? `Enquirer ${greatExportEnquiry.contact?.name}` + : 'Unknown enquirer', } } diff --git a/src/client/modules/Companies/utils.js b/src/client/modules/Companies/utils.js index 869a9daefd..faa76b6f92 100644 --- a/src/client/modules/Companies/utils.js +++ b/src/client/modules/Companies/utils.js @@ -80,6 +80,6 @@ export const companyCollectionListMetadataTask = (ID) => { } export const truncateData = (enquiry, maxLength = 200) => - enquiry.length < maxLength + enquiry.length == 0 || enquiry.length < maxLength ? enquiry : enquiry.slice(0, maxLength).split(' ').slice(0, -1).join(' ') + ' ...' From 56e524733ec6f64037b57c81eebc43ff6f33be0f Mon Sep 17 00:00:00 2001 From: Christopher Date: Mon, 16 Dec 2024 18:14:32 +0000 Subject: [PATCH 2/4] Add tests for great export enquiry activities --- .../GreatExportActivity.cy.jsx | 114 ++++++++++++++++++ .../GreatExportActivityCard.cy.jsx | 101 ++++++++++++++++ .../cypress/support/activity-assertions.js | 4 + .../cypress/support/activity-constants.js | 6 + 4 files changed, 225 insertions(+) create mode 100644 test/component/cypress/specs/Companies/CompanyActivity/GreatExportActivity.cy.jsx create mode 100644 test/component/cypress/specs/Companies/CompanyOverview/ActivityCard/GreatExportActivityCard.cy.jsx diff --git a/test/component/cypress/specs/Companies/CompanyActivity/GreatExportActivity.cy.jsx b/test/component/cypress/specs/Companies/CompanyActivity/GreatExportActivity.cy.jsx new file mode 100644 index 0000000000..795e57c4f4 --- /dev/null +++ b/test/component/cypress/specs/Companies/CompanyActivity/GreatExportActivity.cy.jsx @@ -0,0 +1,114 @@ +import React from 'react' + +import { ItemTemplate } from '../../../../../../src/client/modules/Companies/CompanyActivity' +import { transformGreatExportEnquiryToListItem } from '../../../../../../src/client/modules/Companies/CompanyActivity/transformers' +import { CollectionList } from '../../../../../../src/client/components' +import { + assertMetadataItems, + assertGreatKindLabel, + assertText, +} from '../../../support/activity-assertions' +import { + CONTACT_1, + CREATED_BY, + CREATED_ON, + EMPTY_CONTACT, +} from '../../../support/activity-constants' + +const SUBJECT = 'Lorem ipsum dolor' +const NOTES = + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.' +const LONG_NOTES = + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.' + +const buildAndMountActivity = ( + showOptionalFields, + notes = NOTES, + subject = SUBJECT +) => { + const activity = { + date: CREATED_ON, + great_export_enquiry: { + id: '2', + contact: showOptionalFields ? CONTACT_1 : EMPTY_CONTACT, + data_enquiry: showOptionalFields ? notes : '', + meta_subject: subject, + meta_email_address: showOptionalFields ? CREATED_BY.email : '', + }, + } + + cy.mountWithProvider( + + ) +} + +describe('Great Export Enquiry activity card', () => { + context('When the card is rendered with a complete enquiry', () => { + beforeEach(() => { + buildAndMountActivity(true) + cy.get('[data-test=collection-item]').should('exist') + }) + + it('should render the labels and metadata', () => { + assertGreatLabels() + cy.get(`[data-test="collection-item"]`) + .find('h3') + .children() + .should('exist') + .should('have.text', `Enquiry ${SUBJECT}`) + .should('not.have.attr', 'href') + assertMetadataItems([ + ` ${NOTES}`, + 'Date 25 Nov 2058', + 'Contact Alexander Hamilton', + 'Job title Test Job', + 'Email bernardharrispatel@test.com', + ]) + }) + }) + + context('When the enquiry has missing fields', () => { + beforeEach(() => { + buildAndMountActivity(false) + cy.get('[data-test=collection-item]').should('exist') + }) + + it('should render the date and the labels', () => { + assertGreatLabels() + assertMetadataItems(['Date 25 Nov 2058']) + }) + }) + + context('When the enquiry has a long name and notes', () => { + beforeEach(() => { + buildAndMountActivity(true, LONG_NOTES, LONG_NOTES) + cy.get('[data-test=collection-item]').should('exist') + }) + + it('should truncate the long fields', () => { + assertGreatLabels() + cy.get(`[data-test="collection-item"]`) + .find('h3') + .children() + .should('exist') + .should('have.text', 'Enquiry Lorem ipsum dolor sit amet, ...') + .should('not.have.attr', 'href') + assertMetadataItems([ + ' Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ...', + 'Date 25 Nov 2058', + 'Contact Alexander Hamilton', + 'Job title Test Job', + 'Email bernardharrispatel@test.com', + ]) + }) + }) +}) + +const assertGreatLabels = () => { + assertText('[data-test="great-theme-label"]', 'great.gov.uk Enquiry') + assertText('[data-test="great-service-label"]', 'Export') + assertGreatKindLabel() +} diff --git a/test/component/cypress/specs/Companies/CompanyOverview/ActivityCard/GreatExportActivityCard.cy.jsx b/test/component/cypress/specs/Companies/CompanyOverview/ActivityCard/GreatExportActivityCard.cy.jsx new file mode 100644 index 0000000000..5614818d18 --- /dev/null +++ b/test/component/cypress/specs/Companies/CompanyOverview/ActivityCard/GreatExportActivityCard.cy.jsx @@ -0,0 +1,101 @@ +import React from 'react' + +import { transformGreatExportEnquiryToListItem } from '../../../../../../../src/client/modules/Companies/CompanyOverview/TableCards/ActivityCards/transformers' +import { ItemTemplate } from '../../../../../../../src/client/modules/Companies/CompanyOverview/TableCards/ActivityCards/ActivityCard' +import { CollectionList } from '../../../../../../../src/client/components' +import { assertGreatKindLabel } from '../../../../support/activity-assertions' +import { + CONTACT_1, + CREATED_ON, + EMPTY_CONTACT, +} from '../../../../support/activity-constants' + +const SUBJECT = 'Lorem ipsum dolor' +const LONG_NOTES = + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium.' + +const buildAndMountActivity = (showOptionalFields, subject = SUBJECT) => { + const activity = { + date: CREATED_ON, + great_export_enquiry: { + id: '2', + contact: showOptionalFields ? CONTACT_1 : EMPTY_CONTACT, + meta_subject: subject, + }, + } + + cy.mountWithProvider( + + ) +} + +describe('Great activity card', () => { + context('When the card is rendered with a complete enquiry', () => { + beforeEach(() => { + buildAndMountActivity(true) + cy.get('[data-test="activity-card-wrapper"]').should('exist') + }) + + it('should render the labels and metadata', () => { + assertGreatKindLabel() + cy.get(`[data-test="activity-card-wrapper"]`) + .find('h3') + .children() + .should('exist') + .should('have.text', SUBJECT) + .should('not.have.attr', 'href') + cy.get('[data-test="activity-date"]').should('have.text', '25 Nov 2058') + cy.get('[data-test="activity-summary"]').should( + 'have.text', + 'Enquirer Alexander Hamilton' + ) + }) + }) + + context('When the enquiry subject is over 35 characters', () => { + beforeEach(() => { + buildAndMountActivity(true, LONG_NOTES) + cy.get('[data-test="activity-card-wrapper"]').should('exist') + }) + + it('should render the truncated label', () => { + assertGreatKindLabel() + cy.get(`[data-test="activity-card-wrapper"]`) + .find('h3') + .children() + .should('exist') + .should('have.text', 'Lorem ipsum dolor sit amet, ...') + .should('not.have.attr', 'href') + cy.get('[data-test="activity-date"]').should('have.text', '25 Nov 2058') + cy.get('[data-test="activity-summary"]').should( + 'have.text', + 'Enquirer Alexander Hamilton' + ) + }) + }) + + context('When the contact is blank', () => { + beforeEach(() => { + buildAndMountActivity(false) + cy.get('[data-test="activity-card-wrapper"]').should('exist') + }) + + it('should render the truncated label', () => { + assertGreatKindLabel() + cy.get(`[data-test="activity-card-wrapper"]`) + .find('h3') + .children() + .should('exist') + .should('have.text', SUBJECT) + .should('not.have.attr', 'href') + cy.get('[data-test="activity-date"]').should('have.text', '25 Nov 2058') + cy.get('[data-test="activity-summary"]').should( + 'have.text', + 'Unknown enquirer' + ) + }) + }) +}) diff --git a/test/component/cypress/support/activity-assertions.js b/test/component/cypress/support/activity-assertions.js index 92c14f4100..8e3f351612 100644 --- a/test/component/cypress/support/activity-assertions.js +++ b/test/component/cypress/support/activity-assertions.js @@ -47,3 +47,7 @@ export const assertProjectKindLabel = () => { export const assertOrderKindLabel = () => { assertText('[data-test="order-kind-label"]', 'New Order') } + +export const assertGreatKindLabel = () => { + assertText('[data-test="great-kind-label"]', 'great.gov.uk') +} diff --git a/test/component/cypress/support/activity-constants.js b/test/component/cypress/support/activity-constants.js index e5a441a7bf..130bf3ab2c 100644 --- a/test/component/cypress/support/activity-constants.js +++ b/test/component/cypress/support/activity-constants.js @@ -46,3 +46,9 @@ export const ADVISER_2 = { name: 'Test Team 2', }, } + +export const EMPTY_CONTACT = { + id: '', + name: '', + job_title: '', +} From 2f24057093dbbb541d8de39bc7cc2a0ac5f8949d Mon Sep 17 00:00:00 2001 From: Christopher Date: Mon, 16 Dec 2024 18:27:06 +0000 Subject: [PATCH 3/4] Remove legacy ActivityFeed code --- .../activities/DirectoryFormsApi.jsx | 33 ------------------- .../activities/card/ActivityCardNotes.jsx | 27 --------------- 2 files changed, 60 deletions(-) delete mode 100644 src/client/components/ActivityFeed/activities/card/ActivityCardNotes.jsx diff --git a/src/client/components/ActivityFeed/activities/DirectoryFormsApi.jsx b/src/client/components/ActivityFeed/activities/DirectoryFormsApi.jsx index 2f740f3ea3..c3f9474857 100644 --- a/src/client/components/ActivityFeed/activities/DirectoryFormsApi.jsx +++ b/src/client/components/ActivityFeed/activities/DirectoryFormsApi.jsx @@ -8,7 +8,6 @@ import CardUtils from './card/CardUtils' import ActivityCardWrapper from './card/ActivityCardWrapper' import ActivityCardLabels from './card/ActivityCardLabels' import ActivityCardSubject from './card/ActivityCardSubject' -import ActivityCardNotes from './card/ActivityCardNotes' import ActivityCardMetadata from './card/ActivityCardMetadata' import ActivityOverviewSummary from './card/item-renderers/ActivityOverviewSummary' @@ -104,38 +103,6 @@ export default class DirectoryFormsApi extends React.PureComponent { ) - } else { - kind = 'great.gov.uk Enquiry' - const metadata = [ - { label: 'Date', value: format(sentDate) }, - { - label: 'Name', - value: `${formData.first_name} ${formData.last_name}`, - }, - { label: 'Job title', value: formData.position }, - { label: 'Email', value: formData.email }, - ] - return isOverview ? ( - - ) : ( - - Enquiry - - - - - ) } } } diff --git a/src/client/components/ActivityFeed/activities/card/ActivityCardNotes.jsx b/src/client/components/ActivityFeed/activities/card/ActivityCardNotes.jsx deleted file mode 100644 index e50db5be14..0000000000 --- a/src/client/components/ActivityFeed/activities/card/ActivityCardNotes.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { FONT_SIZE, FONT_WEIGHTS, SPACING } from '@govuk-react/constants' -import styled from 'styled-components' - -const StyledCardNotes = styled('div')` - font-size: ${FONT_SIZE.SIZE_16}; - font-weight: ${FONT_WEIGHTS.regular}; - line-height: ${FONT_SIZE.SIZE_24}; - margin-bottom: ${SPACING.SCALE_1}; -` - -const ActivityCardNotes = ({ notes, maxLength = 255 }) => ( - - {notes.length < maxLength - ? notes - : notes.slice(0, maxLength).split(' ').slice(0, -1).join(' ') + - ' ...'}{' '} - -) - -ActivityCardNotes.propTypes = { - notes: PropTypes.string.isRequired, - maxLength: PropTypes.number, -} - -export default ActivityCardNotes From 97ada1617601c75e7208d4d2f370a38d08d799d5 Mon Sep 17 00:00:00 2001 From: Christopher Date: Tue, 17 Dec 2024 12:28:05 +0000 Subject: [PATCH 4/4] Fix functional test --- .../specs/companies/activity-feed-spec.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/test/functional/cypress/specs/companies/activity-feed-spec.js b/test/functional/cypress/specs/companies/activity-feed-spec.js index f9ce0cd729..8ce61e57e2 100644 --- a/test/functional/cypress/specs/companies/activity-feed-spec.js +++ b/test/functional/cypress/specs/companies/activity-feed-spec.js @@ -77,24 +77,21 @@ describe('Company activity feed', () => { activity.great_export_enquiry.data_enquiry ) it('displays the correct activity type label', () => { - cy.get('[data-test="great-kind-label"]').contains( - 'great.gov.uk Enquiry', - { - matchCase: false, - } + cy.get('[data-test="great-kind-label"]').should( + 'have.text', + 'great.gov.uk' ) }) it('displays the correct topic label', () => { - cy.get('[data-test="great-theme-label"]').contains('great.gov.uk', { - matchCase: false, - }) + cy.get('[data-test="great-theme-label"]').should( + 'have.text', + 'great.gov.uk Enquiry' + ) }) it('displays the correct sub-topic label', () => { - cy.get('[data-test="great-service-label"]').contains('service', { - matchCase: false, - }) + cy.get('[data-test="great-service-label"]').should('have.text', 'Export') }) it('displays the Great export enquiry subject', () => { cy.get('[data-test="collection-item"]').each(() =>