@capillarytech/creatives-library 9.0.14-beta.0 → 9.0.14

package/v2Containers/CommunicationFlow/Tests/getContentBody.test.js

@@ -0,0 +1,933 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+jest.mock('@capillarytech/cap-ui-library/CapImage', () =>
+  function MockCapImage({ src, className, alt }) {
+    return <img data-testid="cap-image" src={src} className={className} alt={alt || ''} />;
+  });
+
+jest.mock('@capillarytech/cap-ui-library/CapLabel', () =>
+  function MockCapLabel({ children, type, className }) {
+    return <span data-testid="cap-label" data-type={type} className={className}>{children}</span>;
+  });
+
+jest.mock('@capillarytech/cap-ui-library/CapIcon', () =>
+  function MockCapIcon({ type }) {
+    return <span data-testid={`cap-icon-${type}`} />;
+  });
+
+jest.mock('@capillarytech/cap-ui-library/CapRow', () =>
+  function MockCapRow({ children, className, style }) {
+    return <div data-testid="cap-row" className={className} style={style}>{children}</div>;
+  });
+
+jest.mock('../../Whatsapp/utils', () => ({
+  getWhatsappDocPreview: jest.fn(() => <span data-testid="doc-preview">DocPreview</span>),
+  getWhatsappQuickReply: jest.fn(() => <span data-testid="quick-reply">QuickReply</span>),
+  getWhatsappCarouselButtonView: jest.fn(() => <span data-testid="carousel-buttons">CarouselButtons</span>),
+}));
+
+jest.mock('../../../assets/videoPlay.svg', () => 'videoPlay.svg');
+
+import getContentBody from '../utils/getContentBody';
+import { getWhatsappDocPreview, getWhatsappQuickReply, getWhatsappCarouselButtonView } from '../../Whatsapp/utils';
+
+const renderResult = (item) => {
+  const result = getContentBody(item);
+  const { container } = render(<>{result}</>);
+  return container;
+};
+
+describe('getContentBody', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    getWhatsappQuickReply.mockReturnValue(<span data-testid="quick-reply">QuickReply</span>);
+    getWhatsappCarouselButtonView.mockReturnValue(<span data-testid="carousel-buttons">CarouselButtons</span>);
+    getWhatsappDocPreview.mockReturnValue(<span data-testid="doc-preview">DocPreview</span>);
+  });
+
+  // ---------------------------------------------------------------------------
+  // SMS
+  // ---------------------------------------------------------------------------
+  describe('SMS', () => {
+    it('renders messageBody', () => {
+      const { getByTestId } = render(<>{getContentBody({ channel: 'SMS', templateData: { messageBody: 'Hello SMS' } })}</>);
+      expect(getByTestId('cap-label')).toHaveTextContent('Hello SMS');
+    });
+
+    it('falls back to smsBody when messageBody is absent', () => {
+      const { getByTestId } = render(<>{getContentBody({ channel: 'SMS', templateData: { smsBody: 'Fallback' } })}</>);
+      expect(getByTestId('cap-label')).toHaveTextContent('Fallback');
+    });
+
+    it('renders empty string when neither messageBody nor smsBody is present', () => {
+      const { getByTestId } = render(<>{getContentBody({ channel: 'SMS', templateData: {} })}</>);
+      expect(getByTestId('cap-label')).toHaveTextContent('');
+    });
+
+    it('is case-insensitive — lowercased channel works', () => {
+      // lowercase 'sms' goes to default branch, not SMS case — document that behavior
+      const { getByTestId } = render(<>{getContentBody({ channel: 'sms', templateData: { messageBody: 'hi' } })}</>);
+      expect(getByTestId('cap-label')).toBeInTheDocument();
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // EMAIL
+  // ---------------------------------------------------------------------------
+  describe('EMAIL', () => {
+    it('renders emailSubject', () => {
+      const { getByTestId } = render(<>{getContentBody({ channel: 'EMAIL', templateData: { emailSubject: 'My Subject' } })}</>);
+      expect(getByTestId('cap-label')).toHaveTextContent('My Subject');
+    });
+
+    it('renders empty string when emailSubject is absent', () => {
+      const { getByTestId } = render(<>{getContentBody({ channel: 'EMAIL', templateData: {} })}</>);
+      expect(getByTestId('cap-label')).toHaveTextContent('');
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // MOBILE_PUSH (MOBILEPUSH)
+  // ---------------------------------------------------------------------------
+  describe('MOBILE_PUSH', () => {
+    const channel = 'MOBILEPUSH';
+
+    it('renders title and message from androidContent', () => {
+      const container = renderResult({
+        channel,
+        templateData: {
+          androidContent: { title: 'Push Title', message: 'Push Msg' },
+        },
+      });
+      expect(container.querySelector('.mobilepush-container')).toBeInTheDocument();
+      expect(screen.getByText('Push Title')).toBeInTheDocument();
+      expect(screen.getByText('Push Msg')).toBeInTheDocument();
+    });
+
+    it('falls back to iosContent when androidContent is absent', () => {
+      renderResult({
+        channel,
+        templateData: {
+          iosContent: { title: 'iOS Title', message: 'iOS Msg' },
+        },
+      });
+      expect(screen.getByText('iOS Title')).toBeInTheDocument();
+    });
+
+    it('uses empty object when both androidContent and iosContent are absent', () => {
+      renderResult({ channel, templateData: {} });
+      // Should render without crash; title/message are empty strings
+      expect(document.querySelector('.mobilepush-container')).toBeInTheDocument();
+    });
+
+    it('renders image when image is set and media/carouselData are absent', () => {
+      renderResult({
+        channel,
+        templateData: {
+          androidContent: {
+            title: 'T',
+            message: 'M',
+            expandableDetails: { image: 'http://img.png' },
+          },
+        },
+      });
+      const img = document.querySelector('.mobilepush-image');
+      expect(img).toBeInTheDocument();
+      expect(img).toHaveAttribute('src', 'http://img.png');
+    });
+
+    it('does NOT render image when media.url is present', () => {
+      renderResult({
+        channel,
+        templateData: {
+          androidContent: {
+            expandableDetails: {
+              image: 'http://img.png',
+              media: [{ url: 'http://video.mp4' }],
+            },
+          },
+        },
+      });
+      expect(document.querySelector('.mobilepush-image.mobilepush-image-padding')).not.toBeInTheDocument();
+    });
+
+    it('does NOT render image when carouselData is non-empty', () => {
+      renderResult({
+        channel,
+        templateData: {
+          androidContent: {
+            expandableDetails: {
+              image: 'http://img.png',
+              carouselData: [{ imageUrl: 'http://c.png' }],
+            },
+          },
+        },
+      });
+      expect(document.querySelector('.mobilepush-image.mobilepush-image-padding')).not.toBeInTheDocument();
+    });
+
+    it('renders video preview when media[0].url is set', () => {
+      renderResult({
+        channel,
+        templateData: {
+          androidContent: {
+            expandableDetails: { media: [{ url: 'http://vid.mp4' }] },
+          },
+        },
+      });
+      expect(document.querySelector('.video-preview')).toBeInTheDocument();
+      const source = document.querySelector('source');
+      expect(source).toHaveAttribute('src', 'http://vid.mp4');
+    });
+
+    it('does not render video preview when media[0] has no url', () => {
+      renderResult({
+        channel,
+        templateData: {
+          androidContent: {
+            expandableDetails: { media: [{}] },
+          },
+        },
+      });
+      expect(document.querySelector('.video-preview')).not.toBeInTheDocument();
+    });
+
+    it('renders carousel cards when carouselData is non-empty', () => {
+      renderResult({
+        channel,
+        templateData: {
+          androidContent: {
+            expandableDetails: {
+              carouselData: [
+                { imageUrl: 'http://c1.png' },
+                { imageUrl: 'http://c2.png' },
+              ],
+            },
+          },
+        },
+      });
+      expect(document.querySelector('.scroll-container')).toBeInTheDocument();
+      expect(document.querySelectorAll('.whatsapp-carousel-container')).toHaveLength(2);
+    });
+
+    it('renders carousel card image when imageUrl is present', () => {
+      renderResult({
+        channel,
+        templateData: {
+          androidContent: {
+            expandableDetails: {
+              carouselData: [{ imageUrl: 'http://card.png' }],
+            },
+          },
+        },
+      });
+      const img = document.querySelector('.whatsapp-image');
+      expect(img).toHaveAttribute('src', 'http://card.png');
+    });
+
+    it('does not render carousel card image when imageUrl is absent', () => {
+      renderResult({
+        channel,
+        templateData: {
+          androidContent: {
+            expandableDetails: { carouselData: [{}] },
+          },
+        },
+      });
+      expect(document.querySelector('.whatsapp-image')).not.toBeInTheDocument();
+    });
+
+    it('renders CTAs when ctas is non-empty', () => {
+      renderResult({
+        channel,
+        templateData: {
+          androidContent: {
+            expandableDetails: {
+              ctas: [{ actionText: 'Click Me' }, { actionText: 'Open' }],
+            },
+          },
+        },
+      });
+      expect(document.querySelector('.actions')).toBeInTheDocument();
+      expect(screen.getByText('CLICK ME')).toBeInTheDocument();
+      expect(screen.getByText('OPEN')).toBeInTheDocument();
+    });
+
+    it('does not render CTAs section when ctas is empty', () => {
+      renderResult({
+        channel,
+        templateData: { androidContent: { expandableDetails: { ctas: [] } } },
+      });
+      expect(document.querySelector('.actions')).not.toBeInTheDocument();
+    });
+
+    it('also matches MPUSH channel', () => {
+      renderResult({
+        channel: 'MPUSH',
+        templateData: { androidContent: { title: 'MPUSH Title', message: '' } },
+      });
+      expect(screen.getByText('MPUSH Title')).toBeInTheDocument();
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // INAPP
+  // ---------------------------------------------------------------------------
+  describe('INAPP', () => {
+    it('renders title when present', () => {
+      renderResult({ channel: 'INAPP', templateData: { androidContent: { title: 'InApp Title' } } });
+      expect(screen.getByText('InApp Title')).toBeInTheDocument();
+    });
+
+    it('does not render title label when title is empty', () => {
+      const { container } = render(<>{getContentBody({ channel: 'INAPP', templateData: { androidContent: { title: '' } } })}</>);
+      // Fragment renders, but no label for the empty title
+      const labels = container.querySelectorAll('[data-testid="cap-label"]');
+      const titleLabel = Array.from(labels).find((l) => l.getAttribute('data-type') === 'label2');
+      expect(titleLabel).toBeUndefined();
+    });
+
+    it('renders message when present', () => {
+      renderResult({ channel: 'INAPP', templateData: { androidContent: { message: 'InApp Msg' } } });
+      expect(screen.getByText('InApp Msg')).toBeInTheDocument();
+    });
+
+    it('renders image when present', () => {
+      renderResult({
+        channel: 'INAPP',
+        templateData: {
+          androidContent: { expandableDetails: { image: 'http://inapp.png' } },
+        },
+      });
+      expect(document.querySelector('.mobilepush-image')).toHaveAttribute('src', 'http://inapp.png');
+    });
+
+    it('renders CTAs', () => {
+      renderResult({
+        channel: 'INAPP',
+        templateData: {
+          androidContent: {
+            expandableDetails: { ctas: [{ actionText: 'Tap' }] },
+          },
+        },
+      });
+      expect(screen.getByText('TAP')).toBeInTheDocument();
+    });
+
+    it('uses iosContent fallback', () => {
+      renderResult({
+        channel: 'INAPP',
+        templateData: { iosContent: { title: 'iOS INAPP' } },
+      });
+      expect(screen.getByText('iOS INAPP')).toBeInTheDocument();
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // WEBPUSH
+  // ---------------------------------------------------------------------------
+  describe('WEBPUSH', () => {
+    const makeWebpushItem = (innerContent = {}) => ({
+      channel: 'WEBPUSH',
+      templateData: {
+        messageContent: { content: { content: innerContent } },
+      },
+    });
+
+    it('renders title', () => {
+      renderResult(makeWebpushItem({ title: 'WP Title' }));
+      expect(screen.getByText('WP Title')).toBeInTheDocument();
+    });
+
+    it('renders notification message when present', () => {
+      renderResult(makeWebpushItem({ title: 'T', message: 'WP Msg' }));
+      expect(screen.getByText('WP Msg')).toBeInTheDocument();
+    });
+
+    it('does not render message div when message is empty', () => {
+      const container = renderResult(makeWebpushItem({ title: 'T', message: '' }));
+      expect(container.querySelector('.webpush-template-message')).not.toBeInTheDocument();
+    });
+
+    it('renders iconImageUrl as img element', () => {
+      renderResult(makeWebpushItem({ iconImageUrl: 'http://icon.png' }));
+      const icon = document.querySelector('.webpush-brand-icon');
+      expect(icon).toHaveAttribute('src', 'http://icon.png');
+    });
+
+    it('renders placeholder span when iconImageUrl is absent', () => {
+      renderResult(makeWebpushItem({}));
+      expect(document.querySelector('.webpush-brand-icon-placeholder')).toBeInTheDocument();
+    });
+
+    it('renders media image when expandableDetails.image is set', () => {
+      renderResult(makeWebpushItem({ expandableDetails: { image: 'http://media.png' } }));
+      expect(document.querySelector('.webpush-media-image')).toHaveAttribute('src', 'http://media.png');
+    });
+
+    it('does not render media image when expandableDetails.image is absent', () => {
+      renderResult(makeWebpushItem({}));
+      expect(document.querySelector('.webpush-media-image')).not.toBeInTheDocument();
+    });
+
+    it('renders CTA from single `cta` property', () => {
+      renderResult(makeWebpushItem({ cta: { text: 'Buy Now' } }));
+      expect(screen.getByText('Buy Now')).toBeInTheDocument();
+    });
+
+    it('renders up to 2 CTAs from ctas array', () => {
+      renderResult(makeWebpushItem({
+        ctas: [{ text: 'A' }, { text: 'B' }, { text: 'C' }],
+      }));
+      expect(screen.getByText('A')).toBeInTheDocument();
+      expect(screen.getByText('B')).toBeInTheDocument();
+      expect(screen.queryByText('C')).not.toBeInTheDocument();
+    });
+
+    it('applies single-cta class when only one CTA', () => {
+      renderResult(makeWebpushItem({ cta: { text: 'Solo' } }));
+      expect(document.querySelector('.webpush-template-cta-section.single-cta')).toBeInTheDocument();
+    });
+
+    it('does not apply single-cta class when there are 2 CTAs', () => {
+      renderResult(makeWebpushItem({ ctas: [{ text: 'A' }, { text: 'B' }] }));
+      expect(document.querySelector('.webpush-template-cta-section.single-cta')).not.toBeInTheDocument();
+    });
+
+    it('renders CTA actionText as fallback when text is absent', () => {
+      renderResult(makeWebpushItem({ cta: { actionText: 'FallbackText' } }));
+      expect(screen.getByText('FallbackText')).toBeInTheDocument();
+    });
+
+    it('renders without crash when messageContent is deeply absent', () => {
+      renderResult({ channel: 'WEBPUSH', templateData: {} });
+      expect(document.querySelector('.webpush-template-card')).toBeInTheDocument();
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // VIBER
+  // ---------------------------------------------------------------------------
+  describe('VIBER', () => {
+    it('renders text from JSON string with content wrapper', () => {
+      renderResult({
+        channel: 'VIBER',
+        templateData: { messageBody: JSON.stringify({ content: { text: 'Viber text' } }) },
+      });
+      expect(screen.getByText('Viber text')).toBeInTheDocument();
+    });
+
+    it('renders text from JSON string without content wrapper', () => {
+      renderResult({
+        channel: 'VIBER',
+        templateData: { messageBody: JSON.stringify({ text: 'Direct text' }) },
+      });
+      expect(screen.getByText('Direct text')).toBeInTheDocument();
+    });
+
+    it('renders text from object messageBody', () => {
+      renderResult({
+        channel: 'VIBER',
+        templateData: { messageBody: { content: { text: 'Obj text' } } },
+      });
+      expect(screen.getByText('Obj text')).toBeInTheDocument();
+    });
+
+    it('does not render text label when text is empty', () => {
+      const container = renderResult({
+        channel: 'VIBER',
+        templateData: { messageBody: JSON.stringify({ text: '' }) },
+      });
+      const labels = container.querySelectorAll('[data-testid="cap-label"]');
+      expect(labels).toHaveLength(0);
+    });
+
+    it('renders image when image.url is present', () => {
+      renderResult({
+        channel: 'VIBER',
+        templateData: { messageBody: { image: { url: 'http://viber.png' } } },
+      });
+      expect(document.querySelector('.viber-image')).toHaveAttribute('src', 'http://viber.png');
+    });
+
+    it('does not render image when image.url is absent', () => {
+      renderResult({
+        channel: 'VIBER',
+        templateData: { messageBody: { image: {} } },
+      });
+      expect(document.querySelector('.viber-image')).not.toBeInTheDocument();
+    });
+
+    it('renders video preview when video.url is present', () => {
+      renderResult({
+        channel: 'VIBER',
+        templateData: { messageBody: { video: { url: 'http://v.mp4', thumbnailUrl: 'http://thumb.png' } } },
+      });
+      expect(document.querySelector('.video-preview')).toBeInTheDocument();
+      const img = document.querySelector('.viber-image');
+      expect(img).toHaveAttribute('src', 'http://thumb.png');
+    });
+
+    it('uses video.url as thumbnail fallback when thumbnailUrl is absent', () => {
+      renderResult({
+        channel: 'VIBER',
+        templateData: { messageBody: { video: { url: 'http://v.mp4' } } },
+      });
+      const img = document.querySelector('.viber-image');
+      expect(img).toHaveAttribute('src', 'http://v.mp4');
+    });
+
+    it('does not render video when video.url is absent', () => {
+      renderResult({
+        channel: 'VIBER',
+        templateData: { messageBody: { video: {} } },
+      });
+      expect(document.querySelector('.video-preview')).not.toBeInTheDocument();
+    });
+
+    it('renders button row when button.text is present', () => {
+      renderResult({
+        channel: 'VIBER',
+        templateData: { messageBody: { button: { text: 'Click' } } },
+      });
+      expect(screen.getByText('Click')).toBeInTheDocument();
+      expect(document.querySelector('.button-content')).toBeInTheDocument();
+    });
+
+    it('does not render button row when button.text is absent', () => {
+      renderResult({
+        channel: 'VIBER',
+        templateData: { messageBody: { button: {} } },
+      });
+      expect(document.querySelector('.button-content')).not.toBeInTheDocument();
+    });
+
+    it('falls back to empty content on JSON parse error', () => {
+      renderResult({
+        channel: 'VIBER',
+        templateData: { messageBody: 'not valid json{{{' },
+      });
+      // Should not throw; renders empty fragment
+      expect(document.querySelector('[data-testid="cap-label"]')).not.toBeInTheDocument();
+    });
+
+    it('renders without crash when messageBody is absent', () => {
+      renderResult({ channel: 'VIBER', templateData: {} });
+      expect(document.querySelector('[data-testid="cap-label"]')).not.toBeInTheDocument();
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // WHATSAPP
+  // ---------------------------------------------------------------------------
+  describe('WHATSAPP', () => {
+    const makeWA = (configs = {}, extra = {}) => ({
+      channel: 'WHATSAPP',
+      templateData: { templateConfigs: configs, ...extra },
+    });
+
+    it('renders bodyText', () => {
+      renderResult(makeWA({}, { messageBody: 'WA Body' }));
+      expect(screen.getByText('WA Body')).toBeInTheDocument();
+    });
+
+    it('renders IMAGE type', () => {
+      renderResult(makeWA({ mediaType: 'IMAGE', whatsappMedia: { url: 'http://wa.png' } }));
+      expect(document.querySelector('.whatsapp-image')).toHaveAttribute('src', 'http://wa.png');
+    });
+
+    it('does not render direct image element when mediaType is VIDEO', () => {
+      // VIDEO path renders a .video-preview div, not a bare .whatsapp-image from the imageUrl branch
+      renderResult(makeWA({ mediaType: 'VIDEO', whatsappMedia: { previewUrl: 'http://preview.png' } }));
+      // No direct .whatsapp-image outside of .video-preview for the top-level imageUrl === ''
+      const images = document.querySelectorAll('.whatsapp-container > .whatsapp-image');
+      expect(images).toHaveLength(0);
+    });
+
+    it('renders video preview for VIDEO mediaType', () => {
+      renderResult(makeWA({ mediaType: 'VIDEO', whatsappMedia: { previewUrl: 'http://preview.png' } }));
+      expect(document.querySelector('.video-preview')).toBeInTheDocument();
+      const img = document.querySelector('.whatsapp-image');
+      expect(img).toHaveAttribute('src', 'http://preview.png');
+    });
+
+    it('renders doc preview for DOCUMENT mediaType', () => {
+      renderResult(makeWA({
+        mediaType: 'DOCUMENT',
+        whatsappMedia: { docParams: { fileName: 'file.pdf' }, previewUrl: 'http://doc.png' },
+      }));
+      expect(screen.getByTestId('doc-preview')).toBeInTheDocument();
+      expect(getWhatsappDocPreview).toHaveBeenCalledWith(
+        expect.objectContaining({ fileName: 'file.pdf', whatsappDocImg: 'http://doc.png' }),
+      );
+    });
+
+    it('does not call getWhatsappDocPreview when docParams is absent', () => {
+      renderResult(makeWA({ mediaType: 'DOCUMENT', whatsappMedia: {} }));
+      expect(getWhatsappDocPreview).not.toHaveBeenCalled();
+    });
+
+    it('renders header inside whatsapp-message span', () => {
+      renderResult(makeWA({ whatsappMedia: { header: 'Header Text' } }));
+      expect(screen.getByText('Header Text')).toBeInTheDocument();
+    });
+
+    it('renders footer inside whatsapp-message span', () => {
+      renderResult(makeWA({ whatsappMedia: { footer: 'Footer Text' } }));
+      expect(screen.getByText('Footer Text')).toBeInTheDocument();
+    });
+
+    it('applies whatsapp-message-with-media class when imageUrl is set', () => {
+      renderResult(makeWA({ mediaType: 'IMAGE', whatsappMedia: { url: 'http://img.png' } }));
+      expect(document.querySelector('.whatsapp-message-with-media')).toBeInTheDocument();
+    });
+
+    it('applies whatsapp-message-without-media class when no media', () => {
+      renderResult(makeWA({}));
+      expect(document.querySelector('.whatsapp-message-without-media')).toBeInTheDocument();
+    });
+
+    it('renders CTA buttons with PHONE_NUMBER type using call icon', () => {
+      renderResult(makeWA({
+        buttonType: 'CTA',
+        buttons: [{ text: 'Call Us', type: 'PHONE_NUMBER' }],
+      }));
+      expect(screen.getByText('Call Us')).toBeInTheDocument();
+      expect(document.querySelector('[data-testid="cap-icon-call"]')).toBeInTheDocument();
+    });
+
+    it('renders CTA buttons with URL type using launch icon', () => {
+      renderResult(makeWA({
+        buttonType: 'CTA',
+        buttons: [{ text: 'Visit', type: 'URL' }],
+      }));
+      expect(screen.getByText('Visit')).toBeInTheDocument();
+      expect(document.querySelector('[data-testid="cap-icon-launch"]')).toBeInTheDocument();
+    });
+
+    it('skips CTA button when button.text is absent', () => {
+      renderResult(makeWA({
+        buttonType: 'CTA',
+        buttons: [{ type: 'URL' }],
+      }));
+      expect(document.querySelector('[data-testid="cap-icon-launch"]')).not.toBeInTheDocument();
+    });
+
+    it('does not render CTA buttons when buttonType is not CTA', () => {
+      renderResult(makeWA({ buttonType: 'QUICK_REPLY', buttons: [{ text: 'Reply' }] }));
+      expect(screen.queryByText('Reply')).not.toBeInTheDocument();
+    });
+
+    it('calls getWhatsappQuickReply with buttonType and buttons', () => {
+      renderResult(makeWA({ buttonType: 'QUICK_REPLY', buttons: [{ text: 'Yes' }] }));
+      expect(getWhatsappQuickReply).toHaveBeenCalledWith(
+        { buttonType: 'QUICK_REPLY', buttons: [{ text: 'Yes' }] },
+        true,
+      );
+    });
+
+    it('renders carousel with image mediaType', () => {
+      renderResult(makeWA({ cards: [{ mediaType: 'IMAGE', imageUrl: 'http://c.png', bodyText: 'Card 1', buttons: [] }] }));
+      expect(document.querySelector('.scroll-container')).toBeInTheDocument();
+      expect(document.querySelector('.whatsapp-image')).toHaveAttribute('src', 'http://c.png');
+    });
+
+    it('renders carousel with video mediaType', () => {
+      renderResult(makeWA({ cards: [{ mediaType: 'VIDEO', videoPreviewImg: 'http://vp.png', buttons: [] }] }));
+      expect(document.querySelector('.video-preview')).toBeInTheDocument();
+    });
+
+    it('applies whatsapp-message-with-media on carousel card when imageUrl is present', () => {
+      renderResult(makeWA({ cards: [{ mediaType: 'IMAGE', imageUrl: 'http://c.png', buttons: [] }] }));
+      expect(document.querySelector('.whatsapp-carousel-card .whatsapp-message-with-media')).toBeInTheDocument();
+    });
+
+    it('applies whatsapp-message-without-media on carousel card when no media', () => {
+      renderResult(makeWA({ cards: [{ buttons: [] }] }));
+      expect(document.querySelector('.whatsapp-carousel-card .whatsapp-message-without-media')).toBeInTheDocument();
+    });
+
+    it('calls getWhatsappCarouselButtonView for each carousel card', () => {
+      renderResult(makeWA({
+        cards: [
+          { buttons: [{ text: 'Btn1' }] },
+          { buttons: [{ text: 'Btn2' }] },
+        ],
+      }));
+      expect(getWhatsappCarouselButtonView).toHaveBeenCalledTimes(2);
+    });
+
+    it('renders without crash when templateConfigs is absent', () => {
+      renderResult({ channel: 'WHATSAPP', templateData: {} });
+      expect(document.querySelector('.whatsapp-container')).toBeInTheDocument();
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // RCS
+  // ---------------------------------------------------------------------------
+  describe('RCS', () => {
+    const makeRCS = (cardContent = {}) => ({
+      channel: 'RCS',
+      templateData: { rcsContent: { cardContent: [cardContent] } },
+    });
+
+    it('renders IMAGE media', () => {
+      renderResult(makeRCS({ media: { mediaType: 'IMAGE', mediaUrl: 'http://rcs.png' } }));
+      expect(document.querySelector('.rcs-image')).toHaveAttribute('src', 'http://rcs.png');
+    });
+
+    it('renders VIDEO media with thumbnailUrl', () => {
+      renderResult(makeRCS({ media: { mediaType: 'VIDEO', mediaUrl: 'http://v.mp4', thumbnailUrl: 'http://t.png' } }));
+      expect(document.querySelector('.video-preview')).toBeInTheDocument();
+      expect(document.querySelector('.rcs-image')).toHaveAttribute('src', 'http://t.png');
+    });
+
+    it('renders VIDEO media using mediaUrl when thumbnailUrl is absent', () => {
+      renderResult(makeRCS({ media: { mediaType: 'VIDEO', mediaUrl: 'http://v.mp4' } }));
+      expect(document.querySelector('.rcs-image')).toHaveAttribute('src', 'http://v.mp4');
+    });
+
+    it('does not render image for unknown mediaType', () => {
+      renderResult(makeRCS({ media: { mediaType: 'DOCUMENT', mediaUrl: 'http://d.pdf' } }));
+      expect(document.querySelector('.rcs-image')).not.toBeInTheDocument();
+    });
+
+    it('renders title when present', () => {
+      renderResult(makeRCS({ title: 'RCS Title' }));
+      expect(screen.getByText('RCS Title')).toBeInTheDocument();
+    });
+
+    it('does not render title label when title is empty', () => {
+      renderResult(makeRCS({ title: '' }));
+      const labels = document.querySelectorAll('[data-testid="cap-label"][data-type="label4"]');
+      expect(labels).toHaveLength(0);
+    });
+
+    it('renders description when present', () => {
+      renderResult(makeRCS({ description: 'RCS Desc' }));
+      expect(screen.getByText('RCS Desc')).toBeInTheDocument();
+    });
+
+    it('renders suggestions as action spans', () => {
+      renderResult(makeRCS({
+        suggestions: [
+          { label: 'Yes' },
+          { text: 'No' },
+          { postback: { data: 'pb-data' } },
+        ],
+      }));
+      expect(screen.getByText('Yes')).toBeInTheDocument();
+      expect(screen.getByText('No')).toBeInTheDocument();
+      // suggestion with only postback — label and text are both undefined, renders empty span
+      expect(document.querySelectorAll('.action')).toHaveLength(3);
+    });
+
+    it('does not render actions div when suggestions is empty', () => {
+      renderResult(makeRCS({ suggestions: [] }));
+      expect(document.querySelector('.actions')).not.toBeInTheDocument();
+    });
+
+    it('renders without crash when rcsContent is absent', () => {
+      renderResult({ channel: 'RCS', templateData: {} });
+      expect(document.querySelector('[data-testid="cap-label"]')).not.toBeInTheDocument();
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // ZALO
+  // ---------------------------------------------------------------------------
+  describe('ZALO', () => {
+    it('renders zalo template name', () => {
+      renderResult({
+        channel: 'ZALO',
+        templateData: { templateConfigs: { name: 'Zalo Promo' } },
+      });
+      const label = document.querySelector('[data-testid="cap-label"].zalo-listing-content');
+      expect(label).toHaveTextContent('Zalo Promo');
+    });
+
+    it('renders empty label when name is absent', () => {
+      renderResult({ channel: 'ZALO', templateData: { templateConfigs: {} } });
+      const label = document.querySelector('[data-testid="cap-label"].zalo-listing-content');
+      expect(label).toHaveTextContent('');
+    });
+
+    it('renders without crash when templateConfigs is absent', () => {
+      renderResult({ channel: 'ZALO', templateData: {} });
+      expect(document.querySelector('[data-testid="cap-label"]')).toBeInTheDocument();
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // LINE
+  // ---------------------------------------------------------------------------
+  describe('LINE', () => {
+    const makeLine = (messages) => ({
+      channel: 'LINE',
+      templateData: {
+        messageBody: JSON.stringify({ messages }),
+      },
+    });
+
+    it('renders flex type using contents[0].hero.url', () => {
+      renderResult(makeLine([{
+        type: 'flex',
+        contents: {
+          contents: [{ hero: { url: 'http://flex.png' } }],
+        },
+      }]));
+      expect(document.querySelector('.line-image')).toHaveAttribute('src', 'http://flex.png');
+    });
+
+    it('renders flex type using contents.hero.url as fallback', () => {
+      renderResult(makeLine([{
+        type: 'flex',
+        contents: {
+          hero: { url: 'http://flex-hero.png' },
+          contents: [],
+        },
+      }]));
+      expect(document.querySelector('.line-image')).toHaveAttribute('src', 'http://flex-hero.png');
+    });
+
+    it('returns null for flex type when no hero url is found', () => {
+      const result = getContentBody(makeLine([{ type: 'flex', contents: { contents: [] } }]));
+      const { container } = render(<>{result}</>);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders template type with columns', () => {
+      renderResult(makeLine([{
+        type: 'template',
+        template: {
+          columns: [
+            { imageUrl: 'http://col1.png', action: { label: 'Buy' } },
+            { imageUrl: 'http://col2.png', action: { label: 'Skip' } },
+          ],
+        },
+      }]));
+      const imgs = document.querySelectorAll('img');
+      expect(imgs).toHaveLength(2);
+      expect(imgs[0]).toHaveAttribute('src', 'http://col1.png');
+      expect(imgs[0]).toHaveAttribute('alt', 'Buy');
+    });
+
+    it('renders video type when originalContentUrl is set', () => {
+      renderResult(makeLine([{
+        type: 'video',
+        video: { originalContentUrl: 'http://line-video.mp4' },
+      }]));
+      expect(document.querySelector('.video-preview')).toBeInTheDocument();
+      expect(document.querySelector('source')).toHaveAttribute('src', 'http://line-video.mp4');
+    });
+
+    it('returns null for video type when originalContentUrl is empty', () => {
+      const result = getContentBody(makeLine([{ type: 'video', video: { originalContentUrl: '' } }]));
+      const { container } = render(<>{result}</>);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders image type using originalContentUrl', () => {
+      renderResult(makeLine([{ type: 'image', originalContentUrl: 'http://line-img.png' }]));
+      expect(document.querySelector('.line-image')).toHaveAttribute('src', 'http://line-img.png');
+    });
+
+    it('renders sticker using animatedStickerUrl', () => {
+      renderResult(makeLine([{ type: 'sticker', animatedStickerUrl: 'http://asticker.gif' }]));
+      expect(document.querySelector('.line-image')).toHaveAttribute('src', 'http://asticker.gif');
+    });
+
+    it('renders sticker using stickerUrl fallback', () => {
+      renderResult(makeLine([{ type: 'sticker', stickerUrl: 'http://sticker.png' }]));
+      expect(document.querySelector('.line-image')).toHaveAttribute('src', 'http://sticker.png');
+    });
+
+    it('renders imagemap using baseUrl + /1040', () => {
+      renderResult(makeLine([{ type: 'imagemap', baseUrl: 'http://base' }]));
+      expect(document.querySelector('.line-image')).toHaveAttribute('src', 'http://base/1040');
+    });
+
+    it('renders text message', () => {
+      renderResult(makeLine([{ type: 'text', text: 'Hello LINE' }]));
+      expect(screen.getByText('Hello LINE')).toBeInTheDocument();
+    });
+
+    it('returns null when message has no renderable content', () => {
+      const result = getContentBody(makeLine([{ type: 'text' }]));
+      const { container } = render(<>{result}</>);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('handles messageBody as an object (not string)', () => {
+      renderResult({
+        channel: 'LINE',
+        templateData: {
+          messageBody: { messages: [{ type: 'text', text: 'Obj LINE' }] },
+        },
+      });
+      expect(screen.getByText('Obj LINE')).toBeInTheDocument();
+    });
+
+    it('falls back to empty content on JSON parse error', () => {
+      renderResult({ channel: 'LINE', templateData: { messageBody: '{invalid' } });
+      // No messages → firstMessage is {} → returns null
+      const result = getContentBody({ channel: 'LINE', templateData: { messageBody: '{invalid' } });
+      const { container } = render(<>{result}</>);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders without crash when messageBody is absent', () => {
+      renderResult({ channel: 'LINE', templateData: {} });
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // default
+  // ---------------------------------------------------------------------------
+  describe('default (unknown channel)', () => {
+    it('renders messageBody for unknown channel', () => {
+      renderResult({ channel: 'TELEGRAM', templateData: { messageBody: 'Telegram msg' } });
+      expect(screen.getByText('Telegram msg')).toBeInTheDocument();
+    });
+
+    it('falls back to message when messageBody is absent', () => {
+      renderResult({ channel: 'TELEGRAM', templateData: { message: 'Alt msg' } });
+      expect(screen.getByText('Alt msg')).toBeInTheDocument();
+    });
+
+    it('falls back to item.channel when both are absent', () => {
+      renderResult({ channel: 'TELEGRAM', templateData: {} });
+      expect(screen.getByText('TELEGRAM')).toBeInTheDocument();
+    });
+
+    it('renders empty string when channel, messageBody, message are all absent', () => {
+      renderResult({ channel: undefined, templateData: {} });
+      const label = document.querySelector('[data-testid="cap-label"]');
+      expect(label).toHaveTextContent('');
+    });
+  });
+
+  // ---------------------------------------------------------------------------
+  // null / undefined item (optional chaining)
+  // ---------------------------------------------------------------------------
+  describe('null/undefined item safety', () => {
+    // item?.templateData and item?.channel?.toUpperCase() guard the early extraction,
+    // but the default branch still reads item.channel directly — so null/undefined throws.
+    it('throws for null item (default branch reads item.channel without ?.)', () => {
+      expect(() => getContentBody(null)).toThrow(TypeError);
+    });
+
+    it('throws for undefined item (default branch reads item.channel without ?.)', () => {
+      expect(() => getContentBody(undefined)).toThrow(TypeError);
+    });
+
+    it('does not crash when templateData is absent on item', () => {
+      const result = getContentBody({ channel: 'SMS' });
+      const { container } = render(<>{result}</>);
+      expect(container.querySelector('[data-testid="cap-label"]')).toHaveTextContent('');
+    });
+  });
+});