@capillarytech/creatives-library 9.0.29 → 9.0.31

package/v2Containers/Rcs/tests/CarouselCardMedia.test.js

@@ -0,0 +1,160 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CarouselCardMedia from '../components/CarouselCardMedia';
+import { RCS_MEDIA_TYPES } from '../constants';
+
+jest.mock('@capillarytech/cap-ui-library/CapHeading', () => {
+  const React = require('react');
+  return function CapHeading(props) {
+    return React.createElement('h4', { className: props?.className }, props?.children);
+  };
+});
+
+jest.mock('../../../v2Components/CapVideoUpload', () => {
+  const React = require('react');
+  return function MockCapVideoUpload(props) {
+    global.__lastVideoUploadProps = props;
+    return React.createElement('div', { 'data-testid': 'cap-video-upload' }, 'video-upload');
+  };
+});
+
+jest.mock('../../../v2Components/CapImageUpload', () => {
+  const React = require('react');
+  return function MockCapImageUpload(props) {
+    global.__lastImageUploadCalls = global.__lastImageUploadCalls || [];
+    global.__lastImageUploadCalls.push(props);
+    return React.createElement('div', { 'data-testid': 'cap-image-upload' }, 'image-upload');
+  };
+});
+
+const baseProps = {
+  cardIndex: 0,
+  card: { mediaType: RCS_MEDIA_TYPES.IMAGE, imageSrc: 'img.png' },
+  dimKey: 'SHORT_SMALL',
+  isFullMode: true,
+  isEditFlow: false,
+  rcsData: { some: 'data' },
+  uploadRcsImage: jest.fn(),
+  uploadRcsVideo: jest.fn(),
+  formatMessage: jest.fn((msg) => msg?.defaultMessage || msg?.id || String(msg)),
+  onFieldChange: jest.fn(),
+};
+
+describe('CarouselCardMedia', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    global.__lastVideoUploadProps = undefined;
+    global.__lastImageUploadCalls = [];
+  });
+
+  describe('IMAGE media type (default)', () => {
+    it('renders a single CapImageUpload and the media image heading', () => {
+      render(<CarouselCardMedia {...baseProps} />);
+      expect(screen.queryByTestId('cap-video-upload')).not.toBeInTheDocument();
+      expect(screen.getAllByTestId('cap-image-upload')).toHaveLength(1);
+    });
+
+    it('calls onFieldChange("imageSrc", val) via updateImageSrc', () => {
+      render(<CarouselCardMedia {...baseProps} />);
+      const props = global.__lastImageUploadCalls[0];
+      props.updateImageSrc('new-src.png');
+      expect(baseProps.onFieldChange).toHaveBeenCalledWith('imageSrc', 'new-src.png');
+    });
+
+    it('calls onFieldChange("imageSrc", "") via updateOnReUpload', () => {
+      render(<CarouselCardMedia {...baseProps} />);
+      const props = global.__lastImageUploadCalls[0];
+      props.updateOnReUpload();
+      expect(baseProps.onFieldChange).toHaveBeenCalledWith('imageSrc', '');
+    });
+
+    it('sets showReUploadButton = !isEditFlow && isFullMode (true) and disabled = isEditFlow || !isFullMode (false)', () => {
+      render(<CarouselCardMedia {...baseProps} isEditFlow={false} isFullMode />);
+      const props = global.__lastImageUploadCalls[0];
+      expect(props.showReUploadButton).toBe(true);
+      expect(props.disabled).toBe(false);
+    });
+
+    it('sets showReUploadButton to false and disabled to true when isEditFlow is true', () => {
+      render(<CarouselCardMedia {...baseProps} isEditFlow isFullMode />);
+      const props = global.__lastImageUploadCalls[0];
+      expect(props.showReUploadButton).toBe(false);
+      expect(props.disabled).toBe(true);
+    });
+
+    it('sets showReUploadButton to false and disabled to true when isFullMode is false', () => {
+      render(<CarouselCardMedia {...baseProps} isEditFlow={false} isFullMode={false} />);
+      const props = global.__lastImageUploadCalls[0];
+      expect(props.showReUploadButton).toBe(false);
+      expect(props.disabled).toBe(true);
+    });
+
+    it('passes imageSrc, index and dimension props derived from card/cardIndex/dimKey', () => {
+      render(<CarouselCardMedia {...baseProps} cardIndex={2} dimKey="MEDIUM_MEDIUM" />);
+      const props = global.__lastImageUploadCalls[0];
+      expect(props.imageSrc).toBe('img.png');
+      expect(props.channel).toBe('RCS');
+      expect(props.imgSize).toBeDefined();
+    });
+  });
+
+  describe('VIDEO media type', () => {
+    const videoProps = {
+      ...baseProps,
+      card: {
+        mediaType: RCS_MEDIA_TYPES.VIDEO,
+        videoAsset: { url: 'video.mp4' },
+        thumbnailSrc: 'thumb.png',
+      },
+    };
+
+    it('renders CapVideoUpload and a thumbnail CapImageUpload', () => {
+      render(<CarouselCardMedia {...videoProps} />);
+      expect(screen.getByTestId('cap-video-upload')).toBeInTheDocument();
+      expect(screen.getAllByTestId('cap-image-upload')).toHaveLength(1);
+    });
+
+    it('calls onFieldChange("videoAsset", val) via onVideoUploadUpdateAssestList', () => {
+      render(<CarouselCardMedia {...videoProps} />);
+      const props = global.__lastVideoUploadProps;
+      props.onVideoUploadUpdateAssestList(null, { url: 'updated.mp4' });
+      expect(videoProps.onFieldChange).toHaveBeenCalledWith('videoAsset', { url: 'updated.mp4' });
+    });
+
+    it('calls onFieldChange("thumbnailSrc", val) via updateImageSrc on thumbnail upload', () => {
+      render(<CarouselCardMedia {...videoProps} />);
+      const props = global.__lastImageUploadCalls[0];
+      props.updateImageSrc('new-thumb.png');
+      expect(videoProps.onFieldChange).toHaveBeenCalledWith('thumbnailSrc', 'new-thumb.png');
+    });
+
+    it('calls onFieldChange("thumbnailSrc", "") via updateOnReUpload on thumbnail upload', () => {
+      render(<CarouselCardMedia {...videoProps} />);
+      const props = global.__lastImageUploadCalls[0];
+      props.updateOnReUpload();
+      expect(videoProps.onFieldChange).toHaveBeenCalledWith('thumbnailSrc', '');
+    });
+
+    it('passes showReUploadButton/disabled to video and thumbnail uploads based on isEditFlow/isFullMode', () => {
+      render(<CarouselCardMedia {...videoProps} isEditFlow={false} isFullMode />);
+      expect(global.__lastVideoUploadProps.showReUploadButton).toBe(true);
+      const thumbProps = global.__lastImageUploadCalls[0];
+      expect(thumbProps.showReUploadButton).toBe(true);
+      expect(thumbProps.disabled).toBe(false);
+    });
+
+    it('defaults videoAsset to {} when card.videoAsset is absent', () => {
+      render(
+        <CarouselCardMedia
+          {...videoProps}
+          card={{ mediaType: RCS_MEDIA_TYPES.VIDEO }}
+        />,
+      );
+      expect(global.__lastVideoUploadProps.uploadedAssetList).toEqual({});
+    });
+  });
+});

