@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

package/v2Containers/WebPush/Create/components/FormActions.test.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
+import FormActions from './FormActions';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapError from '@capillarytech/cap-ui-library/CapError';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+
+describe('FormActions', () => {
+  const mockFormatMessage = jest.fn((message) => message.defaultMessage || message);
+  const mockOnSave = jest.fn();
+
+  const mockMessages = {
+    saveTemplate: {
+      defaultMessage: 'Save Template',
+    },
+  };
+
+  const defaultProps = {
+    onSave: mockOnSave,
+    isSaveDisabled: false,
+    errorText: '',
+    accountErrorText: '',
+    formatMessage: mockFormatMessage,
+    messages: mockMessages,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render correctly with default props', () => {
+      const wrapper = shallowWithIntl(<FormActions {...defaultProps} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render save button', () => {
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} />);
+      const saveButton = wrapper.find(CapButton);
+      expect(saveButton.exists()).toBe(true);
+      expect(saveButton.prop('type')).toBe('primary');
+      expect(saveButton.prop('disabled')).toBe(false);
+    });
+
+    it('should render save button with correct text', () => {
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} />);
+      const saveButton = wrapper.find(CapButton);
+      expect(saveButton.exists()).toBe(true);
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.saveTemplate);
+    });
+
+    it('should disable save button when isSaveDisabled is true', () => {
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} isSaveDisabled={true} />);
+      const saveButton = wrapper.find(CapButton);
+      expect(saveButton.prop('disabled')).toBe(true);
+    });
+
+    it('should enable save button when isSaveDisabled is false', () => {
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} isSaveDisabled={false} />);
+      const saveButton = wrapper.find(CapButton);
+      expect(saveButton.prop('disabled')).toBe(false);
+    });
+  });
+
+  describe('Error Messages', () => {
+    it('should not render error text when errorText is empty', () => {
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} errorText="" />);
+      const errorRows = wrapper.find(CapRow).findWhere((node) => {
+        const error = node.find(CapError);
+        return error.exists() && error.prop('className') === 'webpush-template-error';
+      });
+      expect(errorRows.length).toBe(0);
+    });
+
+    it('should render error text when errorText is provided', () => {
+      const errorText = 'Template save failed';
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} errorText={errorText} />);
+      const error = wrapper.find(CapError).find('.webpush-template-error');
+      expect(error.exists()).toBe(true);
+      expect(error.length).toBeGreaterThan(0);
+    });
+
+    it('should not render account error text when accountErrorText is empty', () => {
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} accountErrorText="" />);
+      const errorRows = wrapper.find(CapRow).findWhere((node) => {
+        const error = node.find(CapError);
+        return error.exists() && error.prop('className') === 'webpush-template-account-error';
+      });
+      expect(errorRows.length).toBe(0);
+    });
+
+    it('should render account error text when accountErrorText is provided', () => {
+      const accountErrorText = 'Account error occurred';
+      const wrapper = mountWithIntl(
+        <FormActions {...defaultProps} accountErrorText={accountErrorText} />
+      );
+      const error = wrapper.find(CapError).find('.webpush-template-account-error');
+      expect(error.exists()).toBe(true);
+      expect(error.length).toBeGreaterThan(0);
+    });
+
+    it('should render both error texts when both are provided', () => {
+      const wrapper = mountWithIntl(
+        <FormActions
+          {...defaultProps}
+          errorText="Template error"
+          accountErrorText="Account error"
+        />
+      );
+      const templateError = wrapper.find(CapError).find('.webpush-template-error');
+      const accountError = wrapper.find(CapError).find('.webpush-template-account-error');
+      expect(templateError.exists()).toBe(true);
+      expect(accountError.exists()).toBe(true);
+    });
+  });
+
+  describe('Save Button Interaction', () => {
+    it('should call onSave when save button is clicked', () => {
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} />);
+      const saveButton = wrapper.find(CapButton);
+      saveButton.simulate('click');
+      expect(mockOnSave).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onSave when button is disabled and clicked', () => {
+      const wrapper = mountWithIntl(<FormActions {...defaultProps} isSaveDisabled={true} />);
+      const saveButton = wrapper.find(CapButton);
+      saveButton.simulate('click');
+      // Even if disabled, the click event might fire, but the button should be disabled
+      expect(saveButton.prop('disabled')).toBe(true);
+      expect(defaultProps.onSave).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Default Props', () => {
+    it('should use default errorText when not provided', () => {
+      const wrapper = mountWithIntl(
+        <FormActions
+          onSave={mockOnSave}
+          isSaveDisabled={false}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+        />
+      );
+      const error = wrapper.find(CapError).find('.webpush-template-error');
+      expect(error.exists()).toBe(false);
+    });
+
+    it('should use default accountErrorText when not provided', () => {
+      const wrapper = mountWithIntl(
+        <FormActions
+          onSave={mockOnSave}
+          isSaveDisabled={false}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+        />
+      );
+      const error = wrapper.find(CapError).find('.webpush-template-account-error');
+      expect(error.exists()).toBe(false);
+    });
+  });
+});
+

