@capillarytech/creatives-library 9.0.28 → 9.0.29-alpha.1

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

@@ -0,0 +1,464 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CarouselCard from '../components/CarouselCard';
+
+jest.mock('@capillarytech/cap-ui-library/CapCard', () => {
+  const React = require('react');
+  return function MockCapCard(props) {
+    return React.createElement(
+      'div',
+      { 'data-testid': 'cap-card', className: props?.className },
+      React.createElement('div', { 'data-testid': 'cap-card-title' }, props?.title),
+      React.createElement('div', { 'data-testid': 'cap-card-extra' }, props?.extra),
+      props?.children,
+    );
+  };
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapTooltip', () => {
+  const React = require('react');
+  return function MockCapTooltip(props) {
+    return React.createElement(
+      'div',
+      { 'data-testid': 'cap-tooltip', 'data-title': typeof props?.title === 'string' ? props.title : 'complex' },
+      props?.children,
+    );
+  };
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapButton', () => {
+  const React = require('react');
+  return function MockCapButton(props) {
+    return React.createElement('button', {
+      type: 'button',
+      'data-testid': props?.['data-testid'] || 'cap-button',
+      className: props?.className,
+      onClick: props?.onClick,
+      disabled: props?.disabled,
+      'aria-label': props?.['aria-label'],
+    }, props?.children);
+  };
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapIcon', () => {
+  const React = require('react');
+  return function MockCapIcon(props) {
+    return React.createElement('span', { 'data-testid': 'cap-icon', 'data-type': props?.type });
+  };
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => {
+  const React = require('react');
+  return function MockCapRow(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 MockCapColumn(props) {
+    return React.createElement('div', { className: props?.className, 'data-testid': 'cap-column' }, props?.children);
+  };
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapHeading', () => {
+  const React = require('react');
+  return function MockCapHeading(props) {
+    return React.createElement(props?.type === 'h5' ? 'h5' : 'h4', { className: props?.className }, props?.children);
+  };
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapRadioGroup', () => {
+  const React = require('react');
+  return function MockCapRadioGroup(props) {
+    return React.createElement(
+      'div',
+      { 'data-testid': 'cap-radio-group', id: props?.id, className: props?.className },
+      (props?.options || []).map((option) => React.createElement('label', { key: option.value },
+        React.createElement('input', {
+          type: 'radio',
+          'data-testid': `radio-${option.value}`,
+          checked: props?.value === option.value,
+          disabled: props?.disabled,
+          onChange: () => props?.onChange?.({ target: { value: option.value } }),
+        }),
+        option.label)),
+    );
+  };
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapHeader', () => {
+  const React = require('react');
+  return function MockCapHeader(props) {
+    return React.createElement(
+      'div',
+      { className: props?.className, 'data-testid': 'cap-header' },
+      React.createElement('div', { 'data-testid': 'cap-header-title' }, props?.title),
+      React.createElement('div', { 'data-testid': 'cap-header-suffix' }, props?.suffix),
+    );
+  };
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapInput', () => {
+  const React = require('react');
+  function MockCapInput(props) {
+    return React.createElement('input', {
+      'data-testid': 'rcs-title-input',
+      value: props?.value,
+      placeholder: props?.placeholder,
+      onChange: props?.onChange,
+      disabled: props?.disabled,
+      'data-error': props?.errorMessage || '',
+    });
+  }
+  MockCapInput.TextArea = function MockTextArea(props) {
+    return React.createElement(
+      'div',
+      null,
+      React.createElement('textarea', {
+        'data-testid': 'rcs-desc-textarea',
+        value: props?.value,
+        placeholder: props?.placeholder,
+        onChange: props?.onChange,
+        disabled: props?.disabled,
+      }),
+      React.createElement('div', { 'data-testid': 'rcs-desc-error' }, props?.errorMessage),
+    );
+  };
+  return MockCapInput;
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapError', () => {
+  const React = require('react');
+  return function MockCapError(props) {
+    return React.createElement('div', { className: props?.className, 'data-testid': 'cap-error' }, props?.children);
+  };
+});
+
+jest.mock('@capillarytech/cap-ui-library/CapDivider', () => {
+  const React = require('react');
+  return function MockCapDivider(props) {
+    return React.createElement('hr', { className: props?.className, 'data-testid': 'cap-divider' });
+  };
+});
+
+jest.mock('../../TagList', () => {
+  const React = require('react');
+  return function MockTagList(props) {
+    global.__lastTagListProps = props;
+    return React.createElement('div', {
+      'data-testid': 'tag-list',
+      'data-label': props?.label,
+      'data-location': JSON.stringify(props?.location || {}),
+      'data-injected-tags': JSON.stringify(props?.injectedTags),
+    });
+  };
+});
+
+jest.mock('../components/CarouselCardMedia', () => {
+  const React = require('react');
+  return function MockCarouselCardMedia(props) {
+    global.__lastMediaProps = props;
+    return React.createElement('div', { 'data-testid': 'carousel-card-media' }, 'media');
+  };
+});
+
+jest.mock('../components/CarouselCardButtons', () => {
+  const React = require('react');
+  return function MockCarouselCardButtons(props) {
+    global.__lastButtonsProps = props;
+    return React.createElement('div', { 'data-testid': 'carousel-card-buttons' }, 'buttons');
+  };
+});
+
+jest.mock('../components/CarouselCharacterCount', () => {
+  const React = require('react');
+  return function MockCarouselCharacterCount(props) {
+    global.__characterCountCalls = global.__characterCountCalls || [];
+    global.__characterCountCalls.push(props);
+    return React.createElement('div', { 'data-testid': 'character-count' }, `${props?.currentLength}/${props?.maxLength}`);
+  };
+});
+
+const mediaRadioOptions = [
+  { value: 'IMAGE', label: 'Image' },
+  { value: 'VIDEO', label: 'Video' },
+];
+
+const baseProps = {
+  cardIndex: 0,
+  card: { mediaType: 'IMAGE', title: 'Hello', description: 'World' },
+  carouselLength: 2,
+  isEditFlow: false,
+  isFullMode: true,
+  mediaRadioOptions,
+  cardError: {},
+  location: { pathname: '/rcs' },
+  tagsForPicker: [],
+  injectedTags: {},
+  selectedOfferDetails: [],
+  // Plain function (not jest.fn) — this repo's jest config sets `resetMocks: true`,
+  // which strips a jest.fn's implementation before every test, so a shared
+  // module-level jest.fn(impl) would silently return undefined after the first test.
+  formatMessage: (msg) => msg?.defaultMessage || msg?.id || String(msg),
+  titleMaxLength: 100,
+  descriptionMaxLength: 500,
+  titleCharCount: 5,
+  descriptionCharCount: 5,
+  dimKey: 'SHORT_SMALL',
+  rcsData: {},
+  uploadRcsImage: jest.fn(),
+  uploadRcsVideo: jest.fn(),
+  hostName: 'host-1',
+  onDelete: jest.fn(),
+  onMediaTypeChange: jest.fn(),
+  onTitleChange: jest.fn(),
+  onDescriptionChange: jest.fn(),
+  onTitleAddVar: jest.fn(),
+  onDescriptionAddVar: jest.fn(),
+  onTagSelect: jest.fn(),
+  onContextChange: jest.fn(),
+  renderEditMessage: (val) => <div data-testid="render-edit-message">{val}</div>,
+  onFieldChange: jest.fn(),
+  onSuggestionsChange: jest.fn(),
+};
+
+describe('CarouselCard', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    global.__lastMediaProps = undefined;
+    global.__lastButtonsProps = undefined;
+    global.__lastTagListProps = undefined;
+    global.__characterCountCalls = [];
+  });
+
+  it('renders the card title based on cardIndex', () => {
+    render(<CarouselCard {...baseProps} cardIndex={3} />);
+    expect(screen.getByTestId('cap-card-title').textContent).toBe('Card 4');
+  });
+
+  describe('delete button (extra) — isEditFlow branch', () => {
+    it('renders no extra content when isEditFlow is true', () => {
+      render(<CarouselCard {...baseProps} isEditFlow />);
+      expect(screen.getByTestId('cap-card-extra').textContent).toBe('');
+    });
+
+    it('renders a disabled delete button wrapped in a tooltip when carouselLength === 1', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} carouselLength={1} />);
+      expect(screen.getByTestId('cap-tooltip')).toBeInTheDocument();
+      const deleteBtn = screen.getByRole('button', { name: /At least 1 card/i });
+      expect(deleteBtn).toBeDisabled();
+      fireEvent.click(deleteBtn);
+      expect(baseProps.onDelete).not.toHaveBeenCalled();
+    });
+
+    it('renders an enabled delete button (no tooltip) when carouselLength > 1, and calls onDelete on click', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} carouselLength={2} />);
+      expect(screen.queryByTestId('cap-tooltip')).not.toBeInTheDocument();
+      const deleteBtn = screen.getByRole('button', { name: /delete/i });
+      expect(deleteBtn).not.toBeDisabled();
+      fireEvent.click(deleteBtn);
+      expect(baseProps.onDelete).toHaveBeenCalled();
+    });
+  });
+
+  describe('media type selection — isEditFlow branch', () => {
+    it('shows a read-only media type label matching mediaRadioOptions when isEditFlow is true', () => {
+      render(<CarouselCard {...baseProps} isEditFlow card={{ mediaType: 'VIDEO' }} />);
+      expect(screen.getByText('Video')).toBeInTheDocument();
+      expect(screen.queryByTestId('cap-radio-group')).not.toBeInTheDocument();
+    });
+
+    it('shows "-" fallback in read-only media label when no option matches', () => {
+      render(<CarouselCard {...baseProps} isEditFlow card={{ mediaType: 'UNKNOWN' }} />);
+      expect(screen.getByText('-')).toBeInTheDocument();
+    });
+
+    it('shows a CapRadioGroup when isEditFlow is false, disabled by !isFullMode', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} isFullMode={false} />);
+      const radioGroup = screen.getByTestId('cap-radio-group');
+      expect(radioGroup).toBeInTheDocument();
+      expect(screen.getByTestId('radio-IMAGE')).toBeDisabled();
+    });
+
+    it('enables the CapRadioGroup when isFullMode is true and fires onMediaTypeChange on change', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} isFullMode />);
+      expect(screen.getByTestId('radio-IMAGE')).not.toBeDisabled();
+      fireEvent.click(screen.getByTestId('radio-VIDEO'));
+      expect(baseProps.onMediaTypeChange).toHaveBeenCalledWith('VIDEO');
+    });
+  });
+
+  it('forwards media props to CarouselCardMedia', () => {
+    render(<CarouselCard {...baseProps} cardIndex={2} dimKey="MEDIUM_MEDIUM" />);
+    expect(screen.getByTestId('carousel-card-media')).toBeInTheDocument();
+    expect(global.__lastMediaProps.cardIndex).toBe(2);
+    expect(global.__lastMediaProps.dimKey).toBe('MEDIUM_MEDIUM');
+    expect(global.__lastMediaProps.card).toEqual(baseProps.card);
+  });
+
+  describe('title row — (isEditFlow || !isFullMode) branch', () => {
+    it('renders TagList suffix and renderEditMessage content when isEditFlow is true', () => {
+      render(<CarouselCard {...baseProps} isEditFlow />);
+      const tagLists = screen.getAllByTestId('tag-list');
+      expect(tagLists.length).toBeGreaterThan(0);
+      const editMessages = screen.getAllByTestId('render-edit-message');
+      expect(editMessages[0].textContent).toBe('Hello');
+    });
+
+    it('renders TagList suffix and renderEditMessage content when isFullMode is false (even if isEditFlow is false)', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} isFullMode={false} />);
+      expect(screen.getAllByTestId('tag-list').length).toBeGreaterThan(0);
+      expect(screen.getAllByTestId('render-edit-message')[0].textContent).toBe('Hello');
+      expect(screen.queryByTestId('rcs-title-input')).not.toBeInTheDocument();
+    });
+
+    it('renders add-var CapButton and CapInput when isEditFlow is false and isFullMode is true', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} isFullMode />);
+      expect(screen.queryByTestId('tag-list')).not.toBeInTheDocument();
+      const addVarBtn = screen.getByTestId('rcs-carousel-title-add-var-0');
+      expect(addVarBtn).toBeInTheDocument();
+      expect(screen.getByTestId('rcs-title-input')).toBeInTheDocument();
+    });
+
+    it('calls onTitleAddVar when add-var button is clicked, and it is enabled when cardError.title is absent', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} isFullMode cardError={{}} />);
+      const addVarBtn = screen.getByTestId('rcs-carousel-title-add-var-0');
+      expect(addVarBtn).not.toBeDisabled();
+      fireEvent.click(addVarBtn);
+      expect(baseProps.onTitleAddVar).toHaveBeenCalled();
+    });
+
+    it('disables the title add-var button when cardError.title is present', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} isFullMode cardError={{ title: 'Too long' }} />);
+      expect(screen.getByTestId('rcs-carousel-title-add-var-0')).toBeDisabled();
+    });
+
+    it('passes cardError.title as errorMessage and fires onTitleChange on the CapInput', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} isFullMode cardError={{ title: 'Bad title' }} />);
+      const input = screen.getByTestId('rcs-title-input');
+      expect(input.getAttribute('data-error')).toBe('Bad title');
+      fireEvent.change(input, { target: { value: 'New title' } });
+      expect(baseProps.onTitleChange).toHaveBeenCalled();
+    });
+
+    it('defaults card.title to empty string when absent', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} isFullMode card={{ mediaType: 'IMAGE' }} />);
+      expect(screen.getByTestId('rcs-title-input').value).toBe('');
+    });
+  });
+
+  describe('title character count row — !isEditFlow branch', () => {
+    it('renders CarouselCharacterCount for title when isEditFlow is false', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} titleCharCount={12} titleMaxLength={50} />);
+      const call = global.__characterCountCalls.find((c) => c.currentLength === 12 && c.maxLength === 50);
+      expect(call).toBeTruthy();
+    });
+
+    it('does not render the title CarouselCharacterCount when isEditFlow is true', () => {
+      render(<CarouselCard {...baseProps} isEditFlow />);
+      // Only description would also be hidden; assert no character-count elements rendered at all
+      expect(screen.queryByTestId('character-count')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('description row — (isEditFlow || !isFullMode) branch', () => {
+    it('renders TagList suffix and renderEditMessage content for description when isEditFlow is true', () => {
+      render(<CarouselCard {...baseProps} isEditFlow />);
+      const editMessages = screen.getAllByTestId('render-edit-message');
+      expect(editMessages[1].textContent).toBe('World');
+    });
+
+    it('renders add-var CapButton and TextArea for description when isEditFlow is false and isFullMode is true', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} isFullMode />);
+      const addVarBtn = screen.getByTestId('rcs-carousel-desc-add-var-0');
+      expect(addVarBtn).toBeInTheDocument();
+      expect(screen.getByTestId('rcs-desc-textarea')).toBeInTheDocument();
+    });
+
+    it('calls onDescriptionAddVar and enables the button when cardError.description is absent', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} isFullMode cardError={{}} />);
+      const addVarBtn = screen.getByTestId('rcs-carousel-desc-add-var-0');
+      expect(addVarBtn).not.toBeDisabled();
+      fireEvent.click(addVarBtn);
+      expect(baseProps.onDescriptionAddVar).toHaveBeenCalled();
+    });
+
+    it('disables the description add-var button when cardError.description is present', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} isFullMode cardError={{ description: 'Too long' }} />);
+      expect(screen.getByTestId('rcs-carousel-desc-add-var-0')).toBeDisabled();
+    });
+
+    it('renders a CapError with cardError.description when present, and fires onDescriptionChange', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} isFullMode cardError={{ description: 'Desc too long' }} />);
+      expect(screen.getByTestId('cap-error').textContent).toBe('Desc too long');
+      const textarea = screen.getByTestId('rcs-desc-textarea');
+      fireEvent.change(textarea, { target: { value: 'New desc' } });
+      expect(baseProps.onDescriptionChange).toHaveBeenCalled();
+    });
+
+    it('does not render a CapError when cardError.description is absent', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} isFullMode cardError={{}} />);
+      expect(screen.queryByTestId('cap-error')).not.toBeInTheDocument();
+    });
+
+    it('defaults card.description to empty string when absent', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} isFullMode card={{ mediaType: 'IMAGE' }} />);
+      expect(screen.getByTestId('rcs-desc-textarea').value).toBe('');
+    });
+  });
+
+  describe('description character count row — !isEditFlow branch', () => {
+    it('renders CarouselCharacterCount for description when isEditFlow is false', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} descriptionCharCount={22} descriptionMaxLength={500} />);
+      const call = global.__characterCountCalls.find((c) => c.currentLength === 22 && c.maxLength === 500);
+      expect(call).toBeTruthy();
+    });
+
+    it('renders both title and description character counts when isEditFlow is false', () => {
+      render(<CarouselCard {...baseProps} isEditFlow={false} />);
+      expect(screen.getAllByTestId('character-count')).toHaveLength(2);
+    });
+  });
+
+  it('renders a CapDivider before the buttons section', () => {
+    render(<CarouselCard {...baseProps} />);
+    expect(screen.getByTestId('cap-divider')).toBeInTheDocument();
+  });
+
+  it('forwards suggestions and related props to CarouselCardButtons', () => {
+    render(
+      <CarouselCard
+        {...baseProps}
+        cardIndex={1}
+        card={{ ...baseProps.card, suggestions: [{ index: 0, text: 'A' }] }}
+      />,
+    );
+    expect(screen.getByTestId('carousel-card-buttons')).toBeInTheDocument();
+    expect(global.__lastButtonsProps.cardIndex).toBe(1);
+    expect(global.__lastButtonsProps.suggestions).toEqual([{ index: 0, text: 'A' }]);
+    expect(global.__lastButtonsProps.hostName).toBe('host-1');
+  });
+
+  it('defaults suggestions passed to CarouselCardButtons to [] when card.suggestions is absent', () => {
+    render(<CarouselCard {...baseProps} card={{ mediaType: 'IMAGE' }} />);
+    expect(global.__lastButtonsProps.suggestions).toEqual([]);
+  });
+
+  it('defaults injectedTags to {} for the title/description TagList when injectedTags is explicitly null (bypassing defaultProps, hitting the `|| {}` fallback)', () => {
+    render(<CarouselCard {...baseProps} isEditFlow injectedTags={null} />);
+    const tagLists = screen.getAllByTestId('tag-list');
+    tagLists.forEach((el) => {
+      expect(el.getAttribute('data-injected-tags')).toBe('{}');
+    });
+  });
+
+  it('invokes the default no-op onContextChange without throwing when onContextChange is not supplied', () => {
+    render(<CarouselCard {...baseProps} isEditFlow onContextChange={undefined} />);
+    expect(() => global.__lastTagListProps.onContextChange()).not.toThrow();
+  });
+});

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