package/v2Containers/Rcs/tests/CarouselCharacterCount.test.js

@@ -0,0 +1,50 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CarouselCharacterCount from '../components/CarouselCharacterCount';
+
+jest.mock('@capillarytech/cap-ui-library/CapLabel', () => {
+  const React = require('react');
+  return function CapLabel(props) {
+    return React.createElement('div', { className: props?.className, 'data-testid': 'cap-label' }, props?.children);
+  };
+});
+
+describe('CarouselCharacterCount', () => {
+  it('renders formatMessage output with currentLength/maxLength and default className', () => {
+    const formatMessage = jest.fn((msg, vals) => `${msg.id}:${JSON.stringify(vals)}`);
+    render(
+      <CarouselCharacterCount
+        formatMessage={formatMessage}
+        currentLength={12}
+        maxLength={100}
+      />,
+    );
+    expect(formatMessage).toHaveBeenCalledWith(
+      expect.objectContaining({ id: expect.any(String) }),
+      { currentLength: 12, maxLength: 100 },
+    );
+    const label = screen.getByTestId('cap-label');
+    expect(label).toHaveClass('rcs-character-count');
+    expect(label.textContent).toContain('12');
+    expect(label.textContent).toContain('100');
+  });
+
+  it('applies an overridden className when provided', () => {
+    const formatMessage = jest.fn(() => 'Characters count: 5/50');
+    render(
+      <CarouselCharacterCount
+        formatMessage={formatMessage}
+        currentLength={5}
+        maxLength={50}
+        className="custom-count-class"
+      />,
+    );
+    const label = screen.getByTestId('cap-label');
+    expect(label).toHaveClass('custom-count-class');
+    expect(label).not.toHaveClass('rcs-character-count');
+  });
+});

package/v2Containers/Rcs/tests/CarouselDimensionSelection.test.js

