Skip to content

Commit

Permalink
Merge pull request #11667 from bbc/WSTEAMA-749-implement-webp-support…
Browse files Browse the repository at this point in the history 
…-add-tests

WSTEAMA-749: Implement page tests
  • Loading branch information
@alex-magana
alex-magana committed Jun 24, 2024
2 parents 2cfaad1 + 4998c2b commit ae37255
Show file tree
Hide file tree
Showing 12 changed files with 918 additions and 193 deletions.
435 changes: 246 additions & 189 deletions src/app/pages/ArticlePage/__snapshots__/index.test.jsx.snap
View file

Large diffs are not rendered by default.

59 changes: 59 additions & 0 deletions src/app/pages/ArticlePage/fixtureData.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,65 @@ export const articleDataNews = articleDataBuilder(
},
position: [5],
},
{
id: 'ec2cc789',
type: 'image',
model: {
blocks: [
{
id: '2b420fde',
type: 'altText',
model: {
blocks: [
{
id: '845446c2',
type: 'text',
model: {
blocks: [
{
id: '65e99201',
type: 'paragraph',
model: {
text: 'Shiroo buddeen waliin',
blocks: [
{
id: 'b58767fc',
type: 'fragment',
model: {
text: 'Shiroo buddeen waliin',
attributes: [],
},
position: [11, 1, 1, 1, 1],
},
],
},
position: [11, 1, 1, 1],
},
],
},
position: [11, 1, 1],
},
],
},
position: [11, 1],
},
{
id: '8d3a8c2c',
type: 'rawImage',
model: {
width: 951,
height: 535,
locator: '157c/live/d5c6e520-16dd-11ef-9b12-1ba8f95c4917.jpg',
originCode: 'cpsprodpb',
copyrightHolder: 'BBC',
suitableForSyndication: true,
},
position: [11, 2],
},
],
},
position: [11],
},
],
'Article Headline for SEO',
'Article Headline for Promo',
Expand Down
102 changes: 102 additions & 0 deletions src/app/pages/ArticlePage/index.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@ import { ARTICLE_PAGE } from '#app/routes/utils/pageTypes';
import { suppressPropWarnings } from '#app/legacy/psammead/psammead-test-helpers/src';
import {
render,
screen,
waitFor,
act,
} from '../../components/react-testing-library-with-providers';
import { ServiceContextProvider } from '../../contexts/ServiceContext';
import ArticlePage from './ArticlePage';
Expand Down Expand Up @@ -109,12 +111,18 @@ const Context = ({
};

beforeEach(() => {
process.env.SIMORGH_ICHEF_BASE_URL = 'https://ichef.test.bbci.co.uk';

fetch.resetMocks();
ATIAnalytics.mockImplementation(
jest.requireActual('../../components/ATIAnalytics').default,
);
});

afterEach(() => {
delete process.env.SIMORGH_ICHEF_BASE_URL;
});

describe('Article Page', () => {
it('should use headline for meta description if summary does not exist', async () => {
const articleDataNewsWithSummary = mergeDeepLeft(
Expand Down Expand Up @@ -433,6 +441,100 @@ describe('Article Page', () => {
expect(getByTestId('features')).toBeInTheDocument();
});

it('should render image with the .webp image extension', () => {
const imageBlock = articleDataNews.content.model.blocks[5];
const imageAltText =
imageBlock.model.blocks[0].model.blocks[0].model.blocks[0].model.text;
const imageLocator = imageBlock.model.blocks[1].model.locator;
const imageOriginCode = imageBlock.model.blocks[1].model.originCode;
const imageURL = `https://ichef.test.bbci.co.uk/ace/ws/640/${imageOriginCode}/${imageLocator}.webp`;
const expectedSrcSetURLs = [
`https://ichef.test.bbci.co.uk/ace/ws/240/${imageOriginCode}/${imageLocator}.webp 240w`,
`https://ichef.test.bbci.co.uk/ace/ws/320/${imageOriginCode}/${imageLocator}.webp 320w`,
`https://ichef.test.bbci.co.uk/ace/ws/480/${imageOriginCode}/${imageLocator}.webp 480w`,
`https://ichef.test.bbci.co.uk/ace/ws/624/${imageOriginCode}/${imageLocator}.webp 624w`,
`https://ichef.test.bbci.co.uk/ace/ws/800/${imageOriginCode}/${imageLocator}.webp 800w`,
].join(', ');

render(
<Context service="news">
<ArticlePage
pageData={{ ...articleDataNews, mostRead: newsMostReadData }}
/>
</Context>,
);

const { src, srcset } = screen.getByAltText(imageAltText);

expect(src).toEqual(imageURL);
expect(srcset).toEqual(expectedSrcSetURLs);
});

it('should render secondary column images with the .webp image extension', async () => {
const pageDataWithSecondaryColumn = {
...articleDataNews,
secondaryColumn: {
topStories: [],
features: [
{
headlines: {
headline:
'Тарых барактары: Кыргызстан-Өзбекстан ортосундагы коңшулук мамиле 42',
},
locators: {
assetUri: '/kyrgyz/kyrgyzstan-23087521',
cpsUrn: 'urn:bbc:content:assetUri:kyrgyz/kyrgyzstan-23087521',
curie:
'http://www.bbc.co.uk/asset/eda3de40-cfd2-7449-87b4-2a26392fa543',
assetId: '23087521',
},
summary:
'Ушул аптанын башында Кыргызстан акыркы он жылдан бери биринчи жолу Өзбекстандын расмий делегациясын кабыл алды.',
timestamp: 1477898711000,
language: 'ky',
cpsType: 'STY',
indexImage: {
id: '63486487',
subType: 'index',
href: 'http://b.files.bbci.co.uk/13284/test/_63486487_63486486.jpg',
path: '/cpsdevpb/13284/test/_63486487_63486486.jpg',
height: 549,
width: 976,
altText: 'Өзбекстандын',
caption: 'Өзбекстандын',
copyrightHolder: 'Getty Images',
originCode: 'cpsdevpb',
type: 'image',
},
options: {
isBreakingNews: false,
isFactCheck: false,
},
id: 'urn:bbc:ares::asset:kyrgyz/kyrgyzstan-23087521',
type: 'cps',
},
],
},
};

const imageBlock =
pageDataWithSecondaryColumn.secondaryColumn.features[0].indexImage;
const { altText: imageAltText, path: imagePath } = imageBlock;
const imageURL = `https://ichef.test.bbci.co.uk/ace/ws/400${imagePath}.webp`;

await act(async () => {
render(
<Context service="news">
<ArticlePage pageData={pageDataWithSecondaryColumn} />
</Context>,
);
});

const { src } = screen.getByAltText(imageAltText);

expect(src).toEqual(imageURL);
});

describe('when isApp is true', () => {
it('should remove the top stories and features sections', async () => {
const pageDataWithSecondaryColumn = {
Expand Down
26 changes: 25 additions & 1 deletion src/app/pages/FeatureIdxPage/index.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { render, act } from '@testing-library/react';
import { render, act, screen } from '@testing-library/react';
import { RequestContextProvider } from '#contexts/RequestContext';
import { ToggleContextProvider } from '#contexts/ToggleContext';
import urduPageData from '#data/urdu/cpsAssets/science-51314202.json';
Expand Down Expand Up @@ -172,6 +172,30 @@ describe('Feature Idx Page', () => {
});
});

it('should render images with the .webp image extension', () => {
process.env.SIMORGH_ICHEF_BASE_URL = 'https://ichef.test.bbci.co.uk';

render(<FeatureIdxPageWithContext pageData={pageData} />);

const imageBlock = pageData.content.groups[3].items[0].indexImage;
const { altText: imageAltText, path: imagePath } = imageBlock;
const imageURL = `https://ichef.test.bbci.co.uk/ace/ws/660${imagePath}.webp`;
const expectedSrcSetURLs = [
`https://ichef.test.bbci.co.uk/ace/ws/70${imagePath}.webp 70w`,
`https://ichef.test.bbci.co.uk/ace/ws/95${imagePath}.webp 95w`,
`https://ichef.test.bbci.co.uk/ace/ws/144${imagePath}.webp 144w`,
`https://ichef.test.bbci.co.uk/ace/ws/183${imagePath}.webp 183w`,
`https://ichef.test.bbci.co.uk/ace/ws/240${imagePath}.webp 240w`,
`https://ichef.test.bbci.co.uk/ace/ws/320${imagePath}.webp 320w`,
`https://ichef.test.bbci.co.uk/ace/ws/660${imagePath}.webp 660w`,
].join(', ');

const { src, srcset } = screen.getByAltText(imageAltText);

expect(src).toEqual(imageURL);
expect(srcset).toEqual(expectedSrcSetURLs);
});

describe('Ads', () => {
it.each`
adsEnabled | showAdsBasedOnLocation | scenario
Expand Down
48 changes: 48 additions & 0 deletions src/app/pages/FrontPage/index.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,5 +185,53 @@ describe('Front Page', () => {
expect(section.getAttribute('role')).toEqual('region');
});
});

it('should render images with the .webp image extension', async () => {
process.env.SIMORGH_ICHEF_BASE_URL = 'https://ichef.test.bbci.co.uk';

const { pageData } = await getInitialData({
path: '/serbian/lat',
service: 'serbian',
variant: 'lat',
});

const { path } = pageData.content.groups[0].items[0].indexImage;
const imageURL = `https://ichef.test.bbci.co.uk/ace/ws/660${path}.webp`;
const expectedWebpSrcSetURLs = [
`https://ichef.test.bbci.co.uk/ace/ws/70${path}.webp 70w`,
`https://ichef.test.bbci.co.uk/ace/ws/95${path}.webp 95w`,
`https://ichef.test.bbci.co.uk/ace/ws/144${path}.webp 144w`,
`https://ichef.test.bbci.co.uk/ace/ws/183${path}.webp 183w`,
`https://ichef.test.bbci.co.uk/ace/ws/240${path}.webp 240w`,
`https://ichef.test.bbci.co.uk/ace/ws/320${path}.webp 320w`,
`https://ichef.test.bbci.co.uk/ace/ws/660${path}.webp 660w`,
].join(', ');

const expectedJPGSrcSetURLs = [
`https://ichef.test.bbci.co.uk/ace/ws/70${path} 70w`,
`https://ichef.test.bbci.co.uk/ace/ws/95${path} 95w`,
`https://ichef.test.bbci.co.uk/ace/ws/144${path} 144w`,
`https://ichef.test.bbci.co.uk/ace/ws/183${path} 183w`,
`https://ichef.test.bbci.co.uk/ace/ws/240${path} 240w`,
`https://ichef.test.bbci.co.uk/ace/ws/320${path} 320w`,
`https://ichef.test.bbci.co.uk/ace/ws/660${path} 660w`,
].join(', ');

let container;
await act(async () => {
container = render(
<FrontPageWithContext pageData={pageData} />,
).container;
});

const promoImage = container.querySelectorAll(
'div[data-e2e="story-promo"] picture',
)[0];
const [webpSource, jpgSource, img] = promoImage.childNodes;

expect(webpSource.srcset).toEqual(expectedWebpSrcSetURLs);
expect(jpgSource.srcset).toEqual(expectedJPGSrcSetURLs);
expect(img.src).toEqual(imageURL);
});
});
});
46 changes: 46 additions & 0 deletions src/app/pages/HomePage/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,52 @@ describe('Home Page', () => {
expect(getLinkedDataOutput()).toMatchSnapshot();
});

it('should render images with the .webp image extension', () => {
const path =
homePageData.curations[1].summaries?.[0].imageUrl?.split('{width}')[1];

const imageURL = `https://ichef.test.bbci.co.uk/ace/standard/240${path}`;
const expectedWebpSrcSetURLs = [
`https://ichef.test.bbci.co.uk/ace/standard/85${path}.webp 85w`,
`https://ichef.test.bbci.co.uk/ace/standard/120${path}.webp 120w`,
`https://ichef.test.bbci.co.uk/ace/standard/170${path}.webp 170w`,
`https://ichef.test.bbci.co.uk/ace/standard/232${path}.webp 232w`,
`https://ichef.test.bbci.co.uk/ace/standard/325${path}.webp 325w`,
`https://ichef.test.bbci.co.uk/ace/standard/450${path}.webp 450w`,
`https://ichef.test.bbci.co.uk/ace/standard/660${path}.webp 660w`,
`https://ichef.test.bbci.co.uk/ace/standard/800${path}.webp 800w`,
].join(', ');

const expectedJPGSrcSetURLs = [
`https://ichef.test.bbci.co.uk/ace/standard/85${path} 85w`,
`https://ichef.test.bbci.co.uk/ace/standard/120${path} 120w`,
`https://ichef.test.bbci.co.uk/ace/standard/170${path} 170w`,
`https://ichef.test.bbci.co.uk/ace/standard/232${path} 232w`,
`https://ichef.test.bbci.co.uk/ace/standard/325${path} 325w`,
`https://ichef.test.bbci.co.uk/ace/standard/450${path} 450w`,
`https://ichef.test.bbci.co.uk/ace/standard/660${path} 660w`,
`https://ichef.test.bbci.co.uk/ace/standard/800${path} 800w`,
].join(', ');

// @ts-expect-error suppress pageData prop type conflicts due to missing imageAlt on selected historical test data for curations
const { container } = render(<HomePage pageData={homePageData} />, {
service: 'kyrgyz',
pageType: 'home',
});

const promoImage = container.querySelectorAll('div.promo-image picture')[0];

const [webpSource, jpgSource, img] = promoImage.childNodes as unknown as [
HTMLSourceElement,
HTMLSourceElement,
HTMLImageElement,
];

expect(webpSource.srcset).toEqual(expectedWebpSrcSetURLs);
expect(jpgSource.srcset).toEqual(expectedJPGSrcSetURLs);
expect(img.src).toEqual(imageURL);
});

describe('Analytics', () => {
it('should render a Chartbeat component', () => {
// @ts-expect-error suppress pageData prop type conflicts due to missing imageAlt on selected historical test data for curations
Expand Down
Loading

0 comments on commit ae37255

Please sign in to comment.