@applicaster/zapp-react-native-ui-components/Components/MasterCell/DefaultComponents/ImageBorderContainer/__tests__/index.test.ts

Applicaster Zapp React Native ui components for the Quick Brick App

import { ImageBorderContainer } from "../index";
import { getImageContainerMarginStyles } from "@applicaster/zapp-react-native-utils/cellUtils";

const mockValue = (key) => {
  const values = {
    cell_padding_top: 1,
    cell_padding_left: 2,
    cell_padding_right: 3,
    cell_padding_bottom: 4,
    image_border_size: 5,
    image_focused_border_color: "red",
    image_selected_border_color: "blue",
    image_focused_selected_border_color: "green",
    image_border_color: "black",
    image_corner_radius: 10,
    image_border_position: "outside",
    image_border_padding_top: 6,
    image_border_padding_right: 7,
    image_border_padding_bottom: 8,
    image_border_padding_left: 9,
    image_margin_top: 11,
    image_margin_left: 12,
    image_margin_right: 13,
    image_margin_bottom: 14,
  };

  return values[key] || 0;
};

describe("ImageBorderContainer", () => {
  it("calculates style properties correctly", () => {
    const marginStyles = getImageContainerMarginStyles({ value: mockValue });

    expect(marginStyles.marginTop).toBe(11);
    expect(marginStyles.marginLeft).toBe(12);
    expect(marginStyles.marginRight).toBe(13);
    expect(marginStyles.marginBottom).toBe(14);

    const props = {
      value: mockValue,
      state: "default",
      imageStyles: {},
    };

    const result = ImageBorderContainer(props);

    expect(result.style.marginTop).toBe(12); // 11 + 1
    expect(result.style.marginLeft).toBe(14); // 12 + 2
    expect(result.style.marginRight).toBe(16); // 13 + 3
    expect(result.style.marginBottom).toBe(18); // 14 + 4
    expect(result.style.borderWidth).toBe(5);
    expect(result.style.borderColor).toBe("black");
    expect(result.style.borderRadius).toBe(10);
    expect(result.additionalProps.borderPosition).toBe("outside");
    expect(result.additionalProps.borderPaddingTop).toBe(6);
    expect(result.additionalProps.borderPaddingRight).toBe(7);
    expect(result.additionalProps.borderPaddingBottom).toBe(8);
    expect(result.additionalProps.borderPaddingLeft).toBe(9);
  });

  it("handles focused state correctly", () => {
    const props = {
      value: mockValue,
      state: "focused",
      imageStyles: {},
    };

    const result = ImageBorderContainer(props);
    expect(result.style.borderColor).toBe("red");
  });

  it("handles selected state correctly", () => {
    const props = {
      value: mockValue,
      state: "selected",
      imageStyles: {},
    };

    const result = ImageBorderContainer(props);
    expect(result.style.borderColor).toBe("blue");
  });

  it("handles focused and selected state correctly", () => {
    const props = {
      value: mockValue,
      state: "focused_selected",
      imageStyles: {},
    };

    const result = ImageBorderContainer(props);
    expect(result.style.borderColor).toBe("green");
  });
});