@capillarytech/creatives-library 7.17.89 → 7.17.91-alpha.0

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

@@ -0,0 +1,161 @@
+// This test in written using React Testing library. Written during setting up this library to make sure tests are working.
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import { screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import cloneDeep from 'lodash/cloneDeep';
+import configureStore from '../../../store';
+import { render } from '../../../utils/test-utils';
+import { Cap } from '../index';
+import mockData from '../../mockdata';
+const {
+  demoVideoAndLinkJSONData,
+  history,
+  location,
+  match,
+  Global,
+} = mockData;
+
+const ComponentToRender = injectIntl(Cap);
+
+const renderComponent = (props) => {
+  const store = configureStore({}, null);
+  render(
+    <Provider store={store}>
+      <ComponentToRender {...props} />
+    </Provider>,
+  );
+};
+
+jest.setTimeout(15000);
+jest.mock('@capillarytech/cap-ui-utils', () => ({
+  ...jest.requireActual('@capillarytech/cap-ui-utils'),
+  GA: {
+    initialize: jest.fn(),
+    timeTracker: {
+      stopTimer: jest.fn(),
+      startTimer: jest.fn(),
+    },
+    setCustomDimension: jest.fn(),
+    getCallerName: 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(),
+  },
+}));
+
+// jest.mock('../../../components/NavigationBar');
+
+jest.mock('@capillarytech/cap-ui-library/CapSupportVideosWrapper', () => {
+  const ChildComponent = (props) => {
+    const { targetElements } = props;
+    const DEMO_LABEL =
+      targetElements[Object.keys(targetElements)[1]]?.support_video?.target_url
+        ?.default?.label;
+    return <h4>{DEMO_LABEL}</h4>;
+  };
+  return ChildComponent;
+});
+
+describe('Cap', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const actions = {
+    authenticate: jest.fn(),
+    addMessageToQueue: jest.fn(),
+    changeOrg: jest.fn(),
+    changeOu: jest.fn(),
+    changeOuFailure: jest.fn(),
+    changeOuSuccess: jest.fn(),
+    fetchMenuSearchResults: jest.fn(),
+    clearTopbarMenuData: jest.fn(),
+    getAllUsers: jest.fn(),
+    getStartOfWeekForOrg: jest.fn(),
+    getTopbarMenuData: jest.fn(),
+    getUserData: jest.fn(),
+    loginSuccess: jest.fn(),
+    logout: jest.fn(),
+    removeMessageFromQueue: jest.fn(),
+    setActiveReportStatus: jest.fn(),
+    getSupportedLocales: jest.fn(),
+    getSupportVideosConfig: jest.fn(),
+  };
+
+  // Assign the mock window object to the global object
+  const originalLocation = window.location;
+  delete window.location;
+  window.location = { ...originalLocation, pathname: '/creatives/ui/v2' };
+
+  const props = {
+    demoVideoAndLinkJSONData,
+    history,
+    location: { ...location, query: { type: '' }},
+    match,
+    Global,
+    actions,
+    appActions: {
+      getSidebar: jest.fn(),
+    },
+    loader: { localeLoading: false },
+    intl: { formatMessage: jest.fn() },
+  };
+
+  const mockReplaceDynamicAndCompare = () => {
+    // Mocking replaceDynamicAndCompare function to get the currentPathJSON
+    jest.mock(
+      '@capillarytech/cap-ui-library/CapSupportVideosWrapper/utils',
+      () => ({
+        replaceDynamicAndCompare: jest.fn((pathname, route) => {
+          if (pathname === '/creatives/ui/v2') {
+            return {
+              target_elements: { element1: 'video1', element2: 'video2' },
+            };
+          }
+          return null;
+        }),
+      }),
+    );
+  };
+
+  const { findByText, queryByText } = screen;
+
+  it('Should show Demo text for video support', async () => {
+    mockReplaceDynamicAndCompare();
+    renderComponent(props);
+    expect(await findByText(/Demo/i)).toBeInTheDocument();
+  });
+
+  it('Should show Demo text for video support with orgLocale if userLocal is not present', async () => {
+    mockReplaceDynamicAndCompare();
+    const updatedProps = cloneDeep(props);
+    delete updatedProps.Global.user.lang;
+    renderComponent(updatedProps);
+    expect(await findByText(/Demo/i)).toBeInTheDocument();
+  });
+
+  it('Should not show Demo text for video support if targetELements not found', async () => {
+    mockReplaceDynamicAndCompare();
+    const updatedProps = cloneDeep(props);
+    delete updatedProps.demoVideoAndLinkJSONData.demoVideoAndLinkJSON
+      .json_config?.[0]?.target_elements;
+    renderComponent(updatedProps);
+    expect(queryByText(/Demo/i)).toBeNull();
+  });
+});

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

