@capillarytech/creatives-library 9.0.15-alpha.0 → 9.0.15-alpha.1

package/v2Components/CommonTestAndPreview/tests/CustomValuesEditor.test.js

@@ -1,83 +1,108 @@
 /**
- * Tests for CustomValuesEditor component.
- * Covers: loading state, values-missing warning, JSON view, tag table, discard/update buttons.
  * @jest-environment jsdom
  */
-
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { IntlProvider } from 'react-intl';
 import PropTypes from 'prop-types';
+import CustomValuesEditor from '../CustomValuesEditor';
 
-jest.mock('@capillarytech/cap-ui-library/CapRow', () => ({ children, className }) => (
-  <div className={className}>{children}</div>
-));
-jest.mock('@capillarytech/cap-ui-library/CapSpin', () => ({ size }) => (
-  <div data-testid="cap-spin" data-size={size}>Loading...</div>
-));
-jest.mock('@capillarytech/cap-ui-library/CapSwitch', () => ({ checked, onChange }) => (
-  <button
-    type="button"
-    data-testid="cap-switch"
-    aria-checked={String(checked)}
-    onClick={() => onChange(!checked)}
-  >
-    Toggle
-  </button>
-));
-jest.mock('@capillarytech/cap-ui-library/CapButton', () => ({ children, onClick, disabled, loading, type: btnType, icon }) => (
-  <button
-    type="button"
-    data-testid="cap-button"
-    data-btntype={btnType}
-    data-icon={icon}
-    onClick={onClick}
-    disabled={!!(disabled || loading)}
-  >
-    {children}
-  </button>
-));
-jest.mock('@capillarytech/cap-ui-library/CapInput', () => ({ value, onChange, placeholder, isRequired, className }) => (
-  <input
-    data-testid="cap-input"
-    className={className}
-    value={value || ''}
-    onChange={onChange}
-    placeholder={placeholder}
-    required={!!isRequired}
-  />
-));
-jest.mock('@capillarytech/cap-ui-library/CapLabel', () => ({ children, type, className }) => (
-  <span data-testid="cap-label" data-type={type} className={className}>{children}</span>
-));
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => {
+  const React = require('react');
+  return function CapRow(props) {
+    return React.createElement('div', { className: props?.className, 'data-testid': 'cap-row' }, props?.children);
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapSpin', () => {
+  const React = require('react');
+  return function CapSpin() {
+    return React.createElement('div', { 'data-testid': 'cap-spin' }, 'spin');
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapSwitch', () => {
+  const React = require('react');
+  return function CapSwitch(props) {
+    return React.createElement('input', {
+      type: 'checkbox',
+      'data-testid': 'json-switch',
+      checked: props?.checked,
+      onChange: (e) => props?.onChange?.(e.target.checked),
+    });
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapButton', () => {
+  const React = require('react');
+  return function CapButton(props) {
+    return React.createElement('button', {
+      type: 'button',
+      'data-testid': 'cap-button',
+      onClick: props?.onClick,
+      disabled: props?.disabled,
+      'data-loading': props?.loading,
+    }, props?.children);
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapInput', () => {
+  const React = require('react');
+  return function CapInput(props) {
+    return React.createElement('input', {
+      'data-testid': 'tag-input',
+      value: props?.value,
+      placeholder: props?.placeholder,
+      onChange: props?.onChange,
+    });
+  };
+});
+jest.mock('@capillarytech/cap-ui-library/CapLabel', () => {
+  const React = require('react');
+  return function CapLabel(props) {
+    return React.createElement('div', { className: props?.className, 'data-testid': 'cap-label' }, props?.children);
+  };
+});
 
-import CustomValuesEditor from '../CustomValuesEditor';
+const formatMessage = (msg) => (typeof msg === 'object' && msg?.id ? msg.id : String(msg));
 
-const defaultProps = {
+const baseProps = {
   isExtractingTags: false,
   isUpdatePreviewDisabled: false,
   showJSON: false,
   setShowJSON: jest.fn(),
-  customValues: { '{{customer.name}}': 'Alice', '{{customer.email}}': '' },
+  customValues: { 'tag.a': 'v1' },
   handleJSONTextChange: jest.fn(),
-  extractedTags: [
-    { fullPath: '{{customer.name}}' },
-    { fullPath: '{{customer.email}}' },
+  sections: [
+    {
+      key: 'sec1',
+      title: 'Section A',
+      requiredTags: [{ fullPath: 'tag.a', name: 'a' }],
+      optionalTags: [{ fullPath: 'tag.b', name: 'b' }],
+    },
   ],
-  requiredTags: [{ fullPath: '{{customer.name}}' }],
-  optionalTags: [{ fullPath: '{{customer.email}}' }],
   handleCustomValueChange: jest.fn(),
   handleDiscardCustomValues: jest.fn(),
   handleUpdatePreview: jest.fn(),
   isUpdatingPreview: false,
-  formatMessage: jest.fn((msg) => msg.defaultMessage || msg.id),
+  formatMessage,
+};
+
+const defaultProps = {
+  ...baseProps,
+  customValues: {},
+  sections: [
+    {
+      key: 'default-sec',
+      title: 'Section',
+      requiredTags: [{ fullPath: '{{customer.name}}', name: 'customer.name' }],
+      optionalTags: [{ fullPath: '{{customer.email}}', name: 'customer.email' }],
+    },
+  ],
 };
 
 // IntlProvider wrapper for incoming tests
 const scope = 'app.v2Components.TestAndPreviewSlidebox';
 const mockMessages = {
   [`${scope}.extractingTags`]: 'Extracting tags...',
-  [`${scope}.valuesMissing`]: 'Values missing for some of the personalization tags',
+  [`${scope}.valuesMissing`]: 'Some values are missing',
   [`${scope}.showJSON`]: 'Show JSON',
   [`${scope}.personalizationTags`]: 'Personalization Tags',
   [`${scope}.customValues`]: 'Custom Values',
@@ -97,118 +122,128 @@ TestWrapper.propTypes = {
 };
 
 describe('CustomValuesEditor', () => {
-  beforeEach(() => jest.clearAllMocks());
-
-  describe('loading state (isExtractingTags)', () => {
-    it('renders a spinner and extracting-tags message when isExtractingTags is true', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} isExtractingTags />
-        </TestWrapper>
-      );
-      expect(screen.getByTestId('cap-spin')).toBeTruthy();
-      expect(screen.getByText('Extracting tags...')).toBeTruthy();
-    });
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
-    it('does not render the editor toggle when extracting tags', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} isExtractingTags />
-        </TestWrapper>
-      );
-      expect(screen.queryByTestId('cap-switch')).toBeNull();
-      expect(screen.queryAllByTestId('cap-button')).toHaveLength(0);
-    });
+  it('shows loading state when isExtractingTags', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor {...baseProps} isExtractingTags />
+      </IntlProvider>,
+    );
+    expect(screen.getByTestId('cap-spin')).toBeInTheDocument();
+  });
 
-    it('renders the editor (not spinner) when isExtractingTags is false', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} isExtractingTags={false} />
-        </TestWrapper>
-      );
-      expect(screen.queryByTestId('cap-spin')).toBeNull();
-      expect(screen.getByTestId('cap-switch')).toBeTruthy();
-    });
+  it('shows values missing label when isUpdatePreviewDisabled', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor {...baseProps} isUpdatePreviewDisabled />
+      </IntlProvider>,
+    );
+    expect(document.querySelector('.values-missing-message')).toBeTruthy();
   });
 
