@applicaster/zapp-react-native-utils/manifestUtils/tvAction/button/__tests__/tvActionButton.test.js

Applicaster Zapp React Native utilities package

const R = require("ramda");

import {
  tvActionButton,
  appendConditionalFieldForAssetEnabled,
  appendConditionalToFirst,
  appendConditionalToRest,
} from "..";

import { tvActionButtonLabel } from "../../label";

const { toSnakeCase } = require("../../../_internals");

const label1 = {
  enable: true,
  fontColor: "rgba(239, 239, 239, 1)",
  focusedFontColor: "rgba(17, 17, 17, 1)",
  tvosFontFamily: "SFProText-Semibold",
  tvosFontSize: 24,
  tvosLineHeight: 40,
  tvosLetterSpacing: -0.2,
  androidFontFamily: "Roboto-Medium",
  androidFontSize: 24,
  androidLineHeight: 40,
  androidLetterSpacing: 0,
  lgFontFamily: "Miso-Bold",
  lgFontSize: 24,
  lgLineHeight: 40,
  lgLetterSpacing: 0,
  samsungFontFamily: "SamsungOne-700",
  samsungFontSize: 24,
  samsungLineHeight: 40,
  samsungLetterSpacing: 0,
  textAlignment: "left",
  textTransform: "default",
  numberOfLines: 1,
  marginTop: 0,
  marginRight: 0,
  marginBottom: 8,
  marginLeft: 0,
};

const label2 = {
  enable: true,
  fontColor: "rgba(239, 239, 239, 1)",
  focusedFontColor: "rgba(17, 17, 17, 1)",
  tvosFontFamily: "SFProText-Semibold",
  tvosFontSize: 24,
  tvosLineHeight: 40,
  tvosLetterSpacing: -0.2,
  androidFontFamily: "Roboto-Medium",
  androidFontSize: 24,
  androidLineHeight: 40,
  androidLetterSpacing: 0,
  lgFontFamily: "Miso-Bold",
  lgFontSize: 24,
  lgLineHeight: 40,
  lgLetterSpacing: 0,
  samsungFontFamily: "SamsungOne-700",
  samsungFontSize: 24,
  samsungLineHeight: 40,
  samsungLetterSpacing: 0,
  textAlignment: "left",
  textTransform: "default",
  numberOfLines: 1,
  marginTop: 0,
  marginRight: 0,
  marginBottom: 8,
  marginLeft: 0,
};

describe("tvActionButton", () => {
  it("generate tv action button config", () => {
    const label = "label";

    const buttonFields = R.compose(
      appendConditionalFieldForAssetEnabled(label),
      appendConditionalToFirst(
        `styles/${toSnakeCase("tv_buttons_container")}_buttons_enabled`
      ),
      appendConditionalToRest(`styles/${toSnakeCase(label)}_button_enabled`)
    )([
      {
        initial_value: true,
        key: "label_button_enabled",
        label: "Button enabled",
        type: "switch",
      },
      {
        initial_value: "info",
        key: "label_assign_action",
        label: "Assign action",
        options: [
          {
            text: "play",
            value: "navigation_action",
          },
          {
            text: "favorite",
            value: "local_storage_favourites_action",
          },
          {
            text: "trailer",
            value: "trailer_action",
          },
        ],
        type: "select",
      },
      {
        initial_value: "fixed",
        key: "label_display_mode",
        label: "Display mode",
        options: ["dynamic", "fixed", "fixed_center"],
        type: "select",
      },
      {
        initial_value: 6,
        key: "label_fixed_and_fixed_center_width",
        label: "Fixed and fixed_center width",
        type: "number_input",
      },
      {
        initial_value: "rgba(1,1,1,1)",
        key: "label_background_color",
        label: "Background color",
        type: "color_picker_rgba",
      },
      {
        initial_value: "rgba(2,2,2,2)",
        key: "label_focused_background_color",
        label: "Focused background color",
        type: "color_picker_rgba",
      },
      {
        initial_value: "rgba(3,3,3,3)",
        key: "label_background_border_color",
        label: "Background border color",
        type: "color_picker_rgba",
      },
      {
        initial_value: "rgba(4,4,4,4)",
        key: "label_focused_background_border_color",
        label: "Focused background border color",
        type: "color_picker_rgba",
      },
      {
        initial_value: 7,
        key: "label_background_corner_radius",
        label: "Background corner radius",
        type: "number_input",
      },
      {
        initial_value: 8,
        key: "label_background_padding_top",
        label: "Background padding top",
        type: "number_input",
      },
      {
        initial_value: 9,
        key: "label_background_padding_right",
        label: "Background padding right",
        type: "number_input",
      },
      {
        initial_value: 10,
        key: "label_background_padding_bottom",
        label: "Background padding bottom",
        type: "number_input",
      },
      {
        initial_value: 11,
        key: "label_background_padding_left",
        label: "Background padding left",
        type: "number_input",
      },
      {
        initial_value: true,
        key: "label_asset_enabled",
        label: "Asset enabled",
        type: "switch",
      },
      {
        initial_value: "right",
        key: "label_asset_alignment",
        label: "Asset alignment",
        options: ["left", "right"],
        type: "select",
      },
      {
        initial_value: 12,
        key: "label_asset_margin_top",
        label: "Asset margin top",
        type: "number_input",
      },
      {
        initial_value: 13,
        key: "label_asset_margin_right",
        label: "Asset margin right",
        type: "number_input",
      },
      {
        initial_value: 14,
        key: "label_asset_margin_bottom",
        label: "Asset margin bottom",
        type: "number_input",
      },
      {
        initial_value: 15,
        key: "label_asset_margin_left",
        label: "Asset margin left",
        type: "number_input",
      },
    ]);

    const label_1 = `${label} Label 1`;
    const label_2 = `${label} Label 2`;

    const label1Configs = tvActionButtonLabel(label_1, label1);

    const label1Fields = R.compose(
      appendConditionalToFirst(`styles/${label}_button_enabled`),
      appendConditionalToRest(`styles/${toSnakeCase(label_1)}_toggle`)
    )(label1Configs);

    const label2Configs = tvActionButtonLabel(label_2, label2);

    const label2Fields = R.compose(
      appendConditionalToFirst(`styles/${label}_button_enabled`),
      appendConditionalToRest(`styles/${toSnakeCase(label_2)}_toggle`)
    )(label2Configs);

    const output = {
      fields: [...buttonFields, ...label1Fields, ...label2Fields],
      folded: true,
      group: true,
      label,
      tooltip: "description",
    };

    const result = tvActionButton({
      isFirstButton: true,
      label,
      description: "description",
      defaults: {
        buttonEnabled: true,
        assignAction: "info",
        displayMode: "fixed",
        fixedAndFixedCenterWidth: 6,
        backgroundColor: "rgba(1,1,1,1)",
        focusedBackgroundColor: "rgba(2,2,2,2)",
        backgroundBorderColor: "rgba(3,3,3,3)",
        focusedBackgroundBorderColor: "rgba(4,4,4,4)",
        backgroundCornerRadius: 7,
        backgroundPaddingTop: 8,
        backgroundPaddingRight: 9,
        backgroundPaddingBottom: 10,
        backgroundPaddingLeft: 11,
        assetEnabled: true,
        assetAlignment: "right",
        assetMarginTop: 12,
        assetMarginRight: 13,
        assetMarginBottom: 14,
        assetMarginLeft: 15,
      },
      label1Defaults: label1,
      label2Defaults: label2,
    });

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