@@ -0,0 +1,211 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CarouselCardButtons from '../components/CarouselCardButtons';
+import { MAX_BUTTONS } from '../constants';
+
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => {
+  const React = require('react');
+  return function CapRow(props) {
+    return React.createElement('div', { 'data-testid': 'cap-row' }, props?.children);
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapHeader', () => {
+  const React = require('react');
+  return function CapHeader(props) {
+    return React.createElement('div', { 'data-testid': 'cap-header' }, props?.title, props?.description);
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapHeading', () => {
+  const React = require('react');
+  return function CapHeading(props) {
+    return React.createElement('h4', null, props?.children);
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapLabel', () => {
+  const React = require('react');
+  return function CapLabel(props) {
+    return React.createElement('div', { 'data-testid': 'cap-label' }, props?.children);
+  };
+});
+
+jest.mock('../../../v2Components/CapActionButton', () => {
+  const React = require('react');
+  return function MockCapActionButton(props) {
+    global.__lastActionButtonProps = props;
+    return React.createElement('div', { 'data-testid': 'cap-action-button' }, 'action-button');
+  };
+});
+
+const baseProps = {
+  cardIndex: 1,
+  suggestions: [
+    { index: 0, text: 'A' },
+    { index: 1, text: 'B' },
+  ],
+  isEditFlow: false,
+  isFullMode: true,
+  hostName: 'host-1',
+  formatMessage: jest.fn((msg) => msg?.defaultMessage || msg?.id || String(msg)),
+  onSuggestionsChange: jest.fn(),
+};
+
+describe('CarouselCardButtons', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    global.__lastActionButtonProps = undefined;
+  });
+
+  it('renders the CapHeader with the buttons label', () => {
+    render(<CarouselCardButtons {...baseProps} />);
+    expect(screen.getByTestId('cap-header')).toBeInTheDocument();
+  });
+
+  it('renders btnDesc label when isEditFlow is false', () => {
+    render(<CarouselCardButtons {...baseProps} isEditFlow={false} />);
+    expect(screen.getByTestId('cap-label')).toBeInTheDocument();
+  });
+
+  it('hides btnDesc label when isEditFlow is true', () => {
+    render(<CarouselCardButtons {...baseProps} isEditFlow />);
+    expect(screen.queryByTestId('cap-label')).not.toBeInTheDocument();
+  });
+
+  it('passes suggestions, isEditFlow, isFullMode, host and maxButtons to CapActionButton', () => {
+    render(<CarouselCardButtons {...baseProps} />);
+    const props = global.__lastActionButtonProps;
+    expect(props.suggestions).toEqual(baseProps.suggestions);
+    expect(props.isEditFlow).toBe(false);
+    expect(props.isFullMode).toBe(true);
+    expect(props.host).toBe('host-1');
+    expect(props.maxButtons).toBe(MAX_BUTTONS);
+  });
+
+  it('defaults suggestions to [] when suggestions prop is not provided', () => {
+    render(<CarouselCardButtons {...baseProps} suggestions={undefined} />);
+    const props = global.__lastActionButtonProps;
+    expect(props.suggestions).toEqual([]);
+  });
+
+  it('defaults suggestions to [] when suggestions is explicitly null (bypassing defaultProps, hitting the `|| []` fallback)', () => {
+    render(<CarouselCardButtons {...baseProps} suggestions={null} />);
+    const props = global.__lastActionButtonProps;
+    expect(props.suggestions).toEqual([]);
+  });
+
+  describe('minSavedSuggestions / hideDeleteSuggestionIndexes by cardIndex', () => {
+    it('sets minSavedSuggestions=1 and hideDeleteSuggestionIndexes=[0] when cardIndex === 0', () => {
+      render(<CarouselCardButtons {...baseProps} cardIndex={0} />);
+      const props = global.__lastActionButtonProps;
+      expect(props.minSavedSuggestions).toBe(1);
+      expect(props.hideDeleteSuggestionIndexes).toEqual([0]);
+    });
+
+    it('sets minSavedSuggestions=0 and hideDeleteSuggestionIndexes=[] when cardIndex !== 0', () => {
+      render(<CarouselCardButtons {...baseProps} cardIndex={2} />);
+      const props = global.__lastActionButtonProps;
+      expect(props.minSavedSuggestions).toBe(0);
+      expect(props.hideDeleteSuggestionIndexes).toEqual([]);
+    });
+  });
+
+  describe('updateButtonChange handler', () => {
+    it('calls onSuggestionsChange(data) directly when btnIndex === MAX_BUTTONS', () => {
+      render(<CarouselCardButtons {...baseProps} />);
+      const { updateButtonChange } = global.__lastActionButtonProps;
+      const data = { foo: 'bar' };
+      updateButtonChange(data, MAX_BUTTONS);
+      expect(baseProps.onSuggestionsChange).toHaveBeenCalledWith(data);
+    });
+
+    it('updates the suggestion at btnIndex and calls onSuggestionsChange with the full updated array for a normal index', () => {
+      render(<CarouselCardButtons {...baseProps} />);
+      const { updateButtonChange } = global.__lastActionButtonProps;
+      const data = { index: 0, text: 'Updated' };
+      updateButtonChange(data, 0);
+      expect(baseProps.onSuggestionsChange).toHaveBeenCalledWith([
+        { index: 0, text: 'Updated' },
+        { index: 1, text: 'B' },
+      ]);
+    });
+  });
+
+  describe('deleteButtonHandler', () => {
+    it('is a no-op when cardIndex === 0 && btnIndex === 0', () => {
+      render(<CarouselCardButtons {...baseProps} cardIndex={0} />);
+      const { deleteButtonHandler } = global.__lastActionButtonProps;
+      deleteButtonHandler(0);
+      expect(baseProps.onSuggestionsChange).not.toHaveBeenCalled();
+    });
+
+    it('is a no-op when cardIndex === 0 and the target suggestion isSaved with savedCount <= 1', () => {
+      const suggestions = [
+        { index: 0, isSaved: false },
+        { index: 1, isSaved: true },
+      ];
+      render(<CarouselCardButtons {...baseProps} cardIndex={0} suggestions={suggestions} />);
+      const { deleteButtonHandler } = global.__lastActionButtonProps;
+      deleteButtonHandler(1);
+      expect(baseProps.onSuggestionsChange).not.toHaveBeenCalled();
+    });
+
+    it('deletes and reindexes suggestions on the normal delete path (cardIndex !== 0)', () => {
+      const suggestions = [
+        { index: 0, text: 'A' },
+        { index: 1, text: 'B' },
+        { index: 2, text: 'C' },
+      ];
+      render(<CarouselCardButtons {...baseProps} cardIndex={2} suggestions={suggestions} />);
+      const { deleteButtonHandler } = global.__lastActionButtonProps;
+      deleteButtonHandler(1);
+      expect(baseProps.onSuggestionsChange).toHaveBeenCalledWith([
+        { index: 0, text: 'A' },
+        { index: 1, text: 'C' },
+      ]);
+    });
+
+    it('deletes on the normal path even for cardIndex === 0 when target is not isSaved (savedCount check not blocking)', () => {
+      const suggestions = [
+        { index: 0, isSaved: true },
+        { index: 1, isSaved: false },
+        { index: 2, isSaved: true },
+      ];
+      render(<CarouselCardButtons {...baseProps} cardIndex={0} suggestions={suggestions} />);
+      const { deleteButtonHandler } = global.__lastActionButtonProps;
+      deleteButtonHandler(1);
+      expect(baseProps.onSuggestionsChange).toHaveBeenCalledWith([
+        { index: 0, isSaved: true },
+        { index: 1, isSaved: true },
+      ]);
+    });
+
+    it('deletes on cardIndex === 0 when target isSaved but savedCount > 1 (not blocked)', () => {
+      const suggestions = [
+        { index: 0, isSaved: true },
+        { index: 1, isSaved: true },
+        { index: 2, isSaved: true },
+      ];
+      render(<CarouselCardButtons {...baseProps} cardIndex={0} suggestions={suggestions} />);
+      const { deleteButtonHandler } = global.__lastActionButtonProps;
+      deleteButtonHandler(1);
+      expect(baseProps.onSuggestionsChange).toHaveBeenCalledWith([
+        { index: 0, isSaved: true },
+        { index: 1, isSaved: true },
+      ]);
+    });
+
+    it('handles a missing target (find returns undefined) on cardIndex === 0 without throwing', () => {
+      const suggestions = [
+        { index: 0, isSaved: true },
+        { index: 2, isSaved: true },
+      ];
+      render(<CarouselCardButtons {...baseProps} cardIndex={0} suggestions={suggestions} />);
+      const { deleteButtonHandler } = global.__lastActionButtonProps;
+      expect(() => deleteButtonHandler(1)).not.toThrow();
+      expect(baseProps.onSuggestionsChange).toHaveBeenCalled();
+    });
+  });
+});