-  describe('values missing warning', () => {
-    it('shows values-missing label when isUpdatePreviewDisabled is true', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} isUpdatePreviewDisabled />
-        </TestWrapper>
-      );
-      expect(screen.getByText('Values missing for some of the personalization tags')).toBeTruthy();
-    });
+  it('toggles JSON mode and calls setShowJSON', () => {
+    const setShowJSON = jest.fn();
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor {...baseProps} setShowJSON={setShowJSON} />
+      </IntlProvider>,
+    );
+    fireEvent.click(screen.getByTestId('json-switch'));
+    expect(setShowJSON).toHaveBeenCalled();
+  });
 
-    it('does not show values-missing label when isUpdatePreviewDisabled is false', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} isUpdatePreviewDisabled={false} />
-        </TestWrapper>
-      );
-      expect(
-        screen.queryByText('Values missing for some of the personalization tags')
-      ).toBeNull();
-    });
+  it('renders JSON textarea and fires handleJSONTextChange', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor {...baseProps} showJSON />
+      </IntlProvider>,
+    );
+    const ta = document.querySelector('.json-textarea');
+    expect(ta).toBeTruthy();
+    fireEvent.change(ta, { target: { value: '{}' } });
+    expect(baseProps.handleJSONTextChange).toHaveBeenCalledWith('{}');
   });
 
