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

Applicaster Zapp React Native ui components for the Quick Brick App

import { SecondaryImage } from "../index";

describe("SecondaryImage - Configuration Builder", () => {
  const mockValue = (config: any) => (key: string, transformer?: Function) => {
    const value = config[key];

    return transformer ? transformer(value) : value;
  };

  it("should pass false as second argument to image_src_from_media_item", () => {
    const config = {
      secondary_image_switch: true,
      secondary_image_position: "over_image",
      secondary_image_visibility: "always",
      secondary_image_image_key: "custom_image",
      secondary_image_display_mode: "dynamic",
      secondary_image_dynamic_width: 100,
    };

    const result = SecondaryImage({
      value: mockValue(config),
      currentPosition: "over_image",
      state: "default",
    });

    expect(result).not.toBeNull();
    expect(result?.elements).toBeDefined();
    expect(result?.elements[0].data).toBeDefined();

    const imageData = result?.elements[0].data[0];
    expect(imageData.func).toBe("image_src_from_media_item");
    expect(imageData.args).toEqual(["custom_image", false]);
    expect(imageData.propName).toBe("uri");
  });

  it("should return null when secondary image is disabled", () => {
    const config = {
      secondary_image_switch: false,
    };

    const result = SecondaryImage({
      value: mockValue(config),
      currentPosition: "over_image",
      state: "default",
    });

    expect(result).toBeNull();
  });

  it("should return null when position does not match currentPosition", () => {
    const config = {
      secondary_image_switch: true,
      secondary_image_position: "above_text_label_1",
      secondary_image_visibility: "always",
    };

    const result = SecondaryImage({
      value: mockValue(config),
      currentPosition: "over_image",
      state: "default",
    });

    expect(result).toBeNull();
  });

  it("should return null when visibility does not match state", () => {
    const config = {
      secondary_image_switch: true,
      secondary_image_position: "over_image",
      secondary_image_visibility: "focused",
    };

    const result = SecondaryImage({
      value: mockValue(config),
      currentPosition: "over_image",
      state: "default",
    });

    expect(result).toBeNull();
  });

  it("should include display mode and image sizing in additionalProps", () => {
    const config = {
      secondary_image_switch: true,
      secondary_image_position: "over_image",
      secondary_image_visibility: "always",
      secondary_image_image_key: "logo",
      secondary_image_display_mode: "fixed",
      secondary_image_image_sizing: "fill",
      secondary_image_fit_position: "center",
      secondary_image_fixed_width: 200,
      secondary_image_fixed_height: 150,
    };

    const result = SecondaryImage({
      value: mockValue(config),
      currentPosition: "over_image",
      state: "default",
    });

    expect(result?.elements[0].additionalProps).toMatchObject({
      displayMode: "fixed",
      imageSizing: "fill",
      fitPosition: "center",
      fixedWidth: 200,
      fixedHeight: 150,
    });
  });

  it("should apply correct styles including margins and border radius", () => {
    const config = {
      secondary_image_switch: true,
      secondary_image_position: "over_image",
      secondary_image_visibility: "always",
      secondary_image_display_mode: "fixed",
      secondary_image_fixed_width: 100,
      secondary_image_fixed_height: 100,
      secondary_image_corner_radius: 12,
      secondary_image_margin_top: 10,
      secondary_image_margin_left: 5,
      secondary_image_margin_right: 5,
      secondary_image_margin_bottom: 10,
    };

    const result = SecondaryImage({
      value: mockValue(config),
      currentPosition: "over_image",
      state: "default",
    });

    expect(result?.elements[0].style).toMatchObject({
      width: 100,
      height: 100,
      borderRadius: 12,
      marginTop: 10,
      marginLeft: 5,
      marginRight: 5,
      marginBottom: 10,
    });
  });
});