Skip to content

Commit

Permalink
Merge pull request #11595 from bbc/WSTEAMA-749-implement-webp-support…
Browse files Browse the repository at this point in the history 
…-url-downgrade-changes

 WSTEAMA-749: Update service worker tests and URL generation logic
  • Loading branch information
@LilyL0u
LilyL0u committed May 9, 2024
2 parents 0a98d99 + d2157c5 commit 01aceaa
Show file tree
Hide file tree
Showing 4 changed files with 192 additions and 72 deletions.
4 changes: 3 additions & 1 deletion public/sw.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ self.addEventListener('install', event => {

const fetchEventHandler = async event => {
if (
/^https:\/\/ichef(\.test)?\.bbci\.co\.uk\/.+\.webp$/.test(event.request.url)
/^https:\/\/ichef(\.test)?\.bbci\.co\.uk\/(news|images|ace\/(standard|ws))\/.+.webp$/.test(
event.request.url,
)
) {
const req = event.request.clone();

Expand Down
38 changes: 31 additions & 7 deletions src/app/lib/utilities/ichefURL/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,28 @@
import { getEnvConfig } from '../getEnvConfig';

/*
The pattern below:
matches
https://ichef.test.bbci.co.uk/news/660/cpsprodpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg
https://ichef.bbci.co.uk/news/660/cpsdevpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg
https://ichef.test.bbci.co.uk/ace/ws/660/cpsprodpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg
https://ichef.bbci.co.uk/ace/standard/660/cpsprodpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png
https://ichef.test.bbci.co.uk/ace/ws/660/amz/worldservice/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg
https://ichef.bbci.co.uk/ace/standard/660/amz/worldservice/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png
does not match
https://ichef.test.bbci.co.uk/news/660/amz/worldservice/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg
https://ichef.bbci.co.uk/news/660/amz/worldservice/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png
*/

const webpSupportedPatterns = [
/^https:\/\/ichef(?:\.test)?\.bbci\.co\.uk\/(?:news|ace\/(?:standard|ws))\/.+(?:\.jpg|\.png)$/,
/(?:\/ace\/(?:standard|ws)\/.+\/(?:amz\/worldservice\/)?|\/news\/(?!.+\/amz\/worldservice\/)).*/,
];

const isSupportedWebpUrl = url =>
webpSupportedPatterns.every(pattern => pattern.test(url));

const buildPlaceholderSrc = (src, resolution) => {
const imageSrc =
src || 'https://ichef.bbci.co.uk/images/ic/640xn/p0b36kgx.png';
Expand All @@ -19,26 +42,27 @@ const buildPlaceholderSrc = (src, resolution) => {
return `https://${newUrl.join('/')}`;
};

const buildIChefURL = ({ originCode, locator, resolution }) => {
const buildIChefURL = ({
originCode,
locator,
resolution,
ichefSubdomain = 'ace/ws',
}) => {
if (originCode === 'mpv' || originCode === 'pips') {
return buildPlaceholderSrc(locator, resolution);
}

const url = [
getEnvConfig().SIMORGH_ICHEF_BASE_URL || 'https://ichef.bbci.co.uk',
'ace',
'ws',
ichefSubdomain,
resolution,
originCode,
locator,
]
.filter(Boolean)
.join('/');

return url.endsWith('.webp') ||
(url.includes('amz/worldservice') && !url.includes('ace/standard'))
? url
: `${url}.webp`;
return isSupportedWebpUrl(url) ? `${url}.webp` : url;
};

export default buildIChefURL;
102 changes: 80 additions & 22 deletions src/app/lib/utilities/ichefURL/index.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,32 +13,90 @@ describe('getIchefURL', () => {
expect(getIChefURL(input)).toEqual(expectedOutput);
});

it('builds WebP ichef img url based on originCode, locator, resolution and isWebP passed', () => {
const input = {
originCode: 'cpsprodpb',
locator: 'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg',
resolution: '660',
isWebP: true,
};
const expectedOutput =
'https://ichef.bbci.co.uk/ace/ws/660/cpsprodpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp';
describe('builds WebP ichef img url based on originCode, locator and resolution passed', () => {
const BASE_IMAGE_URL = 'https://ichef.bbci.co.uk';

expect(getIChefURL(input)).toEqual(expectedOutput);
});
it.each`
ichefSubdomain | originCode | locator | expectedURL
${undefined} | ${'cpsprodpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg'} | ${`${BASE_IMAGE_URL}/ace/ws/660/cpsprodpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp`}
${undefined} | ${'cpsprodpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png'} | ${`${BASE_IMAGE_URL}/ace/ws/660/cpsprodpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp`}
${undefined} | ${'cpsdevpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg'} | ${`${BASE_IMAGE_URL}/ace/ws/660/cpsdevpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp`}
${undefined} | ${'cpsdevpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png'} | ${`${BASE_IMAGE_URL}/ace/ws/660/cpsdevpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp`}
${undefined} | ${'amz'} | ${'worldservice/live/assets/images/2013/08/19/130819164754_ardeshir_zahedi_112x63_bbc_nocredit.jpg'} | ${`${BASE_IMAGE_URL}/ace/ws/660/amz/worldservice/live/assets/images/2013/08/19/130819164754_ardeshir_zahedi_112x63_bbc_nocredit.jpg.webp`}
${undefined} | ${'amz'} | ${'worldservice/live/assets/images/2015/05/08/150508054332_cameron_624x351_afp.png'} | ${`${BASE_IMAGE_URL}/ace/ws/660/amz/worldservice/live/assets/images/2015/05/08/150508054332_cameron_624x351_afp.png.webp`}
${'ace/standard'} | ${'cpsprodpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg'} | ${`${BASE_IMAGE_URL}/ace/standard/660/cpsprodpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp`}
${'ace/standard'} | ${'cpsprodpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png'} | ${`${BASE_IMAGE_URL}/ace/standard/660/cpsprodpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp`}
${'ace/standard'} | ${'cpsdevpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg'} | ${`${BASE_IMAGE_URL}/ace/standard/660/cpsdevpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp`}
${'ace/standard'} | ${'cpsdevpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png'} | ${`${BASE_IMAGE_URL}/ace/standard/660/cpsdevpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp`}
${'ace/standard'} | ${'amz'} | ${'worldservice/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg'} | ${`${BASE_IMAGE_URL}/ace/standard/660/amz/worldservice/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp`}
${'ace/standard'} | ${'amz'} | ${'worldservice/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png'} | ${`${BASE_IMAGE_URL}/ace/standard/660/amz/worldservice/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp`}
${'news'} | ${'cpsprodpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg'} | ${`${BASE_IMAGE_URL}/news/660/cpsprodpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp`}
${'news'} | ${'cpsprodpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png'} | ${`${BASE_IMAGE_URL}/news/660/cpsprodpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp`}
${'news'} | ${'cpsdevpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg'} | ${`${BASE_IMAGE_URL}/news/660/cpsdevpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp`}
${'news'} | ${'cpsdevpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png'} | ${`${BASE_IMAGE_URL}/news/660/cpsdevpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp`}
`(
`for the subdomain $ichefSubdomain and origin code $originCode the expected URL is $expectedURL`,
({ ichefSubdomain, originCode, locator, expectedURL }) => {
const input = {
originCode,
locator,
resolution: '660',
ichefSubdomain,
};

it('builds standard ichef img url based on originCode, locator, resolution and isWebP passed', () => {
const input = {
originCode: 'amz',
locator:
'worldservice/live/assets/images/2013/08/19/130819164754_ardeshir_zahedi_112x63_bbc_nocredit.jpg',
resolution: '660',
isWebP: true,
};
expect(getIChefURL(input)).toEqual(expectedURL);
},
);

const expectedOutput =
'https://ichef.bbci.co.uk/ace/ws/660/amz/worldservice/live/assets/images/2013/08/19/130819164754_ardeshir_zahedi_112x63_bbc_nocredit.jpg';
it.each`
ichefSubdomain | originCode | locator | expectedURL
${'news'} | ${'amz'} | ${'worldservice/live/assets/images/2013/09/19/130919124553_srivilliputhur_temple_112x63_bbc_nocredit.jpg'} | ${`${BASE_IMAGE_URL}/news/660/amz/worldservice/live/assets/images/2013/09/19/130919124553_srivilliputhur_temple_112x63_bbc_nocredit.jpg`}
${'news'} | ${'amz'} | ${'worldservice/live/assets/images/2013/09/19/130919124553_srivilliputhur_temple_112x63_bbc_nocredit.png'} | ${`${BASE_IMAGE_URL}/news/660/amz/worldservice/live/assets/images/2013/09/19/130919124553_srivilliputhur_temple_112x63_bbc_nocredit.png`}
`(
`by not adding .webp to the URL for the path $locator which does not support WebP`,
({ ichefSubdomain, originCode, locator, expectedURL }) => {
const input = {
originCode,
locator,
resolution: '660',
ichefSubdomain,
};

expect(getIChefURL(input)).toEqual(expectedOutput);
expect(getIChefURL(input)).toEqual(expectedURL);
},
);

it.each`
ichefSubdomain | originCode | locator | expectedURL
${undefined} | ${'cpsprodpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp'} | ${`${BASE_IMAGE_URL}/ace/ws/660/cpsprodpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp`}
${undefined} | ${'cpsprodpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp'} | ${`${BASE_IMAGE_URL}/ace/ws/660/cpsprodpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp`}
${undefined} | ${'cpsdevpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp'} | ${`${BASE_IMAGE_URL}/ace/ws/660/cpsdevpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp`}
${undefined} | ${'cpsdevpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp'} | ${`${BASE_IMAGE_URL}/ace/ws/660/cpsdevpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp`}
${undefined} | ${'amz'} | ${'worldservice/live/assets/images/2013/08/19/130819164754_ardeshir_zahedi_112x63_bbc_nocredit.jpg.webp'} | ${`${BASE_IMAGE_URL}/ace/ws/660/amz/worldservice/live/assets/images/2013/08/19/130819164754_ardeshir_zahedi_112x63_bbc_nocredit.jpg.webp`}
${undefined} | ${'amz'} | ${'worldservice/live/assets/images/2015/05/08/150508054332_cameron_624x351_afp.png.webp'} | ${`${BASE_IMAGE_URL}/ace/ws/660/amz/worldservice/live/assets/images/2015/05/08/150508054332_cameron_624x351_afp.png.webp`}
${'ace/standard'} | ${'cpsprodpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp'} | ${`${BASE_IMAGE_URL}/ace/standard/660/cpsprodpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp`}
${'ace/standard'} | ${'cpsprodpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp'} | ${`${BASE_IMAGE_URL}/ace/standard/660/cpsprodpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp`}
${'ace/standard'} | ${'cpsdevpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp'} | ${`${BASE_IMAGE_URL}/ace/standard/660/cpsdevpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp`}
${'ace/standard'} | ${'cpsdevpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp'} | ${`${BASE_IMAGE_URL}/ace/standard/660/cpsdevpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp`}
${'ace/standard'} | ${'amz'} | ${'worldservice/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp'} | ${`${BASE_IMAGE_URL}/ace/standard/660/amz/worldservice/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp`}
${'ace/standard'} | ${'amz'} | ${'worldservice/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp'} | ${`${BASE_IMAGE_URL}/ace/standard/660/amz/worldservice/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp`}
${'news'} | ${'cpsprodpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp'} | ${`${BASE_IMAGE_URL}/news/660/cpsprodpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp`}
${'news'} | ${'cpsprodpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp'} | ${`${BASE_IMAGE_URL}/news/660/cpsprodpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp`}
${'news'} | ${'cpsdevpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp'} | ${`${BASE_IMAGE_URL}/news/660/cpsdevpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.jpg.webp`}
${'news'} | ${'cpsdevpb'} | ${'cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp'} | ${`${BASE_IMAGE_URL}/news/660/cpsdevpb/cc66/live/5b34d420-b382-11e9-b6fd-e3056fffd1f1.png.webp`}
`(
`the .webp extension is not appended to the URL for $locator`,
({ ichefSubdomain, originCode, locator, expectedURL }) => {
const input = {
originCode,
locator,
resolution: '660',
ichefSubdomain,
};

expect(getIChefURL(input)).toEqual(expectedURL);
},
);
});

it('builds standard ichef img url with originCode mpv', () => {
Expand Down
Loading

0 comments on commit 01aceaa

Please sign in to comment.