-  describe('JSON view (showJSON = true)', () => {
-    it('renders a textarea with the formatted JSON', () => {
-      const customValues = { name: 'Alice', age: 30 };
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} showJSON customValues={customValues} />
-        </TestWrapper>
-      );
-      const textarea = document.querySelector('textarea.json-textarea');
-      expect(textarea).toBeTruthy();
-      expect(textarea.value).toBe(JSON.stringify(customValues, null, 2));
-    });
+  it('renders required and optional tag inputs when not JSON', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor {...baseProps} />
+      </IntlProvider>,
+    );
+    const inputs = screen.getAllByTestId('tag-input');
+    expect(inputs.length).toBeGreaterThan(0);
+    fireEvent.change(inputs[0], { target: { value: 'new' } });
+    expect(baseProps.handleCustomValueChange).toHaveBeenCalledWith('tag.a', 'new');
+  });
 
-    it('renders line numbers matching the number of JSON lines', () => {
-      const customValues = { a: 1, b: 2 };
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} showJSON customValues={customValues} />
-        </TestWrapper>
-      );
-      const lineCount = JSON.stringify(customValues, null, 2).split('\n').length;
-      const lineNumbers = document.querySelectorAll('.line-number');
-      expect(lineNumbers).toHaveLength(lineCount);
-    });
+  it('calls discard and update handlers', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor {...baseProps} />
+      </IntlProvider>,
+    );
+    const buttons = screen.getAllByTestId('cap-button');
+    fireEvent.click(buttons[0]);
+    fireEvent.click(buttons[buttons.length - 1]);
+    expect(baseProps.handleDiscardCustomValues).toHaveBeenCalled();
+    expect(baseProps.handleUpdatePreview).toHaveBeenCalled();
+  });
 
-    it('calls handleJSONTextChange when the textarea value changes', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} showJSON />
-        </TestWrapper>
-      );
-      const textarea = document.querySelector('textarea.json-textarea');
-      fireEvent.change(textarea, { target: { value: '{"key": "val"}' } });
-      expect(defaultProps.handleJSONTextChange).toHaveBeenCalledWith('{"key": "val"}');
-    });
+  it('skips sections with no tags', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor
+          {...baseProps}
+          sections={[
+            { key: 'empty', requiredTags: [], optionalTags: [] },
+            baseProps.sections[0],
+          ]}
+        />
+      </IntlProvider>,
+    );
+    expect(screen.getAllByTestId('tag-input').length).toBeGreaterThan(0);
+  });
 
-    it('does not render the tag table in JSON view', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} showJSON />
-        </TestWrapper>
-      );
-      expect(screen.queryByText('Personalization Tags')).toBeNull();
-    });
+  it('renders section title as FormattedMessage when title is an intl message object (not a string)', () => {
+    render(
+      <IntlProvider locale="en" messages={{ 'section.title.id': 'Intl Section Title' }}>
+        <CustomValuesEditor
+          {...baseProps}
+          sections={[
+            {
+              key: 'intl-sec',
+              title: { id: 'section.title.id', defaultMessage: 'Intl Section Title' },
+              requiredTags: [{ fullPath: 'tag.a', name: 'a' }],
+              optionalTags: [],
+            },
+          ]}
+        />
+      </IntlProvider>,
+    );
+    expect(screen.getByText('Intl Section Title')).toBeInTheDocument();
   });
 
