Skip to content

Commit 46cb2dd

Browse files
cemms1cemms1
committed
mock the response from the onward.json route in the hosted video and article layout stories
1 parent 7d697ec commit 46cb2dd

6 files changed

Lines changed: 76 additions & 41 deletions

File tree

‎dotcom-rendering/fixtures/manual/hostedArticle.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -720,7 +720,7 @@ export const hostedArticle: FEArticle = {
720720
contentType: 'Article',
721721
isDev: true,
722722
isPaidContent: true,
723-
ajaxUrl: 'http://localhost:9000',
723+
ajaxUrl: 'https://api.nextgen.guardianapps.co.uk',
724724
keywords: '',
725725
revisionNumber: '92184802ad2f64c03a3b23978c48d6fcec1e42ae',
726726
mmaUrl: 'https://manage.theguardian.com',

‎dotcom-rendering/fixtures/manual/hostedVideo.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -362,7 +362,7 @@ export const hostedVideo: FEArticle = {
362362
contentType: 'Article',
363363
isDev: true,
364364
isPaidContent: true,
365-
ajaxUrl: 'http://localhost:9000',
365+
ajaxUrl: 'https://api.nextgen.guardianapps.co.uk',
366366
keywords: '',
367367
revisionNumber: 'a0f26041f01f9df1cc879cd484aff1837f998895',
368368
mmaUrl: 'https://manage.theguardian.com',

‎dotcom-rendering/fixtures/manual/onwardsTrails.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,3 +195,39 @@ export const galleryOnwardsTrails: TrailType[] = [
195195
articleMedia: { type: 'Gallery', count: '6' },
196196
},
197197
];
198+
199+
export const hostedOnwardsTrails: TrailType[] = [
200+
{
201+
url: 'https://www.theguardian.com/money/gallery/2026/mar/27/loft-style-apartments-for-sale-in-england-in-pictures',
202+
headline: 'Loft-style apartments for sale in England – in pictures',
203+
format: { design: 27, display: 1, theme: 6 },
204+
dataLinkName: 'media | group-0 | card-@1',
205+
image: {
206+
src: 'https://media.guim.co.uk/276ed08e0380a9a3045a779ea1ca8c93f7c1b51e/500_0_5000_4000/2000.jpg',
207+
altText:
208+
'Loft-style apartment interior in Clapton, east London with industrial design elements',
209+
},
210+
},
211+
{
212+
url: 'https://www.theguardian.com/books/2026/apr/01/under-water-by-tara-menon-review-love-loss-and-a-longing-for-the-ocean',
213+
headline:
214+
'Under Water by Tara Menon review – love, loss and a longing for the ocean',
215+
format: { design: 27, display: 1, theme: 6 },
216+
dataLinkName: 'media | group-0 | card-@2',
217+
image: {
218+
src: 'https://media.guim.co.uk/95d6b3df9e3471344dc19a32d94bb3d5ff6f5016/205_5_2978_2382/2000.jpg',
219+
altText: 'Tropical fish',
220+
},
221+
},
222+
{
223+
url: 'https://www.theguardian.com/money/gallery/2026/feb/27/homes-a-short-walk-from-the-sea-in-england-and-scotland-in-pictures',
224+
headline:
225+
'Homes a short walk from the sea in England and Scotland – in pictures',
226+
format: { design: 27, display: 1, theme: 6 },
227+
dataLinkName: 'media | group-0 | card-@3',
228+
image: {
229+
src: 'https://media.guim.co.uk/9879e5d3275b5dae8c8bfd8e1ac700332e2de8c4/237_0_3750_3000/2000.jpg',
230+
altText: 'Craster, Northumberland',
231+
},
232+
},
233+
];

‎dotcom-rendering/src/components/HostedContentOnwards.stories.tsx‎

Lines changed: 8 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,26 @@
1-
import type { TrailType } from '../types/trails';
1+
import { hostedOnwardsTrails } from '../../fixtures/manual/onwardsTrails';
22
import { HostedContentOnwards } from './HostedContentOnwards';
33

4-
const trails: TrailType[] = [
5-
{
6-
url: 'https://www.theguardian.com/money/gallery/2026/mar/27/loft-style-apartments-for-sale-in-england-in-pictures',
7-
headline: 'Loft-style apartments for sale in England – in pictures',
8-
format: { design: 27, display: 1, theme: 6 },
9-
dataLinkName: 'media | group-0 | card-@1',
10-
image: {
11-
src: 'https://media.guim.co.uk/276ed08e0380a9a3045a779ea1ca8c93f7c1b51e/500_0_5000_4000/2000.jpg',
12-
altText:
13-
'Loft-style apartment interior in Clapton, east London with industrial design elements',
14-
},
15-
},
16-
{
17-
url: 'https://www.theguardian.com/books/2026/apr/01/under-water-by-tara-menon-review-love-loss-and-a-longing-for-the-ocean',
18-
headline:
19-
'Under Water by Tara Menon review – love, loss and a longing for the ocean',
20-
format: { design: 27, display: 1, theme: 6 },
21-
dataLinkName: 'media | group-0 | card-@2',
22-
image: {
23-
src: 'https://media.guim.co.uk/95d6b3df9e3471344dc19a32d94bb3d5ff6f5016/205_5_2978_2382/2000.jpg',
24-
altText: 'Tropical fish',
25-
},
26-
},
27-
{
28-
url: 'https://www.theguardian.com/money/gallery/2026/feb/27/homes-a-short-walk-from-the-sea-in-england-and-scotland-in-pictures',
29-
headline:
30-
'Homes a short walk from the sea in England and Scotland – in pictures',
31-
format: { design: 27, display: 1, theme: 6 },
32-
dataLinkName: 'media | group-0 | card-@3',
33-
image: {
34-
src: 'https://media.guim.co.uk/9879e5d3275b5dae8c8bfd8e1ac700332e2de8c4/237_0_3750_3000/2000.jpg',
35-
altText: 'Craster, Northumberland',
36-
},
37-
},
38-
];
39-
404
export default {
415
component: HostedContentOnwards,
426
title: 'Components/HostedContentOnwards',
437
};
448

459
export const Default = () => {
46-
return <HostedContentOnwards trails={trails} brandName="TrendAI" />;
10+
return (
11+
<HostedContentOnwards
12+
trails={hostedOnwardsTrails}
13+
brandName="TrendAI"
14+
/>
15+
);
4716
};
4817

4918
Default.storyName = 'default';
5019

5120
export const WithAccentColour = () => {
5221
return (
5322
<HostedContentOnwards
54-
trails={trails}
23+
trails={hostedOnwardsTrails}
5524
brandName="TrendAI"
5625
accentColor="#FF0000"
5726
/>

‎dotcom-rendering/src/layouts/HostedArticleLayout.stories.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
11
import { allModes } from '../../.storybook/modes';
22
import preview from '../../.storybook/preview';
33
import { hostedArticle } from '../../fixtures/manual/hostedArticle';
4+
import { hostedOnwardsTrails } from '../../fixtures/manual/onwardsTrails';
45
import {
56
ArticleDesign,
67
ArticleDisplay,
78
ArticleSpecial,
89
} from '../lib/articleFormat';
10+
import { customMockFetch } from '../lib/mockRESTCalls';
911
import { enhanceArticleType } from '../types/article';
1012
import type { Branding } from '../types/branding';
1113
import { HostedArticleLayout } from './HostedArticleLayout';
1214

15+
const mockOnwardsContentFetch = customMockFetch([
16+
{
17+
mockedMethod: 'GET',
18+
mockedUrl: `${hostedArticle.config.ajaxUrl}/${hostedArticle.config.pageId}/onward.json`,
19+
mockedStatus: 200,
20+
mockedBody: { trails: hostedOnwardsTrails },
21+
},
22+
]);
23+
1324
const meta = preview.meta({
1425
title: 'Layouts/HostedArticle',
1526
component: HostedArticleLayout,
@@ -20,6 +31,10 @@ const meta = preview.meta({
2031
},
2132
},
2233
},
34+
render: (args) => {
35+
global.fetch = mockOnwardsContentFetch;
36+
return <HostedArticleLayout {...args} />;
37+
},
2338
});
2439

2540
const format = {

‎dotcom-rendering/src/layouts/HostedVideoLayout.stories.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
11
import { allModes } from '../../.storybook/modes';
22
import preview from '../../.storybook/preview';
33
import { hostedVideo } from '../../fixtures/manual/hostedVideo';
4+
import { hostedOnwardsTrails } from '../../fixtures/manual/onwardsTrails';
45
import {
56
ArticleDesign,
67
ArticleDisplay,
78
ArticleSpecial,
89
} from '../lib/articleFormat';
10+
import { customMockFetch } from '../lib/mockRESTCalls';
911
import { enhanceArticleType } from '../types/article';
1012
import { HostedVideoLayout } from './HostedVideoLayout';
1113

14+
const mockOnwardsContentFetch = customMockFetch([
15+
{
16+
mockedMethod: 'GET',
17+
mockedUrl: `${hostedVideo.config.ajaxUrl}/${hostedVideo.config.pageId}/onward.json`,
18+
mockedStatus: 200,
19+
mockedBody: { trails: hostedOnwardsTrails },
20+
},
21+
]);
22+
1223
const meta = preview.meta({
1324
title: 'Layouts/HostedVideo',
1425
component: HostedVideoLayout,
@@ -19,6 +30,10 @@ const meta = preview.meta({
1930
},
2031
},
2132
},
33+
render: (args) => {
34+
global.fetch = mockOnwardsContentFetch;
35+
return <HostedVideoLayout {...args} />;
36+
},
2237
});
2338

2439
const format = {

0 commit comments

Comments
 (0)