@capillarytech/creatives-library 8.0.242-alpha.3 → 8.0.242-alpha.4

package/package.json

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

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -54,6 +54,11 @@
     .preview-pane {
       max-height: calc(107vh);
 
+      &__content {
+        height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
+        max-height: calc(95vh - 50%);
+      }
+
       iframe {
         height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
         max-height: calc(95vh - 50%);

package/v2Components/HtmlEditor/components/ValidationErrorDisplay/__tests__/index.test.js

@@ -48,33 +48,6 @@ describe('ValidationErrorDisplay', () => {
     expect(screen.getByText('Invalid attribute')).toBeInTheDocument();
   });
 
-  it('renders liquid errors separately', () => {
-    const mockValidation = {
-      getAllIssues: () => [
-        {
-          message: 'Invalid liquid syntax', severity: 'error', source: 'liquid-validator', line: 3,
-        },
-        {
-          message: 'HTML error', severity: 'error', source: 'htmlhint', line: 10,
-        },
-      ],
-      isClean: () => false,
-      isValidating: false,
-    };
-
-    const { container } = render(
-      <TestWrapper>
-        <ValidationErrorDisplay validation={mockValidation} />
-      </TestWrapper>
-    );
-
-    // Check for validation-error-display wrapper
-    expect(container.querySelector('.validation-error-display')).toBeInTheDocument();
-    // Check that both errors are rendered
-    expect(screen.getByText('Invalid liquid syntax')).toBeInTheDocument();
-    expect(screen.getByText('HTML error')).toBeInTheDocument();
-  });
-
   it('does not render when validation has no errors', () => {
     const mockValidation = {
       getAllIssues: () => [],

package/v2Containers/EmailWrapper/tests/EmailWrapperView.test.js

@@ -1,239 +0,0 @@
-import React from 'react';
-import { render, fireEvent, within, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { IntlProvider } from 'react-intl';
-import { Provider } from 'react-redux';
-import { configureStore }  from '@capillarytech/vulcan-react-sdk/utils'
-import { initialReducer } from '../../../initialReducer';
-import history from '../../../utils/history';
-import EmailWrapperView from '../components/EmailWrapperView';
-import { EmailWrapperViewMockProps } from '../mockdata/mockdata';
-import { EMAIL_CREATE_MODES } from '../constants';
-
-// Mock pathConfig before history import - must be a string, not undefined
-jest.mock('../../../config/path', () => ({
-  publicPath: '/creatives/ui',
-  engagePlusPublicPath: '/campaigns/ui',
-}));
-
-// Mock window.location for createBrowserHistory
-const originalLocation = window.location;
-beforeAll(() => {
-  delete window.location;
-  window.location = {
-    ...originalLocation,
-    pathname: '/',
-    search: '',
-    hash: '',
-    href: 'http://localhost/',
-    replace: jest.fn(),
-  };
-});
-
-afterAll(() => {
-  window.location = originalLocation;
-});
-
-// This mock needs to be before any imports
-jest.mock('../../../v2Containers/Email', () => ({
-  __esModule: true,
-  default: () => <div data-testid="email-create-container" />,
-}));
-
-// Mock react-router
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    push: jest.fn(),
-    replace: jest.fn(),
-    go: jest.fn(),
-    goBack: jest.fn(),
-    goForward: jest.fn(),
-    location: { search: '' }
-  }),
-}));
-
-// Mock redux-auth-wrapper
-jest.mock('redux-auth-wrapper/history4/redirect', () => ({
-  connectedRouterRedirect: () => (Component) => Component,
-}));
-
-// Mock react-router
-jest.mock('connected-react-router', () => ({
-  push: jest.fn(),
-  replace: jest.fn(),
-  go: jest.fn(),
-  goBack: jest.fn(),
-  goForward: jest.fn(),
-}));
-
-// Mock the saga injector
-jest.mock('@capillarytech/vulcan-react-sdk/utils/injectSaga', () => ({
-  __esModule: true,
-  default: () => (Component) => Component,
-}));
-
-
-const initialState = {
-  cap: { loading: false, error: null },
-  router: { location: { pathname: '/' } }
-};
-
-describe('EmailWrapperView', () => {
-  let store;
-
-  beforeAll(() => {
-    // Use the real history (pathConfig is mocked, so it should work)
-    store = configureStore(initialState, initialReducer, history);
-  });
-
-  const renderWithProviders = (component) => {
-    return render(
-      <Provider store={store}>
-        <IntlProvider locale="en" messages={{}}>
-          {component}
-        </IntlProvider>
-      </Provider>
-    );
-  };
-
-  it('renders mode selection UI when step is modeSelection', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      step: 'modeSelection',
-    };
-
-    const { getByText } = renderWithProviders(<EmailWrapperView {...props} />);
-    expect(getByText('Create using editor')).toBeInTheDocument();
-    expect(getByText('Upload zip file')).toBeInTheDocument();
-  });
-
-  it('shows template name input in full mode', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      isFullMode: true,
-      step: 'modeSelection',
-    };
-
-    const { container } = renderWithProviders(<EmailWrapperView {...props} />);
-    const input = container.querySelector('.ant-input');
-    expect(input).toBeInTheDocument();
-    expect(input.value).toBe(props.templateName);
-  });
-
-  it('handles template name changes', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      isFullMode: true,
-      step: 'modeSelection',
-      onTemplateNameChange: jest.fn(),
-    };
-
-    const { container } = renderWithProviders(<EmailWrapperView {...props} />);
-    const input = container.querySelector('.ant-input');
-    expect(input).toBeInTheDocument();
-
-    // Create a change event and fire it
-    fireEvent.change(input, { target: { value: 'New Template Name' } });
-
-    // Just verify that the function was called
-    expect(props.onTemplateNameChange).toHaveBeenCalled();
-  });
-
-  it('shows upload button when in upload mode', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      step: 'modeSelection',
-      emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
-      uploadButtonLabel: 'Upload',
-    };
-
-    const { getByText, container } = renderWithProviders(<EmailWrapperView {...props} />);
-
-    // Find the "Upload zip file" section
-    const modeSelectionSection = getByText('Upload zip file').closest('div');
-
-    // Find any button in the upload section
-    const uploadButton = container.querySelector('.ant-btn');
-
-    // Verify that we found an upload button
-    expect(uploadButton).toBeInTheDocument();
-    expect(uploadButton.textContent).toContain('Upload');
-  });
-
-  it('shows loading spinner when uploading', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      isUploading: true,
-      emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
-      step: 'modeSelection',
-    };
-
-    const { container } = renderWithProviders(<EmailWrapperView {...props} />);
-    const spinner = container.querySelector('.ant-spin');
-    expect(spinner).toBeInTheDocument();
-  });
-
-  it('shows content creation UI when not in mode selection', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      step: 'contentCreation',
-      isShowEmailCreate: true,
-    };
-
-    const { getByTestId } = renderWithProviders(<EmailWrapperView {...props} />);
-    expect(getByTestId('email-create-container')).toBeInTheDocument();
-  });
-
-  it('disables upload button when template name is empty in full mode', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      isFullMode: true,
-      step: 'modeSelection',
-      emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
-      templateName: '',
-      isTemplateNameEmpty: true,
-      uploadButtonLabel: 'Upload',
-    };
-
-    const { getByText, container } = renderWithProviders(<EmailWrapperView {...props} />);
-
-    // Find the Upload section
-    getByText('Upload zip file');
-
-    // Find button in the container
-    const uploadButton = container.querySelector('.ant-btn');
-
-    // Check if the button is disabled
-    expect(uploadButton).toBeDisabled();
-  });
-
-  it('shows error message when template name is empty during upload', () => {
-    const props = {
-      ...EmailWrapperViewMockProps,
-      isFullMode: true,
-      step: 'modeSelection',
-      emailCreateMode: EMAIL_CREATE_MODES.UPLOAD,
-      templateName: '',
-      isTemplateNameEmpty: true,
-      // Add errorMessage directly to the props
-      errorMessage: 'Please enter template name',
-      intl: {
-        formatMessage: () => 'Please enter template name',
-      },
-    };
-
-    const { container } = renderWithProviders(<EmailWrapperView {...props} />);
-
-    // Look for error feedback in the Ant Design form
-    const errorElement = container.querySelector('.ant-form-item-explain');
-
-    if (errorElement) {
-      expect(errorElement.textContent).toContain('Please enter template name');
-    } else {
-      // If the standard error element is not found, look for any element containing the error text
-      const allText = container.textContent;
-      expect(allText).toContain('Please enter template name');
-    }
-  });
-});