-  describe('tag table view (showJSON = false)', () => {
-    it('renders Personalization Tags and Custom Values headers when extractedTags is non-empty', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} showJSON={false} />
-        </TestWrapper>
-      );
-      expect(screen.getByText('Personalization Tags')).toBeTruthy();
-      expect(screen.getByText('Custom Values')).toBeTruthy();
-    });
+  it('renders section title as plain text when title is a string', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor
+          {...baseProps}
+          sections={[
+            {
+              key: 'str-sec',
+              title: 'Plain String Title',
+              requiredTags: [{ fullPath: 'tag.a', name: 'a' }],
+              optionalTags: [],
+            },
+          ]}
+        />
+      </IntlProvider>,
+    );
+    expect(screen.getByText('Plain String Title')).toBeInTheDocument();
+  });
 
     it('renders required tags with a required indicator (*)', () => {
       render(
@@ -239,124 +274,106 @@ describe('CustomValuesEditor', () => {
       expect(screen.getByText('{{customer.email}}')).toBeTruthy();
     });
 
-    it('does not render the table when extractedTags is empty', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor
-            {...defaultProps}
-            showJSON={false}
-            extractedTags={[]}
-            requiredTags={[]}
-            optionalTags={[]}
-          />
-        </TestWrapper>
-      );
-      expect(screen.queryByText('Personalization Tags')).toBeNull();
-    });
-
-    it('calls handleCustomValueChange with the tag path and new value for required tags', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} showJSON={false} />
-        </TestWrapper>
-      );
-      const inputs = screen.getAllByTestId('cap-input');
-      fireEvent.change(inputs[0], { target: { value: 'Bob' } });
-      expect(defaultProps.handleCustomValueChange).toHaveBeenCalledWith('{{customer.name}}', 'Bob');
-    });
-
-    it('calls handleCustomValueChange with the tag path and new value for optional tags', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} showJSON={false} />
-        </TestWrapper>
-      );
-      const inputs = screen.getAllByTestId('cap-input');
-      fireEvent.change(inputs[1], { target: { value: 'bob@example.com' } });
-      expect(defaultProps.handleCustomValueChange).toHaveBeenCalledWith(
-        '{{customer.email}}',
-        'bob@example.com'
-      );
-    });
+  it('uses empty string as column label when both fullPath and name are absent', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor
+          {...baseProps}
+          sections={[
+            {
+              key: 'no-label',
+              title: 'Section',
+              requiredTags: [{}],
+              optionalTags: [],
+            },
+          ]}
+        />
+      </IntlProvider>,
+    );
+    const inputs = screen.getAllByTestId('tag-input');
+    expect(inputs.length).toBeGreaterThan(0);
   });
 
-  describe('JSON / tag toggle', () => {
-    it('calls setShowJSON(true) when toggle is clicked from tag view', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} showJSON={false} />
-        </TestWrapper>
-      );
-      fireEvent.click(screen.getByTestId('cap-switch'));
-      expect(defaultProps.setShowJSON).toHaveBeenCalledWith(true);
-    });
-
-    it('calls setShowJSON(false) when toggle is clicked from JSON view', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} showJSON />
-        </TestWrapper>
-      );
-      fireEvent.click(screen.getByTestId('cap-switch'));
-      expect(defaultProps.setShowJSON).toHaveBeenCalledWith(false);
-    });
+  it('renders optional-only section (no requiredTags) correctly', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor
+          {...baseProps}
+          sections={[
+            {
+              key: 'optional-only',
+              title: 'Optional Section',
+              requiredTags: [],
+              optionalTags: [{ fullPath: 'tag.opt', name: 'opt' }],
+            },
+          ]}
+        />
+      </IntlProvider>,
+    );
+    expect(screen.getByText('Optional Section')).toBeInTheDocument();
+    const inputs = screen.getAllByTestId('tag-input');
+    expect(inputs.length).toBeGreaterThan(0);
   });
 
