@capillarytech/creatives-library 8.0.130 → 8.0.131

package/v2Containers/MobilePushNew/components/tests/PlatformContentFields.test.js

@@ -0,0 +1,654 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { IntlProvider } from "react-intl";
+import PlatformContentFields from "../PlatformContentFields";
+import {
+  ANDROID, IOS, DEEP_LINK, EXTERNAL_LINK,
+} from "../../constants";
+
+// Simple mock components
+jest.mock("@capillarytech/cap-ui-library/CapRow", () => ({ children }) => <div>{children}</div>);
+jest.mock("@capillarytech/cap-ui-library/CapColumn", () => ({ children }) => <div>{children}</div>);
+jest.mock("@capillarytech/cap-ui-library/CapInput", () => ({
+  value, onChange, errorMessage, error, ...props
+}) => (
+  <div>
+    <input value={value || ""} onChange={onChange} error={error} {...props} />
+    {(errorMessage || error) && <div data-testid="error-message">{errorMessage || error}</div>}
+  </div>
+));
+jest.mock("@capillarytech/cap-ui-library/CapHeading", () => ({ children }) => <div>{children}</div>);
+jest.mock("@capillarytech/cap-ui-library/CapError", () => ({ children }) => <div data-testid="cap-error">{children}</div>);
+jest.mock("@capillarytech/cap-ui-library/CapDivider", () => () => <div data-testid="divider" />);
+jest.mock("@capillarytech/cap-ui-library/CapSelect", () => ({
+  CapCustomSelect: ({ value, onChange, options }) => (
+    <select value={value} onChange={(e) => onChange && onChange(e.target.value)}>
+      {options?.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  ),
+}));
+jest.mock("@capillarytech/cap-ui-library/CapCheckbox", () => ({ checked, onChange, children }) => (
+  <div>
+    <input type="checkbox" checked={checked} onChange={onChange} data-testid="action-checkbox" />
+    <span>{children}</span>
+  </div>
+));
+jest.mock("@capillarytech/cap-ui-library/CapLabel", () => ({ children }) => <label>{children}</label>);
+jest.mock("@capillarytech/cap-ui-library/CapInfoNote", () => ({ message }) => <div data-testid="info-note">{message}</div>);
+
+// Mock child components
+jest.mock("../../../TagList", () => () => <div data-testid="tag-list">TagList</div>);
+jest.mock("../MediaUploaders", () => () => <div data-testid="media-uploaders">MediaUploaders</div>);
+jest.mock("../CtaButtons", () => () => <div data-testid="cta-buttons">CtaButtons</div>);
+
+// Mock messages
+jest.mock("../../messages", () => ({
+  sameContentNote: { id: "sameContentNote", defaultMessage: "Same content note" },
+  title: { id: "title", defaultMessage: "Title" },
+  titlePlaceholder: { id: "titlePlaceholder", defaultMessage: "Enter title" },
+  message: { id: "message", defaultMessage: "Message" },
+  messagePlaceholder: { id: "messagePlaceholder", defaultMessage: "Enter message" },
+  mediaType: { id: "mediaType", defaultMessage: "Media Type" },
+  buttonsAndLinks: { id: "buttonsAndLinks", defaultMessage: "Buttons and Links" },
+  optionalText: { id: "optionalText", defaultMessage: "Optional" },
+  actionOnClickBody: { id: "actionOnClickBody", defaultMessage: "Action on click" },
+  actionDescription: { id: "actionDescription", defaultMessage: "Action description" },
+  linkType: { id: "linkType", defaultMessage: "Link Type" },
+  selectDeepLink: { id: "selectDeepLink", defaultMessage: "Select deep link" },
+  deepLink: { id: "deepLink", defaultMessage: "Deep Link" },
+  externalLink: { id: "externalLink", defaultMessage: "External Link" },
+  enterExternalLink: { id: "enterExternalLink", defaultMessage: "Enter external link" },
+  deepLinkKeys: { id: "deepLinkKeys", defaultMessage: "Deep Link Keys" },
+  deepLinkKeysPlaceholder: { id: "deepLinkKeysPlaceholder", defaultMessage: "Enter {key}" },
+  deepLinkKeysRequired: { id: "deepLinkKeysRequired", defaultMessage: "Deep link keys are required" },
+}));
+
+// Mock constants
+jest.mock("../../constants", () => ({
+  ANDROID: "android",
+  IOS: "ios",
+  CAROUSEL: "CAROUSEL",
+  MEDIA_TYPES_OPTIONS: [
+    { value: "IMAGE", label: "Image" },
+    { value: "VIDEO", label: "Video" },
+    { value: "CAROUSEL", label: "Carousel" },
+  ],
+  LINK_TYPE_OPTIONS: [
+    { value: "DEEP_LINK", label: "Deep Link" },
+    { value: "EXTERNAL_LINK", label: "External Link" },
+  ],
+  DEEP_LINK: "DEEP_LINK",
+  EXTERNAL_LINK: "EXTERNAL_LINK",
+}));
+
+describe("PlatformContentFields", () => {
+  const defaultProps = {
+    deviceType: ANDROID,
+    content: {
+      title: "Test Title",
+      message: "Test Message",
+      mediaType: "IMAGE",
+      actionOnClick: false,
+      linkType: DEEP_LINK,
+    },
+    errors: {
+      title: "",
+      message: "",
+      externalLink: "",
+    },
+    handlers: {
+      handleTitleChange: jest.fn(),
+      handleMessageChange: jest.fn(),
+      handleMediaTypeChange: jest.fn(),
+      handleActionOnClickChange: jest.fn(),
+      handleLinkTypeChange: jest.fn(),
+      handleDeepLinkChange: jest.fn(),
+      handleExternalLinkChange: jest.fn(),
+      onTagSelect: jest.fn(),
+      handleOnTagsContextChange: jest.fn(),
+    },
+    tagListProps: {
+      tags: ["tag1", "tag2"],
+    },
+    mediaUploaderProps: {
+      uploadProps: "test",
+    },
+    ctaButtonProps: {
+      buttons: [],
+    },
+    linkProps: {
+      deepLink: [
+        { value: "link1", label: "Link 1" },
+        { value: "link2", label: "Link 2" },
+      ],
+      deepLinkValue: "link1",
+      externalLinkValue: "https://example.com",
+    },
+    sameContent: false,
+    formatMessage: jest.fn((msg) => msg.defaultMessage),
+  };
+
+  const renderComponent = (props = {}) => render(
+    <IntlProvider locale="en">
+      <PlatformContentFields {...defaultProps} {...props} />
+    </IntlProvider>
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Basic Rendering", () => {
+    it("should render without crashing", () => {
+      const { container } = renderComponent();
+      expect(container).toBeInTheDocument();
+    });
+
+    it("should render title input with correct value", () => {
+      const { container } = renderComponent();
+      const titleInput = container.querySelector('input[value="Test Title"]');
+      expect(titleInput).toBeInTheDocument();
+    });
+
+    it("should render message input with correct value", () => {
+      const { container } = renderComponent();
+      const messageInput = container.querySelector('input[value="Test Message"]');
+      expect(messageInput).toBeInTheDocument();
+    });
+
+    it("should render MediaUploaders component", () => {
+      const { getByTestId } = renderComponent();
+      expect(getByTestId("media-uploaders")).toBeInTheDocument();
+    });
+
+    it("should render CtaButtons component", () => {
+      const { getByTestId } = renderComponent();
+      expect(getByTestId("cta-buttons")).toBeInTheDocument();
+    });
+
+    it("should render TagList components", () => {
+      const { getAllByTestId } = renderComponent();
+      const tagLists = getAllByTestId("tag-list");
+      expect(tagLists).toHaveLength(2);
+    });
+  });
+
+  describe("Title Field", () => {
+    it("should call title change handler", () => {
+      const { container } = renderComponent();
+      const titleInput = container.querySelector('input[value="Test Title"]');
+
+      fireEvent.change(titleInput, { target: { value: "New Title" } });
+
+      expect(defaultProps.handlers.handleTitleChange).toHaveBeenCalled();
+    });
+
+    it("should display title error when present", () => {
+      const { getByTestId } = renderComponent({
+        errors: { ...defaultProps.errors, title: "Title is required" },
+      });
+
+      expect(getByTestId("cap-error")).toHaveTextContent("Title is required");
+    });
+  });
+
+  describe("Message Field", () => {
+    it("should call message change handler", () => {
+      const { container } = renderComponent();
+      const messageInput = container.querySelector('input[value="Test Message"]');
+
+      fireEvent.change(messageInput, { target: { value: "New Message" } });
+
+      expect(defaultProps.handlers.handleMessageChange).toHaveBeenCalled();
+    });
+
+    it("should display message error when present", () => {
+      const { getByTestId } = renderComponent({
+        errors: { ...defaultProps.errors, message: "Message is required" },
+      });
+
+      expect(getByTestId("cap-error")).toHaveTextContent("Message is required");
+    });
+  });
+
+  describe("Media Type Selection", () => {
+    it("should call media type change handler", () => {
+      const { container } = renderComponent();
+      const mediaSelect = container.querySelector('select');
+
+      fireEvent.change(mediaSelect, { target: { value: "VIDEO" } });
+
+      expect(defaultProps.handlers.handleMediaTypeChange).toHaveBeenCalled();
+    });
+  });
+
+  describe("Action on Click", () => {
+    it("should call action on click change handler", () => {
+      const { getByTestId } = renderComponent();
+      const checkbox = getByTestId("action-checkbox");
+
+      fireEvent.click(checkbox);
+
+      expect(defaultProps.handlers.handleActionOnClickChange).toHaveBeenCalled();
+    });
+
+    it("should show action controls when actionOnClick is true", () => {
+      const { container } = renderComponent({
+        content: { ...defaultProps.content, actionOnClick: true },
+      });
+
+      expect(container.textContent).toContain("Link Type");
+    });
+
+    it("should hide action controls when actionOnClick is false", () => {
+      const { container } = renderComponent({
+        content: { ...defaultProps.content, actionOnClick: false },
+      });
+
+      expect(container.textContent).not.toContain("Link Type");
+    });
+  });
+
+  describe("Device Type Handling", () => {
+    it("should render with Android device type", () => {
+      const { container } = renderComponent({ deviceType: ANDROID });
+      const titleInput = container.querySelector('#mobile-push-title-name-input-android');
+      expect(titleInput).toBeInTheDocument();
+    });
+
+    it("should render with iOS device type", () => {
+      const { container } = renderComponent({ deviceType: IOS });
+      const titleInput = container.querySelector('#mobile-push-title-name-input-ios');
+      expect(titleInput).toBeInTheDocument();
+    });
+  });
+
+  describe("External Link Input", () => {
+    it("should call external link change handler", () => {
+      const { container } = renderComponent({
+        content: { ...defaultProps.content, actionOnClick: true, linkType: EXTERNAL_LINK },
+      });
+
+      const externalLinkInput = container.querySelector('input[value="https://example.com"]');
+
+      if (externalLinkInput) {
+        fireEvent.change(externalLinkInput, { target: { value: "https://newlink.com" } });
+        expect(defaultProps.handlers.handleExternalLinkChange).toHaveBeenCalled();
+      }
+    });
+
+    it("should display external link error when present", () => {
+      const { getByTestId } = renderComponent({
+        content: { ...defaultProps.content, actionOnClick: true, linkType: EXTERNAL_LINK },
+        errors: { ...defaultProps.errors, externalLink: "Invalid URL" },
+      });
+
+      expect(getByTestId("cap-error")).toHaveTextContent("Invalid URL");
+    });
+  });
+
+  describe("Carousel Media Type", () => {
+    it("should hide action controls when mediaType is CAROUSEL", () => {
+      const { container } = renderComponent({
+        content: { ...defaultProps.content, mediaType: "CAROUSEL" },
+      });
+
+      expect(container.textContent).not.toContain("Buttons and Links");
+      expect(container.textContent).not.toContain("CtaButtons");
+    });
+
+    it("should show action controls when mediaType is not CAROUSEL", () => {
+      const { container } = renderComponent({
+        content: { ...defaultProps.content, mediaType: "IMAGE" },
+      });
+
+      expect(container.textContent).toContain("Buttons and Links");
+    });
+  });
+
+  describe("formatMessage Integration", () => {
+    it("should call formatMessage with correct arguments", () => {
+      renderComponent();
+
+      expect(defaultProps.formatMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: "titlePlaceholder",
+          defaultMessage: "Enter title",
+        })
+      );
+    });
+  });
+
+  describe("Error Handling", () => {
+    it("should handle missing linkProps gracefully", () => {
+      const { container } = renderComponent({
+        linkProps: {},
+      });
+
+      expect(container).toBeInTheDocument();
+    });
+
+    it("should handle undefined values gracefully", () => {
+      const { container } = renderComponent({
+        content: {
+          ...defaultProps.content,
+          title: undefined,
+          message: undefined,
+        },
+      });
+
+      expect(container).toBeInTheDocument();
+    });
+  });
+
+  // Deep link keys handling - covering lines 109-120, 134, 297-303
+  it('should handle deep link keys with array from selection', () => {
+    const mockDeepLink = [
+      { value: 'test-deep-link', keys: ['key1', 'key2'] }
+    ];
+    const mockLinkProps = {
+      deepLink: mockDeepLink,
+      deepLinkValue: 'test-deep-link',
+      deepLinkKeysValue: ['key1', 'key2'],
+      externalLinkValue: '',
+    };
+    const mockContent = {
+      title: 'Test Title',
+      message: 'Test Message',
+      mediaType: 'IMAGE',
+      actionOnClick: true,
+      linkType: 'DEEP_LINK',
+    };
+
+    const { getByText, getByDisplayValue } = render(
+      <PlatformContentFields
+        deviceType="ANDROID"
+        content={mockContent}
+        errors={{}}
+        handlers={defaultProps.handlers}
+        tagListProps={defaultProps.tagListProps}
+        mediaUploaderProps={defaultProps.mediaUploaderProps}
+        ctaButtonProps={defaultProps.ctaButtonProps}
+        linkProps={mockLinkProps}
+        sameContent={false}
+        formatMessage={defaultProps.formatMessage}
+      />
+    );
+
+    // Check that deep link keys are displayed correctly
+    expect(getByText('key1, key2')).toBeInTheDocument();
+    expect(getByDisplayValue('key1, key2')).toBeInTheDocument();
+  });
+
+  it('should handle deep link keys with single key from selection', () => {
+    const mockDeepLink = [
+      { value: 'test-deep-link', keys: 'single-key' }
+    ];
+    const mockLinkProps = {
+      deepLink: mockDeepLink,
+      deepLinkValue: 'test-deep-link',
+      deepLinkKeysValue: ['single-key'],
+      externalLinkValue: '',
+    };
+    const mockContent = {
+      title: 'Test Title',
+      message: 'Test Message',
+      mediaType: 'IMAGE',
+      actionOnClick: true,
+      linkType: 'DEEP_LINK',
+    };
+
+    const { getByText, getByDisplayValue } = render(
+      <PlatformContentFields
+        deviceType="ANDROID"
+        content={mockContent}
+        errors={{}}
+        handlers={defaultProps.handlers}
+        tagListProps={defaultProps.tagListProps}
+        mediaUploaderProps={defaultProps.mediaUploaderProps}
+        ctaButtonProps={defaultProps.ctaButtonProps}
+        linkProps={mockLinkProps}
+        sameContent={false}
+        formatMessage={defaultProps.formatMessage}
+      />
+    );
+
+    // Check that single key is displayed correctly
+    expect(getByText('single-key')).toBeInTheDocument();
+    expect(getByDisplayValue('single-key')).toBeInTheDocument();
+  });
+
+  it('should handle deep link keys with no keys from selection but existing keys', () => {
+    const mockDeepLink = [
+      { value: 'test-deep-link', keys: [] } // No keys from selection
+    ];
+    const mockLinkProps = {
+      deepLink: mockDeepLink,
+      deepLinkValue: 'test-deep-link',
+      deepLinkKeysValue: ['existing-key1', 'existing-key2'], // But existing keys in value
+      externalLinkValue: '',
+    };
+    const mockContent = {
+      title: 'Test Title',
+      message: 'Test Message',
+      mediaType: 'IMAGE',
+      actionOnClick: true,
+      linkType: 'DEEP_LINK',
+    };
+
+    const { container } = render(
+      <PlatformContentFields
+        deviceType="ANDROID"
+        content={mockContent}
+        errors={{}}
+        handlers={defaultProps.handlers}
+        tagListProps={defaultProps.tagListProps}
+        mediaUploaderProps={defaultProps.mediaUploaderProps}
+        ctaButtonProps={defaultProps.ctaButtonProps}
+        linkProps={mockLinkProps}
+        sameContent={false}
+        formatMessage={defaultProps.formatMessage}
+      />
+    );
+
+    // When no keys from selection, the deep link keys section should not render at all
+    expect(container.textContent).not.toContain('Deep Link Keys');
+  });
+
+  it('should handle deep link keys with no keys at all', () => {
+    const mockDeepLink = [
+      { value: 'test-deep-link', keys: [] } // No keys from selection
+    ];
+    const mockLinkProps = {
+      deepLink: mockDeepLink,
+      deepLinkValue: 'test-deep-link',
+      deepLinkKeysValue: [], // But no keys in the value
+      externalLinkValue: '',
+    };
+    const mockContent = {
+      title: 'Test Title',
+      message: 'Test Message',
+      mediaType: 'IMAGE',
+      actionOnClick: true,
+      linkType: 'DEEP_LINK',
+    };
+
+    const { container } = render(
+      <PlatformContentFields
+        deviceType="ANDROID"
+        content={mockContent}
+        errors={{}}
+        handlers={defaultProps.handlers}
+        tagListProps={defaultProps.tagListProps}
+        mediaUploaderProps={defaultProps.mediaUploaderProps}
+        ctaButtonProps={defaultProps.ctaButtonProps}
+        linkProps={mockLinkProps}
+        sameContent={false}
+        formatMessage={defaultProps.formatMessage}
+      />
+    );
+
+    // When no keys from selection, the deep link keys section should not render at all
+    expect(container.textContent).not.toContain('Deep Link Keys');
+  });
+
+  it('should handle deep link keys with string value instead of array', () => {
+    const mockDeepLink = [
+      { value: 'test-deep-link', keys: 'single-key' }
+    ];
+    const mockLinkProps = {
+      deepLink: mockDeepLink,
+      deepLinkValue: 'test-deep-link',
+      deepLinkKeysValue: 'string-key-value',
+      externalLinkValue: '',
+    };
+    const mockContent = {
+      title: 'Test Title',
+      message: 'Test Message',
+      mediaType: 'IMAGE',
+      actionOnClick: true,
+      linkType: 'DEEP_LINK',
+    };
+
+    const { getByDisplayValue } = render(
+      <PlatformContentFields
+        deviceType="ANDROID"
+        content={mockContent}
+        errors={{}}
+        handlers={defaultProps.handlers}
+        tagListProps={defaultProps.tagListProps}
+        mediaUploaderProps={defaultProps.mediaUploaderProps}
+        ctaButtonProps={defaultProps.ctaButtonProps}
+        linkProps={mockLinkProps}
+        sameContent={false}
+        formatMessage={defaultProps.formatMessage}
+      />
+    );
+
+    // Check that string value is displayed correctly
+    expect(getByDisplayValue('string-key-value')).toBeInTheDocument();
+  });
+
+  it('should handle deep link keys with undefined deepLinkKeysValue', () => {
+    const mockDeepLink = [
+      { value: 'test-deep-link', keys: ['key1', 'key2'] }
+    ];
+    const mockLinkProps = {
+      deepLink: mockDeepLink,
+      deepLinkValue: 'test-deep-link',
+      deepLinkKeysValue: undefined,
+      externalLinkValue: '',
+    };
+    const mockContent = {
+      title: 'Test Title',
+      message: 'Test Message',
+      mediaType: 'IMAGE',
+      actionOnClick: true,
+      linkType: 'DEEP_LINK',
+    };
+
+    const { getAllByDisplayValue } = render(
+      <PlatformContentFields
+        deviceType="ANDROID"
+        content={mockContent}
+        errors={{}}
+        handlers={defaultProps.handlers}
+        tagListProps={defaultProps.tagListProps}
+        mediaUploaderProps={defaultProps.mediaUploaderProps}
+        ctaButtonProps={defaultProps.ctaButtonProps}
+        linkProps={mockLinkProps}
+        sameContent={false}
+        formatMessage={defaultProps.formatMessage}
+      />
+    );
+
+    // Check that empty string is displayed when deepLinkKeysValue is undefined
+    const emptyInputs = getAllByDisplayValue('');
+    expect(emptyInputs.length).toBeGreaterThan(0);
+  });
+
+  it('should handle deep link keys placeholder with fallback', () => {
+    const mockDeepLink = [
+      { value: 'test-deep-link', keys: ['key1', 'key2'] } // Need keys to trigger the section
+    ];
+    const mockLinkProps = {
+      deepLink: mockDeepLink,
+      deepLinkValue: 'test-deep-link',
+      deepLinkKeysValue: [],
+      externalLinkValue: '',
+    };
+    const mockContent = {
+      title: 'Test Title',
+      message: 'Test Message',
+      mediaType: 'IMAGE',
+      actionOnClick: true,
+      linkType: 'DEEP_LINK',
+    };
+
+    render(
+      <PlatformContentFields
+        deviceType="ANDROID"
+        content={mockContent}
+        errors={{}}
+        handlers={defaultProps.handlers}
+        tagListProps={defaultProps.tagListProps}
+        mediaUploaderProps={defaultProps.mediaUploaderProps}
+        ctaButtonProps={defaultProps.ctaButtonProps}
+        linkProps={mockLinkProps}
+        sameContent={false}
+        formatMessage={defaultProps.formatMessage}
+      />
+    );
+
+    // Verify that formatMessage was called with the fallback placeholder
+    expect(defaultProps.formatMessage).toHaveBeenCalledWith(
+      expect.any(Object),
+      { key: 'key1, key2' }
+    );
+  });
+
+  it('should handle deep link keys error display', () => {
+    const mockDeepLink = [
+      { value: 'test-deep-link', keys: ['key1', 'key2'] }
+    ];
+    const mockLinkProps = {
+      deepLink: mockDeepLink,
+      deepLinkValue: 'test-deep-link',
+      deepLinkKeysValue: ['key1', 'key2'],
+      externalLinkValue: '',
+    };
+    const mockContent = {
+      title: 'Test Title',
+      message: 'Test Message',
+      mediaType: 'IMAGE',
+      actionOnClick: true,
+      linkType: 'DEEP_LINK',
+    };
+    const mockErrors = {
+      deepLinkKeys: 'Deep link keys error message',
+    };
+
+    const { getByText } = render(
+      <PlatformContentFields
+        deviceType="ANDROID"
+        content={mockContent}
+        errors={mockErrors}
+        handlers={defaultProps.handlers}
+        tagListProps={defaultProps.tagListProps}
+        mediaUploaderProps={defaultProps.mediaUploaderProps}
+        ctaButtonProps={defaultProps.ctaButtonProps}
+        linkProps={mockLinkProps}
+        sameContent={false}
+        formatMessage={defaultProps.formatMessage}
+      />
+    );
+
+    // Check that error message is displayed
+    expect(getByText('Deep link keys error message')).toBeInTheDocument();
+  });
+});