@@ -0,0 +1,119 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CarouselDimensionSelection from '../components/CarouselDimensionSelection';
+
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => {
+  const React = require('react');
+  return function CapRow(props) {
+    return React.createElement('div', { className: props?.className, 'data-testid': 'cap-row' }, props?.children);
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapColumn', () => {
+  const React = require('react');
+  return function CapColumn(props) {
+    return React.createElement('div', { 'data-testid': 'cap-column' }, props?.children);
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapHeading', () => {
+  const React = require('react');
+  return function CapHeading(props) {
+    return React.createElement(props?.type === 'h5' ? 'h5' : 'h4', { className: props?.className }, props?.children);
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapLabel', () => {
+  const React = require('react');
+  return function CapLabel(props) {
+    return React.createElement('div', { className: props?.className, 'data-testid': 'cap-label' }, props?.children);
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapSelect', () => {
+  const React = require('react');
+  return function CapSelect(props) {
+    return React.createElement('select', {
+      'data-testid': props?.id,
+      value: props?.value,
+      disabled: props?.disabled,
+      onChange: (e) => props?.onChange?.(e.target.value),
+    }, (props?.options || []).map((opt) => (
+      React.createElement('option', { key: opt.value, value: opt.value }, opt.label)
+    )));
+  };
+});
+
+const baseProps = {
+  isEditFlow: false,
+  isFullMode: true,
+  selectedCarouselHeight: 'SHORT',
+  selectedCarouselWidth: 'SMALL',
+  selectedCarousel: '',
+  onHeightChange: jest.fn(),
+  onWidthChange: jest.fn(),
+};
+
+describe('CarouselDimensionSelection', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders CapSelect controls for height and width when isEditFlow is false', () => {
+    render(<CarouselDimensionSelection {...baseProps} />);
+    expect(screen.getByTestId('rcs-carousel-height-select')).toBeInTheDocument();
+    expect(screen.getByTestId('rcs-carousel-width-select')).toBeInTheDocument();
+  });
+
+  it('fires onHeightChange and onWidthChange when selects change', () => {
+    render(<CarouselDimensionSelection {...baseProps} />);
+    fireEvent.change(screen.getByTestId('rcs-carousel-height-select'), { target: { value: 'MEDIUM' } });
+    expect(baseProps.onHeightChange).toHaveBeenCalledWith('MEDIUM');
+    fireEvent.change(screen.getByTestId('rcs-carousel-width-select'), { target: { value: 'MEDIUM' } });
+    expect(baseProps.onWidthChange).toHaveBeenCalledWith('MEDIUM');
+  });
+
+  it('disables the CapSelect controls when isFullMode is false', () => {
+    render(<CarouselDimensionSelection {...baseProps} isFullMode={false} />);
+    expect(screen.getByTestId('rcs-carousel-height-select')).toBeDisabled();
+    expect(screen.getByTestId('rcs-carousel-width-select')).toBeDisabled();
+  });
+
+  it('does not disable the CapSelect controls when isFullMode is true', () => {
+    render(<CarouselDimensionSelection {...baseProps} isFullMode />);
+    expect(screen.getByTestId('rcs-carousel-height-select')).not.toBeDisabled();
+    expect(screen.getByTestId('rcs-carousel-width-select')).not.toBeDisabled();
+  });
+
+  it('renders read-only labels with matched option label when isEditFlow is true', () => {
+    render(<CarouselDimensionSelection {...baseProps} isEditFlow />);
+    expect(screen.queryByTestId('rcs-carousel-height-select')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('rcs-carousel-width-select')).not.toBeInTheDocument();
+    expect(screen.getByText('Short')).toBeInTheDocument();
+    expect(screen.getByText('Small')).toBeInTheDocument();
+  });
+
+  it('renders "-" fallback in read-only mode when no matching height/width option is found', () => {
+    render(
+      <CarouselDimensionSelection
+        {...baseProps}
+        isEditFlow
+        selectedCarouselHeight="UNKNOWN"
+        selectedCarouselWidth="UNKNOWN"
+      />,
+    );
+    const dashes = screen.getAllByText('-');
+    expect(dashes.length).toBe(2);
+  });
+
+  it('shows the "Selected: ..." label when selectedCarousel is truthy', () => {
+    render(<CarouselDimensionSelection {...baseProps} selectedCarousel="SHORT_SMALL" />);
+    expect(screen.getByText(/Selected:/)).toBeInTheDocument();
+    expect(screen.getByText(/SHORT_SMALL/)).toBeInTheDocument();
+  });
+
+  it('hides the "Selected: ..." label when selectedCarousel is falsy', () => {
+    render(<CarouselDimensionSelection {...baseProps} selectedCarousel="" />);
+    expect(screen.queryByText(/Selected:/)).not.toBeInTheDocument();
+  });
+});