@capillarytech/creatives-library 7.12.32 → 7.12.34

package/v2Containers/Cap/tests/index.test.js

@@ -1,16 +1,62 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { injectIntl } from 'react-intl';
 
-import Cap from '../index';
+import * as actions from '../actions';
+import {Cap} from '../index';
+import mockData from '../../mockdata';
+import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
+const { match, location, capGlobal, language } = mockData;
+
+jest.mock('@capillarytech/cap-ui-utils', () => ({
+  GA: {
+    initialize: jest.fn(),
+    timeTracker: {
+      stopTimer: jest.fn(),
+      startTimer: jest.fn(),
+    },
+    setCustomDimension: jest.fn(),
+  },
+  Auth: {
+    hasAccess: () => jest.fn(() => true),
+    hasFeatureAccess: () => jest.fn(() => true),
+    authHoc: jest.fn(),
+    initialize: jest.fn(),
+  },
+  multipleOrgSwitch: {
+    logNewTab: jest.fn(),
+    utilsGetOrgNameFromId: () => 'org2',
+    tabBeforeUnloadEventHandler: jest.fn(),
+    utilsHandleStorageChange: () => jest.fn(() => true),
+    isMultipleTabsOpen: () => jest.fn(() => true),
+  },
+  utilsSessionStorageApi: {
+    loadSessionItem: () => true,
+    saveSessionItem: jest.fn(),
+  },
+}));
 
 describe('<Cap />', () => {
-  it('should render its children', () => {
-    const children = (<h1>Test</h1>);
-    const renderedComponent = shallow(
-      <Cap>
-        {children}
-      </Cap>
-    );
-    expect(renderedComponent.contains(children)).toBe(true);
+  const push = jest.fn();
+  const componentProps = {
+    actions,
+    history: {
+      push,
+    },
+    orgTimezone: 'Asia/Kolkata',
+    match,
+    location,
+    Global: capGlobal,
+    language,
+  };
+  let renderedComponent;
+  const renderFunc = () => {
+    const Component = injectIntl(Cap);
+    renderedComponent = shallowWithIntl(<Component {...componentProps} />);
+  };
+
+  it('should render correct component', () => {
+    renderFunc();
+    expect(renderedComponent).toMatchSnapshot();
   });
 });
+

package/v2Containers/LanguageProvider/tests/index.test.js

@@ -3,7 +3,7 @@ import { shallow, mount } from 'enzyme';
 import { FormattedMessage, defineMessages } from 'react-intl';
 import { Provider } from 'react-redux';
 import { browserHistory } from 'react-router';
-
+import enUS from 'antd/es/locale-provider/en_US';
 import ConnectedLanguageProvider, { LanguageProvider } from '../index';
 import configureStore from '../../../store';
 
@@ -17,11 +17,18 @@ const messages = defineMessages({
   },
 });
 
+jest.mock('antd/es/locale-provider/en_US', () => 'enUS');
+jest.mock('antd/es/locale-provider/zh_CN', () => 'zhCN');
+
 describe('<LanguageProvider />', () => {
   it('should render its children', () => {
     const children = (<h1>Test</h1>);
     const renderedComponent = shallow(
-      <LanguageProvider messages={messages} locale="en">
+      <LanguageProvider 
+        messages={messages}
+        language={{
+          locale: 'en',
+        }}>
         {children}
       </LanguageProvider>
     );

package/v2Containers/LanguageProvider/tests/reducer.test.js

@@ -9,12 +9,16 @@ describe('languageProviderReducer', () => {
   it('returns the initial state', () => {
     expect(languageProviderReducer(undefined, {})).toEqual(fromJS({
       locale: 'en',
+      messages: {},
+      localeLoading: false,
     }));
   });
 
   it('changes the locale', () => {
     expect(languageProviderReducer(undefined, { type: CHANGE_LOCALE, locale: 'de' }).toJS()).toEqual({
-      locale: 'de',
+      locale: "en",
+      localeLoading: false,
+      messages: {},
     });
   });
 });

package/v2Containers/Line/Container/Video/index.js

@@ -408,6 +408,7 @@ export const LineVideo = ({
             onMouseOver={playVideo}
             onMouseOut={pauseVideo}
             ref={videoEl}
+            data-testid="line-video"
           >
             <source src={videoSrc} type="video/mp4" />
           </video>

package/v2Containers/Line/Container/Video/tests/index.test.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import {
+  render,
+  /* eslint-disable import/named */
+  screen,
+  fireEvent,
+  /* eslint-enable import/named */
+} from '../../../../../utils/test-utils';
+import { waitFor } from "@testing-library/react";
+import { LineVideo } from "../index";
+
+const initializeComponent = () => {
+  const Component = injectIntl(LineVideo);
+  return render( <Component
+    className=""
+    id="test"
+    isFullMode
+  // supportedExtensions,
+    actions={{}}
+    Line
+    index={0}
+    updateMessageState={() => {}}
+    content={{
+      isError: true,
+      videoSrc: "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/1f141236-6796-479c-9c77-59dc850d.mp4",
+      previewImageUrl: "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/video_screenshot_assets__1653927664911.png/1040",
+      videoName: "Decision Split - Filters UI Integration.mp4",
+      messageTitle: "",
+      altText: "",
+      type: "video",
+      actionLabel: "",
+      actionUrl: "",
+      videoHeight: 900,
+      videoWidth: 1440,
+      videoDuration: "00.36.04",
+      selectedAction: "Hide",
+      messageType: "videoSrc",
+    }}
+    activeKey={"video"}
+    Templates={[]}
+    getAllTemplates={() => {}}
+    uploadedAssetList={() => {}}
+    updateUploadedAssetList={() => {}}
+    deleteUploadedImgList={() => {}}
+    capUploaderCustomVideoRequest={() => {}}
+  />);
+};
+
+describe('renders a message', () => {
+  it("Test if LineVideo component renders", async () => {
+    initializeComponent();
+    const lineVideo = await screen.findByTestId('line-video');
+    Object.defineProperty(lineVideo, 'duration', {
+      writable: true,
+      value: 10,
+    });
+    fireEvent.loadedMetadata(lineVideo);
+  });
+});
+

package/v2Containers/Rcs/index.js

@@ -27,8 +27,6 @@ import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
 import CapError from '@capillarytech/cap-ui-library/CapError';
 import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
-import CapActionButton from '../../v2Components/CapActionButton';
-
 import {
   CAP_G01,
   CAP_SPACE_16,
@@ -38,6 +36,7 @@ import {
   CAP_WHITE,
   CAP_SECONDARY,
 } from '@capillarytech/cap-ui-library/styled/variables';
+import CapActionButton from '../../v2Components/CapActionButton';
 import { makeSelectRcs } from './selectors';
 import {
   isLoadingMetaEntities,
@@ -169,13 +168,8 @@ export const Rcs = (props) => {
     }
 `;
   const updateButtonChange = (data) => {
-    const {
-      type,
-      text,
-      url,
-      error,
-  } = data;
-    setSuggestions([{type, text, url}]);
+    const { type, text, url, error } = data;
+    setSuggestions([{ type, text, url }]);
     setSuggestionError(error);
   };
   const RcsLabel = styled.div`
@@ -184,38 +178,46 @@ export const Rcs = (props) => {
   `;
   const rcsButtonTypeOptions = [
     {
-      label: <>
-        <div className="rcs-button">
-          <CapHeading type="h4"><FormattedMessage {...messages.templateCTAButton} /></CapHeading>
-          <CapLabel type="label3" className="rcs-button-label">
-            <FormattedMessage {...messages.templateCTAButtonDesc} />
-          </CapLabel>
-        </div>
-        {buttonType.includes(CTA) && <CapActionButton
-          type={CTA}
-          buttonTextlen={TEMPLATE_BUTTON_TEXT_MAX_LENGTH}
-          updateButtonChange={updateButtonChange}
-          suggestions={suggestions}
-          />}
-      </>,
+      label: (
+        <>
+          <div className="rcs-button">
+            <CapHeading type="h4">
+              <FormattedMessage {...messages.templateCTAButton} />
+            </CapHeading>
+            <CapLabel type="label3" className="rcs-button-label">
+              <FormattedMessage {...messages.templateCTAButtonDesc} />
+            </CapLabel>
+          </div>
+          {buttonType.includes(CTA) && (
+            <CapActionButton
+              type={CTA}
+              buttonTextlen={TEMPLATE_BUTTON_TEXT_MAX_LENGTH}
+              updateButtonChange={updateButtonChange}
+              suggestions={suggestions}
+            />
+          )}
+        </>
+      ),
       value: CTA,
     },
     {
-      label: <CapTooltip
-        placement="topLeft"
-        title={<FormattedMessage {...globalMessages.comingSoonTooltip} />}
-    >
-        <div className="rcs-button disabled-button">
-          <CapHeading type="h4" disabled>
-            <FormattedMessage {...messages.templateQRButton} />
-          </CapHeading>
-          <CapLabel type="label3" className="rcs-button-label" disabled>
-            <FormattedMessage {...messages.templateQRButtonDesc} />
-          </CapLabel>
-        </div>
-      </CapTooltip>,
-      value: "QR",
-      disabled: "true",
+      label: (
+        <CapTooltip
+          placement="topLeft"
+          title={<FormattedMessage {...globalMessages.comingSoonTooltip} />}
+        >
+          <div className="rcs-button disabled-button">
+            <CapHeading type="h4" disabled>
+              <FormattedMessage {...messages.templateQRButton} />
+            </CapHeading>
+            <CapLabel type="label3" className="rcs-button-label" disabled>
+              <FormattedMessage {...messages.templateQRButtonDesc} />
+            </CapLabel>
+          </div>
+        </CapTooltip>
+      ),
+      value: 'QR',
+      disabled: 'true',
     },
   ];
 
@@ -361,20 +363,21 @@ export const Rcs = (props) => {
   };
   // tag Code end
 
-  const renderLabel = (value, showLabel, desc) => (<>
-    <RcsLabel>
-      <CapHeading type="h4">{formatMessage(messages[value])}</CapHeading>
-      {showLabel && (
-        <CapHeading type="h4" className="rcs-optional-label">
-          {formatMessage(messages.optional)}
-        </CapHeading>
+  const renderLabel = (value, showLabel, desc) => (
+    <>
+      <RcsLabel>
+        <CapHeading type="h4">{formatMessage(messages[value])}</CapHeading>
+        {showLabel && (
+          <CapHeading type="h4" className="rcs-optional-label">
+            {formatMessage(messages.optional)}
+          </CapHeading>
+        )}
+      </RcsLabel>
+      {desc && (
+        <CapLabel type="label3" style={{ marginBottom: '17px' }}>
+          {formatMessage(messages[desc])}
+        </CapLabel>
       )}
-    </RcsLabel>
-    {desc && (
-    <CapLabel type="label3" style={{ marginBottom: "17px"}}>
-      {formatMessage(messages[desc])}
-    </CapLabel>
-    )}
     </>
   );
 
@@ -520,14 +523,13 @@ export const Rcs = (props) => {
         value={templateDesc || ''}
         maxLength={1000}
       />
-      {renderLabel("templateButton", true, "templateButtonDesc")}
+      {renderLabel('templateButton', true, 'templateButtonDesc')}
       <CapCheckboxGroup
-        style={{display: "grid"}}
+        style={{ display: 'grid' }}
         options={rcsButtonTypeOptions}
         value={buttonType}
         onChange={onChangeButtonTypes}
       />
-
     </>
   );
 
@@ -785,7 +787,6 @@ export const Rcs = (props) => {
                   onContextChange={handleOnTagsContextChange}
                   injectedTags={injectedTags || {}}
                   selectedOfferDetails={selectedOfferDetails}
-
                 />
               }
             />
@@ -896,7 +897,7 @@ export const Rcs = (props) => {
                   title: templateTitle,
                   description: templateDesc,
                   mediaType: templateMediaType,
-                  ...(suggestions.length > 0 && {suggestions}),
+                  ...(suggestions.length > 0 && { suggestions }),
                   ...(!isMediaTypeNone && {
                     media: {
                       mediaUrl: rcsImageSrc,
@@ -988,12 +989,13 @@ export const Rcs = (props) => {
       }
       return onCreateRcs;
     }
-    return () => getFormData({
-      value: createPayload(),
-      _id: params && params.id,
-      validity: true,
-      type: RCS,
-    });
+    return () =>
+      getFormData({
+        value: createPayload(),
+        _id: params && params.id,
+        validity: true,
+        type: RCS,
+      });
   };
 
   const isDisableDone = () => {
@@ -1014,8 +1016,8 @@ export const Rcs = (props) => {
     }
 
     // if call to action (Button text & link) is not added
-    const {text, url} = suggestions[0] || {};
-    if (buttonType.includes(CTA) && !(text && url && !suggestionError ) ) {
+    const { text, url } = suggestions[0] || {};
+    if (buttonType.includes(CTA) && !(text && url && !suggestionError)) {
       return true;
     }
     if (templateDescError || fallbackMessageError) {
@@ -1041,9 +1043,11 @@ export const Rcs = (props) => {
     const tempMsg = dltPreviewData === '' ? fallbackMessage : dltPreviewData;
     let mediaTypeMsg = isMediaTypeNone ? 'textMessage' : 'image';
     mediaTypeMsg = formatMessage(messages[mediaTypeMsg]);
-    const {text, url} = suggestions[0] || {};
-    if (buttonType.includes(CTA) && !(text && url) ) {
-      mediaTypeMsg = `${formatMessage(messages.buttonTextAndUrl)} ${mediaTypeMsg} `;
+    const { text, url } = suggestions[0] || {};
+    if (buttonType.includes(CTA) && !(text && url)) {
+      mediaTypeMsg = `${formatMessage(
+        messages.buttonTextAndUrl,
+      )} ${mediaTypeMsg} `;
     }
     return (
       <>