@@ -41,6 +41,7 @@ exports[`<Cap /> should render correct component 1`] = `
       "clearMetaEntities": [Function],
       "clearTopbarMenuData": [Function],
       "fetchSchemaForEntity": [Function],
+      "getSupportVideosConfig": [Function],
       "getTopbarMenuData": [Function],
       "getUserData": [Function],
       "logout": [Function],

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

@@ -0,0 +1,11 @@
+import * as types from '../constants';
+import * as actions from '../actions';
+
+describe('Test CAP actions', () => {
+  it('has a type of GET_SUPPORT_VIDEOS_CONFIG_REQUEST action', () => {
+    const expected = {
+      type: types.GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
+    };
+    expect(actions.getSupportVideosConfig()).toEqual(expected);
+  });
+});

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

@@ -0,0 +1,59 @@
+import { fromJS } from 'immutable';
+import {
+    GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
+    GET_SUPPORT_VIDEOS_CONFIG_SUCCESS,
+    GET_SUPPORT_VIDEOS_CONFIG_FAILURE,
+    REQUEST,
+    SUCCESS,
+    FAILURE,
+} from '../constants';
+import reducer from '../reducer';
+import initialState from '../../../initialState';
+
+const mockedInitialState = fromJS(initialState.cap);
+
+describe('should handle GET_SUPPORT_VIDEOS_CONFIG', () => {
+  it('should handle GET_SUPPORT_VIDEOS_CONFIG_REQUEST', () => {
+    const action = {
+      type: GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
+    };
+    expect(reducer(mockedInitialState, action).toJS()).toEqual({
+      ...mockedInitialState.toJS(),
+      demoVideoAndLinkJSON: {},
+      demoVideoAndLinkJSONStatus: REQUEST,
+    });
+  });
+
+  it('it handles the GET_SUPPORT_VIDEOS_CONFIG_SUCCESS action', () => {
+    const result = {
+      is_active: true,
+      _id: "12345",
+      json_config: [
+              { data: 'Test data' },
+      ],
+    };
+    const action = {
+      type: GET_SUPPORT_VIDEOS_CONFIG_SUCCESS,
+      result,
+      GET_SUPPORT_VIDEOS_CONFIG_SUCCESS,
+    };
+    expect(reducer(mockedInitialState, action).toJS()).toEqual({
+      ...mockedInitialState.toJS(),
+      demoVideoAndLinkJSON: result,
+      demoVideoAndLinkJSONStatus: SUCCESS,
+    });
+  });
+
+  it('should handle GET_SUPPORT_VIDEOS_CONFIG_FAILURE', () => {
+    const error = 'Error';
+    const action = {
+      type: GET_SUPPORT_VIDEOS_CONFIG_FAILURE,
+      error,
+    };
+    expect(reducer(mockedInitialState, action).toJS()).toEqual({
+      ...mockedInitialState.toJS(),
+      demoVideoAndLinkJSONError: error,
+      demoVideoAndLinkJSONStatus: FAILURE,
+    });
+  });
+});

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

@@ -1,10 +1,21 @@
-import { authorize, loginFlow } from '../sagas';
-import { take, fork, cancel } from 'redux-saga/effects';
+import { take, fork, cancel, takeLatest } from 'redux-saga/effects';
+import { expectSaga } from 'redux-saga-test-plan';
+import * as matchers from 'redux-saga-test-plan/matchers';
+import { authorize, loginFlow, fetchSchemaForEntity, getSupportVideosConfig, watchForGetVideosConfig } from '../sagas';
+import { throwError } from 'redux-saga-test-plan/providers';
+import * as api from '../../../services/api';
 import {
   LOGIN_REQUEST,
   LOGIN_FAILURE,
   LOGOUT_REQUEST_V2,
+  GET_SCHEMA_FOR_ENTITY_SUCCESS,
+  GET_SCHEMA_FOR_ENTITY_FAILURE,
+  GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
+  GET_SUPPORT_VIDEOS_CONFIG_SUCCESS,
+  GET_SUPPORT_VIDEOS_CONFIG_FAILURE,
 } from '../constants';
+import { callback, error, error2, videoConfigData } from '../../mockdata';
+
 describe('loginFlow', () => {
   it('should handle the login flow', () => {
     const generator = loginFlow();
@@ -28,4 +39,161 @@ describe('loginFlow', () => {
     }
     catch{}
   });
+});
+
+describe("fetchSchemaForEntity", () => {
+  it("handle success response from fetchSchemaForEntity", () => {
+    expectSaga(fetchSchemaForEntity, {
+      queryParams: {
+        type: 'tags'
+      },
+    })
+      .provide([
+        [
+          matchers.call.fn(api.fetchSchemaForEntity),
+          {
+            success: true,
+            response: {},
+          },
+        ],
+      ])
+      .put({
+        type: GET_SCHEMA_FOR_ENTITY_SUCCESS,
+        data: {},
+        statusCode: '',
+        entityType: 'tags'
+      })
+      .run();
+  });
+
+  it("handle success response from fetchSchemaForEntity when metaEntities available", () => {
+    expectSaga(fetchSchemaForEntity, {
+      queryParams: {
+        type: 'tags'
+      },
+    })
+      .provide([
+        [
+          matchers.call.fn(api.fetchSchemaForEntity),
+          {
+            response: {
+              metaEntities: []
+            },
+          },
+        ],
+      ])
+      .put({
+        type: GET_SCHEMA_FOR_ENTITY_SUCCESS,
+        data: {
+          metaEntities: []
+        },
+        statusCode: '',
+        entityType: 'tags'
+      })
+      .run();
+  });
+
+  it("handle when response and query params are empty from fetchSchemaForEntity when metaEntities available", () => {
+    expectSaga(fetchSchemaForEntity, {})
+      .provide([
+        [
+          matchers.call.fn(api.fetchSchemaForEntity),
+          {
+            success: true
+          },
+        ],
+      ])
+      .put({
+        type: GET_SCHEMA_FOR_ENTITY_SUCCESS,
+        data: {},
+        statusCode: '',
+        entityType: ''
+      })
+      .run();
+  });
+
+  it("handle error response from fetchSchemaForEntity", () => {
+    expectSaga(fetchSchemaForEntity, {
+      queryParams: {
+        type: 'tags'
+      },
+    })
+      .provide([
+        [
+          matchers.call.fn(api.fetchSchemaForEntity),
+          {
+            success: false,
+            response: {},
+          },
+        ],
+      ])
+      .put({
+        type: GET_SCHEMA_FOR_ENTITY_FAILURE,
+        error: 'Error in fetching tags'
+      })
+      .run();
+  });
+});
+
+describe('getSupportVideoConfig saga', () => {
+  it('handle valid response from api', () => {
+    expectSaga(getSupportVideosConfig, {
+      callback,
+    })
+      .provide([
+        [
+          matchers.call.fn(api.getSupportVideosConfig),
+          {
+            success: true,
+            status: 200,
+            data: videoConfigData,
+        }
+        ],
+      ])
+      .put({
+        type: GET_SUPPORT_VIDEOS_CONFIG_SUCCESS,
+        result: videoConfigData,
+      })
+      .run();
+  });
+
+  it('handle error thrown from api', () => {
+    expectSaga(getSupportVideosConfig, {
+      data: videoConfigData,
+    })
+      .provide([
+        [matchers.call.fn(api.getSupportVideosConfig), error2],
+      ])
+      .put({
+        type: GET_SUPPORT_VIDEOS_CONFIG_FAILURE,
+        error: error2,
+      })
+      .run();
+  });
+
+  it('handles error from catch block', () => {
+    expectSaga(getSupportVideosConfig, {
+      data: videoConfigData,
+    })
+      .provide([
+        [matchers.call.fn(api.getSupportVideosConfig), throwError(error)],
+      ])
+      .put({
+        type: GET_SUPPORT_VIDEOS_CONFIG_FAILURE,
+        error,
+      })
+      .run();
+  });
+});
+
+describe('watchForGetVideosConfig saga', () => {
+  let generator = null;
+  beforeEach(() => {
+    generator = watchForGetVideosConfig();
+  });
+  it('handle valid response from api', () => {
+    expect(generator.next().value).toEqual(
+      takeLatest(GET_SUPPORT_VIDEOS_CONFIG_REQUEST, getSupportVideosConfig),
+    );
+  });
 });

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

@@ -1,28 +1,52 @@
 import { fromJS } from 'immutable';
 
-import { makeSelectLocationState } from 'v2Containers/Cap/selectors';
+import { makeSelectLocationState, makeSelectDemoVideoAndLink } from 'v2Containers/Cap/selectors';
 
-describe('makeSelectLocationState', () => {
-  it('should select the route as a plain JS object', () => {
-    const route = fromJS({
-      locationBeforeTransitions: null,
-    });
-    const mockedState = fromJS({
-      route,
-    });
-    expect(makeSelectLocationState()(mockedState)).toEqual(route.toJS());
+describe('CapSelectors', () => {
+  const mockState = fromJS({
+    cap: {
+      demoVideoAndLinkJSON: 'Test data',
+      demoVideoAndLinkJSONError: null,
+      demoVideoAndLinkJSONStatus: 'SUCCESS',
+    },
   });
 
-  it('should return cached js routeState for same concurrent calls', () => {
-    const route = fromJS({
-      locationBeforeTransitions: null,
+  describe('makeSelectLocationState', () => {
+    it('should select the route as a plain JS object', () => {
+      const route = fromJS({
+        locationBeforeTransitions: null,
+      });
+      const mockedState = fromJS({
+        route,
+      });
+      expect(makeSelectLocationState()(mockedState)).toEqual(route.toJS());
     });
-    const mockedState = fromJS({
-      route,
+  
+    it('should return cached js routeState for same concurrent calls', () => {
+      const route = fromJS({
+        locationBeforeTransitions: null,
+      });
+      const mockedState = fromJS({
+        route,
+      });
+      const selectLocationState = makeSelectLocationState();
+  
+      const firstRouteStateJS = selectLocationState(mockedState);
+      expect(selectLocationState(mockedState)).toBe(firstRouteStateJS);
     });
-    const selectLocationState = makeSelectLocationState();
+  });
 
-    const firstRouteStateJS = selectLocationState(mockedState);
-    expect(selectLocationState(mockedState)).toBe(firstRouteStateJS);
+  describe('makeSelectDemoVideoAndLink selector', () => {
+    it('should return the correct substate', () => {
+      const selected = makeSelectDemoVideoAndLink().resultFunc(
+        mockState.get('cap'),
+      );
+      expect(selected).toEqual({
+        demoVideoAndLinkJSON: 'Test data',
+        demoVideoAndLinkJSONError: null,
+        demoVideoAndLinkJSONStatus: 'SUCCESS',
+      });
+    });
   });
 });
+

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -88,6 +88,7 @@ export function SlideBoxHeader(props) {
       {showTemplateNameHeader && templateNameRenderProp()}
       {slidBoxContent === 'preview' && (
       <CapHeader
+        className="support-video-elements"
         title={<CapHeading className='slidebox-header-template-name' type="h1">{templateData.name}</CapHeading>}
         description={<CapLabel type="label3">
           <FormattedMessage {...messages.lastUpdated} values={{date: moment(templateData.updatedAt).format('DD MMM YYYY'), user: templateData.updatedByName}}/>
@@ -101,6 +102,7 @@ export function SlideBoxHeader(props) {
         )}
       {!showTemplateNameHeader && slidBoxContent === 'editTemplate' && (
         <CapHeader
+          className="support-video-elements"
           title={<FormattedMessage {...headerMessage} values={{ channel: getChannelLabel(channel) }} />}
           description={
             <>
@@ -131,6 +133,7 @@ export function SlideBoxHeader(props) {
       )}
       {!showTemplateNameHeader && slidBoxContent === 'createTemplate' && ( templateStep === 'modeSelection' || (templateStep === "createTemplateContent" && weChatTemplateType !== MAP_TEMPLATE) ) && (
       <CapHeader
+        className="support-video-elements"
         title={<FormattedMessage {...(showCreateTraiSMSHeader ? messages.UploadSMStemplates : messages.createMessageContent)} values={{channel: getChannelLabel(channel)}}/>}
         prefix={!isFullMode && showPrefix &&
           <PrefixWrapper>

package/v2Containers/CreativesContainer/index.js

@@ -1059,6 +1059,7 @@ export class Creatives extends React.Component {
     <CapHeader
       inline
       title={name}
+      className="support-video-elements"
       description={<CapLink
         title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
         onClick={() => { this.setState({isEditName: true}, () => { this.showTemplateName({formData, onFormDataChange}); }); }}/>

package/v2Containers/CreativesContainer/index.scss

@@ -60,4 +60,13 @@ $classPrefix: add-creatives-section;
 }
 .zalo-template-name-spacing {
     margin-right: 8px;
+}
+.support-video-elements {
+    .cap-header-v2-title{
+        display: inline-flex;
+        align-items: center;
+    };
+    i {
+        height: $ICON_SIZE_M;
+    }
 }

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxHeader.test.js.snap

@@ -11,6 +11,7 @@ exports[`Test SlideBoxHeader container Should render correct component for rcs c
   key="creatives-container-slidebox-header-content"
 >
   <CapHeader
