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

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