@capillarytech/creatives-library 8.0.345-alpha.12 → 8.0.345-alpha.13

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

@@ -1,95 +1,83 @@
 /**
+ * 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', () => {
-  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);
-  };
-});
+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>
+));
 
-const formatMessage = (msg) => (typeof msg === 'object' && msg?.id ? msg.id : String(msg));
+import CustomValuesEditor from '../CustomValuesEditor';
 
-const baseProps = {
+const defaultProps = {
   isExtractingTags: false,
   isUpdatePreviewDisabled: false,
   showJSON: false,
   setShowJSON: jest.fn(),
-  customValues: { 'tag.a': 'v1' },
+  customValues: { '{{customer.name}}': 'Alice', '{{customer.email}}': '' },
   handleJSONTextChange: jest.fn(),
-  sections: [
-    {
-      key: 'sec1',
-      title: 'Section A',
-      requiredTags: [{ fullPath: 'tag.a', name: 'a' }],
-      optionalTags: [{ fullPath: 'tag.b', name: 'b' }],
-    },
+  extractedTags: [
+    { fullPath: '{{customer.name}}' },
+    { fullPath: '{{customer.email}}' },
   ],
+  requiredTags: [{ fullPath: '{{customer.name}}' }],
+  optionalTags: [{ fullPath: '{{customer.email}}' }],
   handleCustomValueChange: jest.fn(),
   handleDiscardCustomValues: jest.fn(),
   handleUpdatePreview: jest.fn(),
   isUpdatingPreview: false,
-  formatMessage,
+  formatMessage: jest.fn((msg) => msg.defaultMessage || msg.id),
 };
 
 // IntlProvider wrapper for incoming tests
 const scope = 'app.v2Components.TestAndPreviewSlidebox';
 const mockMessages = {
   [`${scope}.extractingTags`]: 'Extracting tags...',
-  [`${scope}.valuesMissing`]: 'Some values are missing',
+  [`${scope}.valuesMissing`]: 'Values missing for some of the personalization tags',
   [`${scope}.showJSON`]: 'Show JSON',
   [`${scope}.personalizationTags`]: 'Personalization Tags',
   [`${scope}.customValues`]: 'Custom Values',
@@ -109,268 +97,256 @@ TestWrapper.propTypes = {
 };
 
 describe('CustomValuesEditor', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
+  beforeEach(() => jest.clearAllMocks());
 
-  it('shows loading state when isExtractingTags', () => {
-    render(
-      <IntlProvider locale="en" messages={{}}>
-        <CustomValuesEditor {...baseProps} isExtractingTags />
-      </IntlProvider>,
-    );
-    expect(screen.getByTestId('cap-spin')).toBeInTheDocument();
-  });
+  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();
+    });
 
-  it('shows values missing label when isUpdatePreviewDisabled', () => {
-    render(
-      <IntlProvider locale="en" messages={{}}>
-        <CustomValuesEditor {...baseProps} isUpdatePreviewDisabled />
-      </IntlProvider>,
-    );
-    expect(document.querySelector('.values-missing-message')).toBeTruthy();
-  });
+    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('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('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('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('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('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('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('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();
-  });
+  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('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('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('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();
-  });
+    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('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('does not render the tag table in JSON view', () => {
+      render(
+        <TestWrapper>
+          <CustomValuesEditor {...defaultProps} showJSON />
+        </TestWrapper>
+      );
+      expect(screen.queryByText('Personalization Tags')).toBeNull();
+    });
   });
 
-  it('renders nothing for section title when title is null (does not crash)', () => {
-    render(
-      <IntlProvider locale="en" messages={{}}>
-        <CustomValuesEditor
-          {...baseProps}
-          sections={[
-            {
-              key: 'no-title-sec',
-              title: null,
-              requiredTags: [{ fullPath: 'tag.a', name: 'a' }],
-              optionalTags: [],
-            },
-          ]}
-        />
-      </IntlProvider>,
-    );
-    const inputs = screen.getAllByTestId('tag-input');
-    expect(inputs.length).toBeGreaterThan(0);
-  });
+  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('uses tag.name as column label when fullPath is absent', () => {
-    render(
-      <IntlProvider locale="en" messages={{}}>
-        <CustomValuesEditor
-          {...baseProps}
-          sections={[
-            {
-              key: 'name-only',
-              title: 'Section',
-              requiredTags: [{ name: 'myTag' }],
-              optionalTags: [],
-            },
-          ]}
-        />
-      </IntlProvider>,
-    );
-    expect(screen.getByText('myTag')).toBeInTheDocument();
-  });
+    it('renders required tags with a required indicator (*)', () => {
+      render(
+        <TestWrapper>
+          <CustomValuesEditor {...defaultProps} showJSON={false} />
+        </TestWrapper>
+      );
+      expect(screen.getByText('{{customer.name}}')).toBeTruthy();
+      expect(screen.getByText('*')).toBeTruthy();
+    });
 
-  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);
-  });
+    it('renders optional tags without a required indicator', () => {
+      render(
+        <TestWrapper>
+          <CustomValuesEditor {...defaultProps} showJSON={false} />
+        </TestWrapper>
+      );
+      expect(screen.getByText('{{customer.email}}')).toBeTruthy();
+    });
 
-  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);
-  });
+    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('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('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('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);
+  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('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');
+  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('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('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);
+    });
   });
 });