@applicaster/zapp-react-native-ui-components 16.0.0-rc.12 → 16.0.0-rc.120

package/Components/ModalComponent/AudioPlayer/utils/__tests__/mergeStyles.test.ts

@@ -0,0 +1,433 @@
+import {
+  mergeItemConfiguration,
+  mergeButtonConfiguration,
+  mergeHeaderConfiguration,
+} from "../mergeStyles";
+import {
+  VARIANT_SECTION_HEADER,
+  VARIANT_SINGLE_LINE_HEADER,
+} from "../../Components/Header";
+
+const base = {
+  background: {
+    defaultColor: "transparent",
+    focusedColor: "rgba(62, 62, 62, 1)",
+    cornerRadius: 12,
+  },
+  image: {
+    width: 48,
+    height: 48,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+    cornerRadius: 6,
+  },
+  nowPlayingAsset: {},
+  nowPlayingLabel: { fontColor: "#fff", fontSize: 12 },
+  textLabel1: { fontColor: "#fff", fontSize: 15 },
+  textLabel2: { fontColor: "#999", fontSize: 13 },
+};
+
+describe("mergeItemConfiguration background", () => {
+  it("applies Studio focus background to focusedColor", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      background: {
+        default: { backgroundColor: "transparent" },
+        focused: { backgroundColor: "#FF3B30" },
+      },
+    });
+
+    expect(merged.background.defaultColor).toBe("transparent");
+    expect(merged.background.focusedColor).toBe("#FF3B30");
+  });
+
+  it("accepts focus alias bucket from parser output", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      background: {
+        default: { backgroundColor: "transparent" },
+        focus: { backgroundColor: "#00FF66" },
+      },
+    });
+
+    expect(merged.background.focusedColor).toBe("#00FF66");
+  });
+
+  it("merges text label lineHeight from Studio keys", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      textLabel1: {
+        default: { fontSize: 28, lineHeight: 40 },
+      },
+    });
+
+    expect(merged.textLabel1.fontSize).toBe(28);
+    expect(merged.textLabel1.lineHeight).toBe(40);
+  });
+
+  it("does not merge Studio item background padding (white spec field)", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      background: {
+        default: {
+          backgroundColor: "#2E7D32",
+          paddingTop: 32,
+          paddingBottom: 32,
+          paddingLeft: 40,
+          paddingRight: 40,
+        },
+      },
+    });
+
+    expect(merged.background.defaultColor).toBe("#2E7D32");
+    expect(merged.background.paddingTop).toBeUndefined();
+    expect(merged.background.paddingBottom).toBeUndefined();
+    expect(merged.background.paddingLeft).toBeUndefined();
+    expect(merged.background.paddingRight).toBeUndefined();
+    expect(merged.background.focusedColor).toBe("rgba(62, 62, 62, 1)");
+  });
+
+  it("preserves base focusedColor when only default background is set", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      background: {
+        default: { backgroundColor: "#2E7D32" },
+      },
+    });
+
+    expect(merged.background.defaultColor).toBe("#2E7D32");
+    expect(merged.background.focusedColor).toBe("rgba(62, 62, 62, 1)");
+  });
+
+  it("applies Studio checkbox assets onto checkboxAssets", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      checkbox: {
+        default: {
+          asset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
+          checkedAsset: "https://placehold.co/24x24/FFD60A/000000/png?text=CK",
+        },
+      },
+    });
+
+    expect(merged.checkboxAssets?.asset).toBe(
+      "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB"
+    );
+
+    expect(merged.checkboxAssets?.checkedAsset).toBe(
+      "https://placehold.co/24x24/FFD60A/000000/png?text=CK"
+    );
+  });
+
+  it("applies Studio reorder/remove assets onto actionButtonAssets", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      actionButtons: {
+        default: {
+          removeAsset: "https://placehold.co/24x24/00FF00/000000/png?text=RM",
+          dragAsset: "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+        },
+      },
+    });
+
+    expect(merged.actionButtonAssets?.removeAsset).toBe(
+      "https://placehold.co/24x24/00FF00/000000/png?text=RM"
+    );
+
+    expect(merged.actionButtonAssets?.dragAsset).toBe(
+      "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH"
+    );
+  });
+
+  it("applies a text label font family and ignores a non-string font family", () => {
+    const withFont = mergeItemConfiguration(base as any, {
+      textLabel1: { default: { fontFamily: "Roboto-Bold" } },
+    });
+
+    expect(withFont.textLabel1.iosFontFamily).toBe("Roboto-Bold");
+    expect(withFont.textLabel1.androidFontFamily).toBe("Roboto-Bold");
+
+    const withEmpty = mergeItemConfiguration(base as any, {
+      textLabel1: {
+        default: { fontFamily: {}, iosFontFamily: "SFProText-Semibold" },
+      },
+    });
+
+    expect(withEmpty.textLabel1.iosFontFamily).toBe("SFProText-Semibold");
+    expect(withEmpty.textLabel1.androidFontFamily).toBeUndefined();
+  });
+
+  it("applies play and pause assets onto actionButtonAssets", () => {
+    const merged = mergeItemConfiguration(base as any, {
+      actionButtons: {
+        default: {
+          playAsset: "https://example.com/play.png",
+          pauseAsset: "https://example.com/pause.png",
+        },
+      },
+    });
+
+    expect(merged.actionButtonAssets?.playAsset).toBe(
+      "https://example.com/play.png"
+    );
+
+    expect(merged.actionButtonAssets?.pauseAsset).toBe(
+      "https://example.com/pause.png"
+    );
+  });
+});
+
+describe("mergeButtonConfiguration background", () => {
+  const buttonBase = {
+    background: {
+      defaultColor: "#FFFFFF",
+      focusedColor: "#E0E0E0",
+      inactiveColor: "#CCCCCC",
+      cornerRadius: 12,
+      paddingTop: 12,
+      paddingRight: 12,
+      paddingBottom: 12,
+      paddingLeft: 12,
+      horizontalGutter: 8,
+    },
+    title: {
+      fontColor: "#000000",
+      focusedFontColor: "#000000",
+      inactiveFontColor: "#666666",
+      iosFontFamily: "SFProText-Semibold",
+      androidFontFamily: "Roboto-Medium",
+      fontSize: 15,
+      lineHeight: 24,
+      iosLetterSpacing: 0,
+      androidLetterSpacing: 0,
+      textTransform: "default" as const,
+    },
+    icons: {
+      width: 24,
+      height: 24,
+      leadingIcon: { enabled: true },
+    },
+  };
+
+  it("applies Studio button focus background to focusedColor", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      background: {
+        default: { backgroundColor: "#FFFFFF" },
+        focused: { backgroundColor: "#00FF00" },
+      },
+    });
+
+    expect(merged.background.defaultColor).toBe("#FFFFFF");
+    expect(merged.background.focusedColor).toBe("#00FF00");
+  });
+
+  it("applies Studio button title lineHeight", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      title: {
+        default: { fontColor: "#000000", fontSize: 15, lineHeight: 40 },
+      },
+    });
+
+    expect(merged.title.lineHeight).toBe(40);
+    expect(merged.title.fontSize).toBe(15);
+  });
+
+  it("applies Studio button background padding", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      background: {
+        default: {
+          backgroundColor: "#FFFFFF",
+          paddingTop: 32,
+          paddingRight: 20,
+          paddingBottom: 8,
+          paddingLeft: 4,
+        },
+      },
+    });
+
+    expect(merged.background.paddingTop).toBe(32);
+    expect(merged.background.paddingRight).toBe(20);
+    expect(merged.background.paddingBottom).toBe(8);
+    expect(merged.background.paddingLeft).toBe(4);
+    expect(merged.background.focusedColor).toBe("#E0E0E0");
+  });
+
+  it("preserves base button focusedColor when only default background is set", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      background: {
+        default: { backgroundColor: "#ABCDEF" },
+      },
+    });
+
+    expect(merged.background.defaultColor).toBe("#ABCDEF");
+    expect(merged.background.focusedColor).toBe("#E0E0E0");
+  });
+
+  it("applies Studio create-new leading icon asset", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      leadingIcon: {
+        default: {
+          asset: "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+        },
+      },
+    });
+
+    expect(merged.icons.leadingIcon.asset).toBe(
+      "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN"
+    );
+  });
+
+  it("applies Studio button title typography (fontFamily, letterSpacing, textTransform)", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      title: {
+        default: {
+          fontFamily: "CustomFont",
+          letterSpacing: -0.5,
+          textTransform: "uppercase",
+        },
+      },
+    });
+
+    expect(merged.title.iosFontFamily).toBe("CustomFont");
+    expect(merged.title.androidFontFamily).toBe("CustomFont");
+    expect(merged.title.iosLetterSpacing).toBe(-0.5);
+    expect(merged.title.androidLetterSpacing).toBe(-0.5);
+    expect(merged.title.textTransform).toBe("uppercase");
+  });
+
+  it("uses the family string inside a font-selector object and ignores {}", () => {
+    const fromObject = mergeButtonConfiguration(buttonBase as any, {
+      title: {
+        default: { fontFamily: { fontFamily: "GreycliffCF-Bold" } },
+      },
+    });
+
+    expect(fromObject.title.iosFontFamily).toBe("GreycliffCF-Bold");
+    expect(fromObject.title.androidFontFamily).toBe("GreycliffCF-Bold");
+
+    const fromEmpty = mergeButtonConfiguration(buttonBase as any, {
+      title: {
+        default: { fontFamily: {} },
+      },
+    });
+
+    expect(fromEmpty.title.iosFontFamily).toBe(buttonBase.title.iosFontFamily);
+
+    expect(fromEmpty.title.androidFontFamily).toBe(
+      buttonBase.title.androidFontFamily
+    );
+  });
+
+  it("maps inactive color, gutter, and focused and inactive font colors", () => {
+    const merged = mergeButtonConfiguration(buttonBase as any, {
+      background: {
+        default: { inactiveColor: "#999999", horizontalGutter: 6 },
+      },
+      title: {
+        default: { inactiveFontColor: "#111111" },
+        focused: { fontColor: "#222222" },
+      },
+    });
+
+    expect(merged.background.inactiveColor).toBe("#999999");
+    expect(merged.background.horizontalGutter).toBe(6);
+    expect(merged.title.inactiveFontColor).toBe("#111111");
+    expect(merged.title.focusedFontColor).toBe("#222222");
+  });
+});
+
+describe("mergeHeaderConfiguration section header (Variant 3)", () => {
+  it("merges section title + Clear action button styles", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SECTION_HEADER, {
+      title: {
+        default: {
+          fontColor: "#ABCDEF",
+          fontSize: 15,
+          lineHeight: 36,
+          fontFamily: "CustomSection",
+          letterSpacing: -0.2,
+          textTransform: "uppercase",
+          alignment: "left",
+        },
+      },
+      actionButtons: {
+        default: {
+          backgroundColor: "rgba(10, 10, 10, 1)",
+          fontColor: "#EEEEEE",
+          fontSize: 12,
+          borderRadius: 20,
+          paddingTop: 8,
+          paddingRight: 12,
+          paddingBottom: 8,
+          paddingLeft: 12,
+        },
+        focused: {
+          backgroundColor: "rgba(20, 20, 20, 1)",
+          fontColor: "#FFDD00",
+        },
+      },
+    });
+
+    expect(merged.title.fontColor).toBe("#ABCDEF");
+    expect(merged.title.fontSize).toBe(15);
+    expect(merged.title.lineHeight).toBe(36);
+    expect(merged.title.iosFontFamily).toBe("CustomSection");
+    expect(merged.title.androidFontFamily).toBe("CustomSection");
+    expect(merged.title.iosLetterSpacing).toBe(-0.2);
+    expect(merged.title.textTransform).toBe("uppercase");
+
+    expect(merged.actionButtons.defaultBackgroundColor).toBe(
+      "rgba(10, 10, 10, 1)"
+    );
+
+    expect(merged.actionButtons.focusedBackgroundColor).toBe(
+      "rgba(20, 20, 20, 1)"
+    );
+
+    expect(merged.actionButtons.fontColor).toBe("#EEEEEE");
+    expect(merged.actionButtons.focusedFontColor).toBe("#FFDD00");
+    expect(merged.actionButtons.fontSize).toBe(12);
+    expect(merged.actionButtons.cornerRadius).toBe(20);
+    expect(merged.actionButtons.paddingTop).toBe(8);
+    expect(merged.actionButtons.paddingLeft).toBe(12);
+  });
+
+  it("uses title.default when only platform font and letter spacing are set", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SECTION_HEADER, {
+      title: {
+        default: {
+          iosFontFamily: "SFProText-Semibold",
+          androidFontFamily: "Roboto-Medium",
+          iosLetterSpacing: -0.4,
+          androidLetterSpacing: 0,
+        },
+      },
+    });
+
+    expect(merged.title.iosFontFamily).toBe("SFProText-Semibold");
+    expect(merged.title.androidFontFamily).toBe("Roboto-Medium");
+    expect(merged.title.iosLetterSpacing).toBe(-0.4);
+    expect(merged.title.androidLetterSpacing).toBe(0);
+    expect(merged.title.fontSize).toBe(VARIANT_SECTION_HEADER.title.fontSize);
+  });
+
+  it("does not change section defaults when block is empty", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SECTION_HEADER, {
+      title: { default: {} },
+      actionButtons: { default: {} },
+    });
+
+    expect(merged.title.fontSize).toBe(VARIANT_SECTION_HEADER.title.fontSize);
+
+    expect(merged.actionButtons.defaultBackgroundColor).toBe(
+      VARIANT_SECTION_HEADER.actionButtons.defaultBackgroundColor
+    );
+  });
+
+  it("leaves single-line header title size untouched when only actionButtons set", () => {
+    const merged = mergeHeaderConfiguration(VARIANT_SINGLE_LINE_HEADER, {
+      actionButtons: {
+        default: { backgroundColor: "#123456" },
+      },
+    });
+
+    expect(merged.title.fontSize).toBe(
+      VARIANT_SINGLE_LINE_HEADER.title.fontSize
+    );
+
+    expect(merged.actionButtons.defaultBackgroundColor).toBe("#123456");
+  });
+});