@applicaster/zapp-react-native-utils
Version:
Applicaster Zapp React Native utilities package
1,302 lines (1,269 loc) • 35.1 kB
JavaScript
import { tvCellLabel } from "..";
describe("tvCellLabel", () => {
it("generate tv cell label without selected states", () => {
const groupFolded = true;
const description = "description";
const output = {
group: true,
label: "Text label 1",
tooltip: description,
folded: groupFolded,
fields: [
{
type: "switch",
label: "Enable",
key: "text_label_1_switch",
initial_value: true,
tooltip: "",
},
{
type: "select",
key: "text_label_1_data_key",
label: "Data Key",
label_tooltip:
"What data key from feed entry should be rendered in this field.",
tooltip:
"What data key from feed entry should be rendered in this field.",
rules: "conditional",
options: [
{
text: "summary",
value: "summary",
},
{
text: "title",
value: "title",
},
{
text: "published",
value: "published",
},
{
text: "updated",
value: "updated",
},
{
text: "author.name",
value: "author.name",
},
{
text: "extensions.section",
value: "extensions.section",
},
{
text: "other",
value: "other",
},
],
initial_value: "data-key",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
},
{
type: "text_input",
label: "Custom Data Key",
initial_value: "",
key: "text_label_1_custom_data_key",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/text_label_1_data_key",
condition_value: "other",
},
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
},
{
type: "color_picker_rgba",
label: "Font Color",
key: "text_label_1_font_color",
initial_value: "font-color",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "color_picker_rgba",
label: "Font Color Focused",
key: "text_label_1_font_color_focused",
initial_value: "font-color-focused",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "android_font_selector",
label: "Android Font Family",
key: "text_label_1_android_font_family",
initial_value: "android-font-family",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Android Font Size",
key: "text_label_1_android_font_size",
initial_value: 1,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Android Letter Spacing",
key: "text_label_1_android_letter_spacing",
initial_value: 2,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Android Line Height",
key: "text_label_1_android_line_height",
initial_value: 3,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "tvos_font_selector",
label: "tvOS Font Family",
key: "text_label_1_tvos_font_family",
initial_value: "tvos-font-family",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "tvOS Font Size",
key: "text_label_1_tvos_font_size",
initial_value: 4,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "tvOS Letter Spacing",
key: "text_label_1_tvos_letter_spacing",
initial_value: 5,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "tvOS Line Height",
key: "text_label_1_tvos_line_height",
initial_value: 6,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "samsung_font_selector",
label: "Samsung Font Family",
key: "text_label_1_samsung_font_family",
initial_value: "samsung-font-family",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Samsung Font Size",
key: "text_label_1_samsung_font_size",
initial_value: 7,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Samsung Letter Spacing",
key: "text_label_1_samsung_letter_spacing",
initial_value: 8,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Samsung Line Height",
key: "text_label_1_samsung_line_height",
initial_value: 9,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "lg_tv_font_selector",
label: "Lg Font Family",
key: "text_label_1_lg_font_family",
initial_value: "lg-font-family",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Lg Font Size",
key: "text_label_1_lg_font_size",
initial_value: 10,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Lg Letter Spacing",
key: "text_label_1_lg_letter_spacing",
initial_value: 11,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Lg Line Height",
key: "text_label_1_lg_line_height",
initial_value: 12,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "select",
label: "Text Alignment",
key: "text_label_1_text_alignment",
options: [
{
text: "Left",
value: "left",
},
{
text: "Right",
value: "right",
},
{
text: "Center",
value: "center",
},
],
rules: "conditional",
initial_value: "text-alignment",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
},
{
type: "select",
label: "Text Transform",
key: "text_label_1_text_transform",
options: [
{
text: "Default",
value: "default",
},
{
text: "Uppercase",
value: "uppercase",
},
{
text: "Lowercase",
value: "lowercase",
},
{
text: "Capitalize",
value: "capitalize",
},
],
rules: "conditional",
initial_value: "text-transform",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
},
{
type: "number_input",
label: "Number Of Lines",
key: "text_label_1_number_of_lines",
initial_value: 13,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Margin Top",
key: "text_label_1_margin_top",
initial_value: 14,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Margin Right",
key: "text_label_1_margin_right",
initial_value: 15,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Margin Bottom",
key: "text_label_1_margin_bottom",
initial_value: 16,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Margin Left",
key: "text_label_1_margin_left",
initial_value: 17,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Padding Top",
key: "text_label_1_padding_top",
initial_value: 18,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Padding Right",
key: "text_label_1_padding_right",
initial_value: 19,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Padding Bottom",
key: "text_label_1_padding_bottom",
initial_value: 20,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Padding Left",
key: "text_label_1_padding_left",
initial_value: 21,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "color_picker_rgba",
label: "Background Color",
key: "text_label_1_background_color",
initial_value: "background-color",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "color_picker_rgba",
label: "Focused Background Color",
key: "text_label_1_focused_background_color",
initial_value: "focused-background-color",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Corner Radius",
key: "text_label_1_corner_radius",
initial_value: 22,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
],
};
const result = tvCellLabel({
label: "Text label 1",
description,
defaults: {
enable: true,
dataKey: "data-key",
fontColor: "font-color",
fontColorFocused: "font-color-focused",
androidFontFamily: "android-font-family",
androidFontSize: 1,
androidLetterSpacing: 2,
androidLineHeight: 3,
tvosFontFamily: "tvos-font-family",
tvosFontSize: 4,
tvosLetterSpacing: 5,
tvosLineHeight: 6,
samsungFontFamily: "samsung-font-family",
samsungFontSize: 7,
samsungLetterSpacing: 8,
samsungLineHeight: 9,
lgFontFamily: "lg-font-family",
lgFontSize: 10,
lgLetterSpacing: 11,
lgLineHeight: 12,
textAlignment: "text-alignment",
textTransform: "text-transform",
numberOfLines: 13,
marginTop: 14,
marginRight: 15,
marginBottom: 16,
marginLeft: 17,
paddingTop: 18,
paddingRight: 19,
paddingBottom: 20,
paddingLeft: 21,
backgroundColor: "background-color",
focusedBackgroundColor: "focused-background-color",
cornerRadius: 22,
},
groupFolded,
});
expect(result).toEqual(output);
});
it("generate tv cell label with selected states", () => {
const groupFolded = true;
const description = "description";
const output = {
group: true,
label: "Text label 1",
tooltip: description,
folded: groupFolded,
fields: [
{
type: "switch",
label: "Enable",
key: "text_label_1_switch",
initial_value: true,
tooltip: "",
},
{
type: "select",
key: "text_label_1_data_key",
label: "Data Key",
tooltip:
"What data key from feed entry should be rendered in this field.",
label_tooltip:
"What data key from feed entry should be rendered in this field.",
rules: "conditional",
options: [
{
text: "summary",
value: "summary",
},
{
text: "title",
value: "title",
},
{
text: "published",
value: "published",
},
{
text: "updated",
value: "updated",
},
{
text: "author.name",
value: "author.name",
},
{
text: "extensions.section",
value: "extensions.section",
},
{
text: "other",
value: "other",
},
],
initial_value: "data-key",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
},
{
type: "text_input",
label: "Custom Data Key",
initial_value: "",
key: "text_label_1_custom_data_key",
rules: "all_conditions",
conditional_fields: [
{
key: "styles/text_label_1_data_key",
condition_value: "other",
},
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
},
{
type: "color_picker_rgba",
label: "Font Color",
key: "text_label_1_font_color",
initial_value: "font-color",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "color_picker_rgba",
label: "Font Color Focused",
key: "text_label_1_font_color_focused",
initial_value: "font-color-focused",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "color_picker_rgba",
label: "Font Color Selected",
key: "text_label_1_font_color_selected",
initial_value: "font-color-selected",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "color_picker_rgba",
label: "Font Color Focused Selected",
key: "text_label_1_font_color_focused_selected",
initial_value: "font-color-focused-selected",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "android_font_selector",
label: "Android Font Family",
key: "text_label_1_android_font_family",
initial_value: "android-font-family",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Android Font Size",
key: "text_label_1_android_font_size",
initial_value: 1,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Android Letter Spacing",
key: "text_label_1_android_letter_spacing",
initial_value: 2,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Android Line Height",
key: "text_label_1_android_line_height",
initial_value: 3,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "tvos_font_selector",
label: "tvOS Font Family",
key: "text_label_1_tvos_font_family",
initial_value: "tvos-font-family",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "tvOS Font Size",
key: "text_label_1_tvos_font_size",
initial_value: 4,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "tvOS Letter Spacing",
key: "text_label_1_tvos_letter_spacing",
initial_value: 5,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "tvOS Line Height",
key: "text_label_1_tvos_line_height",
initial_value: 6,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "samsung_font_selector",
label: "Samsung Font Family",
key: "text_label_1_samsung_font_family",
initial_value: "samsung-font-family",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Samsung Font Size",
key: "text_label_1_samsung_font_size",
initial_value: 7,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Samsung Letter Spacing",
key: "text_label_1_samsung_letter_spacing",
initial_value: 8,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Samsung Line Height",
key: "text_label_1_samsung_line_height",
initial_value: 9,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "lg_tv_font_selector",
label: "Lg Font Family",
key: "text_label_1_lg_font_family",
initial_value: "lg-font-family",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Lg Font Size",
key: "text_label_1_lg_font_size",
initial_value: 10,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Lg Letter Spacing",
key: "text_label_1_lg_letter_spacing",
initial_value: 11,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Lg Line Height",
key: "text_label_1_lg_line_height",
initial_value: 12,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "select",
label: "Text Alignment",
key: "text_label_1_text_alignment",
options: [
{
text: "Left",
value: "left",
},
{
text: "Right",
value: "right",
},
{
text: "Center",
value: "center",
},
],
rules: "conditional",
initial_value: "text-alignment",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
},
{
type: "select",
label: "Text Transform",
key: "text_label_1_text_transform",
options: [
{
text: "Default",
value: "default",
},
{
text: "Uppercase",
value: "uppercase",
},
{
text: "Lowercase",
value: "lowercase",
},
{
text: "Capitalize",
value: "capitalize",
},
],
rules: "conditional",
initial_value: "text-transform",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
},
{
type: "number_input",
label: "Number Of Lines",
key: "text_label_1_number_of_lines",
initial_value: 13,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Margin Top",
key: "text_label_1_margin_top",
initial_value: 14,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Margin Right",
key: "text_label_1_margin_right",
initial_value: 15,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Margin Bottom",
key: "text_label_1_margin_bottom",
initial_value: 16,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Margin Left",
key: "text_label_1_margin_left",
initial_value: 17,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Padding Top",
key: "text_label_1_padding_top",
initial_value: 18,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Padding Right",
key: "text_label_1_padding_right",
initial_value: 19,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Padding Bottom",
key: "text_label_1_padding_bottom",
initial_value: 20,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Padding Left",
key: "text_label_1_padding_left",
initial_value: 21,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "color_picker_rgba",
label: "Background Color",
key: "text_label_1_background_color",
initial_value: "background-color",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "color_picker_rgba",
label: "Focused Background Color",
key: "text_label_1_focused_background_color",
initial_value: "focused-background-color",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "color_picker_rgba",
label: "Selected Background Color",
key: "text_label_1_selected_background_color",
initial_value: "selected-background-color",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "color_picker_rgba",
label: "Focused Selected Background Color",
key: "text_label_1_focused_selected_background_color",
initial_value: "focused-selected-background-color",
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
{
type: "number_input",
label: "Corner Radius",
key: "text_label_1_corner_radius",
initial_value: 22,
tooltip: "",
conditional_fields: [
{
key: "styles/text_label_1_switch",
condition_value: true,
},
],
rules: "conditional",
},
],
};
const result = tvCellLabel({
label: "Text label 1",
description,
defaults: {
enable: true,
dataKey: "data-key",
fontColor: "font-color",
fontColorFocused: "font-color-focused",
fontColorSelected: "font-color-selected",
fontColorFocusedSelected: "font-color-focused-selected",
androidFontFamily: "android-font-family",
androidFontSize: 1,
androidLetterSpacing: 2,
androidLineHeight: 3,
tvosFontFamily: "tvos-font-family",
tvosFontSize: 4,
tvosLetterSpacing: 5,
tvosLineHeight: 6,
samsungFontFamily: "samsung-font-family",
samsungFontSize: 7,
samsungLetterSpacing: 8,
samsungLineHeight: 9,
lgFontFamily: "lg-font-family",
lgFontSize: 10,
lgLetterSpacing: 11,
lgLineHeight: 12,
textAlignment: "text-alignment",
textTransform: "text-transform",
numberOfLines: 13,
marginTop: 14,
marginRight: 15,
marginBottom: 16,
marginLeft: 17,
paddingTop: 18,
paddingRight: 19,
paddingBottom: 20,
paddingLeft: 21,
backgroundColor: "background-color",
focusedBackgroundColor: "focused-background-color",
selectedBackgroundColor: "selected-background-color",
focusedSelectedBackgroundColor: "focused-selected-background-color",
cornerRadius: 22,
},
groupFolded,
});
expect(result).toEqual(output);
});
});