@capillarytech/creatives-library 7.11.2 → 7.11.3

package/v2Containers/Whatsapp/tests/__snapshots__/utils.test.js.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test utils test getWhatsappContent 1`] = `
+<React.Fragment>
+  <CapLabel
+    type="label9"
+  >
+    1234567890
+  </CapLabel>
+  <CapLabel
+    type="label1"
+  >
+    
+Click {{unsubscribe}} to unsubscribe
+  </CapLabel>
+</React.Fragment>
+`;
+
+exports[`Test utils test getWhatsappContent for preview 1`] = `
+<React.Fragment>
+  <CapLabel
+    type="label5"
+  >
+    1234567890
+  </CapLabel>
+  <CapLabel
+    type="label11"
+  >
+    
+Click {{unsubscribe}} to unsubscribe
+  </CapLabel>
+</React.Fragment>
+`;

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

@@ -63,6 +63,15 @@ describe('Creatives Whatsapp test/>', () => {
     expect(renderedComponent).toMatchSnapshot();
   });
 
+  it('test addVariable in create mode', () => {
+    renderHelper({});
+    renderedComponent
+      .find('CapHeader').at(1)
+      .props().suffix
+      .props.onClick();
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
   it('template name change', () => {
     renderHelper({});
     const templateNameRenderHelper = (val) => {
@@ -112,6 +121,10 @@ describe('Creatives Whatsapp test/>', () => {
     expect(renderedComponent).toMatchSnapshot();
     templateMessageRenderHelper('Hi {{{1}}}');
     expect(renderedComponent).toMatchSnapshot();
+
+    //test variable autocomplete
+    templateMessageRenderHelper('Hi {{');
+    expect(renderedComponent).toMatchSnapshot();
   });
 
   it('send for approval should be disabled', () => {

package/v2Containers/Whatsapp/tests/utils.test.js

@@ -10,7 +10,11 @@ const {
 
 describe('Test utils', () => {
   it('test getWhatsappContent', () => {
-    expect(getWhatsappContent(previewTemplateData)).toEqual(getWhatsappContentOutput);
+    expect(getWhatsappContent(previewTemplateData)).toMatchSnapshot();
+  });
+
+  it('test getWhatsappContent for preview', () => {
+    expect(getWhatsappContent(previewTemplateData, true)).toMatchSnapshot();
   });
 
   it('test getWhatsappStatus', () => {

package/v2Containers/Whatsapp/utils.js

@@ -1,3 +1,5 @@
+import React from 'react';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import { WHATSAPP } from '../CreativesContainer/constants';
 import {
     STATUS_OPTIONS,
@@ -5,7 +7,7 @@ import {
     WHATSAPP_STATUSES,
 } from '../Whatsapp/constants';
 
-export const getWhatsappContent = (template) => {
+export const getWhatsappContent = (template, isPreview) => {
     const {
         versions: {
             base: {
@@ -26,7 +28,16 @@ export const getWhatsappContent = (template) => {
         `${validVarArr[validVarArr.length - 1]}`,
         '{{unsubscribe}}',
     );
-    return text;
+    return (
+        <>
+          <CapLabel type={ isPreview ? "label5" : "label9" }>
+            {text.slice(0, text.length - 37)}
+          </CapLabel>
+          <CapLabel type={ isPreview ? "label11" : "label1" }>
+            {text.slice(-37)}
+          </CapLabel>
+        </>
+    );
 }
 
 export const getWhatsappCategory = (category) => {