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

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

@@ -1,15 +1,20 @@
-import { take, fork, cancel } from 'redux-saga/effects';
-import { expectSaga } from "redux-saga-test-plan";
-import * as matchers from "redux-saga-test-plan/matchers";
-import { authorize, loginFlow, fetchSchemaForEntity } from '../sagas';
+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_SCHEMA_FOR_ENTITY_FAILURE,
+  GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
+  GET_SUPPORT_VIDEOS_CONFIG_SUCCESS,
+  GET_SUPPORT_VIDEOS_CONFIG_FAILURE,
 } from '../constants';
-import { fetchSchemaForEntity as fetchSchemaForEntityApi } from "../../../services/api";
+import { callback, error, error2, videoConfigData } from '../../mockdata';
 
 describe('loginFlow', () => {
   it('should handle the login flow', () => {
@@ -45,7 +50,7 @@ describe("fetchSchemaForEntity", () => {
     })
       .provide([
         [
-          matchers.call.fn(fetchSchemaForEntityApi),
+          matchers.call.fn(api.fetchSchemaForEntity),
           {
             success: true,
             response: {},
@@ -69,7 +74,7 @@ describe("fetchSchemaForEntity", () => {
     })
       .provide([
         [
-          matchers.call.fn(fetchSchemaForEntityApi),
+          matchers.call.fn(api.fetchSchemaForEntity),
           {
             response: {
               metaEntities: []
@@ -92,7 +97,7 @@ describe("fetchSchemaForEntity", () => {
     expectSaga(fetchSchemaForEntity, {})
       .provide([
         [
-          matchers.call.fn(fetchSchemaForEntityApi),
+          matchers.call.fn(api.fetchSchemaForEntity),
           {
             success: true
           },
@@ -115,7 +120,7 @@ describe("fetchSchemaForEntity", () => {
     })
       .provide([
         [
-          matchers.call.fn(fetchSchemaForEntityApi),
+          matchers.call.fn(api.fetchSchemaForEntity),
           {
             success: false,
             response: {},
@@ -128,4 +133,67 @@ describe("fetchSchemaForEntity", () => {
       })
       .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>