diff --git a/src/app/containers/FrontPageStoryRows/__snapshots__/index.test.jsx.snap b/src/app/containers/FrontPageStoryRows/__snapshots__/index.test.jsx.snap index 276629d2e4b..00163ba63e1 100644 --- a/src/app/containers/FrontPageStoryRows/__snapshots__/index.test.jsx.snap +++ b/src/app/containers/FrontPageStoryRows/__snapshots__/index.test.jsx.snap @@ -880,12 +880,12 @@ exports[`FrontPageStoryRows Container - snapshots LeadingRow - rtl 1`] = ` class="emotion-46 emotion-47" > سیربین ٹی وی پروگرام آن ڈیمانڈ @@ -1550,12 +1550,12 @@ exports[`FrontPageStoryRows Container - snapshots LeadingRow 1`] = ` class="emotion-7 emotion-8" > Take dis predictor choose who go reach World Cup final @@ -1663,12 +1663,12 @@ exports[`FrontPageStoryRows Container - snapshots LeadingRow 1`] = ` class="emotion-42 emotion-8" > Audio promo @@ -2481,12 +2481,12 @@ exports[`FrontPageStoryRows Container - snapshots RegularRow with images - rtl 1 class="emotion-46 emotion-47" > سیربین ٹی وی پروگرام آن ڈیمانڈ @@ -2547,12 +2547,12 @@ exports[`FrontPageStoryRows Container - snapshots RegularRow with images - rtl 1 class="emotion-46 emotion-47" > رمضان، عید اور سپیشل پکوان @@ -2613,12 +2613,12 @@ exports[`FrontPageStoryRows Container - snapshots RegularRow with images - rtl 1 class="emotion-46 emotion-47" > کرکٹ ورلڈ کپ پر بی بی سی اردو کا خصوصی ضمیمہ @@ -3071,12 +3071,12 @@ exports[`FrontPageStoryRows Container - snapshots RegularRow with images 1`] = ` class="emotion-15 emotion-16" > Take dis predictor choose who go reach World Cup final @@ -3159,12 +3159,12 @@ exports[`FrontPageStoryRows Container - snapshots RegularRow with images 1`] = ` class="emotion-15 emotion-16" > Audio promo @@ -3225,12 +3225,12 @@ exports[`FrontPageStoryRows Container - snapshots RegularRow with images 1`] = ` class="emotion-15 emotion-16" > World Cup 2018 Quiz: You fit name all di players wey don score Super Eagles goal for World Cup? @@ -3286,12 +3286,12 @@ exports[`FrontPageStoryRows Container - snapshots RegularRow with images 1`] = ` class="emotion-15 emotion-16" > Select your best ever African 11 players for World Cup @@ -4092,12 +4092,12 @@ exports[`FrontPageStoryRows Container - snapshots RegularRow without images - rt class="emotion-38 emotion-39" > سیربین ٹی وی پروگرام آن ڈیمانڈ @@ -4128,12 +4128,12 @@ exports[`FrontPageStoryRows Container - snapshots RegularRow without images - rt class="emotion-38 emotion-39" > رمضان، عید اور سپیشل پکوان @@ -4164,12 +4164,12 @@ exports[`FrontPageStoryRows Container - snapshots RegularRow without images - rt class="emotion-38 emotion-39" > کرکٹ ورلڈ کپ پر بی بی سی اردو کا خصوصی ضمیمہ @@ -4583,12 +4583,12 @@ exports[`FrontPageStoryRows Container - snapshots RegularRow without images 1`] class="emotion-7 emotion-8" > Take dis predictor choose who go reach World Cup final @@ -4645,12 +4645,12 @@ exports[`FrontPageStoryRows Container - snapshots RegularRow without images 1`] class="emotion-7 emotion-8" > Audio promo @@ -4681,12 +4681,12 @@ exports[`FrontPageStoryRows Container - snapshots RegularRow without images 1`] class="emotion-7 emotion-8" > World Cup 2018 Quiz: You fit name all di players wey don score Super Eagles goal for World Cup? @@ -4717,12 +4717,12 @@ exports[`FrontPageStoryRows Container - snapshots RegularRow without images 1`] class="emotion-7 emotion-8" > Select your best ever African 11 players for World Cup @@ -5551,12 +5551,12 @@ exports[`FrontPageStoryRows Container - snapshots TopRow 1`] = ` class="emotion-15 emotion-16" > Take dis predictor choose who go reach World Cup final diff --git a/src/app/containers/StoryPromo/__snapshots__/index.test.jsx.snap b/src/app/containers/StoryPromo/__snapshots__/index.test.jsx.snap index c8f26d7afdb..b33c407dcbd 100644 --- a/src/app/containers/StoryPromo/__snapshots__/index.test.jsx.snap +++ b/src/app/containers/StoryPromo/__snapshots__/index.test.jsx.snap @@ -3680,12 +3680,12 @@ exports[`StoryPromo Container should render featureLink correctly for amp 1`] = class="emotion-12 emotion-13" > Feature promo with summary @@ -3997,12 +3997,12 @@ exports[`StoryPromo Container should render featureLink correctly for canonical class="emotion-12 emotion-13" > Feature promo with summary @@ -4311,12 +4311,12 @@ exports[`StoryPromo Container should render featureLink promoType leading on amp class="emotion-4 emotion-5" > Feature promo with summary @@ -4657,12 +4657,12 @@ exports[`StoryPromo Container should render featureLink promoType top on amp 1`] class="emotion-12 emotion-13" > Feature promo with summary @@ -8616,12 +8616,12 @@ exports[`StoryPromo Container should render podcastLink correctly for amp 1`] = class="emotion-12 emotion-13" > Test indonesian podcast @@ -8895,12 +8895,12 @@ exports[`StoryPromo Container should render podcastLink correctly for canonical class="emotion-12 emotion-13" > Test indonesian podcast @@ -9179,12 +9179,12 @@ exports[`StoryPromo Container should render podcastLink promoType leading on amp class="emotion-4 emotion-5" > Test indonesian podcast @@ -9475,12 +9475,12 @@ exports[`StoryPromo Container should render podcastLink promoType top on amp 1`] class="emotion-12 emotion-13" > Test indonesian podcast @@ -11084,12 +11084,12 @@ exports[`StoryPromo Container should render standardLink correctly for amp 1`] = class="emotion-12 emotion-13" > Standard promo with summary @@ -11401,12 +11401,12 @@ exports[`StoryPromo Container should render standardLink correctly for canonical class="emotion-12 emotion-13" > Standard promo with summary @@ -11715,12 +11715,12 @@ exports[`StoryPromo Container should render standardLink promoType leading on am class="emotion-4 emotion-5" > Standard promo with summary @@ -12061,12 +12061,12 @@ exports[`StoryPromo Container should render standardLink promoType top on amp 1` class="emotion-12 emotion-13" > Standard promo with summary diff --git a/src/app/containers/StoryPromo/helpers/fixtureData.js b/src/app/containers/StoryPromo/helpers/fixtureData.js index e45147675d0..954eb2fddcf 100644 --- a/src/app/containers/StoryPromo/helpers/fixtureData.js +++ b/src/app/containers/StoryPromo/helpers/fixtureData.js @@ -343,3 +343,48 @@ export const mapWithoutMediaError = { timestamp: 1588517817000, type: 'cps', }; + +export const secondaryColumnNoAssetURI = { + name: 'Test Radio Bul promo Live', + summary: 'Test Radio summary', + indexImage: { + id: '63711781', + subType: 'index', + href: 'http://b.files.bbci.co.uk/4917/test/_63711781_clinton.jpg', + path: '/cpsdevpb/4917/test/_63711781_clinton.jpg', + height: 371, + width: 660, + altText: 'Clinton', + caption: 'Clinton', + copyrightHolder: 'BBC', + type: 'image', + }, + uri: 'https://www.bbc.co.uk/news', + contentType: 'RadioBulletin', + assetTypeCode: 'PRO', + timestamp: 1571655919000, + isLive: true, + type: 'link', +}; + +export const secondaryColumnContentType = { + name: 'Test Radio Bul promo Live', + summary: 'Test Radio summary', + indexImage: { + id: '63711781', + subType: 'index', + href: 'http://b.files.bbci.co.uk/4917/test/_63711781_clinton.jpg', + path: '/cpsdevpb/4917/test/_63711781_clinton.jpg', + height: 371, + width: 660, + altText: 'Clinton', + caption: 'Clinton', + copyrightHolder: 'BBC', + type: 'image', + }, + contentType: 'RadioBulletin', + assetTypeCode: 'PRO', + timestamp: 1571655919000, + isLive: true, + type: 'link', +}; diff --git a/src/app/containers/StoryPromo/index.jsx b/src/app/containers/StoryPromo/index.jsx index 5927e6ca682..46be841fe2e 100644 --- a/src/app/containers/StoryPromo/index.jsx +++ b/src/app/containers/StoryPromo/index.jsx @@ -24,7 +24,7 @@ import MediaIndicatorContainer from './MediaIndicator'; import IndexAlsosContainer from './IndexAlsos'; import loggerNode from '#lib/logger.node'; import { MEDIA_MISSING } from '#lib/logger.const'; -import { getHeadingTagOverride } from './utilities'; +import { getHeadingTagOverride, getUniqueLinkId } from './utilities'; import { MEDIA_ASSET_PAGE } from '#app/routes/utils/pageTypes'; import useCombinedClickTrackerHandler from './useCombinedClickTrackerHandler'; import PromoTimestamp from './Timestamp'; @@ -39,12 +39,6 @@ const SingleColumnStoryPromo = styled(StoryPromo)` } `; -const getLinkId = (assetUri, labelId) => { - const assetId = assetUri.split('/').pop(); - const sanitisedId = assetId.replace(/\W/g, ''); - return `promo-link-${labelId}${sanitisedId || ''}`; -}; - const StoryPromoImage = ({ useLargeImages, imageValues, lazyLoad }) => { if (!imageValues) { const landscapeRatio = (9 / 16) * 100; @@ -110,12 +104,8 @@ const StoryPromoContainer = ({ const { script, service, translations } = useContext(ServiceContext); const { pageType } = useContext(RequestContext); const handleClickTracking = useCombinedClickTrackerHandler(eventTrackingData); - const assetUri = pathOr( - pathOr('', ['uri'], item), - ['locators', 'assetUri'], - item, - ); - const linkId = getLinkId(assetUri, labelId); + + const linkId = getUniqueLinkId(item, labelId); const liveLabel = pathOr('LIVE', ['media', 'liveLabel'], translations); diff --git a/src/app/containers/StoryPromo/index.test.jsx b/src/app/containers/StoryPromo/index.test.jsx index 195ed7c4942..2e9d44b6eba 100644 --- a/src/app/containers/StoryPromo/index.test.jsx +++ b/src/app/containers/StoryPromo/index.test.jsx @@ -5,7 +5,6 @@ import { shouldMatchSnapshot, suppressPropWarnings, } from '@bbc/psammead-test-helpers'; -import pathOr from 'ramda/src/pathOr'; import loggerMock from '#testHelpers/loggerMock'; import { MEDIA_MISSING } from '#lib/logger.const'; import { RequestContextProvider } from '#contexts/RequestContext'; @@ -29,6 +28,7 @@ import { } from './helpers/fixtureData'; import StoryPromoContainer from '.'; import { ARTICLE_PAGE } from '#app/routes/utils/pageTypes'; +import { getUniqueLinkId } from './utilities'; const onlyOneRelatedItem = { ...indexAlsosItem, @@ -156,17 +156,9 @@ describe('StoryPromo Container', () => { it('should render h3, a, p, time', () => { const labelId = `unlabelled`; - const assetUri = pathOr('', ['locators', 'assetUri'], cpsItem); - const uri = pathOr('', ['uri'], assetTypeItem); - const getLinkId = uriId => { - const splitUri = uriId.split('/').pop(); - const sanitisedId = splitUri.replace(/\W/g, ''); - return `promo-link-${labelId}${sanitisedId || ''}`; - }; - - const uriLabelId = getLinkId(uri); - const assetUriId = getLinkId(assetUri); + const uriLabelId = getUniqueLinkId(assetTypeItem, labelId); + const assetUriId = getUniqueLinkId(cpsItem, labelId); expect(cpsContainer.querySelectorAll('h3 a')[0].innerHTML).toEqual( `${cpsItem.headlines.headline}`, diff --git a/src/app/containers/StoryPromo/utilities/index.js b/src/app/containers/StoryPromo/utilities/index.js index 2b699ce44de..126c38c961b 100644 --- a/src/app/containers/StoryPromo/utilities/index.js +++ b/src/app/containers/StoryPromo/utilities/index.js @@ -24,3 +24,13 @@ export const getHeadingTagOverride = ({ pageType, isContentTypeGuide }) => { }; export const isPgl = item => pathOr(null, ['cpsType'], item) === 'PGL'; + +export const getUniqueLinkId = (item, labelId) => { + const assetUri = pathOr('', ['locators', 'assetUri'], item); + const contentType = pathOr('', ['contentType'], item); + const uri = pathOr('', ['uri'], item); + const uniqueId = assetUri || uri; + const assetId = uniqueId.split('/').pop(); + const sanitisedId = assetId.replace(/\W/g, ''); + return `promo-link-${labelId}${sanitisedId || ''}${contentType}`; +}; diff --git a/src/app/containers/StoryPromo/utilities/index.test.js b/src/app/containers/StoryPromo/utilities/index.test.js index 9e06403e760..a7c54096553 100644 --- a/src/app/containers/StoryPromo/utilities/index.test.js +++ b/src/app/containers/StoryPromo/utilities/index.test.js @@ -1,9 +1,15 @@ -import { isMap, isPgl, getHeadingTagOverride } from '.'; +import { isMap, isPgl, getHeadingTagOverride, getUniqueLinkId } from '.'; import { MOST_WATCHED_PAGE, PHOTO_GALLERY_PAGE, MEDIA_ASSET_PAGE, } from '#app/routes/utils/pageTypes'; +import { + completeItem, + standardLinkItem, + secondaryColumnNoAssetURI, + secondaryColumnContentType, +} from '../helpers/fixtureData'; describe('isMap', () => { it('should return true if cpsType is MAP', () => { @@ -70,3 +76,36 @@ describe('getHeadingTagOverride', () => { expect(getHeadingTagOverride({ pageType, isContentTypeGuide })).toBe(null); }); }); + +describe('getUniqueLinkId', () => { + const labelId = 'unlabelled'; + it('should return id of promo-link with contentType and URI if contentType exists', () => { + expect(getUniqueLinkId(secondaryColumnNoAssetURI, labelId)).toEqual( + 'promo-link-unlabellednewsRadioBulletin', + ); + }); + + it('should return id using URI if assetURI does not exist', () => { + expect(getUniqueLinkId(standardLinkItem, labelId)).toEqual( + 'promo-link-unlabelledazeriText', + ); + }); + + it('should return id using assetURI does not exist and contentType does not exist', () => { + expect(getUniqueLinkId(completeItem, labelId)).toEqual( + 'promo-link-unlabelledwwwbbccouk', + ); + }); + + it('should return id with contentType only if assetURI and URI do not exist', () => { + expect(getUniqueLinkId(secondaryColumnContentType, labelId)).toEqual( + 'promo-link-unlabelledRadioBulletin', + ); + }); + + it('should sanitise link from item and split from last forward slash', () => { + expect( + getUniqueLinkId({ locators: { assetUri: 'a/a/ab.b.b@c@c@c' } }, labelId), + ).toEqual('promo-link-unlabelledabbbccc'); + }); +}); diff --git a/src/app/pages/StoryPage/__snapshots__/index.test.jsx.snap b/src/app/pages/StoryPage/__snapshots__/index.test.jsx.snap index 9c2ffadbd13..8459e6bfbe2 100644 --- a/src/app/pages/StoryPage/__snapshots__/index.test.jsx.snap +++ b/src/app/pages/StoryPage/__snapshots__/index.test.jsx.snap @@ -9724,12 +9724,12 @@ exports[`Story Page snapshots should match snapshot for STY 1`] = ` class="emotion-212 emotion-213" > Feature promo