Skip to content

Commit 5f264c0

Browse files
TRomeshTRomesh
committed
CMS-42559 Add unit tests for getPreviewUtils's src, srcset, alt function
1 parent 50bb1db commit 5f264c0

File tree

3 files changed

+156
-4
lines changed

3 files changed

+156
-4
lines changed

‎packages/optimizely-cms-sdk/src/react/__test__/getPreviewUtils.test.tsx‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import { describe, it, expect } from 'vitest';
2+
import { getPreviewUtils } from '../server.js';
3+
import type { InferredContentReference } from '../../infer.js';
4+
5+
describe('getPreviewUtils', () => {
6+
const mockRenditions = [
7+
{
8+
Id: 'thumb',
9+
Name: 'Thumbnail',
10+
Url: 'https://assets.local-cms.com/0a2f4b27-4f15-4bb9-ba14-d69b49ae5b85/cmp_73d48db0-2abe-4a33-91f5-94d0ac5e85e5_thumbnail_100x100_63.jpg',
11+
Width: 100,
12+
Height: 100,
13+
},
14+
{
15+
Id: 'small',
16+
Name: 'Small',
17+
Url: 'https://assets.local-cms.com/0a2f4b27-4f15-4bb9-ba14-d69b49ae5b85/cmp_73d48db0-2abe-4a33-91f5-94d0ac5e85e5_small_256x256_63.jpg',
18+
Width: 256,
19+
Height: 256,
20+
},
21+
{
22+
Id: 'medium',
23+
Name: 'Medium',
24+
Url: 'https://assets.local-cms.com/0a2f4b27-4f15-4bb9-ba14-d69b49ae5b85/cmp_73d48db0-2abe-4a33-91f5-94d0ac5e85e5_medium_512x512_63.jpg',
25+
Width: 512,
26+
Height: 512,
27+
},
28+
{
29+
Id: 'medium2',
30+
Name: 'Medium 2',
31+
Url: 'https://assets.local-cms.com/0a2f4b27-4f15-4bb9-ba14-d69b49ae5b85/cmp_73d48db0-2abe-4a33-91f5-94d0ac5e85e5_medium_512x341_63.jpg',
32+
Width: 512,
33+
Height: 341,
34+
},
35+
{
36+
Id: 'large',
37+
Name: 'Large',
38+
Url: 'https://assets.local-cms.com/0a2f4b27-4f15-4bb9-ba14-d69b49ae5b85/cmp_73d48db0-2abe-4a33-91f5-94d0ac5e85e5_large_1920x1920_63.jpg',
39+
Width: 1920,
40+
Height: 1920,
41+
},
42+
];
43+
44+
const mockImageAsset: InferredContentReference = {
45+
url: {
46+
type: null,
47+
default:
48+
'https://assets.local-cms.com/0a2f4b27-4f15-4bb9-ba14-d69b49ae5b85/cmp_73d48db0-2abe-4a33-91f5-94d0ac5e85e5.jpg',
49+
hierarchical: null,
50+
internal: null,
51+
graph: null,
52+
base: null,
53+
},
54+
item: {
55+
__typename: 'cmp_PublicImageAsset' as const,
56+
Url: 'https://assets.local-cms.com/0a2f4b27-4f15-4bb9-ba14-d69b49ae5b85/cmp_73d48db0-2abe-4a33-91f5-94d0ac5e85e5.jpg',
57+
Title: 'Harley-Davidson Touring Bike',
58+
AltText: 'Harley-Davidson Touring Bike motorcycle',
59+
Description: 'A beautiful Harley-Davidson motorcycle',
60+
Renditions: mockRenditions,
61+
FocalPoint: { X: 0.5, Y: 0.5 },
62+
Tags: [],
63+
},
64+
};
65+
66+
describe('src()', () => {
67+
it('should return default URL when no rendition is specified', () => {
68+
const utils = getPreviewUtils({ __typename: 'TestPage' });
69+
const result = utils.src(mockImageAsset);
70+
71+
expect(result).toBe(
72+
'https://assets.local-cms.com/0a2f4b27-4f15-4bb9-ba14-d69b49ae5b85/cmp_73d48db0-2abe-4a33-91f5-94d0ac5e85e5.jpg'
73+
);
74+
});
75+
76+
it('should return URL from specified rendition', () => {
77+
const utils = getPreviewUtils({ __typename: 'TestPage' });
78+
const result = utils.src(mockImageAsset, { renditionName: 'Large' });
79+
80+
expect(result).toBe(
81+
'https://assets.local-cms.com/0a2f4b27-4f15-4bb9-ba14-d69b49ae5b85/cmp_73d48db0-2abe-4a33-91f5-94d0ac5e85e5_large_1920x1920_63.jpg'
82+
);
83+
});
84+
85+
it('should append preview token in preview mode', () => {
86+
const utils = getPreviewUtils({
87+
__typename: 'TestPage',
88+
__context: { edit: true, preview_token: 'test-token-123' },
89+
});
90+
const result = utils.src(mockImageAsset);
91+
92+
expect(result).toBe(
93+
'https://assets.local-cms.com/0a2f4b27-4f15-4bb9-ba14-d69b49ae5b85/cmp_73d48db0-2abe-4a33-91f5-94d0ac5e85e5.jpg?preview_token=test-token-123'
94+
);
95+
});
96+
});
97+
98+
describe('srcset()', () => {
99+
it('should generate srcset with unique widths', () => {
100+
const utils = getPreviewUtils({ __typename: 'TestPage' });
101+
const result = utils.srcset(mockImageAsset);
102+
103+
// Should have 4 unique widths: 100, 256, 512, 1920 (duplicate 512 removed)
104+
const widthMatches = result.match(/\d+w/g);
105+
expect(widthMatches).toHaveLength(4);
106+
107+
expect(result).toContain('thumbnail_100x100_63.jpg 100w');
108+
expect(result).toContain('small_256x256_63.jpg 256w');
109+
expect(result).toContain('medium_512x512_63.jpg 512w');
110+
expect(result).toContain('large_1920x1920_63.jpg 1920w');
111+
});
112+
113+
it('should deduplicate renditions with same width', () => {
114+
const utils = getPreviewUtils({ __typename: 'TestPage' });
115+
const result = utils.srcset(mockImageAsset);
116+
117+
// Width 512 appears twice in renditions but should only appear once in srcset
118+
const width512Count = (result.match(/512w/g) || []).length;
119+
expect(width512Count).toBe(1);
120+
});
121+
122+
it('should append preview token to all URLs', () => {
123+
const utils = getPreviewUtils({
124+
__typename: 'TestPage',
125+
__context: { edit: true, preview_token: 'test-token-123' },
126+
});
127+
const result = utils.srcset(mockImageAsset);
128+
129+
const entries = result.split(', ');
130+
expect(
131+
entries.every((entry: string) =>
132+
entry.includes('preview_token=test-token-123')
133+
)
134+
).toBe(true);
135+
});
136+
});
137+
138+
describe('alt()', () => {
139+
it('should return AltText from image asset', () => {
140+
const utils = getPreviewUtils({ __typename: 'TestPage' });
141+
const result = utils.alt(mockImageAsset);
142+
143+
expect(result).toBe('Harley-Davidson Touring Bike motorcycle');
144+
});
145+
146+
it('should return string as-is', () => {
147+
const utils = getPreviewUtils({ __typename: 'TestPage' });
148+
const result = utils.alt('Custom alt text');
149+
150+
expect(result).toBe('Custom alt text');
151+
});
152+
});
153+
});

