Skip to content

Commit 72aa27f

Browse files
cacheungcacheung
authored
Update image only test (#511)
Update image only test
1 parent 6ab2b43 commit 72aa27f

File tree

1 file changed

+252
-9
lines changed

1 file changed

+252
-9
lines changed

‎packages/authoring-ui/__tests__/convertImageOnlyContent.test.ts‎

Lines changed: 252 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,8 @@ describe('convertImageOnlyContentToComponent', () => {
7777

7878
const result = convertImageOnlyContentToComponent(data);
7979

80-
expect(result.actionUrl).toBe('https://example.com/action');
80+
const mainContent = result.children![0];
81+
expect(mainContent.actionUrl).toBe('https://example.com/action');
8182
});
8283

8384
it('does not include actionUrl when not provided', () => {
@@ -90,7 +91,8 @@ describe('convertImageOnlyContentToComponent', () => {
9091

9192
const result = convertImageOnlyContentToComponent(data);
9293

93-
expect(result.actionUrl).toBeUndefined();
94+
const mainContent = result.children![0];
95+
expect(mainContent.actionUrl).toBeUndefined();
9496
});
9597
});
9698

@@ -177,7 +179,7 @@ describe('convertImageOnlyContentToComponent', () => {
177179
},
178180
};
179181

180-
const result = convertImageOnlyContentToComponent(data, styleOverrides);
182+
const result = convertImageOnlyContentToComponent(data, undefined, styleOverrides);
181183

182184
expect(result.style).toMatchObject({
183185
backgroundColor: '#ff0000',
@@ -200,7 +202,7 @@ describe('convertImageOnlyContentToComponent', () => {
200202
},
201203
};
202204

203-
const result = convertImageOnlyContentToComponent(data, styleOverrides);
205+
const result = convertImageOnlyContentToComponent(data, undefined, styleOverrides);
204206

205207
const imageContainer = result.children![0].children![0];
206208
expect(imageContainer.style).toMatchObject({
@@ -239,10 +241,12 @@ describe('convertImageOnlyContentToComponent', () => {
239241
// Root component
240242
expect(result.type).toBe('view');
241243
expect(result.children).toHaveLength(2); // Main content + dismiss button
242-
expect(result.actionUrl).toBe('https://example.com/action');
244+
245+
// Main content should have actionUrl
246+
const mainContent = result.children![0];
247+
expect(mainContent.actionUrl).toBe('https://example.com/action');
243248

244249
// Main content container
245-
const mainContent = result.children![0];
246250
expect(mainContent.type).toBe('view');
247251
expect(mainContent.children).toHaveLength(1); // Only image container
248252

@@ -274,10 +278,11 @@ describe('convertImageOnlyContentToComponent', () => {
274278
// Root component
275279
expect(result.type).toBe('view');
276280
expect(result.children).toHaveLength(1); // Only main content
277-
expect(result.actionUrl).toBeUndefined();
281+
282+
const mainContent = result.children![0];
283+
expect(mainContent.actionUrl).toBeUndefined();
278284

279285
// Main content container
280-
const mainContent = result.children![0];
281286
expect(mainContent.type).toBe('view');
282287
expect(mainContent.children).toHaveLength(1); // Only image container
283288

@@ -326,11 +331,249 @@ describe('convertImageOnlyContentToComponent', () => {
326331
const result = convertImageOnlyContentToComponent(data);
327332

328333
expect(result.children).toHaveLength(2); // Main content + dismiss button
329-
expect(result.actionUrl).toBe('https://example.com/action');
334+
335+
const mainContent = result.children![0];
336+
expect(mainContent.actionUrl).toBe('https://example.com/action');
330337

331338
const dismissButton = result.children![1];
332339
expect(dismissButton.type).toBe('dismissButton');
333340
expect(dismissButton.dismissType).toBe('circle');
334341
});
335342
});
343+
344+
describe('Height parameter handling', () => {
345+
it('applies height to card and imageContainer maxHeight', () => {
346+
const data: ImageOnlyContentData = {
347+
image: {
348+
url: 'https://example.com/image.jpg',
349+
alt: 'Test Image',
350+
},
351+
};
352+
353+
const height = 250;
354+
const result = convertImageOnlyContentToComponent(data, height);
355+
356+
expect(result.style).toMatchObject({
357+
maxHeight: 250,
358+
});
359+
360+
const imageContainer = result.children![0].children![0];
361+
expect(imageContainer.style).toMatchObject({
362+
maxHeight: 250,
363+
});
364+
});
365+
366+
it('combines height with style overrides correctly', () => {
367+
const data: ImageOnlyContentData = {
368+
image: {
369+
url: 'https://example.com/image.jpg',
370+
alt: 'Test Image',
371+
},
372+
};
373+
374+
const height = 200;
375+
const styleOverrides: ImageOnlyContentStyle = {
376+
card: {
377+
backgroundColor: '#ff0000',
378+
borderRadius: 20,
379+
},
380+
imageContainer: {
381+
borderRadius: 15,
382+
},
383+
};
384+
385+
const result = convertImageOnlyContentToComponent(data, height, styleOverrides);
386+
387+
// Height should be applied to maxHeight
388+
expect(result.style).toMatchObject({
389+
backgroundColor: '#ff0000',
390+
borderRadius: 20,
391+
maxHeight: 200,
392+
});
393+
394+
const imageContainer = result.children![0].children![0];
395+
expect(imageContainer.style).toMatchObject({
396+
borderRadius: 15,
397+
maxHeight: 200,
398+
});
399+
});
400+
401+
it('works without height parameter', () => {
402+
const data: ImageOnlyContentData = {
403+
image: {
404+
url: 'https://example.com/image.jpg',
405+
alt: 'Test Image',
406+
},
407+
};
408+
409+
const result = convertImageOnlyContentToComponent(data);
410+
411+
expect(result.style).not.toHaveProperty('maxHeight');
412+
413+
const imageContainer = result.children![0].children![0];
414+
expect(imageContainer.style).toMatchObject({
415+
maxHeight: 300, // Default maxHeight from styles
416+
});
417+
});
418+
419+
it('overrides existing maxHeight in style overrides when height is provided', () => {
420+
const data: ImageOnlyContentData = {
421+
image: {
422+
url: 'https://example.com/image.jpg',
423+
alt: 'Test Image',
424+
},
425+
};
426+
427+
const height = 180;
428+
const styleOverrides: ImageOnlyContentStyle = {
429+
card: {
430+
maxHeight: 300, // This should be overridden by height parameter
431+
},
432+
imageContainer: {
433+
maxHeight: 400, // This should be overridden by height parameter
434+
},
435+
};
436+
437+
const result = convertImageOnlyContentToComponent(data, height, styleOverrides);
438+
439+
expect(result.style).toMatchObject({
440+
maxHeight: 180, // Height parameter takes precedence
441+
});
442+
443+
const imageContainer = result.children![0].children![0];
444+
expect(imageContainer.style).toMatchObject({
445+
maxHeight: 180, // Height parameter takes precedence
446+
});
447+
});
448+
});
449+
450+
describe('ActionView property validation', () => {
451+
it('sets actionView to true on main content container', () => {
452+
const data: ImageOnlyContentData = {
453+
image: {
454+
url: 'https://example.com/image.jpg',
455+
alt: 'Test Image',
456+
},
457+
};
458+
459+
const result = convertImageOnlyContentToComponent(data);
460+
461+
const mainContent = result.children![0];
462+
expect(mainContent.actionView).toBe(true);
463+
});
464+
465+
it('sets actionView to true even when actionUrl is not provided', () => {
466+
const data: ImageOnlyContentData = {
467+
image: {
468+
url: 'https://example.com/image.jpg',
469+
alt: 'Test Image',
470+
},
471+
};
472+
473+
const result = convertImageOnlyContentToComponent(data);
474+
475+
const mainContent = result.children![0];
476+
expect(mainContent.actionView).toBe(true);
477+
expect(mainContent.actionUrl).toBeUndefined();
478+
});
479+
480+
it('sets actionView to true and includes actionUrl when provided', () => {
481+
const data: ImageOnlyContentData = {
482+
image: {
483+
url: 'https://example.com/image.jpg',
484+
alt: 'Test Image',
485+
},
486+
actionUrl: 'https://example.com/action',
487+
};
488+
489+
const result = convertImageOnlyContentToComponent(data);
490+
491+
const mainContent = result.children![0];
492+
expect(mainContent.actionView).toBe(true);
493+
expect(mainContent.actionUrl).toBe('https://example.com/action');
494+
});
495+
});
496+
497+
describe('Parameter combinations', () => {
498+
it('handles all parameters together', () => {
499+
const data: ImageOnlyContentData = {
500+
image: {
501+
url: 'https://example.com/image.jpg',
502+
darkUrl: 'https://example.com/dark.jpg',
503+
alt: 'Test Image',
504+
},
505+
actionUrl: 'https://example.com/action',
506+
dismissBtn: { style: 'circle' },
507+
};
508+
509+
const height = 220;
510+
const styleOverrides: ImageOnlyContentStyle = {
511+
card: {
512+
backgroundColor: '#00ff00',
513+
borderRadius: 25,
514+
},
515+
image: {
516+
borderRadius: 10,
517+
},
518+
};
519+
520+
const result = convertImageOnlyContentToComponent(data, height, styleOverrides);
521+
522+
// Root component
523+
expect(result.type).toBe('view');
524+
expect(result.style).toMatchObject({
525+
backgroundColor: '#00ff00',
526+
borderRadius: 25,
527+
maxHeight: 220,
528+
});
529+
expect(result.children).toHaveLength(2);
530+
531+
// Main content
532+
const mainContent = result.children![0];
533+
expect(mainContent.actionView).toBe(true);
534+
expect(mainContent.actionUrl).toBe('https://example.com/action');
535+
536+
// Image container
537+
const imageContainer = mainContent.children![0];
538+
expect(imageContainer.style).toMatchObject({
539+
maxHeight: 220,
540+
});
541+
542+
// Image
543+
const imageComponent = imageContainer.children![0];
544+
expect(imageComponent.type).toBe('image');
545+
expect(imageComponent.url).toBe('https://example.com/image.jpg');
546+
expect(imageComponent.darkUrl).toBe('https://example.com/dark.jpg');
547+
expect(imageComponent.alt).toBe('Test Image');
548+
expect(imageComponent.style).toMatchObject({
549+
borderRadius: 10,
550+
});
551+
552+
// Dismiss button
553+
const dismissButton = result.children![1];
554+
expect(dismissButton.type).toBe('dismissButton');
555+
expect(dismissButton.dismissType).toBe('circle');
556+
expect(dismissButton.interactId).toBe('dismiss_button');
557+
});
558+
559+
it('handles height parameter only', () => {
560+
const data: ImageOnlyContentData = {
561+
image: {
562+
url: 'https://example.com/image.jpg',
563+
},
564+
};
565+
566+
const height = 160;
567+
const result = convertImageOnlyContentToComponent(data, height);
568+
569+
expect(result.style).toMatchObject({
570+
maxHeight: 160,
571+
});
572+
573+
const imageContainer = result.children![0].children![0];
574+
expect(imageContainer.style).toMatchObject({
575+
maxHeight: 160,
576+
});
577+
});
578+
});
336579
});

0 commit comments

Comments
 (0)