@capillarytech/creatives-library 9.0.70-alpha.sprint-cap-213712.13 → 9.0.71

package/v2Containers/WebPush/Create/tests/stayOpenOnSave.test.js

@@ -0,0 +1,268 @@
+/**
+ * Full mode keeps the slidebox open after saving: a create continues in place (the next save
+ * updates the created template); edits stay open. Mocks mirror contentValidity.test.js, with the
+ * template name and save action wired to real handlers.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+
+// ── Infrastructure / HOC mocks ──────────────────────────────────────────────
+jest.mock('../../../../hoc/withCreatives', () => ({
+  __esModule: true,
+  default: ({ WrappedComponent }) => WrappedComponent,
+}));
+
+jest.mock('@capillarytech/vulcan-react-sdk/utils', () => ({
+  injectReducer: () => (Component) => Component,
+  injectSaga: () => (Component) => Component,
+}));
+jest.mock('@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes', () => ({
+  DAEMON: 'DAEMON',
+}));
+
+// ── Redux slices (paths relative to this test file) ─────────────────────────
+jest.mock('../../../Templates/selectors', () => ({
+  makeSelectTemplates: () => () => {},
+}));
+jest.mock('../../../Templates/actions', () => ({}));
+jest.mock('../../selectors', () => ({
+  makeSelectWebPush: () => () => ({}),
+  makeSelectCreateError: () => () => null,
+  makeSelectCreateTemplateInProgress: () => () => false,
+  makeSelectEditTemplateInProgress: () => () => false,
+  makeSelectEditError: () => () => null,
+}));
+jest.mock('../../actions', () => ({}));
+jest.mock('../../reducer', () => () => ({}));
+jest.mock('../../sagas', () => ({}));
+jest.mock('../../../Templates/sagas', () => ({ v2TemplateSaga: {} }));
+jest.mock('../../../Cap/selectors', () => ({
+  makeSelectMetaEntities: () => () => [],
+  setInjectedTags: () => () => [],
+}));
+jest.mock('../../../CreativesContainer/constants', () => ({
+  WEBPUSH: 'WEBPUSH',
+}));
+jest.mock('../../../CreativesContainer/messages', () => ({
+  testAndPreview: { id: 'testAndPreview', defaultMessage: 'Test & Preview' },
+}));
+jest.mock('../../../../utils/common', () => ({
+  isAiContentBotDisabled: () => false,
+}));
+
+// ── Form section components ──────────────────────────────────────────────────
+// TemplateNameSection stays a stub — it is only relevant in isFullMode, which these tests
+// keep off (mirrors baseProps below) to focus purely on title/message emptiness.
+jest.mock('../components/TemplateNameSection', () => ({
+  __esModule: true,
+  default: ({ value, onChange }) => (
+    <input data-testid="template-name-input" value={value} onChange={onChange} />
+  ),
+}));
+// NotificationTitleSection and MessageSection are given lightweight controlled-input stand-ins
+// so tests can drive real onChange handlers (handleNotificationTitleChange / handleMessageChange)
+// inside WebPushCreate, exercising the actual state that feeds the isContentEmpty computation.
+jest.mock('../components/NotificationTitleSection', () => ({
+  __esModule: true,
+  default: ({ value, onChange }) => (
+    <input data-testid="notification-title-input" value={value} onChange={onChange} />
+  ),
+}));
+jest.mock('../components/MessageSection', () => ({
+  __esModule: true,
+  default: ({ value, onChange }) => (
+    <textarea data-testid="message-input" value={value} onChange={onChange} />
+  ),
+}));
+jest.mock('../components/MediaSection', () => ({
+  __esModule: true,
+  default: () => <div data-testid="media-section" />,
+}));
+jest.mock('../components/BrandIconSection', () => ({
+  __esModule: true,
+  default: () => <div data-testid="brand-icon-section" />,
+}));
+jest.mock('../components/ButtonsLinksSection', () => ({
+  __esModule: true,
+  default: () => <div data-testid="buttons-links-section" />,
+}));
+jest.mock('../components/FormActions', () => ({
+  __esModule: true,
+  default: ({ onSave }) => <button data-testid="save-button" onClick={onSave}>Save</button>,
+}));
+jest.mock('../utils/payloadBuilder', () => ({
+  createWebPushPayload: ({ templateName }) => ({ name: templateName, type: 'WEBPUSH' }),
+}));
+jest.mock('../preview/WebPushPreview', () => ({
+  __esModule: true,
+  default: () => <div data-testid="webpush-preview" />,
+}));
+jest.mock('../../../TagList', () => ({
+  __esModule: true,
+  default: () => <div data-testid="tag-list" />,
+}));
+
+// ── Hooks ────────────────────────────────────────────────────────────────────
+jest.mock('../hooks/useCharacterCount', () => ({
+  useCharacterCount: () => ({ updateCharacterCount: jest.fn() }),
+}));
+jest.mock('../hooks/useButtonManagement', () => ({
+  useButtonManagement: () => ({ buttons: [], setButtons: jest.fn(), isAddingButton: false }),
+}));
+jest.mock('../hooks/useImageUpload', () => ({
+  useImageUpload: () => ({
+    imageSrc: '',
+    imageUrl: '',
+    isValidating: false,
+    isUploading: false,
+    setImageSrc: jest.fn(),
+    setImageUrl: jest.fn(),
+    uploadMethod: 'UPLOAD_IMAGE',
+  }),
+}));
+jest.mock('../hooks/useTagManagement', () => ({
+  useTagManagement: () => ({ tags: [], extractTags: jest.fn(), handleOnTagsContextChange: jest.fn(), validationConfig: {} }),
+}));
+
+jest.mock('../../../../v2Components/TestAndPreviewSlidebox', () => ({
+  __esModule: true,
+  default: () => <div data-testid="test-and-preview-slidebox" />,
+}));
+
+// ── CapUI library ─────────────────────────────────────────────────────────────
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => ({
+  __esModule: true,
+  default: ({ children, className }) => <div className={className}>{children}</div>,
+}));
+jest.mock('@capillarytech/cap-ui-library/CapColumn', () => ({
+  __esModule: true,
+  default: ({ children, className }) => <div className={className}>{children}</div>,
+}));
+jest.mock('@capillarytech/cap-ui-library/CapButton', () => ({
+  __esModule: true,
+  default: ({ children, onClick, className, type }) => (
+    <button className={className} onClick={onClick} data-type={type}>
+      {children}
+    </button>
+  ),
+}));
+
+// ── Import component AFTER mocks ─────────────────────────────────────────────
+// eslint-disable-next-line import/first
+import WebPushCreateDefault from '../index';
+
+const baseProps = (overrides = {}) => ({
+  isFullMode: true,
+  canStayOpenAfterCreate: true,
+  onCreateContinuedAsEdit: jest.fn(),
+  handleClose: jest.fn(),
+  webPushActions: {
+    createTemplate: jest.fn(),
+    editTemplate: jest.fn(),
+    uploadImage: jest.fn(),
+    clearCreateError: jest.fn(),
+    clearEditError: jest.fn(),
+    clearCreateResponse: jest.fn(),
+    clearEditResponse: jest.fn(),
+    setSelectedAccount: jest.fn(),
+    clearState: jest.fn(),
+  },
+  createTemplateInProgress: false,
+  createTemplateError: null,
+  editTemplateInProgress: false,
+  editTemplateError: null,
+  accountData: { accountId: 'acc-1' },
+  webPush: {},
+  onCreateComplete: jest.fn(),
+  getFormData: jest.fn(),
+  isGetFormData: false,
+  templateData: null,
+  creativesMode: 'create',
+  params: {},
+  globalActions: { getMetaEntities: jest.fn() },
+  location: { pathname: '/webpush/create', query: {}, search: '', state: {} },
+  metaEntities: [],
+  injectedTags: [],
+  getDefaultTags: jest.fn(),
+  supportedTags: [],
+  forwardedTags: [],
+  selectedOfferDetails: [],
+  eventContextTags: [],
+  waitEventContextTags: {},
+  templateActions: {},
+  Templates: { templates: [] },
+  restrictPersonalization: false,
+  ...overrides,
+});
+
+const renderCreate = (props) => {
+  const ui = (p) => (
+    <IntlProvider locale="en" messages={{}}>
+      <WebPushCreateDefault {...p} />
+    </IntlProvider>
+  );
+  const utils = render(ui(props));
+  return { ...utils, rerenderWith: (p) => utils.rerender(ui(p)) };
+};
+
+const fillForm = () => {
+  fireEvent.change(screen.getByTestId('template-name-input'), { target: { value: 'Promo' } });
+  fireEvent.change(screen.getByTestId('notification-title-input'), { target: { value: 'Hello' } });
+  fireEvent.change(screen.getByTestId('message-input'), { target: { value: 'World' } });
+};
+
+describe('WebPushCreate — full mode keeps the slidebox open after saving', () => {
+  it('create: stays open with the form as is, and the next save updates the created template', () => {
+    const props = baseProps();
+    const { rerenderWith } = renderCreate(props);
+    fillForm();
+
+    fireEvent.click(screen.getByTestId('save-button'));
+    expect(props.webPushActions.createTemplate).toHaveBeenCalledTimes(1);
+
+    rerenderWith({ ...props, webPush: { response: { templateId: 'wp-1' } } });
+    expect(props.handleClose).not.toHaveBeenCalled();
+    expect(props.onCreateComplete).not.toHaveBeenCalled();
+    expect(screen.getByTestId('notification-title-input')).toHaveValue('Hello');
+    expect(props.onCreateContinuedAsEdit).toHaveBeenCalledTimes(1); // host shows the edit header
+
+    fireEvent.click(screen.getByTestId('save-button'));
+    expect(props.webPushActions.createTemplate).toHaveBeenCalledTimes(1);
+    expect(props.webPushActions.editTemplate).toHaveBeenCalledTimes(1);
+    expect(props.webPushActions.editTemplate.mock.calls[0][0]._id).toBe('wp-1');
+
+    const onSaved = props.webPushActions.editTemplate.mock.calls[0][1];
+    onSaved({ templateId: 'wp-1' }, undefined);
+    expect(props.handleClose).not.toHaveBeenCalled();
+    expect(props.onCreateComplete).not.toHaveBeenCalled();
+  });
+
+  it('create without edit permission closes as before', () => {
+    const props = baseProps({ canStayOpenAfterCreate: false });
+    const { rerenderWith } = renderCreate(props);
+    fillForm();
+
+    fireEvent.click(screen.getByTestId('save-button'));
+    rerenderWith({ ...props, webPush: { response: { templateId: 'wp-1' } } });
+
+    expect(props.onCreateComplete).toHaveBeenCalledWith(true);
+    expect(props.handleClose).toHaveBeenCalled();
+    expect(props.onCreateContinuedAsEdit).not.toHaveBeenCalled();
+  });
+
+  it('edit: stays open after a successful update', () => {
+    const props = baseProps({ creativesMode: 'edit', params: { id: 'wp-9' } });
+    renderCreate(props);
+    fillForm();
+
+    fireEvent.click(screen.getByTestId('save-button'));
+    expect(props.webPushActions.editTemplate.mock.calls[0][0]._id).toBe('wp-9');
+    props.webPushActions.editTemplate.mock.calls[0][1]({ templateId: 'wp-9' }, undefined);
+
+    expect(props.handleClose).not.toHaveBeenCalled();
+    expect(props.onCreateComplete).not.toHaveBeenCalled();
+  });
+});