+    className="support-video-elements"
     description={
       <React.Fragment>
         
@@ -45,6 +46,7 @@ exports[`Test SlideBoxHeader container Should render correct component for rcs c
   key="creatives-container-slidebox-header-content"
 >
   <CapHeader
+    className="support-video-elements"
     description={
       <CapLabel
         type="label3"
@@ -139,6 +141,7 @@ exports[`Test SlideBoxHeader container Should render correct component for whats
   key="creatives-container-slidebox-header-content"
 >
   <CapHeader
+    className="support-video-elements"
     description={
       <React.Fragment>
         <React.Fragment>
@@ -248,6 +251,7 @@ exports[`Test SlideBoxHeader container Should render correct component for whats
   key="creatives-container-slidebox-header-content"
 >
   <CapHeader
+    className="support-video-elements"
     description={
       <CapLabel
         type="label3"
@@ -317,6 +321,7 @@ exports[`Test SlideBoxHeader container Should render correct component for zalo
   key="creatives-container-slidebox-header-content"
 >
   <CapHeader
+    className="support-video-elements"
     description={
       <React.Fragment>
         <React.Fragment>

package/v2Containers/Line/Container/Wrapper/tests/__snapshots__/index.test.js.snap

@@ -23085,6 +23085,7 @@ new message content.",
                                         "app": Object {},
                                         "cap": Object {
                                           "fetchingSchema": true,
+                                          "fetchingSchemaError": "",
                                           "messages": Array [],
                                           "metaEntities": Object {
                                             "layouts": Array [],