package/v2Containers/WebPush/Create/components/MediaSection.js

@@ -0,0 +1,142 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import CapImageUpload from '../../../../v2Components/CapImageUpload';
+import CapImageUrlUpload from '../../../../v2Components/CapImageUrlUpload';
+import { WEBPUSH } from '../../../CreativesContainer/constants';
+import {
+  WEBPUSH_MEDIA_TYPES,
+  WEBPUSH_MEDIA_TYPES_OPTIONS,
+  ALLOWED_IMAGE_EXTENSIONS_REGEX,
+  WEBPUSH_IMG_SIZE,
+  WEBPUSH_RECOMMENDED_DIMENSIONS,
+  IMAGE_UPLOAD_METHODS,
+} from '../../constants';
+
+/**
+ * MediaSection component - Media type selection and image upload
+ */
+export const MediaSection = ({
+  mediaType,
+  onMediaTypeChange,
+  imageUpload,
+  isLocked,
+  isAnyUploadActive,
+  formatMessage,
+  messages,
+  webPush,
+  isFullMode,
+}) => {
+  const {
+    uploadMethod,
+    imageSrc,
+    imageUrl,
+    isValidating,
+    isUploading,
+    uploadAsset,
+    setUpdateImageSrc,
+    updateOnReUpload,
+    handleUrlChange,
+    handleValidationStateChange,
+    handleUploadStateChange,
+  } = imageUpload;
+
+  const isImageFieldActive = isValidating || isUploading;
+
+  return (
+    <>
+      <CapRow className="creatives-webpush-media">
+        <CapHeading type="h4" className="webpush-media-type">
+          <FormattedMessage {...messages.mediaType} />
+        </CapHeading>
+        <CapSelect.CapCustomSelect
+          width="100%"
+          className="margin-t-4"
+          options={WEBPUSH_MEDIA_TYPES_OPTIONS}
+          value={mediaType}
+          onChange={onMediaTypeChange}
+          disabled={isAnyUploadActive}
+        />
+      </CapRow>
+      {mediaType === WEBPUSH_MEDIA_TYPES.IMAGE && (
+        <>
+          {uploadMethod === IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE && (
+            <CapRow
+              className="webpush-image-upload-section"
+              style={isLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
+              aria-disabled={isLocked}
+            >
+              <CapImageUpload
+                allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
+                imgSize={WEBPUSH_IMG_SIZE}
+                uploadAsset={uploadAsset}
+                isFullMode={isFullMode}
+                imageSrc={imageSrc}
+                updateImageSrc={setUpdateImageSrc}
+                updateOnReUpload={updateOnReUpload}
+                index={0}
+                className="cap-custom-image-upload"
+                key="webpush-uploaded-image"
+                imageData={webPush}
+                channel={WEBPUSH}
+                showReUploadButton
+                recommendedDimensions={WEBPUSH_RECOMMENDED_DIMENSIONS}
+              />
+            </CapRow>
+          )}
+          {uploadMethod === IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL && (
+            <CapRow
+              className="webpush-image-url-section"
+              style={isLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
+              aria-disabled={isLocked}
+            >
+              <CapImageUrlUpload
+                uploadAsset={uploadAsset}
+                imgSize={WEBPUSH_IMG_SIZE}
+                recommendedDimensions={WEBPUSH_RECOMMENDED_DIMENSIONS}
+                sizeLabel={formatMessage(messages.sizeLimit)}
+                formatLabel={formatMessage(messages.formatTypes)}
+                imageUrl={imageUrl}
+                imageSrc={imageSrc}
+                onUrlChange={handleUrlChange}
+                onValidationStateChange={handleValidationStateChange}
+                onUploadStateChange={handleUploadStateChange}
+                isExternalUploading={isImageFieldActive}
+                disabled={isLocked}
+                className="webpush-image-url-upload"
+                fileNamePrefix="webpush-image"
+              />
+            </CapRow>
+          )}
+        </>
+      )}
+      <CapDivider />
+    </>
+  );
+};
+
+MediaSection.propTypes = {
+  mediaType: PropTypes.string.isRequired,
+  onMediaTypeChange: PropTypes.func.isRequired,
+  imageUpload: PropTypes.object.isRequired,
+  isLocked: PropTypes.bool,
+  isAnyUploadActive: PropTypes.bool,
+  formatMessage: PropTypes.func.isRequired,
+  messages: PropTypes.object.isRequired,
+  webPush: PropTypes.object,
+  isFullMode: PropTypes.bool,
+};
+
+MediaSection.defaultProps = {
+  isLocked: false,
+  isAnyUploadActive: false,
+  webPush: {},
+  isFullMode: true,
+};
+
+export default MediaSection;
+

package/v2Containers/WebPush/Create/components/MediaSection.test.js

@@ -0,0 +1,341 @@
+import React from 'react';
+import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
+import MediaSection from './MediaSection';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import {
+  WEBPUSH_MEDIA_TYPES,
+  IMAGE_UPLOAD_METHODS,
+} from '../../constants';
+
+// Mock CapImageUpload
+jest.mock('../../../../v2Components/CapImageUpload', () => {
+  const React = require('react');
+  return function MockCapImageUpload(props) {
+    return (
+      <div data-testid="cap-image-upload" className="cap-image-upload-mock">
+        <div>CapImageUpload</div>
+        <div>imageSrc: {props.imageSrc}</div>
+        <div>channel: {props.channel}</div>
+      </div>
+    );
+  };
+});
+
+// Mock CapImageUrlUpload
+jest.mock('../../../../v2Components/CapImageUrlUpload', () => {
+  const React = require('react');
+  return function MockCapImageUrlUpload(props) {
+    return (
+      <div data-testid="cap-image-url-upload" className="cap-image-url-upload-mock">
+        <div>CapImageUrlUpload</div>
+        <div>imageUrl: {props.imageUrl}</div>
+        <div>imageSrc: {props.imageSrc}</div>
+        <div>disabled: {props.disabled ? 'true' : 'false'}</div>
+      </div>
+    );
+  };
+});
+
+describe('MediaSection', () => {
+  const mockFormatMessage = jest.fn((message) => message?.defaultMessage || message?.id || message);
+  const mockOnMediaTypeChange = jest.fn();
+
+  const mockMessages = {
+    mediaType: {
+      id: 'app.webpush.mediaType',
+      defaultMessage: 'Media Type',
+    },
+    sizeLimit: {
+      id: 'app.webpush.sizeLimit',
+      defaultMessage: 'Size limit',
+    },
+    formatTypes: {
+      id: 'app.webpush.formatTypes',
+      defaultMessage: 'Format types',
+    },
+  };
+
+  const mockImageUpload = {
+    uploadMethod: IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE,
+    imageSrc: '',
+    imageUrl: '',
+    isValidating: false,
+    isUploading: false,
+    uploadAsset: jest.fn(),
+    setUpdateImageSrc: jest.fn(),
+    updateOnReUpload: jest.fn(),
+    handleUrlChange: jest.fn(),
+    handleValidationStateChange: jest.fn(),
+    handleUploadStateChange: jest.fn(),
+  };
+
+  const defaultProps = {
+    mediaType: WEBPUSH_MEDIA_TYPES.NONE,
+    onMediaTypeChange: mockOnMediaTypeChange,
+    imageUpload: mockImageUpload,
+    isLocked: false,
+    isAnyUploadActive: false,
+    formatMessage: mockFormatMessage,
+    messages: mockMessages,
+    webPush: {},
+    isFullMode: true,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('should render correctly with default props', () => {
+      const wrapper = shallowWithIntl(<MediaSection {...defaultProps} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render main container with correct class', () => {
+      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
+      const container = wrapper.find('.creatives-webpush-media');
+      expect(container.exists()).toBe(true);
+    });
+
+    it('should render heading', () => {
+      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
+      const heading = wrapper.find(CapHeading).find('.webpush-media-type');
+      expect(heading.exists()).toBe(true);
+    });
+
+    it('should render CapSelect.CapCustomSelect with correct props', () => {
+      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
+      const select = wrapper.find(CapSelect.CapCustomSelect);
+      expect(select.exists()).toBe(true);
+      expect(select.prop('width')).toBe('100%');
+      expect(select.prop('className')).toBe('margin-t-4');
+      expect(select.prop('value')).toBe(WEBPUSH_MEDIA_TYPES.NONE);
+      expect(select.prop('disabled')).toBe(false);
+    });
+
+    it('should render Divider', () => {
+      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
+      const divider = wrapper.find(CapDivider);
+      expect(divider.exists()).toBe(true);
+    });
+  });
+
+  describe('Media Type Selection', () => {
+    it('should call onMediaTypeChange when select changes', () => {
+      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
+      const select = wrapper.find(CapSelect.CapCustomSelect);
+      select.prop('onChange')(WEBPUSH_MEDIA_TYPES.IMAGE);
+      expect(mockOnMediaTypeChange).toHaveBeenCalledWith(WEBPUSH_MEDIA_TYPES.IMAGE);
+    });
+
+    it('should disable select when isAnyUploadActive is true', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection {...defaultProps} isAnyUploadActive={true} />
+      );
+      const select = wrapper.find(CapSelect.CapCustomSelect);
+      expect(select.prop('disabled')).toBe(true);
+    });
+  });
+
+  describe('Image Upload - UPLOAD_IMAGE Method', () => {
+    it('should render CapImageUpload when mediaType is IMAGE and uploadMethod is UPLOAD_IMAGE', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          {...defaultProps}
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          imageUpload={{
+            ...mockImageUpload,
+            uploadMethod: IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE,
+            imageSrc: 'path/to/image.jpg',
+          }}
+        />
+      );
+      const imageUpload = wrapper.find('[data-testid="cap-image-upload"]');
+      expect(imageUpload.exists()).toBe(true);
+    });
+
+    it('should not render CapImageUpload when mediaType is NONE', () => {
+      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
+      const imageUpload = wrapper.find('[data-testid="cap-image-upload"]');
+      expect(imageUpload.exists()).toBe(false);
+    });
+
+    it('should apply locked styles when isLocked is true', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          {...defaultProps}
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          isLocked={true}
+        />
+      );
+      const uploadSection = wrapper.find('.webpush-image-upload-section').first();
+      expect(uploadSection.exists()).toBe(true);
+      expect(uploadSection.prop('aria-disabled')).toBe(true);
+    });
+
+    it('should not apply locked styles when isLocked is false', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          {...defaultProps}
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          isLocked={false}
+        />
+      );
+      const uploadSection = wrapper.find('.webpush-image-upload-section');
+      expect(uploadSection.exists()).toBe(true);
+    });
+  });
+
+  describe('Image Upload - ADD_IMAGE_URL Method', () => {
+    it('should render CapImageUrlUpload when mediaType is IMAGE and uploadMethod is ADD_IMAGE_URL', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          {...defaultProps}
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          imageUpload={{
+            ...mockImageUpload,
+            uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
+            imageUrl: 'https://example.com/image.jpg',
+          }}
+        />
+      );
+      const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
+      expect(imageUrlUpload.exists()).toBe(true);
+    });
+
+    it('should not render CapImageUrlUpload when mediaType is NONE', () => {
+      const wrapper = mountWithIntl(<MediaSection {...defaultProps} />);
+      const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
+      expect(imageUrlUpload.exists()).toBe(false);
+    });
+
+    it('should apply locked styles when isLocked is true', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          {...defaultProps}
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          imageUpload={{
+            ...mockImageUpload,
+            uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
+          }}
+          isLocked={true}
+        />
+      );
+      const urlSection = wrapper.find('.webpush-image-url-section').first();
+      expect(urlSection.exists()).toBe(true);
+      expect(urlSection.prop('aria-disabled')).toBe(true);
+    });
+
+    it('should pass disabled prop to CapImageUrlUpload when isLocked is true', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          {...defaultProps}
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          imageUpload={{
+            ...mockImageUpload,
+            uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
+          }}
+          isLocked={true}
+        />
+      );
+      const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
+      expect(imageUrlUpload.exists()).toBe(true);
+    });
+  });
+
+  describe('Image Upload State', () => {
+    it('should set isImageFieldActive when isValidating is true', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          {...defaultProps}
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          imageUpload={{
+            ...mockImageUpload,
+            uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
+            isValidating: true,
+          }}
+        />
+      );
+      const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
+      expect(imageUrlUpload.exists()).toBe(true);
+    });
+
+    it('should set isImageFieldActive when isUploading is true', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          {...defaultProps}
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          imageUpload={{
+            ...mockImageUpload,
+            uploadMethod: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL,
+            isUploading: true,
+          }}
+        />
+      );
+      const imageUrlUpload = wrapper.find('[data-testid="cap-image-url-upload"]');
+      expect(imageUrlUpload.exists()).toBe(true);
+    });
+  });
+
+  describe('Default Props', () => {
+    it('should use default isLocked when not provided', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          mediaType={WEBPUSH_MEDIA_TYPES.NONE}
+          onMediaTypeChange={mockOnMediaTypeChange}
+          imageUpload={mockImageUpload}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+        />
+      );
+      const select = wrapper.find(CapSelect.CapCustomSelect);
+      expect(select.prop('disabled')).toBe(false);
+    });
+
+    it('should use default isAnyUploadActive when not provided', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          mediaType={WEBPUSH_MEDIA_TYPES.NONE}
+          onMediaTypeChange={mockOnMediaTypeChange}
+          imageUpload={mockImageUpload}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+        />
+      );
+      const select = wrapper.find(CapSelect.CapCustomSelect);
+      expect(select.prop('disabled')).toBe(false);
+    });
+
+    it('should use default webPush when not provided', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          onMediaTypeChange={mockOnMediaTypeChange}
+          imageUpload={mockImageUpload}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+        />
+      );
+      const imageUpload = wrapper.find('[data-testid="cap-image-upload"]');
+      expect(imageUpload.exists()).toBe(true);
+    });
+
+    it('should use default isFullMode when not provided', () => {
+      const wrapper = mountWithIntl(
+        <MediaSection
+          mediaType={WEBPUSH_MEDIA_TYPES.IMAGE}
+          onMediaTypeChange={mockOnMediaTypeChange}
+          imageUpload={mockImageUpload}
+          formatMessage={mockFormatMessage}
+          messages={mockMessages}
+        />
+      );
+      const imageUpload = wrapper.find('[data-testid="cap-image-upload"]');
+      expect(imageUpload.exists()).toBe(true);
+    });
+  });
+});
+