cap-creatives-ui 8.0.280 → 8.0.321

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

@@ -0,0 +1,352 @@
+/**
+ * @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 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);
+  };
+});
+
+const formatMessage = (msg) => (typeof msg === 'object' && msg?.id ? msg.id : String(msg));
+
+const baseProps = {
+  isExtractingTags: false,
+  isUpdatePreviewDisabled: false,
+  showJSON: false,
+  setShowJSON: jest.fn(),
+  customValues: { 'tag.a': 'v1' },
+  handleJSONTextChange: jest.fn(),
+  sections: [
+    {
+      key: 'sec1',
+      title: 'Section A',
+      requiredTags: [{ fullPath: 'tag.a', name: 'a' }],
+      optionalTags: [{ fullPath: 'tag.b', name: 'b' }],
+    },
+  ],
+  handleCustomValueChange: jest.fn(),
+  handleDiscardCustomValues: jest.fn(),
+  handleUpdatePreview: jest.fn(),
+  isUpdatingPreview: false,
+  formatMessage,
+};
+
+describe('CustomValuesEditor', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('shows loading state when isExtractingTags', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor {...baseProps} isExtractingTags />
+      </IntlProvider>,
+    );
+    expect(screen.getByTestId('cap-spin')).toBeInTheDocument();
+  });
+
+  it('shows values missing label when isUpdatePreviewDisabled', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CustomValuesEditor {...baseProps} isUpdatePreviewDisabled />
+      </IntlProvider>,
+    );
+    expect(document.querySelector('.values-missing-message')).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('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('{}');
+  });
+
+  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('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('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 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('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 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);
+  });
+
+  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('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-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('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('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('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');
+  });
+});