-  describe('action buttons', () => {
-    it('calls handleDiscardCustomValues when the discard button is clicked', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} />
-        </TestWrapper>
-      );
-      const buttons = screen.getAllByTestId('cap-button');
-      fireEvent.click(buttons[0]); // discard is first
-      expect(defaultProps.handleDiscardCustomValues).toHaveBeenCalled();
-    });
-
-    it('calls handleUpdatePreview when the update-preview button is clicked', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} />
-        </TestWrapper>
-      );
-      const buttons = screen.getAllByTestId('cap-button');
-      fireEvent.click(buttons[1]); // update is second
-      expect(defaultProps.handleUpdatePreview).toHaveBeenCalled();
-    });
-
-    it('disables the update-preview button when isUpdatePreviewDisabled is true', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} isUpdatePreviewDisabled />
-        </TestWrapper>
-      );
-      const buttons = screen.getAllByTestId('cap-button');
-      expect(buttons[1].disabled).toBe(true);
-    });
+  it('renders required-only section (no optionalTags) correctly', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor
+          {...baseProps}
+          sections={[
+            {
+              key: 'required-only',
+              title: 'Required Section',
+              requiredTags: [{ fullPath: 'tag.req', name: 'req' }],
+              optionalTags: [],
+            },
+          ]}
+        />
+      </IntlProvider>,
+    );
+    expect(screen.getByText('Required Section')).toBeInTheDocument();
+    const inputs = screen.getAllByTestId('tag-input');
+    expect(inputs.length).toBeGreaterThan(0);
+  });
 
-    it('disables the update-preview button when isUpdatingPreview is true', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor {...defaultProps} isUpdatingPreview />
-        </TestWrapper>
-      );
-      const buttons = screen.getAllByTestId('cap-button');
-      expect(buttons[1].disabled).toBe(true);
-    });
+  it('renders line numbers in JSON mode matching JSON line count', () => {
+    const multiValueCustomValues = { a: 'val1', b: 'val2', c: 'val3' };
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor
+          {...baseProps}
+          showJSON
+          customValues={multiValueCustomValues}
+        />
+      </IntlProvider>,
+    );
+    const lineNumbers = document.querySelectorAll('.line-number');
+    const expectedLineCount = JSON.stringify(multiValueCustomValues, null, 2).split('\n').length;
+    expect(lineNumbers.length).toBe(expectedLineCount);
+  });
 
-    it('enables the update-preview button when neither flag is set', () => {
-      render(
-        <TestWrapper>
-          <CustomValuesEditor
-            {...defaultProps}
-            isUpdatePreviewDisabled={false}
-            isUpdatingPreview={false}
-          />
-        </TestWrapper>
-      );
-      const buttons = screen.getAllByTestId('cap-button');
-      expect(buttons[1].disabled).toBe(false);
-    });
+  it('passes fullPath as key for required tag row when fullPath is present', () => {
+    const handleChange = jest.fn();
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor
+          {...baseProps}
+          sections={[
+            {
+              key: 'sec',
+              title: 'S',
+              requiredTags: [{ fullPath: 'my.full.path', name: 'name' }],
+              optionalTags: [],
+            },
+          ]}
+          handleCustomValueChange={handleChange}
+          customValues={{ 'my.full.path': 'existing' }}
+        />
+      </IntlProvider>,
+    );
+    const input = screen.getByTestId('tag-input');
+    expect(input.value).toBe('existing');
+    fireEvent.change(input, { target: { value: 'updated' } });
+    expect(handleChange).toHaveBeenCalledWith('my.full.path', 'updated');
   });
 });