@capillarytech/creatives-library 8.0.345-alpha.13 → 8.0.345-alpha.15

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/RcsPreviewContent.test.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { IntlProvider, injectIntl } from 'react-intl';
 import RcsPreviewContent from '../../UnifiedPreview/RcsPreviewContent';
-import { ANDROID, IOS } from '../../constants';
+import { ANDROID, IOS, MEDIA_TYPE_VIDEO } from '../../constants';
 import messages from '../../messages';
 
 // Mock constants
@@ -42,6 +42,13 @@ const TestWrapper = ({ children }) => (
   </IntlProvider>
 );
 
+const renderRcsPreview = (props) =>
+  render(
+    <TestWrapper>
+      <ComponentToRender {...props} />
+    </TestWrapper>,
+  );
+
 describe('RcsPreviewContent', () => {
   const defaultProps = {
     content: {
@@ -60,33 +67,10 @@ describe('RcsPreviewContent', () => {
   });
 
   describe('Loading State', () => {
-    it('should render loading state when isUpdating is true', () => {
-      const props = {
-        ...defaultProps,
-        isUpdating: true,
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
+    it('should render loading state and spinner when isUpdating is true', () => {
+      const props = { ...defaultProps, isUpdating: true };
+      const { container } = renderRcsPreview(props);
       expect(screen.getByText('Updating preview with the latest changes')).toBeTruthy();
-    });
-
-    it('should show loading spinner', () => {
-      const props = {
-        ...defaultProps,
-        isUpdating: true,
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
       expect(container.querySelector('.ant-spin')).toBeTruthy();
     });
   });
@@ -98,50 +82,16 @@ describe('RcsPreviewContent', () => {
         error: 'Failed to load preview',
       };
 
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
+      renderRcsPreview(props);
 
       expect(screen.getAllByText('Failed to load preview')).toHaveLength(2);
     });
   });
 
   describe('Text Preview Content', () => {
-    it('should render templateHeader as title', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          templateHeader: 'RCS Title',
-          templateMessage: 'RCS Description',
-        },
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
+    it('should render templateHeader and templateMessage (default text content)', () => {
+      renderRcsPreview(defaultProps);
       expect(screen.getByText('RCS Title')).toBeTruthy();
-    });
-
-    it('should render templateMessage as description', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          templateHeader: 'RCS Title',
-          templateMessage: 'RCS Description',
-        },
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
       expect(screen.getByText('RCS Description')).toBeTruthy();
     });
 
@@ -154,11 +104,7 @@ describe('RcsPreviewContent', () => {
         },
       };
 
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
+      renderRcsPreview(props);
 
       expect(screen.getByText('Fallback Title')).toBeTruthy();
     });
@@ -172,30 +118,13 @@ describe('RcsPreviewContent', () => {
         },
       };
 
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
+      renderRcsPreview(props);
 
       expect(screen.getByText('Fallback Description')).toBeTruthy();
     });
 
     it('should render divider after title', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          templateHeader: 'Title',
-          templateMessage: 'Description',
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
+      const { container } = renderRcsPreview(defaultProps);
       expect(container.querySelector('.whatsapp-divider')).toBeTruthy();
     });
 
@@ -207,11 +136,7 @@ describe('RcsPreviewContent', () => {
         },
       };
 
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
+      renderRcsPreview(props);
 
       expect(screen.queryByText(/Title/)).toBeFalsy();
     });
@@ -226,11 +151,7 @@ describe('RcsPreviewContent', () => {
         },
       };
 
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
+      const { container } = renderRcsPreview(props);
 
       const image = container.querySelector('.rcs-image');
       expect(image).toBeTruthy();
@@ -246,11 +167,7 @@ describe('RcsPreviewContent', () => {
         },
       };
 
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
+      const { container } = renderRcsPreview(props);
 
       expect(container.querySelector('.video-preview')).toBeTruthy();
       expect(container.querySelector('.video-icon')).toBeTruthy();
@@ -264,11 +181,7 @@ describe('RcsPreviewContent', () => {
         },
       };
 
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
+      const { container } = renderRcsPreview(props);
 
       const image = container.querySelector('.rcs-image');
       expect(image.getAttribute('src')).toBe('https://video.url');
