@applicaster/zapp-react-native-utils/manifestUtils/secondaryImage/__tests__/secondaryImage.test.ts

Applicaster Zapp React Native utilities package

import {
  ALIGN_CENTER,
  ALIGN_LEFT,
  ALIGN_RIGHT,
  DISPLAY_MODE_DYNAMIC,
  DISPLAY_MODE_FIXED,
  FIT_POSITION,
  IMAGE_POSITION,
  IMAGE_SIZING_FILL,
  IMAGE_SIZING_FIT,
  secondaryImage,
  POSITION_OVER_IMAGE,
  VISIBILITY_ALWAYS,
  VISIBILITY_DEFAULT,
  VISIBILITY_FOCUSED,
} from "..";

const basicConditions = {
  rules: "all_conditions",
  conditional_fields: [
    {
      key: "assets/secondary_image_switch",
      condition_value: true,
    },
  ],
};

const forDisplayModeFixedConditionsOnly = {
  rules: "all_conditions",
  conditional_fields: [
    {
      key: "assets/secondary_image_switch",
      condition_value: true,
    },
    {
      key: "assets/secondary_image_display_mode",
      condition_value: DISPLAY_MODE_FIXED,
    },
  ],
};

const forDisplayModeDynamicConditionsOnly = {
  rules: "all_conditions",
  conditional_fields: [
    {
      key: "assets/secondary_image_switch",
      condition_value: true,
    },
    {
      key: "assets/secondary_image_display_mode",
      condition_value: DISPLAY_MODE_DYNAMIC,
    },
  ],
};

const forPositionOverImageConditionsOnly = {
  rules: "all_conditions",
  conditional_fields: [
    {
      key: "assets/secondary_image_switch",
      condition_value: true,
    },
    {
      key: "assets/secondary_image_position",
      condition_value: POSITION_OVER_IMAGE,
    },
  ],
};

const forImageSizingFitConditionsOnly = {
  rules: "all_conditions",
  conditional_fields: [
    {
      key: "assets/secondary_image_switch",
      condition_value: true,
    },
    {
      key: "assets/secondary_image_display_mode",
      condition_value: DISPLAY_MODE_FIXED,
    },
    {
      key: "assets/secondary_image_image_sizing",
      condition_value: IMAGE_SIZING_FIT,
    },
  ],
};