‎packages/optimizely-cms-sdk/src/react/server.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {
1212
ExperienceCompositionNode,
1313
InferredContentReference,
1414
} from '../infer.js';
15-
import { Renditions } from '../model/assets.js';
1615
import { isComponentNode } from '../util/baseTypeUtil.js';
1716
import { parseDisplaySettings } from '../model/displayTemplates.js';
1817
import { getDisplayTemplateTag } from '../model/displayTemplateRegistry.js';

‎samples/nextjs-template/src/components/AboutUs.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { contentType, Infer } from '@optimizely/cms-sdk';
22
import { RichText, ElementProps } from '@optimizely/cms-sdk/react/richText';
33
import { getPreviewUtils } from '@optimizely/cms-sdk/react/server';
4-
import Image from 'next/image';
54

65
export const AboutUsContentType = contentType({
76
key: 'AboutUs',
@@ -33,12 +32,13 @@ const customHeadingTwo = (props: ElementProps) => {
3332
};
3433

3534
export default function AboutUs({ opti }: AboutUsProps) {
36-
const { src, srcset } = getPreviewUtils(opti);
35+
const { src, alt } = getPreviewUtils(opti);
3736
return (
3837
<section className="about-us">
3938
{opti.image && (
4039
<div className="about-us-image">
41-
<img src={src(opti.image)} alt="" />
40+
{/* eslint-disable-next-line @next/next/no-img-element */}
41+
<img src={src(opti.image)} alt={alt(opti.image)} />
4242
</div>
4343
)}
4444
<h2>{opti.heading}</h2>

0 commit comments

Comments
 (0)