UNPKG

@applicaster/zapp-react-native-utils

Version:

Applicaster Zapp React Native utilities package

1,337 lines 50.1 kB
import {
  mobileProgressBar,
  DEFAULT_POSITION,
  BOTTOM_OF_CELL_POSITION,
} from "..";

import { compact } from "../../_internals";

describe("mobileProgressBar", () => {
  const basicConditions = (condition) => ({
    rules: "all_conditions",
    conditional_fields: compact([
      {
        key: "assets/progress_bar_switch",
        condition_value: true,
      },
      condition,
    ]),
  });

  // const timeRemainingLabelConditions = (condition) => ({
  //   rules: "all_conditions",
  //   conditional_fields: compact([
  //     {
  //       key: "assets/progress_bar_switch",
  //       condition_value: true,
  //     },
  //     {
  //       key: "assets/progress_bar_time_remaining_label_enable",
  //       condition_value: true,
  //     },
  //     condition,
  //   ]),
  // });

  // const watchedLabelConditions = (condition) => ({
  //   rules: "all_conditions",
  //   conditional_fields: compact([
  //     {
  //       key: "assets/progress_bar_switch",
  //       condition_value: true,
  //     },
  //     {
  //       key: "assets/progress_bar_watched_label_enable",
  //       condition_value: true,
  //     },
  //     condition,
  //   ]),
  // });

  it("generate progress-bar configuration - enabled and with bottom_of_cell", () => {
    const enable = true;
    const hideUnwatched = true;
    const totalBarColor = "total_bar_color";
    const totalBarCornerRadius = 1;
    const progressBarColor = "progress_bar_color";
    const progressBarCornerRadius = 2;
    const height = 3;
    const marginTop = 4;
    const marginRight = 5;
    const marginBottom = 6;
    const marginLeft = 7;

    const textLabels = ["text label 1"];

    // time remaining label
    const timeRemainingLabelEnable = true;
    const timeRemainingLabelPosition = "above_bar";
    const timeRemainingLabelAssetEnable = true;
    const timeRemainingLabelAsset = "time_remaining_label_asset";
    const timeRemainingLabelAssetWidth = 8;
    const timeRemainingLabelAssetHeight = 9;
    const timeRemainingLabelAssetMarginTop = 10;
    const timeRemainingLabelAssetMarginBottom = 11;
    const timeRemainingLabelAssetMarginRight = 12;
    const timeRemainingLabelAssetMarginLeft = 13;

    const timeRemainingLabelContainerMarginTop = 14;
    const timeRemainingLabelContainerMarginRight = 15;
    const timeRemainingLabelContainerMarginBottom = 16;
    const timeRemainingLabelContainerMarginLeft = 17;

    const timeRemainingLabelFontSizeiOS = 18;
    const timeRemainingLabelFontSizeAndroid = 19;

    const timeRemainingLabelFontFamilyiOS = "timeRemainingLabelFontFamilyiOS";

    const timeRemainingLabelFontFamilyAndroid =
      "timeRemainingLabelFontFamilyAndroid";

    const timeRemainingLabelLineHeightiOS = 20;
    const timeRemainingLabelLineHeightAndroid = 21;

    const timeRemainingLabelLetterSpacingiOS = 22;
    const timeRemainingLabelLetterSpacingAndroid = 23;

    // time remaining label

    // watched label
    const watchedLabelEnable = true;
    const watchedLabelPosition = "above_bar";
    const watchedLabelAssetEnable = true;
    const watchedLabelContinueAsset = "watched_label_continue_asset";
    const watchedLabelWatchedAsset = "watched_label_watched_asset";
    const watchedLabelAssetWidth = 24;
    const watchedLabelAssetHeight = 25;
    const watchedLabelAssetMarginTop = 26;
    const watchedLabelAssetMarginBottom = 26;
    const watchedLabelAssetMarginRight = 27;
    const watchedLabelAssetMarginLeft = 28;

    const watchedLabelContainerMarginTop = 29;
    const watchedLabelContainerMarginRight = 30;
    const watchedLabelContainerMarginBottom = 31;
    const watchedLabelContainerMarginLeft = 32;

    const watchedLabelFontSizeiOS = 33;
    const watchedLabelFontSizeAndroid = 34;

    const watchedLabelFontFamilyiOS = "watchedLabelFontFamilyiOS";
    const watchedLabelFontFamilyAndroid = "watchedLabelFontFamilyAndroid";

    const watchedLabelLineHeightiOS = 35;
    const watchedLabelLineHeightAndroid = 36;

    const watchedLabelLetterSpacingiOS = 37;
    const watchedLabelLetterSpacingAndroid = 38;

    // watched label

    const output = {
      group: true,
      label: "Progress Bar",
      tooltip: "",
      folded: false,
      fields: [
        {
          initial_value: enable,
          key: "progress_bar_switch",
          label: "Enable",
          type: "switch",
        },
        {
          initial_value: hideUnwatched,
          key: "progress_bar_hide_unwatched",
          label: "Hide Unwatched",
          type: "switch",
          ...basicConditions(),
        },
        {
          type: "color_picker_rgba",
          label: "Total Bar Color",
          key: "progress_bar_total_bar_color",
          initial_value: totalBarColor,
          ...basicConditions(),
        },
        {
          type: "number_input",
          label: "Total Bar Corner Radius",
          key: "progress_bar_total_bar_corner_radius",
          initial_value: totalBarCornerRadius,
          ...basicConditions(),
        },
        {
          type: "color_picker_rgba",
          label: "Progress Bar Color",
          key: "progress_bar_progress_bar_color",
          initial_value: progressBarColor,
          ...basicConditions(),
        },
        {
          type: "number_input",
          label: "Progress Bar Corner Radius",
          key: "progress_bar_progress_bar_corner_radius",
          initial_value: progressBarCornerRadius,
          ...basicConditions(),
        },
        {
          type: "number_input",
          label: "Height",
          key: "progress_bar_height",
          initial_value: height,
          ...basicConditions(),
        },
        {
          type: "number_input",
          label: "Margin Top",
          key: "progress_bar_margin_top",
          initial_value: marginTop,
          ...basicConditions(),
        },
        {
          type: "number_input",
          label: "Margin Right",
          key: "progress_bar_margin_right",
          initial_value: marginRight,
          ...basicConditions(),
        },
        {
          type: "number_input",
          label: "Margin Bottom",
          key: "progress_bar_margin_bottom",
          initial_value: marginBottom,
          ...basicConditions(),
        },
        {
          type: "number_input",
          label: "Margin Left",
          key: "progress_bar_margin_left",
          initial_value: marginLeft,
          ...basicConditions(),
        },
        {
          type: "select",
          key: "progress_bar_position",
          label: "Position",
          options: [
            {
              text: "On Top of Image",
              value: DEFAULT_POSITION,
            },
            {
              text: "Bottom of cell",
              value: BOTTOM_OF_CELL_POSITION,
            },
            {
              text: "Above Text Label 1",
              value: "above_text_label_1",
            },
            {
              text: "Below Text Label 1",
              value: "below_text_label_1",
            },
          ],
          initial_value: "above_text_label_1",
          ...basicConditions(),
        },
        // {
        //   type: "switch",
        //   label: "Time Remaining Label Enable",
        //   key: "progress_bar_time_remaining_label_enable",
        //   initial_value: timeRemainingLabelEnable,
        //   ...basicConditions(),
        // },
        // {
        //   type: "select",
        //   label: "Time Remaining Label Position",
        //   key: "progress_bar_time_remaining_label_position",
        //   options: [
        //     {
        //       text: "Above Bar",
        //       value: "above_bar",
        //     },
        //     {
        //       text: "Below Bar",
        //       value: "below_bar",
        //     },
        //   ],
        //   initial_value: timeRemainingLabelPosition,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "switch",
        //   label: "Time Remaining Label Asset Enable",
        //   key: "progress_bar_time_remaining_label_asset_enable",
        //   initial_value: timeRemainingLabelAssetEnable,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "uploader",
        //   label: "Time Remaining Label Asset",
        //   key: "progress_bar_time_remaining_label_asset",
        //   initial_value: timeRemainingLabelAsset,
        //   ...timeRemainingLabelConditions({
        //     key: "assets/progress_bar_time_remaining_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Asset Width",
        //   key: "progress_bar_time_remaining_label_asset_width",
        //   initial_value: timeRemainingLabelAssetWidth,
        //   ...timeRemainingLabelConditions({
        //     key: "assets/progress_bar_time_remaining_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Asset Height",
        //   key: "progress_bar_time_remaining_label_asset_height",
        //   initial_value: timeRemainingLabelAssetHeight,
        //   ...timeRemainingLabelConditions({
        //     key: "assets/progress_bar_time_remaining_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Asset Margin Top",
        //   key: "progress_bar_time_remaining_label_asset_margin_top",
        //   initial_value: timeRemainingLabelAssetMarginTop,
        //   ...timeRemainingLabelConditions({
        //     key: "assets/progress_bar_time_remaining_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Asset Margin Right",
        //   key: "progress_bar_time_remaining_label_asset_margin_right",
        //   initial_value: timeRemainingLabelAssetMarginRight,
        //   ...timeRemainingLabelConditions({
        //     key: "assets/progress_bar_time_remaining_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Asset Margin Bottom",
        //   key: "progress_bar_time_remaining_label_asset_margin_bottom",
        //   initial_value: timeRemainingLabelAssetMarginBottom,
        //   ...timeRemainingLabelConditions({
        //     key: "assets/progress_bar_time_remaining_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Asset Margin Left",
        //   key: "progress_bar_time_remaining_label_asset_margin_left",
        //   initial_value: timeRemainingLabelAssetMarginLeft,
        //   ...timeRemainingLabelConditions({
        //     key: "assets/progress_bar_time_remaining_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Container Margin Top",
        //   key: "progress_bar_time_remaining_label_container_margin_top",
        //   initial_value: timeRemainingLabelContainerMarginTop,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Container Margin Right",
        //   key: "progress_bar_time_remaining_label_container_margin_right",
        //   initial_value: timeRemainingLabelContainerMarginRight,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Container Margin Bottom",
        //   key: "progress_bar_time_remaining_label_container_margin_bottom",
        //   initial_value: timeRemainingLabelContainerMarginBottom,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Container Margin Left",
        //   key: "progress_bar_time_remaining_label_container_margin_left",
        //   initial_value: timeRemainingLabelContainerMarginLeft,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "switch",
        //   label: "Watched Label Enable",
        //   key: "progress_bar_watched_label_enable",
        //   initial_value: watchedLabelEnable,
        //   ...basicConditions(),
        // },
        // {
        //   type: "select",
        //   label: "Watched Label Position",
        //   key: "progress_bar_watched_label_position",
        //   options: [
        //     {
        //       text: "Above Bar",
        //       value: "above_bar",
        //     },
        //     {
        //       text: "Below Bar",
        //       value: "below_bar",
        //     },
        //   ],
        //   initial_value: watchedLabelPosition,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "switch",
        //   label: "Watched Label Asset Enable",
        //   key: "progress_bar_watched_label_asset_enable",
        //   initial_value: watchedLabelAssetEnable,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "uploader",
        //   label: "Watched Label Continue Asset",
        //   key: "progress_bar_watched_label_continue_asset",
        //   initial_value: watchedLabelContinueAsset,
        //   ...watchedLabelConditions({
        //     key: "assets/progress_bar_watched_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "uploader",
        //   label: "Watched Label Watched Asset",
        //   key: "progress_bar_watched_label_watched_asset",
        //   initial_value: watchedLabelWatchedAsset,
        //   ...watchedLabelConditions({
        //     key: "assets/progress_bar_watched_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Asset Width",
        //   key: "progress_bar_watched_label_asset_width",
        //   initial_value: watchedLabelAssetWidth,
        //   ...watchedLabelConditions({
        //     key: "assets/progress_bar_watched_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Asset Height",
        //   key: "progress_bar_watched_label_asset_height",
        //   initial_value: watchedLabelAssetHeight,
        //   ...watchedLabelConditions({
        //     key: "assets/progress_bar_watched_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Asset Margin Top",
        //   key: "progress_bar_watched_label_asset_margin_top",
        //   initial_value: watchedLabelAssetMarginTop,
        //   ...watchedLabelConditions({
        //     key: "assets/progress_bar_watched_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Asset Margin Right",
        //   key: "progress_bar_watched_label_asset_margin_right",
        //   initial_value: watchedLabelAssetMarginRight,
        //   ...watchedLabelConditions({
        //     key: "assets/progress_bar_watched_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Asset Margin Bottom",
        //   key: "progress_bar_watched_label_asset_margin_bottom",
        //   initial_value: watchedLabelAssetMarginBottom,
        //   ...watchedLabelConditions({
        //     key: "assets/progress_bar_watched_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Asset Margin Left",
        //   key: "progress_bar_watched_label_asset_margin_left",
        //   initial_value: watchedLabelAssetMarginLeft,
        //   ...watchedLabelConditions({
        //     key: "assets/progress_bar_watched_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Container Margin Top",
        //   key: "progress_bar_watched_label_container_margin_top",
        //   initial_value: watchedLabelContainerMarginTop,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Container Margin Right",
        //   key: "progress_bar_watched_label_container_margin_right",
        //   initial_value: watchedLabelContainerMarginRight,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Container Margin Bottom",
        //   key: "progress_bar_watched_label_container_margin_bottom",
        //   initial_value: watchedLabelContainerMarginBottom,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Container Margin Left",
        //   key: "progress_bar_watched_label_container_margin_left",
        //   initial_value: watchedLabelContainerMarginLeft,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "iOS Time Remaining Label Font Size",
        //   key: "progress_bar_time_remaining_label_ios_font_size",
        //   initial_value: timeRemainingLabelFontSizeiOS,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Android Time Remaining Label Font Size",
        //   key: "progress_bar_time_remaining_label_android_font_size",
        //   initial_value: timeRemainingLabelFontSizeAndroid,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "ios_font_selector",
        //   label: "iOS Time Remaining Label Font Family",
        //   key: "progress_bar_time_remaining_label_ios_font_family",
        //   initial_value: timeRemainingLabelFontFamilyiOS,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "android_font_selector",
        //   label: "Android Time Remaining Label Font Family",
        //   key: "progress_bar_time_remaining_label_android_font_family",
        //   initial_value: timeRemainingLabelFontFamilyAndroid,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "iOS Time Remaining Label Line Height",
        //   key: "progress_bar_time_remaining_label_ios_line_height",
        //   initial_value: timeRemainingLabelLineHeightiOS,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Android Time Remaining Label Line Height",
        //   key: "progress_bar_time_remaining_label_android_line_height",
        //   initial_value: timeRemainingLabelLineHeightAndroid,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "iOS Time Remaining Label Letter Spacing",
        //   key: "progress_bar_time_remaining_label_ios_letter_spacing",
        //   initial_value: timeRemainingLabelLetterSpacingiOS,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Android Time Remaining Label Letter Spacing",
        //   key: "progress_bar_time_remaining_label_android_letter_spacing",
        //   initial_value: timeRemainingLabelLetterSpacingAndroid,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "iOS Watched Label Font Size",
        //   key: "progress_bar_watched_label_ios_font_size",
        //   initial_value: watchedLabelFontSizeiOS,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Android Watched Label Font Size",
        //   key: "progress_bar_watched_label_android_font_size",
        //   initial_value: watchedLabelFontSizeAndroid,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "ios_font_selector",
        //   label: "iOS Watched Label Font Family",
        //   key: "progress_bar_watched_label_ios_font_family",
        //   initial_value: watchedLabelFontFamilyiOS,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "android_font_selector",
        //   label: "Android Watched Label Font Family",
        //   key: "progress_bar_watched_label_android_font_family",
        //   initial_value: watchedLabelFontFamilyAndroid,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "iOS Watched Label Line Height",
        //   key: "progress_bar_watched_label_ios_line_height",
        //   initial_value: watchedLabelLineHeightiOS,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Android Watched Label Line Height",
        //   key: "progress_bar_watched_label_android_line_height",
        //   initial_value: watchedLabelLineHeightAndroid,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "iOS Watched Label Letter Spacing",
        //   key: "progress_bar_watched_label_ios_letter_spacing",
        //   initial_value: watchedLabelLetterSpacingiOS,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Android Watched Label Letter Spacing",
        //   key: "progress_bar_watched_label_android_letter_spacing",
        //   initial_value: watchedLabelLetterSpacingAndroid,
        //   ...watchedLabelConditions(),
        // },
      ],
    };

    const result = mobileProgressBar({
      enable,
      hideUnwatched,
      totalBarColor,
      totalBarCornerRadius,
      progressBarColor,
      progressBarCornerRadius,
      height,
      marginTop,
      marginRight,
      marginBottom,
      marginLeft,
      position: {
        default: "above_text_label_1",
        useBottomOfCell: true,
        textLabels,
      },
      timeRemainingLabel: {
        enable: timeRemainingLabelEnable,
        position: timeRemainingLabelPosition,
        assetEnable: timeRemainingLabelAssetEnable,
        asset: timeRemainingLabelAsset,
        assetWidth: timeRemainingLabelAssetWidth,
        assetHeight: timeRemainingLabelAssetHeight,
        assetMarginTop: timeRemainingLabelAssetMarginTop,
        assetMarginRight: timeRemainingLabelAssetMarginRight,
        assetMarginBottom: timeRemainingLabelAssetMarginBottom,
        assetMarginLeft: timeRemainingLabelAssetMarginLeft,
        containerMarginTop: timeRemainingLabelContainerMarginTop,
        containerMarginRight: timeRemainingLabelContainerMarginRight,
        containerMarginBottom: timeRemainingLabelContainerMarginBottom,
        containerMarginLeft: timeRemainingLabelContainerMarginLeft,

        fontSizeiOS: timeRemainingLabelFontSizeiOS,
        fontFamilyiOS: timeRemainingLabelFontFamilyiOS,
        lineHeightiOS: timeRemainingLabelLineHeightiOS,
        letterSpacingiOS: timeRemainingLabelLetterSpacingiOS,

        fontSizeAndroid: timeRemainingLabelFontSizeAndroid,
        fontFamilyAndroid: timeRemainingLabelFontFamilyAndroid,
        lineHeightAndroid: timeRemainingLabelLineHeightAndroid,
        letterSpacingAndroid: timeRemainingLabelLetterSpacingAndroid,
      },
      watchedLabel: {
        enable: watchedLabelEnable,
        position: watchedLabelPosition,
        assetEnable: watchedLabelAssetEnable,
        continueAsset: watchedLabelContinueAsset,
        watchedAsset: watchedLabelWatchedAsset,
        assetWidth: watchedLabelAssetWidth,
        assetHeight: watchedLabelAssetHeight,
        assetMarginTop: watchedLabelAssetMarginTop,
        assetMarginRight: watchedLabelAssetMarginRight,
        assetMarginBottom: watchedLabelAssetMarginBottom,
        assetMarginLeft: watchedLabelAssetMarginLeft,
        containerMarginTop: watchedLabelContainerMarginTop,
        containerMarginRight: watchedLabelContainerMarginRight,
        containerMarginBottom: watchedLabelContainerMarginBottom,
        containerMarginLeft: watchedLabelContainerMarginLeft,

        fontSizeiOS: watchedLabelFontSizeiOS,
        fontFamilyiOS: watchedLabelFontFamilyiOS,
        lineHeightiOS: watchedLabelLineHeightiOS,
        letterSpacingiOS: watchedLabelLetterSpacingiOS,

        fontSizeAndroid: watchedLabelFontSizeAndroid,
        fontFamilyAndroid: watchedLabelFontFamilyAndroid,
        lineHeightAndroid: watchedLabelLineHeightAndroid,
        letterSpacingAndroid: watchedLabelLetterSpacingAndroid,
      },
    });

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

  it("generate progress-bar configuration - enabled and without bottom_of_cell", () => {
    const enable = true;
    const hideUnwatched = true;
    const totalBarColor = "total_bar_color";
    const totalBarCornerRadius = 1;
    const progressBarColor = "progress_bar_color";
    const progressBarCornerRadius = 2;
    const height = 3;
    const marginTop = 4;
    const marginRight = 5;
    const marginBottom = 6;
    const marginLeft = 7;

    const textLabels = ["text label 1"];

    // time remaining label
    const timeRemainingLabelEnable = true;
    const timeRemainingLabelPosition = "above_bar";
    const timeRemainingLabelAssetEnable = true;
    const timeRemainingLabelAsset = "time_remaining_label_asset";
    const timeRemainingLabelAssetWidth = 8;
    const timeRemainingLabelAssetHeight = 9;
    const timeRemainingLabelAssetMarginTop = 10;
    const timeRemainingLabelAssetMarginBottom = 11;
    const timeRemainingLabelAssetMarginRight = 12;
    const timeRemainingLabelAssetMarginLeft = 13;

    const timeRemainingLabelContainerMarginTop = 14;
    const timeRemainingLabelContainerMarginRight = 15;
    const timeRemainingLabelContainerMarginBottom = 16;
    const timeRemainingLabelContainerMarginLeft = 17;

    const timeRemainingLabelFontSizeiOS = 18;
    const timeRemainingLabelFontSizeAndroid = 19;

    const timeRemainingLabelFontFamilyiOS = "timeRemainingLabelFontFamilyiOS";

    const timeRemainingLabelFontFamilyAndroid =
      "timeRemainingLabelFontFamilyAndroid";

    const timeRemainingLabelLineHeightiOS = 20;
    const timeRemainingLabelLineHeightAndroid = 21;

    const timeRemainingLabelLetterSpacingiOS = 22;
    const timeRemainingLabelLetterSpacingAndroid = 23;

    // time remaining label

    // watched label
    const watchedLabelEnable = true;
    const watchedLabelPosition = "above_bar";
    const watchedLabelAssetEnable = true;
    const watchedLabelContinueAsset = "watched_label_continue_asset";
    const watchedLabelWatchedAsset = "watched_label_watched_asset";
    const watchedLabelAssetWidth = 24;
    const watchedLabelAssetHeight = 25;
    const watchedLabelAssetMarginTop = 26;
    const watchedLabelAssetMarginBottom = 26;
    const watchedLabelAssetMarginRight = 27;
    const watchedLabelAssetMarginLeft = 28;

    const watchedLabelContainerMarginTop = 29;
    const watchedLabelContainerMarginRight = 30;
    const watchedLabelContainerMarginBottom = 31;
    const watchedLabelContainerMarginLeft = 32;

    const watchedLabelFontSizeiOS = 33;
    const watchedLabelFontSizeAndroid = 34;

    const watchedLabelFontFamilyiOS = "watchedLabelFontFamilyiOS";
    const watchedLabelFontFamilyAndroid = "watchedLabelFontFamilyAndroid";

    const watchedLabelLineHeightiOS = 35;
    const watchedLabelLineHeightAndroid = 36;

    const watchedLabelLetterSpacingiOS = 37;
    const watchedLabelLetterSpacingAndroid = 38;

    // watched label

    const output = {
      group: true,
      label: "Progress Bar",
      tooltip: "",
      folded: false,
      fields: [
        {
          initial_value: enable,
          key: "progress_bar_switch",
          label: "Enable",
          type: "switch",
        },
        {
          initial_value: hideUnwatched,
          key: "progress_bar_hide_unwatched",
          label: "Hide Unwatched",
          type: "switch",
          ...basicConditions(),
        },
        {
          type: "color_picker_rgba",
          label: "Total Bar Color",
          key: "progress_bar_total_bar_color",
          initial_value: totalBarColor,
          ...basicConditions(),
        },
        {
          type: "number_input",
          label: "Total Bar Corner Radius",
          key: "progress_bar_total_bar_corner_radius",
          initial_value: totalBarCornerRadius,
          ...basicConditions(),
        },
        {
          type: "color_picker_rgba",
          label: "Progress Bar Color",
          key: "progress_bar_progress_bar_color",
          initial_value: progressBarColor,
          ...basicConditions(),
        },
        {
          type: "number_input",
          label: "Progress Bar Corner Radius",
          key: "progress_bar_progress_bar_corner_radius",
          initial_value: progressBarCornerRadius,
          ...basicConditions(),
        },
        {
          type: "number_input",
          label: "Height",
          key: "progress_bar_height",
          initial_value: height,
          ...basicConditions(),
        },
        {
          type: "number_input",
          label: "Margin Top",
          key: "progress_bar_margin_top",
          initial_value: marginTop,
          ...basicConditions(),
        },
        {
          type: "number_input",
          label: "Margin Right",
          key: "progress_bar_margin_right",
          initial_value: marginRight,
          ...basicConditions(),
        },
        {
          type: "number_input",
          label: "Margin Bottom",
          key: "progress_bar_margin_bottom",
          initial_value: marginBottom,
          ...basicConditions(),
        },
        {
          type: "number_input",
          label: "Margin Left",
          key: "progress_bar_margin_left",
          initial_value: marginLeft,
          ...basicConditions(),
        },
        {
          type: "select",
          key: "progress_bar_position",
          label: "Position",
          options: [
            {
              text: "On Top of Image",
              value: DEFAULT_POSITION,
            },
            {
              text: "Above Text Label 1",
              value: "above_text_label_1",
            },
            {
              text: "Below Text Label 1",
              value: "below_text_label_1",
            },
          ],
          initial_value: "above_text_label_1",
          ...basicConditions(),
        },
        // {
        //   type: "switch",
        //   label: "Time Remaining Label Enable",
        //   key: "progress_bar_time_remaining_label_enable",
        //   initial_value: timeRemainingLabelEnable,
        //   ...basicConditions(),
        // },
        // {
        //   type: "select",
        //   label: "Time Remaining Label Position",
        //   key: "progress_bar_time_remaining_label_position",
        //   options: [
        //     {
        //       text: "Above Bar",
        //       value: "above_bar",
        //     },
        //     {
        //       text: "Below Bar",
        //       value: "below_bar",
        //     },
        //   ],
        //   initial_value: timeRemainingLabelPosition,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "switch",
        //   label: "Time Remaining Label Asset Enable",
        //   key: "progress_bar_time_remaining_label_asset_enable",
        //   initial_value: timeRemainingLabelAssetEnable,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "uploader",
        //   label: "Time Remaining Label Asset",
        //   key: "progress_bar_time_remaining_label_asset",
        //   initial_value: timeRemainingLabelAsset,
        //   ...timeRemainingLabelConditions({
        //     key: "assets/progress_bar_time_remaining_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Asset Width",
        //   key: "progress_bar_time_remaining_label_asset_width",
        //   initial_value: timeRemainingLabelAssetWidth,
        //   ...timeRemainingLabelConditions({
        //     key: "assets/progress_bar_time_remaining_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Asset Height",
        //   key: "progress_bar_time_remaining_label_asset_height",
        //   initial_value: timeRemainingLabelAssetHeight,
        //   ...timeRemainingLabelConditions({
        //     key: "assets/progress_bar_time_remaining_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Asset Margin Top",
        //   key: "progress_bar_time_remaining_label_asset_margin_top",
        //   initial_value: timeRemainingLabelAssetMarginTop,
        //   ...timeRemainingLabelConditions({
        //     key: "assets/progress_bar_time_remaining_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Asset Margin Right",
        //   key: "progress_bar_time_remaining_label_asset_margin_right",
        //   initial_value: timeRemainingLabelAssetMarginRight,
        //   ...timeRemainingLabelConditions({
        //     key: "assets/progress_bar_time_remaining_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Asset Margin Bottom",
        //   key: "progress_bar_time_remaining_label_asset_margin_bottom",
        //   initial_value: timeRemainingLabelAssetMarginBottom,
        //   ...timeRemainingLabelConditions({
        //     key: "assets/progress_bar_time_remaining_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Asset Margin Left",
        //   key: "progress_bar_time_remaining_label_asset_margin_left",
        //   initial_value: timeRemainingLabelAssetMarginLeft,
        //   ...timeRemainingLabelConditions({
        //     key: "assets/progress_bar_time_remaining_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Container Margin Top",
        //   key: "progress_bar_time_remaining_label_container_margin_top",
        //   initial_value: timeRemainingLabelContainerMarginTop,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Container Margin Right",
        //   key: "progress_bar_time_remaining_label_container_margin_right",
        //   initial_value: timeRemainingLabelContainerMarginRight,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Container Margin Bottom",
        //   key: "progress_bar_time_remaining_label_container_margin_bottom",
        //   initial_value: timeRemainingLabelContainerMarginBottom,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Time Remaining Label Container Margin Left",
        //   key: "progress_bar_time_remaining_label_container_margin_left",
        //   initial_value: timeRemainingLabelContainerMarginLeft,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "switch",
        //   label: "Watched Label Enable",
        //   key: "progress_bar_watched_label_enable",
        //   initial_value: watchedLabelEnable,
        //   ...basicConditions(),
        // },
        // {
        //   type: "select",
        //   label: "Watched Label Position",
        //   key: "progress_bar_watched_label_position",
        //   options: [
        //     {
        //       text: "Above Bar",
        //       value: "above_bar",
        //     },
        //     {
        //       text: "Below Bar",
        //       value: "below_bar",
        //     },
        //   ],
        //   initial_value: watchedLabelPosition,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "switch",
        //   label: "Watched Label Asset Enable",
        //   key: "progress_bar_watched_label_asset_enable",
        //   initial_value: watchedLabelAssetEnable,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "uploader",
        //   label: "Watched Label Continue Asset",
        //   key: "progress_bar_watched_label_continue_asset",
        //   initial_value: watchedLabelContinueAsset,
        //   ...watchedLabelConditions({
        //     key: "assets/progress_bar_watched_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "uploader",
        //   label: "Watched Label Watched Asset",
        //   key: "progress_bar_watched_label_watched_asset",
        //   initial_value: watchedLabelWatchedAsset,
        //   ...watchedLabelConditions({
        //     key: "assets/progress_bar_watched_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Asset Width",
        //   key: "progress_bar_watched_label_asset_width",
        //   initial_value: watchedLabelAssetWidth,
        //   ...watchedLabelConditions({
        //     key: "assets/progress_bar_watched_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Asset Height",
        //   key: "progress_bar_watched_label_asset_height",
        //   initial_value: watchedLabelAssetHeight,
        //   ...watchedLabelConditions({
        //     key: "assets/progress_bar_watched_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Asset Margin Top",
        //   key: "progress_bar_watched_label_asset_margin_top",
        //   initial_value: watchedLabelAssetMarginTop,
        //   ...watchedLabelConditions({
        //     key: "assets/progress_bar_watched_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Asset Margin Right",
        //   key: "progress_bar_watched_label_asset_margin_right",
        //   initial_value: watchedLabelAssetMarginRight,
        //   ...watchedLabelConditions({
        //     key: "assets/progress_bar_watched_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Asset Margin Bottom",
        //   key: "progress_bar_watched_label_asset_margin_bottom",
        //   initial_value: watchedLabelAssetMarginBottom,
        //   ...watchedLabelConditions({
        //     key: "assets/progress_bar_watched_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Asset Margin Left",
        //   key: "progress_bar_watched_label_asset_margin_left",
        //   initial_value: watchedLabelAssetMarginLeft,
        //   ...watchedLabelConditions({
        //     key: "assets/progress_bar_watched_label_asset_enable",
        //     condition_value: true,
        //   }),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Container Margin Top",
        //   key: "progress_bar_watched_label_container_margin_top",
        //   initial_value: watchedLabelContainerMarginTop,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Container Margin Right",
        //   key: "progress_bar_watched_label_container_margin_right",
        //   initial_value: watchedLabelContainerMarginRight,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Container Margin Bottom",
        //   key: "progress_bar_watched_label_container_margin_bottom",
        //   initial_value: watchedLabelContainerMarginBottom,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Watched Label Container Margin Left",
        //   key: "progress_bar_watched_label_container_margin_left",
        //   initial_value: watchedLabelContainerMarginLeft,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "iOS Time Remaining Label Font Size",
        //   key: "progress_bar_time_remaining_label_ios_font_size",
        //   initial_value: timeRemainingLabelFontSizeiOS,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Android Time Remaining Label Font Size",
        //   key: "progress_bar_time_remaining_label_android_font_size",
        //   initial_value: timeRemainingLabelFontSizeAndroid,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "ios_font_selector",
        //   label: "iOS Time Remaining Label Font Family",
        //   key: "progress_bar_time_remaining_label_ios_font_family",
        //   initial_value: timeRemainingLabelFontFamilyiOS,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "android_font_selector",
        //   label: "Android Time Remaining Label Font Family",
        //   key: "progress_bar_time_remaining_label_android_font_family",
        //   initial_value: timeRemainingLabelFontFamilyAndroid,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "iOS Time Remaining Label Line Height",
        //   key: "progress_bar_time_remaining_label_ios_line_height",
        //   initial_value: timeRemainingLabelLineHeightiOS,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Android Time Remaining Label Line Height",
        //   key: "progress_bar_time_remaining_label_android_line_height",
        //   initial_value: timeRemainingLabelLineHeightAndroid,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "iOS Time Remaining Label Letter Spacing",
        //   key: "progress_bar_time_remaining_label_ios_letter_spacing",
        //   initial_value: timeRemainingLabelLetterSpacingiOS,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Android Time Remaining Label Letter Spacing",
        //   key: "progress_bar_time_remaining_label_android_letter_spacing",
        //   initial_value: timeRemainingLabelLetterSpacingAndroid,
        //   ...timeRemainingLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "iOS Watched Label Font Size",
        //   key: "progress_bar_watched_label_ios_font_size",
        //   initial_value: watchedLabelFontSizeiOS,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Android Watched Label Font Size",
        //   key: "progress_bar_watched_label_android_font_size",
        //   initial_value: watchedLabelFontSizeAndroid,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "ios_font_selector",
        //   label: "iOS Watched Label Font Family",
        //   key: "progress_bar_watched_label_ios_font_family",
        //   initial_value: watchedLabelFontFamilyiOS,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "android_font_selector",
        //   label: "Android Watched Label Font Family",
        //   key: "progress_bar_watched_label_android_font_family",
        //   initial_value: watchedLabelFontFamilyAndroid,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "iOS Watched Label Line Height",
        //   key: "progress_bar_watched_label_ios_line_height",
        //   initial_value: watchedLabelLineHeightiOS,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Android Watched Label Line Height",
        //   key: "progress_bar_watched_label_android_line_height",
        //   initial_value: watchedLabelLineHeightAndroid,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "iOS Watched Label Letter Spacing",
        //   key: "progress_bar_watched_label_ios_letter_spacing",
        //   initial_value: watchedLabelLetterSpacingiOS,
        //   ...watchedLabelConditions(),
        // },
        // {
        //   type: "number_input",
        //   label: "Android Watched Label Letter Spacing",
        //   key: "progress_bar_watched_label_android_letter_spacing",
        //   initial_value: watchedLabelLetterSpacingAndroid,
        //   ...watchedLabelConditions(),
        // },
      ],
    };

    const result = mobileProgressBar({
      enable,
      hideUnwatched,
      totalBarColor,
      totalBarCornerRadius,
      progressBarColor,
      progressBarCornerRadius,
      height,
      marginTop,
      marginRight,
      marginBottom,
      marginLeft,
      position: {
        default: "above_text_label_1",
        useBottomOfCell: false,
        textLabels,
      },
      timeRemainingLabel: {
        enable: timeRemainingLabelEnable,
        position: timeRemainingLabelPosition,
        assetEnable: timeRemainingLabelAssetEnable,
        asset: timeRemainingLabelAsset,
        assetWidth: timeRemainingLabelAssetWidth,
        assetHeight: timeRemainingLabelAssetHeight,
        assetMarginTop: timeRemainingLabelAssetMarginTop,
        assetMarginRight: timeRemainingLabelAssetMarginRight,
        assetMarginBottom: timeRemainingLabelAssetMarginBottom,
        assetMarginLeft: timeRemainingLabelAssetMarginLeft,
        containerMarginTop: timeRemainingLabelContainerMarginTop,
        containerMarginRight: timeRemainingLabelContainerMarginRight,
        containerMarginBottom: timeRemainingLabelContainerMarginBottom,
        containerMarginLeft: timeRemainingLabelContainerMarginLeft,

        fontSizeiOS: timeRemainingLabelFontSizeiOS,
        fontFamilyiOS: timeRemainingLabelFontFamilyiOS,
        lineHeightiOS: timeRemainingLabelLineHeightiOS,
        letterSpacingiOS: timeRemainingLabelLetterSpacingiOS,

        fontSizeAndroid: timeRemainingLabelFontSizeAndroid,
        fontFamilyAndroid: timeRemainingLabelFontFamilyAndroid,
        lineHeightAndroid: timeRemainingLabelLineHeightAndroid,
        letterSpacingAndroid: timeRemainingLabelLetterSpacingAndroid,
      },
      watchedLabel: {
        enable: watchedLabelEnable,
        position: watchedLabelPosition,
        assetEnable: watchedLabelAssetEnable,
        continueAsset: watchedLabelContinueAsset,
        watchedAsset: watchedLabelWatchedAsset,
        assetWidth: watchedLabelAssetWidth,
        assetHeight: watchedLabelAssetHeight,
        assetMarginTop: watchedLabelAssetMarginTop,
        assetMarginRight: watchedLabelAssetMarginRight,
        assetMarginBottom: watchedLabelAssetMarginBottom,
        assetMarginLeft: watchedLabelAssetMarginLeft,
        containerMarginTop: watchedLabelContainerMarginTop,
        containerMarginRight: watchedLabelContainerMarginRight,
        containerMarginBottom: watchedLabelContainerMarginBottom,
        containerMarginLeft: watchedLabelContainerMarginLeft,

        fontSizeiOS: watchedLabelFontSizeiOS,
        fontFamilyiOS: watchedLabelFontFamilyiOS,
        lineHeightiOS: watchedLabelLineHeightiOS,
        letterSpacingiOS: watchedLabelLetterSpacingiOS,

        fontSizeAndroid: watchedLabelFontSizeAndroid,
        fontFamilyAndroid: watchedLabelFontFamilyAndroid,
        lineHeightAndroid: watchedLabelLineHeightAndroid,
        letterSpacingAndroid: watchedLabelLetterSpacingAndroid,
      },
    });

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