describe("secondaryImage", () => {
  it("generate secondary-image configuration - enabled, fixed and dynamic display_mode", () => {
    const enable = true;
    const imageKey = "thumb_1";
    const visibility = VISIBILITY_ALWAYS;
    const fixedHeight = 1;
    const fixedWidth = 2;
    const imageSizing = IMAGE_SIZING_FIT;
    const fitPosition = FIT_POSITION.CENTER;

    const dynamicWidth = 3;

    const cornerRadius = 4;
    const marginTop = 5;
    const marginRight = 6;
    const marginBottom = 7;
    const marginLeft = 8;

    const textLabels = ["text_label_1"];
    const position = "above_text_label_1";
    const align = ALIGN_LEFT;
    const imagePosition = IMAGE_POSITION.CENTER;

    const output = {
      group: true,
      label: "Secondary Image",
      tooltip: "",
      folded: false,
      fields: [
        {
          initial_value: enable,
          key: "secondary_image_switch",
          label: "Enable",
          type: "switch",
        },
        {
          initial_value: imageKey,
          key: "secondary_image_image_key",
          type: "text_input",
          label: "Image Key",
          ...basicConditions,
        },
        {
          initial_value: visibility,
          type: "select",
          key: "secondary_image_visibility",
          label: "Visibility",
          options: [
            {
              text: "Always",
              value: VISIBILITY_ALWAYS,
            },
            {
              text: "Default",
              value: VISIBILITY_DEFAULT,
            },
            {
              text: "Focused",
              value: VISIBILITY_FOCUSED,
            },
          ],
          ...basicConditions,
        },
        {
          initial_value: DISPLAY_MODE_FIXED,
          type: "select",
          key: "secondary_image_display_mode",
          label: "Display Mode",
          label_tooltip:
            "Power Cell 1 and 2 only supports fixed display mode for secondary image. Dynamic mode will be supported only in Power Cell 3.",
          options: [
            {
              text: "Fixed",
              value: DISPLAY_MODE_FIXED,
            },
            {
              text: "Dynamic",
              value: DISPLAY_MODE_DYNAMIC,
            },
          ],
          ...basicConditions,
        },
        {
          initial_value: fixedWidth,
          type: "number_input",
          label: "Width",
          key: "secondary_image_fixed_width",
          ...forDisplayModeFixedConditionsOnly,
        },
        {
          initial_value: fixedHeight,
          type: "number_input",
          label: "Height",
          key: "secondary_image_fixed_height",
          ...forDisplayModeFixedConditionsOnly,
        },
        {
          initial_value: imageSizing,
          type: "select",
          key: "secondary_image_image_sizing",
          label: "Image Sizing",
          options: [
            {
              text: "Fit",
              value: IMAGE_SIZING_FIT,
            },
            {
              text: "Fill",
              value: IMAGE_SIZING_FILL,
            },
          ],
          ...forDisplayModeFixedConditionsOnly,
        },
        {
          initial_value: fitPosition,
          type: "select",
          key: "secondary_image_fit_position",
          label: "Fit Position",
          options: [
            {
              text: "Center",
              value: FIT_POSITION.CENTER,
            },
            {
              text: "Center Left",
              value: FIT_POSITION.CENTER_LEFT,
            },
            {
              text: "Center Right",
              value: FIT_POSITION.CENTER_RIGHT,
            },
            {
              text: "Bottom Center",
              value: FIT_POSITION.BOTTOM_CENTER,
            },
            {
              text: "Bottom Left",
              value: FIT_POSITION.BOTTOM_LEFT,
            },
            {
              text: "Bottom Right",
              value: FIT_POSITION.BOTTOM_RIGHT,
            },
            {
              text: "Top Center",
              value: FIT_POSITION.TOP_CENTER,
            },
            {
              text: "Top Left",
              value: FIT_POSITION.TOP_LEFT,
            },
            {
              text: "Top Right",
              value: FIT_POSITION.TOP_RIGHT,
            },
          ],
          ...forImageSizingFitConditionsOnly,
        },
        {
          initial_value: dynamicWidth,
          type: "number_input",
          label: "Width",
          key: "secondary_image_dynamic_width",
          ...forDisplayModeDynamicConditionsOnly,
        },
        {
          initial_value: position,
          type: "select",
          key: "secondary_image_position",
          label: "Position",
          options: [
            {
              text: "Over Image",
              value: POSITION_OVER_IMAGE,
            },
            {
              text: "Above Text Label 1",
              value: "above_text_label_1",
            },
            {
              text: "Below Text Label 1",
              value: "below_text_label_1",
            },
          ],
          ...basicConditions,
        },
        {
          initial_value: align,
          type: "select",
          key: "secondary_image_align",
          label: "Align",
          options: [
            {
              text: "Left",
              value: ALIGN_LEFT,
            },
            {
              text: "Center",
              value: ALIGN_CENTER,
            },
            {
              text: "Right",
              value: ALIGN_RIGHT,
            },
          ],
          rules: "all_conditions",
          conditional_fields: [
            {
              key: "assets/secondary_image_switch",
              condition_value: true,
            },
            {
              key: "assets/secondary_image_position",
              condition_value: ["above_text_label_1", "below_text_label_1"],
            },
          ],
        },
        {
          initial_value: imagePosition,
          type: "select",
          key: "secondary_image_image_position",
          label: "Image Position",
          options: [
            {
              text: "Center",
              value: IMAGE_POSITION.CENTER,
            },
            {
              text: "Top Left",
              value: IMAGE_POSITION.TOP_LEFT,
            },
            {
              text: "Top Right",
              value: IMAGE_POSITION.TOP_RIGHT,
            },
            {
              text: "Bottom Left",
              value: IMAGE_POSITION.BOTTOM_LEFT,
            },
            {
              text: "Bottom Right",
              value: IMAGE_POSITION.BOTTOM_RIGHT,
            },
          ],
          ...forPositionOverImageConditionsOnly,
        },
        {
          initial_value: cornerRadius,
          type: "number_input",
          label: "Corner Radius",
          key: "secondary_image_corner_radius",
          ...basicConditions,
        },
        {
          initial_value: marginTop,
          type: "number_input",
          label: "Margin Top",
          key: "secondary_image_margin_top",
          ...basicConditions,
        },
        {
          initial_value: marginRight,
          type: "number_input",
          label: "Margin Right",
          key: "secondary_image_margin_right",
          ...basicConditions,
        },
        {
          initial_value: marginBottom,
          type: "number_input",
          label: "Margin Bottom",
          key: "secondary_image_margin_bottom",
          ...basicConditions,
        },
        {
          initial_value: marginLeft,
          type: "number_input",
          label: "Margin Left",
          key: "secondary_image_margin_left",
          ...basicConditions,
        },
      ],
    };

    const result = secondaryImage({
      enable,
      imageKey,
      visibility,
      displayMode: {
        default: DISPLAY_MODE_FIXED,
        availableModes: [DISPLAY_MODE_FIXED, DISPLAY_MODE_DYNAMIC],
      },
      fixedHeight,
      fixedWidth,
      imageSizing,
      fitPosition,
      dynamicWidth,
      position: {
        default: position,
        textLabels,
      },
      align,
      imagePosition,
      cornerRadius,
      marginTop,
      marginRight,
      marginBottom,
      marginLeft,
    });

    expect(result).toEqual(output);
  });

  it("generate secondary-image configuration - enabled, fixed only display_mode, no visibility", () => {
    const enable = true;
    const imageKey = "thumb_1";
    const fixedHeight = 1;
    const fixedWidth = 2;
    const imageSizing = IMAGE_SIZING_FILL;
    const fitPosition = FIT_POSITION.CENTER_LEFT;

    const cornerRadius = 3;
    const marginTop = 4;
    const marginRight = 5;
    const marginBottom = 6;
    const marginLeft = 7;

    const textLabels = ["text_label_1", "text_label_2"];
    const position = "below_text_label_2";
    const align = ALIGN_CENTER;
    const imagePosition = IMAGE_POSITION.BOTTOM_LEFT;

    const output = {
      group: true,
      label: "Secondary Image",
      tooltip: "",
      folded: false,
      fields: [
        {
          initial_value: enable,
          key: "secondary_image_switch",
          label: "Enable",
          type: "switch",
        },
        {
          initial_value: imageKey,
          key: "secondary_image_image_key",
          type: "text_input",
          label: "Image Key",
          rules: "conditional",
          ...basicConditions,
        },
        {
          initial_value: DISPLAY_MODE_FIXED,
          type: "select",
          key: "secondary_image_display_mode",
          label: "Display Mode",
          label_tooltip:
            "Power Cell 1 and 2 only supports fixed display mode for secondary image. Dynamic mode will be supported only in Power Cell 3.",
          options: [
            {
              text: "Fixed",
              value: DISPLAY_MODE_FIXED,
            },
          ],
          ...basicConditions,
        },
        {
          initial_value: fixedWidth,
          type: "number_input",
          label: "Width",
          key: "secondary_image_fixed_width",
          ...forDisplayModeFixedConditionsOnly,
        },
        {
          initial_value: fixedHeight,
          type: "number_input",
          label: "Height",
          key: "secondary_image_fixed_height",
          ...forDisplayModeFixedConditionsOnly,
        },
        {
          initial_value: imageSizing,
          type: "select",
          key: "secondary_image_image_sizing",
          label: "Image Sizing",
          options: [
            {
              text: "Fit",
              value: IMAGE_SIZING_FIT,
            },
            {
              text: "Fill",
              value: IMAGE_SIZING_FILL,
            },
          ],
          ...forDisplayModeFixedConditionsOnly,
        },
        {
          initial_value: fitPosition,
          type: "select",
          key: "secondary_image_fit_position",
          label: "Fit Position",
          options: [
            {
              text: "Center",
              value: FIT_POSITION.CENTER,
            },
            {
              text: "Center Left",
              value: FIT_POSITION.CENTER_LEFT,
            },
            {
              text: "Center Right",
              value: FIT_POSITION.CENTER_RIGHT,
            },
            {
              text: "Bottom Center",
              value: FIT_POSITION.BOTTOM_CENTER,
            },
            {
              text: "Bottom Left",
              value: FIT_POSITION.BOTTOM_LEFT,
            },
            {
              text: "Bottom Right",
              value: FIT_POSITION.BOTTOM_RIGHT,
            },
            {
              text: "Top Center",
              value: FIT_POSITION.TOP_CENTER,
            },
            {
              text: "Top Left",
              value: FIT_POSITION.TOP_LEFT,
            },
            {
              text: "Top Right",
              value: FIT_POSITION.TOP_RIGHT,
            },
          ],
          ...forImageSizingFitConditionsOnly,
        },
        {
          initial_value: position,
          type: "select",
          key: "secondary_image_position",
          label: "Position",
          options: [
            {
              text: "Over Image",
              value: POSITION_OVER_IMAGE,
            },
            {
              text: "Above Text Label 1",
              value: "above_text_label_1",
            },
            {
              text: "Below Text Label 1",
              value: "below_text_label_1",
            },
            {
              text: "Above Text Label 2",
              value: "above_text_label_2",
            },
            {
              text: "Below Text Label 2",
              value: "below_text_label_2",
            },
          ],
          ...basicConditions,
        },
        {
          initial_value: align,
          type: "select",
          key: "secondary_image_align",
          label: "Align",
          options: [
            {
              text: "Left",
              value: ALIGN_LEFT,
            },
            {
              text: "Center",
              value: ALIGN_CENTER,
            },
            {
              text: "Right",
              value: ALIGN_RIGHT,
            },
          ],
          rules: "all_conditions",
          conditional_fields: [
            {
              key: "assets/secondary_image_switch",
              condition_value: true,
            },
            {
              key: "assets/secondary_image_position",
              condition_value: [
                "above_text_label_1",
                "below_text_label_1",
                "above_text_label_2",
                "below_text_label_2",
              ],
            },
          ],
        },
        {
          initial_value: imagePosition,
          type: "select",
          key: "secondary_image_image_position",
          label: "Image Position",
          options: [
            {
              text: "Center",
              value: IMAGE_POSITION.CENTER,
            },
            {
              text: "Top Left",
              value: IMAGE_POSITION.TOP_LEFT,
            },
            {
              text: "Top Right",
              value: IMAGE_POSITION.TOP_RIGHT,
            },
            {
              text: "Bottom Left",
              value: IMAGE_POSITION.BOTTOM_LEFT,
            },
            {
              text: "Bottom Right",
              value: IMAGE_POSITION.BOTTOM_RIGHT,
            },
          ],
          ...forPositionOverImageConditionsOnly,
        },
        {
          initial_value: cornerRadius,
          type: "number_input",
          label: "Corner Radius",
          key: "secondary_image_corner_radius",
          ...basicConditions,
        },
        {
          initial_value: marginTop,
          type: "number_input",
          label: "Margin Top",
          key: "secondary_image_margin_top",
          ...basicConditions,
        },
        {
          initial_value: marginRight,
          type: "number_input",
          label: "Margin Right",
          key: "secondary_image_margin_right",
          ...basicConditions,
        },
        {
          initial_value: marginBottom,
          type: "number_input",
          label: "Margin Bottom",
          key: "secondary_image_margin_bottom",
          ...basicConditions,
        },
        {
          initial_value: marginLeft,
          type: "number_input",
          label: "Margin Left",
          key: "secondary_image_margin_left",
          ...basicConditions,
        },
      ],
    };

    const result = secondaryImage({
      enable,
      imageKey,
      displayMode: {
        default: DISPLAY_MODE_FIXED,
        availableModes: [DISPLAY_MODE_FIXED],
      },
      fixedHeight,
      fixedWidth,
      imageSizing,
      fitPosition,
      position: {
        default: position,
        textLabels,
      },
      align,
      imagePosition,
      cornerRadius,
      marginTop,
      marginRight,
      marginBottom,
      marginLeft,
    });

    expect(result).toEqual(output);
  });
});