Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WSTEAMA-749: Update service worker tests and URL generation logic #11595

Merged
merged 16 commits into from
May 9, 2024
Merged

WSTEAMA-749: Update service worker tests and URL generation logic #11595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
178a0f1
Ensure headers are passed to the Request object
alex-magana May 3, 2024
9c6308e
Match .jpg.webp and .png.webp
alex-magana May 3, 2024
a448df1
Merge branch 'WSTEAMA-749-implement-webp-support-for-all-images-in-si…
alex-magana May 6, 2024
cdee302
Update service worker URL filter and associated tests
alex-magana May 6, 2024
fb91fcd
Add URL checks for adding .webp extension
alex-magana May 6, 2024
b220666
Fix amz regex
alex-magana May 6, 2024
6c4dc62
Use nono-capture group for performance since only matches are required
alex-magana May 6, 2024
af64a4b
Add tests for ichef URL generation
alex-magana May 7, 2024
219514c
Remove redundant tests
alex-magana May 7, 2024
de0b225
Ensure amz/worldservice does not apply to the news subdomain
alex-magana May 7, 2024
be69d17
Refine web support check to exclude amz/worldservice for news via regex
alex-magana May 7, 2024
b4a75b7
Ensure .webp is not appended to the URL if already included
alex-magana May 7, 2024
097b2af
Add guide comment
alex-magana May 7, 2024
dbc1398
Use the pattern in the service worker to match .webp images
alex-magana May 8, 2024
5a30985
Change service worker to match the images ichef project
alex-magana May 9, 2024
d2157c5
Set sad path tests in an isolated block
alex-magana May 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion public/sw.js
View file
Open in desktop
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
Open in desktop
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 = [
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this mean that according to '//ace/(?:standard|ws)/.+(?:/amz/worldservice/)?.*/', if the url has ace/standard and amz/worldservice then it will always have .webp added to the end, even if it already has. webp on the end? Do some of the ace/standard and amz/worldservice urls ever already have .webp on the end? Just because if we add .webp to one that already has .webp on the end it makes a bad url. Otherwise this looks good! But just checking that scenario. I see the other IRL in this array doesn't have that problem because it specifies .jpg or .png on the end.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just spoke to @eagerterrier and the URLs won't already have webp on. It is only added in this buildIChefUrl file and the service worker. So this should be ok!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Brill.
I've added this test to ensure we're not appending .webp if it's already in the URL.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As regards this query, since the matching pattern checks that the URL ends with .jpg or .png as per (?:\.jpg|\.png), we wouldn't append .webp to the URL if already exists.
This is because this pattern will return false when we check for a match.

/^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
Open in desktop
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
Loading