@capillarytech/creatives-library 7.17.90 → 7.17.91-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/containers/App/constants.js +1 -0
- package/package.json +1 -1
- package/services/api.js +5 -0
- package/services/tests/api.test.js +6 -0
- package/utils/common.js +5 -0
- package/v2Components/FormBuilder/index.js +19 -1
- package/v2Components/FormBuilder/messages.js +4 -0
- package/v2Containers/Cap/actions.js +4 -0
- package/v2Containers/Cap/constants.js +14 -0
- package/v2Containers/Cap/index.js +51 -3
- package/v2Containers/Cap/reducer.js +12 -0
- package/v2Containers/Cap/sagas.js +27 -0
- package/v2Containers/Cap/selectors.js +8 -0
- package/v2Containers/Cap/tests/Cap.test.js +161 -0
- package/v2Containers/Cap/tests/__snapshots__/index.test.js.snap +1 -0
- package/v2Containers/Cap/tests/actions.test.js +11 -0
- package/v2Containers/Cap/tests/reducer.test.js +59 -0
- package/v2Containers/Cap/tests/saga.test.js +78 -10
- package/v2Containers/Cap/tests/selectors.test.js +42 -18
- package/v2Containers/CreativesContainer/SlideBoxHeader.js +3 -0
- package/v2Containers/CreativesContainer/index.js +1 -0
- package/v2Containers/CreativesContainer/index.scss +9 -0
- package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxHeader.test.js.snap +5 -0
- package/v2Containers/mockdata.js +602 -0
|
@@ -15,6 +15,7 @@ export const EXTENDED_TAG = 'ExtendedTagMessage';
|
|
|
15
15
|
export const BADGES_UI_ENABLED = 'BADGES_UI_ENABLED';
|
|
16
16
|
export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
|
|
17
17
|
export const ENABLE_CUSTOMER_BARCODE_TAG = "ENABLE_CUSTOMER_BARCODE_TAG";
|
|
18
|
+
export const EMAIL_UNSUBSCRIBE_TAG_MANDATORY = "EMAIL_UNSUBSCRIBE_TAG_MANDATORY";
|
|
18
19
|
|
|
19
20
|
export const CARD_RELATED_TAGS = [
|
|
20
21
|
'card_series',
|
package/package.json
CHANGED
package/services/api.js
CHANGED
|
@@ -509,3 +509,8 @@ export const getMetaTags = ({previewUrl}) => {
|
|
|
509
509
|
const url = `${API_ENDPOINT}/common/getMetaTags?url=${previewUrl}`;
|
|
510
510
|
return request(url, getAPICallObject('GET'));
|
|
511
511
|
};
|
|
512
|
+
|
|
513
|
+
export const getSupportVideosConfig = () => {
|
|
514
|
+
const url = `${ARYA_ENDPOINT}/support_videos/?product=Creatives`;
|
|
515
|
+
return request(url, getAPICallObject('GET'));
|
|
516
|
+
};
|
|
@@ -4,6 +4,7 @@ import {
|
|
|
4
4
|
getCdnTransformationConfig,
|
|
5
5
|
createWhatsappTemplate,
|
|
6
6
|
getMetaTags,
|
|
7
|
+
getSupportVideosConfig,
|
|
7
8
|
} from '../api';
|
|
8
9
|
import { mockData } from './mockData';
|
|
9
10
|
const sampleFile = require('../../assets/line.png');
|
|
@@ -52,3 +53,8 @@ describe('getMetaTags -- Test with valid responses', () => {
|
|
|
52
53
|
getMetaTags({previewUrl: 'https://capillarytech.com'}),
|
|
53
54
|
).toEqual(Promise.resolve()));
|
|
54
55
|
});
|
|
56
|
+
|
|
57
|
+
describe('getSupportVideosConfig -- Test with valid responses', () => {
|
|
58
|
+
it('Should return correct response', () =>
|
|
59
|
+
expect(getSupportVideosConfig()).toEqual(Promise.resolve()));
|
|
60
|
+
});
|
package/utils/common.js
CHANGED
|
@@ -17,6 +17,7 @@ import {
|
|
|
17
17
|
ENABLE_CUSTOMER_BARCODE_TAG,
|
|
18
18
|
BADGES_UI_ENABLED,
|
|
19
19
|
BADGES_ENROLL,
|
|
20
|
+
EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
|
|
20
21
|
} from '../containers/App/constants';
|
|
21
22
|
import { apiMessageFormatHandler } from './commonUtils';
|
|
22
23
|
|
|
@@ -104,6 +105,10 @@ export const hasCustomerBarcodeFeatureEnabled = Auth.hasFeatureAccess.bind(
|
|
|
104
105
|
ENABLE_CUSTOMER_BARCODE_TAG,
|
|
105
106
|
);
|
|
106
107
|
|
|
108
|
+
export const hasRemoveEmailUnsubscribeTag = Auth.hasFeatureAccess.bind(
|
|
109
|
+
null,
|
|
110
|
+
EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
|
|
111
|
+
);
|
|
107
112
|
//filtering tags based on scope
|
|
108
113
|
export const filterTags = (tagsToFilter, tagsList) => tagsList?.filter(
|
|
109
114
|
(tag) => !tagsToFilter?.includes(tag?.definition?.value)
|
|
@@ -55,6 +55,7 @@ import { AI_SUGGESTION_API_URL, CONTENT_RECOMMENDATION_BOT } from './constants';
|
|
|
55
55
|
import { GET_TRANSLATION_MAPPED } from '../../containers/TagList/constants';
|
|
56
56
|
import moment from 'moment';
|
|
57
57
|
import { CUSTOMER_BARCODE_TAG , COPY_OF} from '../../containers/App/constants';
|
|
58
|
+
import { hasRemoveEmailUnsubscribeTag } from '../../utils/common';
|
|
58
59
|
const TabPane = Tabs.TabPane;
|
|
59
60
|
const {Column} = Table;
|
|
60
61
|
const {TextArea} = CapInput;
|
|
@@ -987,6 +988,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
|
|
|
987
988
|
if (tagValidationResponse.isBraceError){
|
|
988
989
|
errorString += this.props.intl.formatMessage(globalMessages.unbalanacedCurlyBraces);
|
|
989
990
|
}
|
|
991
|
+
if (tagValidationResponse.isContentEmpty) {
|
|
992
|
+
errorString += this.props.intl.formatMessage(messages.emailBodyEmptyError);
|
|
993
|
+
}
|
|
990
994
|
}
|
|
991
995
|
}
|
|
992
996
|
}
|
|
@@ -1125,6 +1129,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
|
|
|
1125
1129
|
response.missingTags = [];
|
|
1126
1130
|
response.unsupportedTags = [];
|
|
1127
1131
|
response.isBraceError = false;
|
|
1132
|
+
response.isContentEmpty = false;
|
|
1133
|
+
const contentForValidation = isEmail ? convert(content) : content ;
|
|
1128
1134
|
if(tags && tags.length) {
|
|
1129
1135
|
_.forEach(tags, (tag) => {
|
|
1130
1136
|
_.forEach(tag.definition.supportedModules, (module) => {
|
|
@@ -1142,6 +1148,19 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
|
|
|
1142
1148
|
let matchImg = regexImgSrc.exec(content);
|
|
1143
1149
|
const regexCustomerBarcode = /{{customer_barcode}}(?![^<]*>)/g;
|
|
1144
1150
|
let matchCustomerBarcode = regexCustomerBarcode.exec(content);
|
|
1151
|
+
// \S matches anything other than a space, a tab, a newline, or a carriage return.
|
|
1152
|
+
const validString= /\S/.test(contentForValidation);
|
|
1153
|
+
if (hasRemoveEmailUnsubscribeTag() && isEmail) {
|
|
1154
|
+
const missingTagIndex = response.missingTags.indexOf("unsubscribe");
|
|
1155
|
+
if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
|
|
1156
|
+
response.missingTags.splice(missingTagIndex, 1);
|
|
1157
|
+
if (validString) {
|
|
1158
|
+
response.valid = true;
|
|
1159
|
+
} else {
|
|
1160
|
+
response.isContentEmpty = true;
|
|
1161
|
+
}
|
|
1162
|
+
}
|
|
1163
|
+
}
|
|
1145
1164
|
while (match !== null ) {
|
|
1146
1165
|
const tagValue = match[0].substring(this.indexOfEnd(match[0], '{{'), match[0].indexOf('}}'));
|
|
1147
1166
|
match = regex.exec(content);
|
|
@@ -1175,7 +1194,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
|
|
|
1175
1194
|
}
|
|
1176
1195
|
}
|
|
1177
1196
|
}
|
|
1178
|
-
const contentForValidation = isEmail ? convert(content) : content ;
|
|
1179
1197
|
if(!validateIfTagClosed(contentForValidation)){
|
|
1180
1198
|
response.isBraceError = true;
|
|
1181
1199
|
response.valid = false;
|
|
@@ -86,4 +86,8 @@ export default defineMessages({
|
|
|
86
86
|
id: 'creatives.componentsV2.FormBuilder.imageReUpload',
|
|
87
87
|
defaultMessage: 'Re upload',
|
|
88
88
|
},
|
|
89
|
+
emailBodyEmptyError: {
|
|
90
|
+
id: 'creatives.componentsV2.FormBuilder.emailBodyEmptyError',
|
|
91
|
+
defaultMessage: 'Email body cannot be empty',
|
|
92
|
+
},
|
|
89
93
|
});
|
|
@@ -40,3 +40,17 @@ export const ORG_CHANGED = 'ORG_CHANGED';
|
|
|
40
40
|
|
|
41
41
|
export const ENABLE_AI_SUGGESTIONS = 'ENABLE_AI_SUGGESTIONS';
|
|
42
42
|
export const ERROR_IN_FETCHING_TAGS = 'Error in fetching tags';
|
|
43
|
+
|
|
44
|
+
export const GET_SUPPORT_VIDEOS_CONFIG_REQUEST =
|
|
45
|
+
'cap/GET_SUPPORT_VIDEOS_CONFIG_REQUEST';
|
|
46
|
+
export const GET_SUPPORT_VIDEOS_CONFIG_SUCCESS =
|
|
47
|
+
'cap/GET_SUPPORT_VIDEOS_CONFIG_SUCCESS';
|
|
48
|
+
export const GET_SUPPORT_VIDEOS_CONFIG_FAILURE =
|
|
49
|
+
'cap/GET_SUPPORT_VIDEOS_CONFIG_FAILURE';
|
|
50
|
+
|
|
51
|
+
export const REQUEST = 'REQUEST';
|
|
52
|
+
export const SUCCESS = 'SUCCESS';
|
|
53
|
+
export const FAILURE = 'FAILURE';
|
|
54
|
+
|
|
55
|
+
export const ENABLE_PRODUCT_SUPPORT_VIDEOS = 'ENABLE_PRODUCT_SUPPORT_VIDEOS';
|
|
56
|
+
export const DEFAULT = 'default';
|
|
@@ -12,7 +12,7 @@ import moment from 'moment';
|
|
|
12
12
|
import { GA, multipleOrgSwitch, utilsSessionStorageApi, Auth } from '@capillarytech/cap-ui-utils';
|
|
13
13
|
import { injectIntl, FormattedMessage, intlShape, FormattedHTMLMessage } from 'react-intl';
|
|
14
14
|
import messages from './messages';
|
|
15
|
-
import { makeSelectAuthenticated, makeSelectUser } from './selectors';
|
|
15
|
+
import { makeSelectAuthenticated, makeSelectUser, makeSelectDemoVideoAndLink } from './selectors';
|
|
16
16
|
import * as actions from './actions';
|
|
17
17
|
import * as locationActions from '../LanguageProvider/actions';
|
|
18
18
|
import * as appActions from '../App/actions';
|
|
@@ -21,11 +21,16 @@ import NavigationBar from '../../v2Components/NavigationBar';
|
|
|
21
21
|
import { engagePlusPublicPath, publicPath } from '../../config/path';
|
|
22
22
|
import { GTM_TRACKING_ID, CREATIVES_UI_VIEW, FAILURE } from '../App/constants';
|
|
23
23
|
import { makeSelectLocale } from '../../v2Containers/LanguageProvider/selectors';
|
|
24
|
+
import CapSupportVideosWrapper from '@capillarytech/cap-ui-library/CapSupportVideosWrapper';
|
|
25
|
+
import { replaceDynamicAndCompare } from '@capillarytech/cap-ui-library/CapSupportVideosWrapper/utils';
|
|
24
26
|
import {
|
|
25
27
|
ORG_SETTINGS_URL,
|
|
26
28
|
CAMPAIGN_SETTINGS_URL,
|
|
27
29
|
ORG_REFRESH_SEC,
|
|
28
30
|
ORG_CHANGED,
|
|
31
|
+
REQUEST,
|
|
32
|
+
DEFAULT,
|
|
33
|
+
ENABLE_PRODUCT_SUPPORT_VIDEOS,
|
|
29
34
|
} from './constants';
|
|
30
35
|
import './_cap.scss';
|
|
31
36
|
const gtm = window.dataLayer || [];
|
|
@@ -109,7 +114,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
|
|
|
109
114
|
}
|
|
110
115
|
locale = this.getMappedLocale(locale);
|
|
111
116
|
//locale = 'zh';
|
|
112
|
-
|
|
117
|
+
this.props.actions.getSupportVideosConfig();
|
|
113
118
|
moment.locale(locale);
|
|
114
119
|
window.addEventListener('storage', this.handleStorageChange, false);
|
|
115
120
|
document.addEventListener(
|
|
@@ -413,6 +418,46 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
|
|
|
413
418
|
this.setState({ showOrgChangeModal: false });
|
|
414
419
|
};
|
|
415
420
|
|
|
421
|
+
renderNavigationComponent(component) {
|
|
422
|
+
const { demoVideoAndLinkJSONData: {
|
|
423
|
+
demoVideoAndLinkJSON = {},
|
|
424
|
+
demoVideoAndLinkJSONStatus,
|
|
425
|
+
} = {},
|
|
426
|
+
Global,
|
|
427
|
+
} = this.props;
|
|
428
|
+
const { currentOrgDetails = {}, user = {} } =
|
|
429
|
+
Global || {};
|
|
430
|
+
const { lang: userLocale = '' } = user;
|
|
431
|
+
let wrapperComponent = <>{component}</>;
|
|
432
|
+
const {
|
|
433
|
+
basicDetails: { base_language: orgLocale = '' } = {},
|
|
434
|
+
accessibleFeatures = [],
|
|
435
|
+
} = currentOrgDetails || {};
|
|
436
|
+
if (
|
|
437
|
+
accessibleFeatures.includes(
|
|
438
|
+
ENABLE_PRODUCT_SUPPORT_VIDEOS
|
|
439
|
+
) &&
|
|
440
|
+
demoVideoAndLinkJSON?.is_active &&
|
|
441
|
+
demoVideoAndLinkJSONStatus !== REQUEST
|
|
442
|
+
) {
|
|
443
|
+
const demoLocale = userLocale || orgLocale || DEFAULT;
|
|
444
|
+
const JSONInContext = demoVideoAndLinkJSON?.json_config;
|
|
445
|
+
const currentPathJSON = JSONInContext?.find((routeEle) =>
|
|
446
|
+
replaceDynamicAndCompare(location?.pathname, routeEle?.route),
|
|
447
|
+
);
|
|
448
|
+
const targetElements = currentPathJSON?.target_elements || {};
|
|
449
|
+
wrapperComponent = (
|
|
450
|
+
<CapSupportVideosWrapper
|
|
451
|
+
targetElements={targetElements}
|
|
452
|
+
locale={demoLocale}
|
|
453
|
+
>
|
|
454
|
+
{component}
|
|
455
|
+
</CapSupportVideosWrapper>
|
|
456
|
+
);
|
|
457
|
+
}
|
|
458
|
+
return wrapperComponent;
|
|
459
|
+
}
|
|
460
|
+
|
|
416
461
|
render() {
|
|
417
462
|
const { Global, location } = this.props;
|
|
418
463
|
const { topbarMenuData, isLoggedIn, currentOrgDetails = {}, getUserDataStatus, getUserDataCode } = Global;
|
|
@@ -444,6 +489,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
|
|
|
444
489
|
<CapSomethingWentWrong url={`${window.location.origin}${publicPath}v2`} />
|
|
445
490
|
}
|
|
446
491
|
{isLoggedIn && type !== 'embedded' ?
|
|
492
|
+
this.renderNavigationComponent(
|
|
447
493
|
<NavigationBar
|
|
448
494
|
userData={Global}
|
|
449
495
|
changeOrg={this.changeOrg}
|
|
@@ -455,7 +501,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
|
|
|
455
501
|
topbarMenuData={topbarMenuDataOptions}
|
|
456
502
|
location={location}
|
|
457
503
|
campaignOrgV2Status={currentOrgDetails.org_campaign_v2_status}
|
|
458
|
-
|
|
504
|
+
/>) : ''}
|
|
459
505
|
<div className="main" style={{minHeight: 'calc(100vh - 74px', position: 'relative', top: '74px'}}>
|
|
460
506
|
|
|
461
507
|
<div className="main-content">
|
|
@@ -488,12 +534,14 @@ Cap.propTypes = {
|
|
|
488
534
|
locationActions: PropTypes.object,
|
|
489
535
|
location: PropTypes.object,
|
|
490
536
|
intl: intlShape.isRequired,
|
|
537
|
+
demoVideoAndLinkJSONData: PropTypes.object,
|
|
491
538
|
};
|
|
492
539
|
|
|
493
540
|
const mapStateToProps = createStructuredSelector({
|
|
494
541
|
Global: makeSelectAuthenticated(),
|
|
495
542
|
User: makeSelectUser(),
|
|
496
543
|
loader: makeSelectLocale(),
|
|
544
|
+
demoVideoAndLinkJSONData: makeSelectDemoVideoAndLink(),
|
|
497
545
|
});
|
|
498
546
|
|
|
499
547
|
function mapDispatchToProps(dispatch) {
|
|
@@ -127,6 +127,18 @@ function capReducer(state = fromJS(initialState.cap), action) {
|
|
|
127
127
|
.set('tagsToDisable', action.tagsToDisable)
|
|
128
128
|
.set('parentTagsToDisable', action.parentTagsToDisable);
|
|
129
129
|
}
|
|
130
|
+
case types.GET_SUPPORT_VIDEOS_CONFIG_REQUEST:
|
|
131
|
+
return state
|
|
132
|
+
.set('demoVideoAndLinkJSONStatus', types.REQUEST)
|
|
133
|
+
.set('demoVideoAndLinkJSON', {});
|
|
134
|
+
case types.GET_SUPPORT_VIDEOS_CONFIG_SUCCESS:
|
|
135
|
+
return state
|
|
136
|
+
.set('demoVideoAndLinkJSONStatus', types.SUCCESS)
|
|
137
|
+
.set('demoVideoAndLinkJSON', action?.result);
|
|
138
|
+
case types.GET_SUPPORT_VIDEOS_CONFIG_FAILURE:
|
|
139
|
+
return state
|
|
140
|
+
.set('demoVideoAndLinkJSONStatus', types.FAILURE)
|
|
141
|
+
.set('demoVideoAndLinkJSONError', action?.error);
|
|
130
142
|
default:
|
|
131
143
|
return state;
|
|
132
144
|
}
|
|
@@ -171,6 +171,25 @@ function* getTopbarMenuData(params) {
|
|
|
171
171
|
}
|
|
172
172
|
}
|
|
173
173
|
|
|
174
|
+
export function* getSupportVideosConfig({ callback }) {
|
|
175
|
+
try {
|
|
176
|
+
const response = yield call(Api.getSupportVideosConfig);
|
|
177
|
+
if (response?.success) {
|
|
178
|
+
yield put({
|
|
179
|
+
type: types.GET_SUPPORT_VIDEOS_CONFIG_SUCCESS,
|
|
180
|
+
result: response?.data || {},
|
|
181
|
+
});
|
|
182
|
+
} else {
|
|
183
|
+
yield put({
|
|
184
|
+
type: types.GET_SUPPORT_VIDEOS_CONFIG_FAILURE,
|
|
185
|
+
error: response?.message,
|
|
186
|
+
});
|
|
187
|
+
}
|
|
188
|
+
if (callback) callback(response);
|
|
189
|
+
} catch (error) {
|
|
190
|
+
yield put({ type: types.GET_SUPPORT_VIDEOS_CONFIG_FAILURE, error });
|
|
191
|
+
}
|
|
192
|
+
}
|
|
174
193
|
|
|
175
194
|
function* watchFetchSchemaForEntity() {
|
|
176
195
|
const watcher = yield takeLatest(types.GET_SCHEMA_FOR_ENTITY_REQUEST, fetchSchemaForEntity);
|
|
@@ -195,6 +214,13 @@ function* watchGetTopbarMenuData() {
|
|
|
195
214
|
yield takeLatest(types.GET_TOPBAR_MENU_DATA_REQUEST, getTopbarMenuData);
|
|
196
215
|
}
|
|
197
216
|
|
|
217
|
+
export function* watchForGetVideosConfig() {
|
|
218
|
+
yield takeLatest(
|
|
219
|
+
types.GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
|
|
220
|
+
getSupportVideosConfig,
|
|
221
|
+
);
|
|
222
|
+
}
|
|
223
|
+
|
|
198
224
|
export default [
|
|
199
225
|
loginFlow,
|
|
200
226
|
watchForOrgChange,
|
|
@@ -202,5 +228,6 @@ export default [
|
|
|
202
228
|
watchForFetchUserInfo,
|
|
203
229
|
watchFetchSchemaForEntity,
|
|
204
230
|
watchGetTopbarMenuData,
|
|
231
|
+
watchForGetVideosConfig,
|
|
205
232
|
];
|
|
206
233
|
|
|
@@ -87,6 +87,13 @@ const makeSelectLoyaltyPromotionDisplay = () => createSelector(
|
|
|
87
87
|
}),
|
|
88
88
|
);
|
|
89
89
|
|
|
90
|
+
const makeSelectDemoVideoAndLink = () =>
|
|
91
|
+
createSelector(selectCapDomain, (substate) => ({
|
|
92
|
+
demoVideoAndLinkJSON: substate.get('demoVideoAndLinkJSON'),
|
|
93
|
+
demoVideoAndLinkJSONStatus: substate.get('demoVideoAndLinkJSONStatus'),
|
|
94
|
+
demoVideoAndLinkJSONError: substate.get('demoVideoAndLinkJSONError'),
|
|
95
|
+
}));
|
|
96
|
+
|
|
90
97
|
export {
|
|
91
98
|
makeSelectLocationState,
|
|
92
99
|
makeSelectAuthenticated,
|
|
@@ -100,4 +107,5 @@ export {
|
|
|
100
107
|
setInjectedTags,
|
|
101
108
|
makeSelectLoyaltyPromotionDisplay,
|
|
102
109
|
makeSelectFetchingSchemaError,
|
|
110
|
+
makeSelectDemoVideoAndLink,
|
|
103
111
|
};
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
// This test in written using React Testing library. Written during setting up this library to make sure tests are working.
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { injectIntl } from 'react-intl';
|
|
4
|
+
import '@testing-library/jest-dom';
|
|
5
|
+
import { screen } from '@testing-library/react';
|
|
6
|
+
import { Provider } from 'react-redux';
|
|
7
|
+
import cloneDeep from 'lodash/cloneDeep';
|
|
8
|
+
import configureStore from '../../../store';
|
|
9
|
+
import { render } from '../../../utils/test-utils';
|
|
10
|
+
import { Cap } from '../index';
|
|
11
|
+
import mockData from '../../mockdata';
|
|
12
|
+
const {
|
|
13
|
+
demoVideoAndLinkJSONData,
|
|
14
|
+
history,
|
|
15
|
+
location,
|
|
16
|
+
match,
|
|
17
|
+
Global,
|
|
18
|
+
} = mockData;
|
|
19
|
+
|
|
20
|
+
const ComponentToRender = injectIntl(Cap);
|
|
21
|
+
|
|
22
|
+
const renderComponent = (props) => {
|
|
23
|
+
const store = configureStore({}, null);
|
|
24
|
+
render(
|
|
25
|
+
<Provider store={store}>
|
|
26
|
+
<ComponentToRender {...props} />
|
|
27
|
+
</Provider>,
|
|
28
|
+
);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
jest.setTimeout(15000);
|
|
32
|
+
jest.mock('@capillarytech/cap-ui-utils', () => ({
|
|
33
|
+
...jest.requireActual('@capillarytech/cap-ui-utils'),
|
|
34
|
+
GA: {
|
|
35
|
+
initialize: jest.fn(),
|
|
36
|
+
timeTracker: {
|
|
37
|
+
stopTimer: jest.fn(),
|
|
38
|
+
startTimer: jest.fn(),
|
|
39
|
+
},
|
|
40
|
+
setCustomDimension: jest.fn(),
|
|
41
|
+
getCallerName: jest.fn(),
|
|
42
|
+
},
|
|
43
|
+
Auth: {
|
|
44
|
+
hasAccess: () => jest.fn(() => true),
|
|
45
|
+
hasFeatureAccess: () => jest.fn(() => true),
|
|
46
|
+
authHoc: jest.fn(),
|
|
47
|
+
initialize: jest.fn(),
|
|
48
|
+
},
|
|
49
|
+
multipleOrgSwitch: {
|
|
50
|
+
logNewTab: jest.fn(),
|
|
51
|
+
utilsGetOrgNameFromId: () => 'org2',
|
|
52
|
+
tabBeforeUnloadEventHandler: jest.fn(),
|
|
53
|
+
utilsHandleStorageChange: () => jest.fn(() => true),
|
|
54
|
+
isMultipleTabsOpen: () => jest.fn(() => true),
|
|
55
|
+
},
|
|
56
|
+
utilsSessionStorageApi: {
|
|
57
|
+
loadSessionItem: () => true,
|
|
58
|
+
saveSessionItem: jest.fn(),
|
|
59
|
+
},
|
|
60
|
+
}));
|
|
61
|
+
|
|
62
|
+
// jest.mock('../../../components/NavigationBar');
|
|
63
|
+
|
|
64
|
+
jest.mock('@capillarytech/cap-ui-library/CapSupportVideosWrapper', () => {
|
|
65
|
+
const ChildComponent = (props) => {
|
|
66
|
+
const { targetElements } = props;
|
|
67
|
+
const DEMO_LABEL =
|
|
68
|
+
targetElements[Object.keys(targetElements)[1]]?.support_video?.target_url
|
|
69
|
+
?.default?.label;
|
|
70
|
+
return <h4>{DEMO_LABEL}</h4>;
|
|
71
|
+
};
|
|
72
|
+
return ChildComponent;
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
describe('Cap', () => {
|
|
76
|
+
afterEach(() => {
|
|
77
|
+
jest.clearAllMocks();
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
const actions = {
|
|
81
|
+
authenticate: jest.fn(),
|
|
82
|
+
addMessageToQueue: jest.fn(),
|
|
83
|
+
changeOrg: jest.fn(),
|
|
84
|
+
changeOu: jest.fn(),
|
|
85
|
+
changeOuFailure: jest.fn(),
|
|
86
|
+
changeOuSuccess: jest.fn(),
|
|
87
|
+
fetchMenuSearchResults: jest.fn(),
|
|
88
|
+
clearTopbarMenuData: jest.fn(),
|
|
89
|
+
getAllUsers: jest.fn(),
|
|
90
|
+
getStartOfWeekForOrg: jest.fn(),
|
|
91
|
+
getTopbarMenuData: jest.fn(),
|
|
92
|
+
getUserData: jest.fn(),
|
|
93
|
+
loginSuccess: jest.fn(),
|
|
94
|
+
logout: jest.fn(),
|
|
95
|
+
removeMessageFromQueue: jest.fn(),
|
|
96
|
+
setActiveReportStatus: jest.fn(),
|
|
97
|
+
getSupportedLocales: jest.fn(),
|
|
98
|
+
getSupportVideosConfig: jest.fn(),
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
// Assign the mock window object to the global object
|
|
102
|
+
const originalLocation = window.location;
|
|
103
|
+
delete window.location;
|
|
104
|
+
window.location = { ...originalLocation, pathname: '/creatives/ui/v2' };
|
|
105
|
+
|
|
106
|
+
const props = {
|
|
107
|
+
demoVideoAndLinkJSONData,
|
|
108
|
+
history,
|
|
109
|
+
location: { ...location, query: { type: '' }},
|
|
110
|
+
match,
|
|
111
|
+
Global,
|
|
112
|
+
actions,
|
|
113
|
+
appActions: {
|
|
114
|
+
getSidebar: jest.fn(),
|
|
115
|
+
},
|
|
116
|
+
loader: { localeLoading: false },
|
|
117
|
+
intl: { formatMessage: jest.fn() },
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
const mockReplaceDynamicAndCompare = () => {
|
|
121
|
+
// Mocking replaceDynamicAndCompare function to get the currentPathJSON
|
|
122
|
+
jest.mock(
|
|
123
|
+
'@capillarytech/cap-ui-library/CapSupportVideosWrapper/utils',
|
|
124
|
+
() => ({
|
|
125
|
+
replaceDynamicAndCompare: jest.fn((pathname, route) => {
|
|
126
|
+
if (pathname === '/creatives/ui/v2') {
|
|
127
|
+
return {
|
|
128
|
+
target_elements: { element1: 'video1', element2: 'video2' },
|
|
129
|
+
};
|
|
130
|
+
}
|
|
131
|
+
return null;
|
|
132
|
+
}),
|
|
133
|
+
}),
|
|
134
|
+
);
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
const { findByText, queryByText } = screen;
|
|
138
|
+
|
|
139
|
+
it('Should show Demo text for video support', async () => {
|
|
140
|
+
mockReplaceDynamicAndCompare();
|
|
141
|
+
renderComponent(props);
|
|
142
|
+
expect(await findByText(/Demo/i)).toBeInTheDocument();
|
|
143
|
+
});
|
|
144
|
+
|
|
145
|
+
it('Should show Demo text for video support with orgLocale if userLocal is not present', async () => {
|
|
146
|
+
mockReplaceDynamicAndCompare();
|
|
147
|
+
const updatedProps = cloneDeep(props);
|
|
148
|
+
delete updatedProps.Global.user.lang;
|
|
149
|
+
renderComponent(updatedProps);
|
|
150
|
+
expect(await findByText(/Demo/i)).toBeInTheDocument();
|
|
151
|
+
});
|
|
152
|
+
|
|
153
|
+
it('Should not show Demo text for video support if targetELements not found', async () => {
|
|
154
|
+
mockReplaceDynamicAndCompare();
|
|
155
|
+
const updatedProps = cloneDeep(props);
|
|
156
|
+
delete updatedProps.demoVideoAndLinkJSONData.demoVideoAndLinkJSON
|
|
157
|
+
.json_config?.[0]?.target_elements;
|
|
158
|
+
renderComponent(updatedProps);
|
|
159
|
+
expect(queryByText(/Demo/i)).toBeNull();
|
|
160
|
+
});
|
|
161
|
+
});
|
|
@@ -41,6 +41,7 @@ exports[`<Cap /> should render correct component 1`] = `
|
|
|
41
41
|
"clearMetaEntities": [Function],
|
|
42
42
|
"clearTopbarMenuData": [Function],
|
|
43
43
|
"fetchSchemaForEntity": [Function],
|
|
44
|
+
"getSupportVideosConfig": [Function],
|
|
44
45
|
"getTopbarMenuData": [Function],
|
|
45
46
|
"getUserData": [Function],
|
|
46
47
|
"logout": [Function],
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as types from '../constants';
|
|
2
|
+
import * as actions from '../actions';
|
|
3
|
+
|
|
4
|
+
describe('Test CAP actions', () => {
|
|
5
|
+
it('has a type of GET_SUPPORT_VIDEOS_CONFIG_REQUEST action', () => {
|
|
6
|
+
const expected = {
|
|
7
|
+
type: types.GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
|
|
8
|
+
};
|
|
9
|
+
expect(actions.getSupportVideosConfig()).toEqual(expected);
|
|
10
|
+
});
|
|
11
|
+
});
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { fromJS } from 'immutable';
|
|
2
|
+
import {
|
|
3
|
+
GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
|
|
4
|
+
GET_SUPPORT_VIDEOS_CONFIG_SUCCESS,
|
|
5
|
+
GET_SUPPORT_VIDEOS_CONFIG_FAILURE,
|
|
6
|
+
REQUEST,
|
|
7
|
+
SUCCESS,
|
|
8
|
+
FAILURE,
|
|
9
|
+
} from '../constants';
|
|
10
|
+
import reducer from '../reducer';
|
|
11
|
+
import initialState from '../../../initialState';
|
|
12
|
+
|
|
13
|
+
const mockedInitialState = fromJS(initialState.cap);
|
|
14
|
+
|
|
15
|
+
describe('should handle GET_SUPPORT_VIDEOS_CONFIG', () => {
|
|
16
|
+
it('should handle GET_SUPPORT_VIDEOS_CONFIG_REQUEST', () => {
|
|
17
|
+
const action = {
|
|
18
|
+
type: GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
|
|
19
|
+
};
|
|
20
|
+
expect(reducer(mockedInitialState, action).toJS()).toEqual({
|
|
21
|
+
...mockedInitialState.toJS(),
|
|
22
|
+
demoVideoAndLinkJSON: {},
|
|
23
|
+
demoVideoAndLinkJSONStatus: REQUEST,
|
|
24
|
+
});
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
it('it handles the GET_SUPPORT_VIDEOS_CONFIG_SUCCESS action', () => {
|
|
28
|
+
const result = {
|
|
29
|
+
is_active: true,
|
|
30
|
+
_id: "12345",
|
|
31
|
+
json_config: [
|
|
32
|
+
{ data: 'Test data' },
|
|
33
|
+
],
|
|
34
|
+
};
|
|
35
|
+
const action = {
|
|
36
|
+
type: GET_SUPPORT_VIDEOS_CONFIG_SUCCESS,
|
|
37
|
+
result,
|
|
38
|
+
GET_SUPPORT_VIDEOS_CONFIG_SUCCESS,
|
|
39
|
+
};
|
|
40
|
+
expect(reducer(mockedInitialState, action).toJS()).toEqual({
|
|
41
|
+
...mockedInitialState.toJS(),
|
|
42
|
+
demoVideoAndLinkJSON: result,
|
|
43
|
+
demoVideoAndLinkJSONStatus: SUCCESS,
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
it('should handle GET_SUPPORT_VIDEOS_CONFIG_FAILURE', () => {
|
|
48
|
+
const error = 'Error';
|
|
49
|
+
const action = {
|
|
50
|
+
type: GET_SUPPORT_VIDEOS_CONFIG_FAILURE,
|
|
51
|
+
error,
|
|
52
|
+
};
|
|
53
|
+
expect(reducer(mockedInitialState, action).toJS()).toEqual({
|
|
54
|
+
...mockedInitialState.toJS(),
|
|
55
|
+
demoVideoAndLinkJSONError: error,
|
|
56
|
+
demoVideoAndLinkJSONStatus: FAILURE,
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
});
|