@capillarytech/creatives-library 7.15.4 → 7.15.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.15.4",
+  "version": "7.15.6",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/reducers.js

@@ -20,6 +20,7 @@ import tagsReducer from 'containers/TagList/reducer';
 import emailReducer from 'containers/Email/reducer';
 import ebillReducer from 'containers/Ebill/reducer';
 import ftpReducer from 'v2Containers/FTP/reducer';
+import galleryReducer from './v2Containers/Assets/Gallery/reducer';
 /*
  * routeReducer
  *
@@ -66,6 +67,7 @@ export default function createReducer(asyncReducers) {
     beeEditor: beeEditorReducer,
     facebookPreview: CapFacebookPreviewReducer,
     FTP: ftpReducer,
+    gallery: galleryReducer,
     ...asyncReducers,
   });
 }

package/tests/integration/TemplateCreation/TemplateCreation.integration.test.js

@@ -0,0 +1,420 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { createMemoryHistory } from 'history';
+import userEvent from '@testing-library/user-event';
+import { server } from './msw-handler';
+import {
+  render,
+  fireEvent,
+  screen,
+  within,
+} from '../../../utils/test-utils';
+
+import configureStore from '../../../store';
+import { mockInitialState } from './mocks/initialState';
+import TemplatesV2 from '../../../v2Containers/TemplatesV2';
+import globalMessages from '../../../v2Containers/Cap/messages';
+import * as helper from './helper';
+
+jest.mock('@capillarytech/cap-ui-utils', () => ({
+  ...jest.requireActual('@capillarytech/cap-ui-utils'),
+  GA: {
+    ...jest.requireActual('@capillarytech/cap-ui-utils').GA,
+    initialize: jest.fn(),
+    setCustomDimension: jest.fn(),
+    getCallerName: jest.fn(),
+    tracker: {
+      trackException: jest.fn(),
+    },
+  },
+}));
+
+jest.setTimeout(60000);
+
+let history;
+
+const initializeCreatives = () => {
+  const store = configureStore(mockInitialState, history);
+  history = createMemoryHistory();
+  history.push('creatives/ui/v2');
+  render(
+    <Provider store={store}>
+      <Router history={history}>
+        <TemplatesV2 />
+      </Router>
+    </Provider>,
+  );
+};
+
+// establish API mocking before all tests
+beforeEach(() => {
+  server.listen();
+  localStorage.clear();
+  localStorage.setItem('token', true);
+});
+
+// clean up once the tests are done
+afterAll(() => {
+  server.resetHandlers();
+  server.close();
+  jest.resetAllMocks();
+  delete window?.capAuth;
+});
+
+const delay = (ms) => new Promise((res) => setTimeout(res, ms));
+
+describe("Creatives testing template creation", () => {
+  it("Should navigate from creatives home page and create template in RCS channel", async () => {
+    initializeCreatives();
+    const creativesScreen = await helper.getCreativesScreen();
+    expect(creativesScreen.getByText(globalMessages.creatives.defaultMessage, {})).toBeInTheDocument();
+
+    // for navigation among different channels
+    const rcs = creativesScreen.getByRole('tab', {
+      name: /rcs/i,
+    });
+    const whatsapp = creativesScreen.getByRole('tab', {
+      name: /whatsapp/i,
+    });
+    const wechat = creativesScreen.getByRole('tab', {
+      name: /wechat/i,
+    });
+    const facebook = creativesScreen.getByRole('tab', {
+      name: /facebook/i,
+    });
+    const mpush = creativesScreen.getByRole('tab', {
+      name: /push notification/i,
+    });
+    const line = creativesScreen.getByRole('tab', {
+      name: /line/i,
+    });
+    const email = creativesScreen.getByRole('tab', {
+      name: globalMessages.email.defaultMessage,
+    });
+    await userEvent.click(whatsapp);
+    expect(creativesScreen.getByText(
+      /Whatsapp accounts are not setup for your brand/i)
+    ).toBeInTheDocument();
+    await userEvent.click(line);
+    //assertions for template filters for line channel
+    expect(creativesScreen.getByText(/rich video message/i)).toBeInTheDocument();
+    userEvent.click(creativesScreen.getByText(/rich video message/i));
+    expect(creativesScreen.getByText(/card message/i)).toBeInTheDocument();
+    userEvent.click(creativesScreen.getByText(/card message/i));
+    expect(creativesScreen.getByText(/Rich message/i)).toBeInTheDocument();
+    userEvent.click(creativesScreen.getByText(/Rich message/i));
+    expect(creativesScreen.getByText(/image/i)).toBeInTheDocument();
+    userEvent.click(creativesScreen.getByText(/image/i));
+    expect(creativesScreen.getByText(/text/i)).toBeInTheDocument();
+    userEvent.click(creativesScreen.getByText(/text/i));
+    await userEvent.click(facebook);
+    await userEvent.click(wechat);
+    expect(creativesScreen.getByText(/wechat account/i)).toBeInTheDocument();
+    await userEvent.click(mpush);
+    expect(
+      creativesScreen.getByText(/push notifications are not setup for your brand/i)
+    ).toBeInTheDocument();
+    await userEvent.click(email);
+
+    //start of rcs template creation
+    await userEvent.click(rcs);
+    const createButton = creativesScreen.getByRole('button', {
+      name: /create new/i,
+    });
+    await userEvent.click(createButton);
+    expect(creativesScreen.getByText(/Creative name/i, {})).toBeInTheDocument();
+    const templateNameInput = await creativesScreen.findByTestId(
+      /template_name/,
+      {},
+    );
+
+    // Enter a template name
+    fireEvent.change(templateNameInput, {
+      target: { value: 'rcs_test_template' },
+    });
+    const imageRadioBtn = creativesScreen.getByText(/image/i);
+    fireEvent.click(imageRadioBtn);
+    const imageUploader = await creativesScreen.findByText(/drag and drop image here/i);
+    expect(imageUploader).toBeInTheDocument();
+    const noneRadioBtn = await creativesScreen.findByText(/none/i);
+    fireEvent.click(noneRadioBtn);
+    expect(imageUploader).not.toBeInTheDocument();
+
+    // Enter the template title
+    const templateTitleInput = await creativesScreen.findByTestId(
+      /template_title/,
+      {},
+    );
+    fireEvent.change(templateTitleInput, {
+      target: { value: 'rcs_template_title' },
+    });
+
+    // Enter the text in template text area
+    const templateTextInput = await creativesScreen.findByTestId(
+      /rcs_text_area/,
+      {},
+    );
+    fireEvent.change(templateTextInput, {
+      target: { value: 'rcs_template_text' },
+    });
+
+    // click on Done button
+    const doneButton = creativesScreen.getByRole('button', {
+      name: globalMessages.done.defaultMessage,
+    });
+    await userEvent.click(doneButton);
+    expect(createButton).toBeInTheDocument();
+  });
+
+  it("Should navigate from creatives home page and create template in RCS channel with CTA buttons", async () => {
+    initializeCreatives();
+    const creativesScreen = await helper.getCreativesScreen();
+    const rcs = creativesScreen.getByRole('tab', {
+      name: /rcs/i,
+    });
+    await userEvent.click(rcs);
+    const createButton = creativesScreen.getByRole('button', {
+      name: /create new/i,
+    });
+    await userEvent.click(createButton);
+    const templateNameInput = await creativesScreen.findByTestId(
+      /template_name/,
+      {},
+    );
+    //Enter a template name
+    fireEvent.change(templateNameInput, {
+      target: { value: 'rcs_test_template' },
+    });
+    const templateTitleInput = await creativesScreen.findByTestId(
+      /template_title/,
+      {},
+    );
+    //Enter a template title
+    fireEvent.change(templateTitleInput, {
+      target: { value: 'rcs_template_title' },
+    });
+    const templateTextInput = await creativesScreen.findByTestId(
+      /rcs_text_area/,
+      {},
+    );
+    //Enter a template text area
+    fireEvent.change(templateTextInput, {
+      target: { value: 'rcs_template_text' },
+    });
+    const ctaCheckBox = creativesScreen.getByText(/call to action/i);
+    fireEvent.click(ctaCheckBox);
+    const doneButton = creativesScreen.getByRole('button', {
+      name: globalMessages.done.defaultMessage,
+    });
+    //done button will be disabled cta button is not configured
+    expect(doneButton).toBeDisabled();
+
+    //configuring cta button
+    //accessing cta button textBox by char limit
+    const textLimit = creativesScreen.getByText(/0 \/ 20/i);
+    const ctaBtnText = textLimit.parentElement.previousSibling;
+
+    //configuring CTA button text and URL
+    fireEvent.change(ctaBtnText, {
+      target: { value: 'cta_button' },
+    });
+    const ctaLink = await creativesScreen.findByTestId(
+      /cta_btn_link/,
+      {},
+    );
+    fireEvent.change(ctaLink, {
+      target: { value: 'invalid url' },
+    });
+    const urlError = creativesScreen.getByText(/button url is not valid/i);
+    expect(urlError).toBeInTheDocument();
+    fireEvent.change(ctaLink, {
+      target: { value: 'https://capillarytech.com/' },
+    });
+    expect(urlError).not.toBeInTheDocument();
+    //saving the template
+    fireEvent.click(doneButton);
+    expect(createButton).toBeInTheDocument();
+  });
+
+  it("Should navigate from creatives home page and create template in Viber channel", async () => {
+    initializeCreatives();
+    const creativesScreen = await helper.getCreativesScreen();
+    expect(creativesScreen.getByText(/Creatives/i, {})).toBeInTheDocument();
+    const viberTab = creativesScreen.getByRole('tab', {
+      name: /viber/i,
+    });
+
+    // navigating to Viber channel
+    await userEvent.click(viberTab);
+    const createButton = creativesScreen.getByRole('button', {
+      name: /create new/i,
+    });
+    await userEvent.click(createButton);
+    const doneButton = creativesScreen.getByRole('button', {
+      name: globalMessages.done.defaultMessage,
+    });
+    //should be disabled as template is not yet confiured
+    expect(doneButton).toBeDisabled();
+
+    // enter template name
+    const templateNameInput = await creativesScreen.findByTestId(
+      /template_name/,
+      {},
+    );
+    fireEvent.change(templateNameInput, {
+      target: { value: 'viber_test_template' },
+    });
+    fireEvent.change(templateNameInput, {
+      target: { value: '' },
+    });
+    // error case assertion
+    expect(creativesScreen.getByText(/Template title can not be empty/i)).toBeInTheDocument();
+    fireEvent.change(templateNameInput, {
+      target: { value: 'viber_test_template' },
+    });
+
+    const templateTextInput = await creativesScreen.getByText(
+      /Text message/,
+      {},
+    );
+    const msgBox = templateTextInput.parentElement.nextSibling.firstChild;
+    //Enter a template text message
+    fireEvent.change(msgBox, {
+      target: { value: 'viber_template_message' },
+    });
+
+    //assertions for error cases in template message
+    fireEvent.change(msgBox, {
+      target: { value: '  ' },
+    });
+    expect(creativesScreen.getByText(/template content can not be empty/i)).toBeInTheDocument();
+    fireEvent.change(msgBox, {
+      target: { value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
+    });
+    expect(creativesScreen.getByText(/Template content can not be more than 1000/i)).toBeInTheDocument();
+    fireEvent.change(msgBox, {
+      target: { value: ' viber_test_template}}} ' },
+    });
+    expect(creativesScreen.getByText(/Invalid label, please close all curly braces/i)).toBeInTheDocument();
+    fireEvent.change(msgBox, {
+      target: { value: 'viber_test_template' },
+    });
+    const addLabel = creativesScreen.getByRole('button', {
+      name: globalMessages.addLabels.defaultMessage,
+    });
+    // first click opens the popup, and second click closes it, clicking twice is intentional
+    userEvent.click(addLabel);
+    userEvent.click(addLabel);
+    const imageUploader = creativesScreen.getByRole('button', {
+      name: /drag and drop image here or your computer gallery/i,
+    });
+    expect(within(imageUploader).getByRole('button', {
+      name: /your computer/i,
+    })).toBeInTheDocument();
+    const galleryBtn = within(imageUploader).getByRole('button', {
+      name: globalMessages.gallery.defaultMessage,
+    });
+
+    //configuring CTA button
+    const btnText = creativesScreen.getByText(/button text/i);
+    const btnTextBox = btnText.nextSibling.firstChild;
+    fireEvent.change(btnTextBox, {
+      target: { value: 'button' },
+    });
+    const btnUrl = creativesScreen.getByText(/button url/i);
+    const btnUrlBox = btnUrl.nextSibling.firstChild;
+    fireEvent.change(btnUrlBox, {
+      target: { value: 'button' },
+    });
+    expect(
+      creativesScreen.getByText(/button url is not valid/i)
+    ).toBeInTheDocument();
+    fireEvent.change(btnUrlBox, {
+      target: { value: 'https://capillarytech.com/' },
+    });
+    await userEvent.click(galleryBtn);
+    delay(10000);
+    expect(
+      screen.getByText(/loading gallery.../i)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', {
+        name: /close/i,
+      })
+    ).toBeInTheDocument();
+    await userEvent.click(doneButton);
+    expect(createButton).toBeInTheDocument();
+  });
+
+  it("Should navigate from creatives home page and create template in Line channel", async () => {
+    initializeCreatives();
+    const creativesScreen = await helper.getCreativesScreen();
+    expect(creativesScreen.getByText(/Creatives/i, {})).toBeInTheDocument();
+    const LineTab = creativesScreen.getByRole('tab', {
+      name: /Line/i,
+    });
+
+    // navigating to Viber channel
+    await userEvent.click(LineTab);
+    const createButton = creativesScreen.getByRole('button', {
+      name: /create new/i,
+    });
+    fireEvent.click(createButton);
+    const doneButton = creativesScreen.getByRole('button', {
+      name: globalMessages.done.defaultMessage,
+    });
+    //should be disabled as template is not yet confiured
+    expect(doneButton).toBeDisabled();
+    // enter template name
+    const templateNameInput = creativesScreen.getByTestId(
+      /template_name/, {});
+    fireEvent.change(templateNameInput, {
+      target: { value: 'line_test_template' },
+    });
+    fireEvent.change(templateNameInput, {
+      target: { value: '' },
+    });
+    // error case assertion
+    expect(creativesScreen.getByText(/Template title can not be empty/i)).toBeInTheDocument();
+    fireEvent.change(templateNameInput, {
+      target: { value: 'line_test_template' },
+    });
+
+    const templateTextInput = await creativesScreen.getByText(
+      /Text message/,
+      {},
+
+    );
+    const msgBox = templateTextInput.parentElement.nextSibling.firstChild;
+    //Enter a template text message
+    fireEvent.change(msgBox, {
+      target: { value: 'viber_template_message' },
+    });
+
+    //assertions for error cases in template message
+    fireEvent.change(msgBox, {
+      target: { value: '  ' },
+    });
+    expect(creativesScreen.getByText(/template content can not be empty/i)).toBeInTheDocument();
+    fireEvent.change(msgBox, {
+      target: { value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' },
+    });
+    expect(creativesScreen.getByText(/Template content can not be more than 1600/i)).toBeInTheDocument();
+    fireEvent.change(msgBox, {
+      target: { value: ' viber_test_template}}} ' },
+    });
+    expect(creativesScreen.getByText(/Invalid label, please close all curly braces/i)).toBeInTheDocument();
+    fireEvent.change(msgBox, {
+      target: { value: 'viber_test_template' },
+    });
+    const addLabel = creativesScreen.getByRole('button', {
+      name: globalMessages.addLabels.defaultMessage,
+    });
+    userEvent.click(addLabel);
+    userEvent.click(addLabel);
+    //saving the template
+    await userEvent.click(doneButton);
+    expect(createButton).toBeInTheDocument();
+  });
+});