@@ -284,198 +197,334 @@ describe('RcsPreviewContent', () => {
         },
       };
 
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
+      renderRcsPreview(props);
 
       expect(screen.getByText('Title')).toBeTruthy();
       expect(screen.getByText('Description')).toBeTruthy();
     });
   });
 
-  describe('RCS Suggestions', () => {
-    it('should render QUICK_REPLY suggestion', () => {
+  describe('Carousel Preview Content', () => {
+    it('should render carousel cards when carouselData is present', () => {
       const props = {
         ...defaultProps,
         content: {
-          templateHeader: 'Title',
-          templateMessage: 'Description',
-          suggestions: [
-            { type: 'QUICK_REPLY', text: 'Yes' },
+          carouselData: [
+            {
+              mediaType: 'image',
+              imageSrc: 'https://image.1/url',
+              title: 'Card 1',
+              bodyText: 'Body 1',
+              suggestions: [{ type: 'CTA', text: 'Visit' }],
+            },
+            {
+              mediaType: 'video',
+              videoPreviewImg: 'https://thumb.2/url',
+              title: 'Card 2',
+              bodyText: 'Body 2',
+              suggestions: [{ type: 'QUICK_REPLY', text: 'Yes' }],
+            },
           ],
         },
       };
 
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
+      const { container } = renderRcsPreview(props);
+
+      expect(container.querySelectorAll('.message-pop-carousel').length).toBe(2);
+      expect(container.querySelector('.scroll-container')).toBeTruthy();
+      expect(screen.getByText('Card 1')).toBeTruthy();
+      expect(screen.getByText('Card 2')).toBeTruthy();
+      expect(container.querySelector('.video-preview')).toBeTruthy();
+      expect(container.querySelector('.video-icon')).toBeTruthy();
+      expect(screen.getByText('Visit')).toBeTruthy();
       expect(screen.getByText('Yes')).toBeTruthy();
-      expect(container.querySelector('.cap-icon-v2-small-link')).toBeTruthy();
+      expect(container.querySelectorAll('.rcs-carousel-cta-stack').length).toBe(2);
+      expect(container.querySelector('.rcs-cta-preview--carousel-bar')).toBeTruthy();
     });
 
-    it('should render CTA suggestion', () => {
+    it('should apply carouselPreviewDimensions as aspect-ratio on image and video media wraps', () => {
       const props = {
         ...defaultProps,
         content: {
-          templateHeader: 'Title',
-          templateMessage: 'Description',
-          suggestions: [
-            { type: 'CTA', text: 'Visit Website' },
+          carouselPreviewDimensions: {
+            imageWidth: 1160,
+            imageHeight: 720,
+            videoThumbWidth: 718,
+            videoThumbHeight: 448,
+          },
+          carouselData: [
+            {
+              mediaType: 'image',
+              imageSrc: 'https://image.1/url',
+              title: 'Card 1',
+              bodyText: 'Body 1',
+              suggestions: [],
+            },
+            {
+              mediaType: 'video',
+              videoPreviewImg: 'https://thumb.2/url',
+              title: 'Card 2',
+              bodyText: 'Body 2',
+              suggestions: [],
+            },
           ],
         },
       };
+      const { container } = renderRcsPreview(props);
+      const wraps = container.querySelectorAll('.whatsapp-image.rcs-carousel-media-wrap');
+      expect(wraps.length).toBe(2);
+      expect(wraps[0].style.aspectRatio).toBe('1160 / 720');
+      expect(wraps[1].style.aspectRatio).toBe('718 / 448');
+    });
 
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
+    it('should use text preview when carouselData is not an array', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          carouselData: { invalid: true },
+          templateHeader: 'Fallback title',
+          templateMessage: 'Fallback body',
+        },
+      };
+      const { container } = renderRcsPreview(props);
+      expect(container.querySelector('.scroll-container')).toBeFalsy();
+      expect(screen.getByText('Fallback title')).toBeTruthy();
+      expect(screen.getByText('Fallback body')).toBeTruthy();
+    });
 
-      expect(screen.getByText('Visit Website')).toBeTruthy();
+    it('should use text preview when carouselData is an empty array', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          carouselData: [],
+          templateHeader: 'No cards',
+          templateMessage: 'Use text',
+        },
+      };
+      const { container } = renderRcsPreview(props);
+      expect(container.querySelector('.scroll-container')).toBeFalsy();
+      expect(screen.getByText('No cards')).toBeTruthy();
     });
 
-    it('should render PHONE_NUMBER suggestion', () => {
+    it('should render image branch when mediaType is undefined (not video)', () => {
       const props = {
         ...defaultProps,
         content: {
-          templateHeader: 'Title',
-          templateMessage: 'Description',
-          suggestions: [
-            { type: 'PHONE_NUMBER', text: 'Call Us' },
+          carouselData: [
+            {
+              title: 'T',
+              bodyText: 'B',
+              imageSrc: '',
+              suggestions: [],
+            },
           ],
         },
       };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('Call Us')).toBeTruthy();
+      const { container } = renderRcsPreview(props);
+      expect(container.querySelector('.video-preview')).toBeFalsy();
+      const img = container.querySelector('.rcs-carousel-img');
+      expect(img).toBeTruthy();
+      expect(img.getAttribute('src')).toBeTruthy();
     });
 
-    it('should render multiple suggestions', () => {
+    it('should treat MEDIA_TYPE_VIDEO as video regardless of case', () => {
       const props = {
         ...defaultProps,
         content: {
-          templateHeader: 'Title',
-          templateMessage: 'Description',
-          suggestions: [
-            { type: 'QUICK_REPLY', text: 'Yes' },
-            { type: 'CTA', text: 'Visit' },
-            { type: 'PHONE_NUMBER', text: 'Call' },
+          carouselData: [
+            {
+              mediaType: MEDIA_TYPE_VIDEO,
+              videoPreviewImg: 'https://thumb/video',
+              title: 'Vid',
+              bodyText: 'Clip',
+              suggestions: [],
+            },
           ],
         },
       };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
+      const { container } = renderRcsPreview(props);
+      expect(container.querySelector('.video-preview')).toBeTruthy();
+      expect(container.querySelector('.whatsapp-image.rcs-carousel-media-wrap .rcs-carousel-img')?.getAttribute('src')).toBe(
+        'https://thumb/video',
       );
-
-      expect(screen.getByText('Yes')).toBeTruthy();
-      expect(screen.getByText('Visit')).toBeTruthy();
-      expect(screen.getByText('Call')).toBeTruthy();
     });
 
-    it('should render dividers between suggestions', () => {
+    it('should use empty video placeholder when video card has no videoPreviewImg', () => {
       const props = {
         ...defaultProps,
         content: {
-          templateHeader: 'Title',
-          templateMessage: 'Description',
-          suggestions: [
-            { type: 'QUICK_REPLY', text: 'Yes' },
-            { type: 'CTA', text: 'Visit' },
+          carouselData: [
+            {
+              mediaType: 'video',
+              title: 'V',
+              bodyText: 'No thumb',
+              suggestions: [],
+            },
           ],
         },
       };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      const dividers = container.querySelectorAll('.whatsapp-divider');
-      expect(dividers.length).toBeGreaterThan(0);
+      const { container } = renderRcsPreview(props);
+      const vidImg = container.querySelector('.video-preview .rcs-carousel-img');
+      expect(vidImg).toBeTruthy();
+      expect(vidImg.getAttribute('src')).toBeTruthy();
     });
 
-    it('should not render suggestions when array is empty', () => {
+    it('should not render per-card suggestions block when suggestions is null or non-array', () => {
       const props = {
         ...defaultProps,
         content: {
-          templateHeader: 'Title',
-          templateMessage: 'Description',
-          suggestions: [],
+          carouselData: [
+            {
+              mediaType: 'image',
+              imageSrc: 'https://x.png',
+              title: 'A',
+              bodyText: 'B',
+              suggestions: null,
+            },
+            {
+              mediaType: 'image',
+              imageSrc: 'https://y.png',
+              title: 'C',
+              bodyText: 'D',
+              suggestions: 'not-an-array',
+            },
+          ],
         },
       };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('Title')).toBeTruthy();
+      const { container } = renderRcsPreview(props);
+      expect(container.querySelectorAll('.message-pop-carousel').length).toBe(2);
+      const ctas = container.querySelectorAll('.rcs-cta-preview');
+      expect(ctas.length).toBe(0);
     });
 
-    it('should handle suggestion without text', () => {
+    it('should render title-only card with body placeholder', () => {
       const props = {
         ...defaultProps,
         content: {
-          templateHeader: 'Title',
-          templateMessage: 'Description',
-          suggestions: [
-            { type: 'QUICK_REPLY', text: null },
+          carouselData: [
+            {
+              mediaType: 'image',
+              imageSrc: 'https://only-title.png',
+              title: 'OnlyTitle',
+              suggestions: [],
+            },
           ],
         },
       };
+      renderRcsPreview(props);
+      expect(screen.getByText('OnlyTitle')).toBeTruthy();
+      expect(screen.getByText('Card description')).toBeTruthy();
+      expect(document.querySelector('.carousel-message.rcs-carousel-field-placeholder')).toBeTruthy();
+    });
 
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      // Should not crash
-      expect(screen.getByText('Title')).toBeTruthy();
+    it('should render body-only card with title placeholder', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          carouselData: [
+            {
+              mediaType: 'image',
+              imageSrc: 'https://only-body.png',
+              bodyText: 'OnlyBody',
+              suggestions: [],
+            },
+          ],
+        },
+      };
+      renderRcsPreview(props);
+      expect(screen.getByText('OnlyBody')).toBeTruthy();
+      expect(screen.getByText('Card title')).toBeTruthy();
+      expect(document.querySelector('.carousel-title.rcs-carousel-field-placeholder')).toBeTruthy();
     });
-  });
 
-  describe('Device Handling', () => {
-    it('should use Android device image for ANDROID device', () => {
+    it('should show title and body placeholders when card has no title or body', () => {
       const props = {
         ...defaultProps,
-        device: ANDROID,
+        content: {
+          carouselData: [
+            {
+              mediaType: 'image',
+              imageSrc: 'https://silent.png',
+              suggestions: [],
+            },
+          ],
+        },
       };
+      const { container } = renderRcsPreview(props);
+      expect(container.querySelector('.carousel-content')).toBeTruthy();
+      expect(screen.getByText('Card title')).toBeTruthy();
+      expect(screen.getByText('Card description')).toBeTruthy();
+      expect(container.querySelectorAll('.rcs-carousel-field-placeholder').length).toBe(2);
+    });
+  });
 
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
+  describe('RCS Suggestions', () => {
+    const withTextBodySuggestions = (suggestions) => ({
+      ...defaultProps,
+      content: { templateHeader: 'Title', templateMessage: 'Description', suggestions },
+    });
 
-      expect(container.querySelector('.sms-device-image')).toBeTruthy();
+    it.each([
+      ['QUICK_REPLY', 'Yes', true],
+      ['CTA', 'Visit Website', false],
+      ['PHONE_NUMBER', 'Call Us', false],
+    ])('should render %s suggestion', (type, text, expectQuickReplyIcon) => {
+      const props = withTextBodySuggestions([{ type, text }]);
+      const { container } = renderRcsPreview(props);
+      expect(screen.getByText(text)).toBeTruthy();
+      if (expectQuickReplyIcon) {
+        expect(container.querySelector('.cap-icon-v2-small-link')).toBeTruthy();
+      }
     });
 
+    it('should render multiple suggestions', () => {
+      const props = withTextBodySuggestions([
+        { type: 'QUICK_REPLY', text: 'Yes' },
+        { type: 'CTA', text: 'Visit' },
+        { type: 'PHONE_NUMBER', text: 'Call' },
+      ]);
+
+      renderRcsPreview(props);
+
+      expect(screen.getByText('Yes')).toBeTruthy();
+      expect(screen.getByText('Visit')).toBeTruthy();
+      expect(screen.getByText('Call')).toBeTruthy();
+    });
+
+    it('should render dividers between suggestions', () => {
+      const props = withTextBodySuggestions([
+        { type: 'QUICK_REPLY', text: 'Yes' },
+        { type: 'CTA', text: 'Visit' },
+      ]);
+
+      const { container } = renderRcsPreview(props);
+
+      const dividers = container.querySelectorAll('.whatsapp-divider');
+      expect(dividers.length).toBeGreaterThan(0);
+    });
+
+    it('should not render suggestions when array is empty', () => {
+      renderRcsPreview(withTextBodySuggestions([]));
+
+      expect(screen.getByText('Title')).toBeTruthy();
+    });
+
+    it('should handle suggestion without text', () => {
+      renderRcsPreview(withTextBodySuggestions([{ type: 'QUICK_REPLY', text: null }]));
+
+      // Should not crash
+      expect(screen.getByText('Title')).toBeTruthy();
+    });
+  });
+
+  describe('Device Handling', () => {
     it('should use iOS device image for IOS device', () => {
       const props = {
         ...defaultProps,
         device: IOS,
       };
 
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
+      const { container } = renderRcsPreview(props);
 
       expect(container.querySelector('.sms-device-image')).toBeTruthy();
     });
@@ -488,11 +537,7 @@ describe('RcsPreviewContent', () => {
         senderId: 'MY_SENDER_ID',
       };
 
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
+      renderRcsPreview(props);
 
       expect(screen.getByText('MY_SENDER_ID')).toBeTruthy();
     });
@@ -503,11 +548,7 @@ describe('RcsPreviewContent', () => {
         senderId: null,
       };
 
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
+      renderRcsPreview(props);
 
       expect(screen.getByText('Sender ID')).toBeTruthy();
     });
@@ -515,11 +556,7 @@ describe('RcsPreviewContent', () => {
 
   describe('Timestamp', () => {
     it('should display timestamp', () => {
-      render(
-        <TestWrapper>
-          <ComponentToRender {...defaultProps} />
-        </TestWrapper>
-      );
+      renderRcsPreview(defaultProps);
 
       // Timestamp format: "H:MM AM/PM"
       const timestamp = screen.getByText(/\d{1,2}:\d{2} (AM|PM)/);
@@ -537,44 +574,17 @@ describe('RcsPreviewContent', () => {
         },
       };
 
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
+      const { container } = renderRcsPreview(props);
 
       // Should prioritize video when both are present
       expect(container.querySelector('.video-preview')).toBeTruthy();
     });
 
-    it('should handle empty content object', () => {
-      const props = {
-        ...defaultProps,
-        content: {},
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      // Should render structure
-      expect(screen.getByText('Today')).toBeTruthy();
-    });
-
-    it('should handle null content', () => {
-      const props = {
-        ...defaultProps,
-        content: null,
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
+    it.each([
+      ['empty object', {}],
+      ['null', null],
+    ])('should render structure when content is %s', (_, contentValue) => {
+      renderRcsPreview({ ...defaultProps, content: contentValue });
       expect(screen.getByText('Today')).toBeTruthy();
     });
 
@@ -590,11 +600,7 @@ describe('RcsPreviewContent', () => {
         },
       };
 
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
+      renderRcsPreview(props);
 
       // Should not crash, but may not render the suggestion
       expect(screen.getByText('Title')).toBeTruthy();
@@ -607,11 +613,7 @@ describe('RcsPreviewContent', () => {
         formatMessage: jest.fn((msg) => msg.defaultMessage || msg.id),
       };
 
-      render(
-        <TestWrapper>
-          <ComponentToRender {...minimalProps} />
-        </TestWrapper>
-      );
+      renderRcsPreview(minimalProps);
 
       expect(screen.getByText('Today')).toBeTruthy();
     });
@@ -621,11 +623,7 @@ describe('RcsPreviewContent', () => {
     it('should accept all required props without warnings', () => {
       const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
-      render(
-        <TestWrapper>
-          <ComponentToRender {...defaultProps} />
-        </TestWrapper>
-      );
+      renderRcsPreview(defaultProps);
 
       expect(consoleSpy).not.toHaveBeenCalled();
       consoleSpy.mockRestore();