one/dist/esm/layouts/stack-utils/__tests__/composition.test.native.js

One is a new React Framework that makes Vite serve both native and web.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { describe, expect, it } from "vitest";
import React from "react";
import { Platform } from "react-native";
import { StackHeaderTitle, appendStackHeaderTitlePropsToOptions } from "../StackHeaderTitle.native.js";
import { StackHeaderLeft, appendStackHeaderLeftPropsToOptions } from "../StackHeaderLeft.native.js";
import { StackHeaderRight, appendStackHeaderRightPropsToOptions } from "../StackHeaderRight.native.js";
import { StackHeaderBackButton, appendStackHeaderBackButtonPropsToOptions } from "../StackHeaderBackButton.native.js";
import { StackHeaderSearchBar, appendStackHeaderSearchBarPropsToOptions } from "../StackHeaderSearchBar.native.js";
import { StackHeaderComponent, appendStackHeaderPropsToOptions } from "../StackHeaderComponent.native.js";
import { appendScreenStackPropsToOptions } from "../StackScreen.native.js";
import { StackHeader } from "../index.native.js";
function _type_of(obj) {
  "@swc/helpers - typeof";

  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
}
describe("Stack Header Composition", function () {
  describe("StackHeaderTitle", function () {
    it("sets title from children", function () {
      var result = appendStackHeaderTitlePropsToOptions({}, {
        children: "My Title"
      });
      expect(result.title).toBe("My Title");
    });
    it("sets headerLargeTitle when large is true", function () {
      var result = appendStackHeaderTitlePropsToOptions({}, {
        large: true
      });
      expect(result.headerLargeTitle).toBe(true);
    });
    it("sets headerTitleAlign from style.textAlign", function () {
      var result = appendStackHeaderTitlePropsToOptions({}, {
        style: {
          textAlign: "center"
        }
      });
      expect(result.headerTitleAlign).toBe("center");
    });
    it("converts numeric fontWeight to string", function () {
      var result = appendStackHeaderTitlePropsToOptions({}, {
        style: {
          fontWeight: "700"
        }
      });
      expect(result.headerTitleStyle).toMatchObject({
        fontWeight: "700"
      });
    });
    it("preserves existing options", function () {
      var result = appendStackHeaderTitlePropsToOptions({
        animation: "slide_from_right"
      }, {
        children: "Title"
      });
      expect(result.animation).toBe("slide_from_right");
      expect(result.title).toBe("Title");
    });
    it("sets headerTransparent only on iOS when large is true", function () {
      var originalOS = Platform.OS;
      Platform.OS = "ios";
      var iosResult = appendStackHeaderTitlePropsToOptions({}, {
        large: true
      });
      expect(iosResult.headerTransparent).toBe(true);
      Platform.OS = "android";
      var androidResult = appendStackHeaderTitlePropsToOptions({}, {
        large: true
      });
      expect(androidResult.headerTransparent).toBeUndefined();
      Platform.OS = "web";
      var webResult = appendStackHeaderTitlePropsToOptions({}, {
        large: true
      });
      expect(webResult.headerTransparent).toBeUndefined();
      Platform.OS = originalOS;
    });
  });
  describe("StackHeaderLeft", function () {
    it("does not set headerLeft without asChild", function () {
      var result = appendStackHeaderLeftPropsToOptions({}, {
        children: /* @__PURE__ */_jsx("button", {
          children: "Back"
        })
      });
      expect(result.headerLeft).toBeUndefined();
    });
    it("sets headerLeft with asChild", function () {
      var CustomButton = function () {
        return /* @__PURE__ */_jsx("button", {
          children: "Back"
        });
      };
      var result = appendStackHeaderLeftPropsToOptions({}, {
        asChild: true,
        children: /* @__PURE__ */_jsx(CustomButton, {})
      });
      expect(result.headerLeft).toBeDefined();
      expect(_type_of(result.headerLeft)).toBe("function");
    });
    it("sets headerLeft with asChild even without children", function () {
      var result = appendStackHeaderLeftPropsToOptions({}, {
        asChild: true
      });
      expect(result.headerLeft).toBeDefined();
      expect(_type_of(result.headerLeft)).toBe("function");
    });
    it("preserves existing options when setting headerLeft", function () {
      var result = appendStackHeaderLeftPropsToOptions({
        title: "Existing Title",
        animation: "slide_from_right"
      }, {
        asChild: true,
        children: /* @__PURE__ */_jsx("button", {
          children: "Back"
        })
      });
      expect(result.title).toBe("Existing Title");
      expect(result.animation).toBe("slide_from_right");
      expect(result.headerLeft).toBeDefined();
    });
    it("headerLeft function returns children when called", function () {
      var _result_headerLeft;
      var BackButton = function () {
        return /* @__PURE__ */_jsx("button", {
          children: "Back"
        });
      };
      var result = appendStackHeaderLeftPropsToOptions({}, {
        asChild: true,
        children: /* @__PURE__ */_jsx(BackButton, {})
      });
      var headerLeftResult = (_result_headerLeft = result.headerLeft) === null || _result_headerLeft === void 0 ? void 0 : _result_headerLeft.call(result, {});
      expect(headerLeftResult).toBeDefined();
    });
  });
  describe("StackHeaderRight", function () {
    it("does not set headerRight without asChild", function () {
      var result = appendStackHeaderRightPropsToOptions({}, {
        children: /* @__PURE__ */_jsx("button", {
          children: "Action"
        })
      });
      expect(result.headerRight).toBeUndefined();
    });
    it("sets headerRight with asChild", function () {
      var CustomButton = function () {
        return /* @__PURE__ */_jsx("button", {
          children: "Action"
        });
      };
      var result = appendStackHeaderRightPropsToOptions({}, {
        asChild: true,
        children: /* @__PURE__ */_jsx(CustomButton, {})
      });
      expect(result.headerRight).toBeDefined();
      expect(_type_of(result.headerRight)).toBe("function");
    });
    it("sets headerRight with asChild even without children", function () {
      var result = appendStackHeaderRightPropsToOptions({}, {
        asChild: true
      });
      expect(result.headerRight).toBeDefined();
      expect(_type_of(result.headerRight)).toBe("function");
    });
    it("preserves existing options when setting headerRight", function () {
      var result = appendStackHeaderRightPropsToOptions({
        title: "Existing Title",
        headerLargeTitle: true
      }, {
        asChild: true,
        children: /* @__PURE__ */_jsx("button", {
          children: "Action"
        })
      });
      expect(result.title).toBe("Existing Title");
      expect(result.headerLargeTitle).toBe(true);
      expect(result.headerRight).toBeDefined();
    });
    it("headerRight function returns children when called", function () {
      var _result_headerRight;
      var ActionButton = function () {
        return /* @__PURE__ */_jsx("button", {
          children: "Action"
        });
      };
      var result = appendStackHeaderRightPropsToOptions({}, {
        asChild: true,
        children: /* @__PURE__ */_jsx(ActionButton, {})
      });
      var headerRightResult = (_result_headerRight = result.headerRight) === null || _result_headerRight === void 0 ? void 0 : _result_headerRight.call(result, {});
      expect(headerRightResult).toBeDefined();
    });
  });
  describe("StackHeaderBackButton", function () {
    it("sets headerBackTitle from children", function () {
      var result = appendStackHeaderBackButtonPropsToOptions({}, {
        children: "Go Back"
      });
      expect(result.headerBackTitle).toBe("Go Back");
    });
    it("sets headerBackVisible to false when hidden", function () {
      var result = appendStackHeaderBackButtonPropsToOptions({}, {
        hidden: true
      });
      expect(result.headerBackVisible).toBe(false);
    });
    it("sets headerBackButtonMenuEnabled", function () {
      var result = appendStackHeaderBackButtonPropsToOptions({}, {
        withMenu: true
      });
      expect(result.headerBackButtonMenuEnabled).toBe(true);
    });
    it("sets headerBackButtonDisplayMode", function () {
      var result = appendStackHeaderBackButtonPropsToOptions({}, {
        displayMode: "minimal"
      });
      expect(result.headerBackButtonDisplayMode).toBe("minimal");
    });
  });
  describe("StackHeaderSearchBar", function () {
    it("sets headerSearchBarOptions with placeholder", function () {
      var result = appendStackHeaderSearchBarPropsToOptions({}, {
        placeholder: "Search..."
      });
      expect(result.headerSearchBarOptions).toMatchObject({
        placeholder: "Search..."
      });
    });
    it("sets headerSearchBarOptions with autoCapitalize", function () {
      var result = appendStackHeaderSearchBarPropsToOptions({}, {
        autoCapitalize: "none"
      });
      expect(result.headerSearchBarOptions).toMatchObject({
        autoCapitalize: "none"
      });
    });
    it("sets headerSearchBarOptions with multiple props", function () {
      var result = appendStackHeaderSearchBarPropsToOptions({}, {
        placeholder: "Search articles...",
        autoCapitalize: "words",
        hideWhenScrolling: true,
        obscureBackground: false
      });
      expect(result.headerSearchBarOptions).toMatchObject({
        placeholder: "Search articles...",
        autoCapitalize: "words",
        hideWhenScrolling: true,
        obscureBackground: false
      });
    });
    it("preserves existing options when setting search bar", function () {
      var result = appendStackHeaderSearchBarPropsToOptions({
        title: "Articles",
        headerLargeTitle: true
      }, {
        placeholder: "Search..."
      });
      expect(result.title).toBe("Articles");
      expect(result.headerLargeTitle).toBe(true);
      expect(result.headerSearchBarOptions).toMatchObject({
        placeholder: "Search..."
      });
    });
    it("sets headerSearchBarOptions with placement prop", function () {
      var result = appendStackHeaderSearchBarPropsToOptions({}, {
        placeholder: "Search...",
        placement: "stacked"
      });
      expect(result.headerSearchBarOptions).toMatchObject({
        placeholder: "Search...",
        placement: "stacked"
      });
    });
    it("sets empty headerSearchBarOptions when no props", function () {
      var result = appendStackHeaderSearchBarPropsToOptions({}, {});
      expect(result.headerSearchBarOptions).toBeDefined();
      expect(result.headerSearchBarOptions).toEqual({});
    });
  });
  describe("StackHeaderComponent", function () {
    it("sets headerShown false when hidden", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        hidden: true
      });
      expect(result.headerShown).toBe(false);
    });
    it("sets headerBlurEffect", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        blurEffect: "regular"
      });
      expect(result.headerBlurEffect).toBe("regular");
    });
    it("sets headerShadowVisible false when shadowColor is transparent", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        style: {
          shadowColor: "transparent"
        }
      });
      expect(result.headerShadowVisible).toBe(false);
    });
    it("sets headerTransparent when backgroundColor is transparent", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        style: {
          backgroundColor: "transparent"
        }
      });
      expect(result.headerTransparent).toBe(true);
      expect(result.headerStyle).toMatchObject({
        backgroundColor: "transparent"
      });
    });
    it("sets headerTransparent with SearchBar (user controls via options if needed)", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        style: {
          backgroundColor: "transparent"
        },
        children: /* @__PURE__ */_jsx(StackHeaderSearchBar, {
          placeholder: "Search..."
        })
      });
      expect(result.headerTransparent).toBe(true);
      expect(result.headerSearchBarOptions).toMatchObject({
        placeholder: "Search..."
      });
    });
    it("processes child Title component", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        children: /* @__PURE__ */_jsx(StackHeaderTitle, {
          large: true,
          children: "Test Title"
        })
      });
      expect(result.title).toBe("Test Title");
      expect(result.headerLargeTitle).toBe(true);
    });
    it("processes child BackButton component", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        children: /* @__PURE__ */_jsx(StackHeaderBackButton, {
          hidden: true,
          children: "Back"
        })
      });
      expect(result.headerBackTitle).toBe("Back");
      expect(result.headerBackVisible).toBe(false);
    });
    it("processes multiple children", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        children: [/* @__PURE__ */_jsx(StackHeaderTitle, {
          large: true,
          children: "My Screen"
        }, "title"), /* @__PURE__ */_jsx(StackHeaderBackButton, {
          hidden: true
        }, "back")]
      });
      expect(result.title).toBe("My Screen");
      expect(result.headerLargeTitle).toBe(true);
      expect(result.headerBackVisible).toBe(false);
    });
    it("processes child Left component", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        children: /* @__PURE__ */_jsx(StackHeaderLeft, {
          asChild: true,
          children: /* @__PURE__ */_jsx("button", {
            children: "Back"
          })
        })
      });
      expect(result.headerLeft).toBeDefined();
      expect(_type_of(result.headerLeft)).toBe("function");
    });
    it("processes child Right component", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        children: /* @__PURE__ */_jsx(StackHeaderRight, {
          asChild: true,
          children: /* @__PURE__ */_jsx("button", {
            children: "Action"
          })
        })
      });
      expect(result.headerRight).toBeDefined();
      expect(_type_of(result.headerRight)).toBe("function");
    });
    it("processes child SearchBar component", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        children: /* @__PURE__ */_jsx(StackHeaderSearchBar, {
          placeholder: "Search..."
        })
      });
      expect(result.headerSearchBarOptions).toMatchObject({
        placeholder: "Search..."
      });
    });
    it("processes all child components together", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        children: [/* @__PURE__ */_jsx(StackHeaderTitle, {
          large: true,
          children: "Articles"
        }, "title"), /* @__PURE__ */_jsx(StackHeaderLeft, {
          asChild: true,
          children: /* @__PURE__ */_jsx("button", {
            children: "Back"
          })
        }, "left"), /* @__PURE__ */_jsx(StackHeaderRight, {
          asChild: true,
          children: /* @__PURE__ */_jsx("button", {
            children: "More"
          })
        }, "right"), /* @__PURE__ */_jsx(StackHeaderSearchBar, {
          placeholder: "Search articles..."
        }, "search"), /* @__PURE__ */_jsx(StackHeaderBackButton, {
          displayMode: "minimal"
        }, "back")]
      });
      expect(result.title).toBe("Articles");
      expect(result.headerLargeTitle).toBe(true);
      expect(result.headerLeft).toBeDefined();
      expect(result.headerRight).toBeDefined();
      expect(result.headerSearchBarOptions).toMatchObject({
        placeholder: "Search articles..."
      });
      expect(result.headerBackButtonDisplayMode).toBe("minimal");
    });
  });
  describe("StackScreen composition", function () {
    it("StackHeader is same reference as StackHeaderComponent", function () {
      expect(StackHeader).toBe(StackHeaderComponent);
    });
    it("merges options with Header composition", function () {
      var result = appendScreenStackPropsToOptions({
        animation: "slide_from_right"
      }, {
        options: {
          gestureEnabled: true
        },
        children: /* @__PURE__ */_jsx(StackHeaderComponent, {
          blurEffect: "regular",
          children: /* @__PURE__ */_jsx(StackHeaderTitle, {
            large: true,
            children: "Composed Title"
          })
        })
      });
      expect(result.animation).toBe("slide_from_right");
      expect(result.gestureEnabled).toBe(true);
      expect(result.headerBlurEffect).toBe("regular");
      expect(result.title).toBe("Composed Title");
      expect(result.headerLargeTitle).toBe(true);
    });
    it("works with StackHeader compound component (as used via Stack.Header)", function () {
      var result = appendScreenStackPropsToOptions({}, {
        children: /* @__PURE__ */_jsx(StackHeader, {
          children: /* @__PURE__ */_jsx(StackHeader.Title, {
            large: true,
            children: "Large Title Test"
          })
        })
      });
      expect(result.title).toBe("Large Title Test");
      expect(result.headerLargeTitle).toBe(true);
    });
    it("works with StackHeader compound component with Left child", function () {
      var result = appendScreenStackPropsToOptions({}, {
        children: /* @__PURE__ */_jsxs(StackHeader, {
          children: [/* @__PURE__ */_jsx(StackHeader.Title, {
            large: true,
            children: "Articles"
          }), /* @__PURE__ */_jsx(StackHeader.Left, {
            asChild: true,
            children: /* @__PURE__ */_jsx("button", {
              children: "Back"
            })
          })]
        })
      });
      expect(result.title).toBe("Articles");
      expect(result.headerLargeTitle).toBe(true);
      expect(result.headerLeft).toBeDefined();
    });
    it("composition overrides options prop", function () {
      var result = appendScreenStackPropsToOptions({}, {
        options: {
          title: "Options Title"
        },
        children: /* @__PURE__ */_jsx(StackHeaderComponent, {
          children: /* @__PURE__ */_jsx(StackHeaderTitle, {
            children: "Composed Title"
          })
        })
      });
      expect(result.title).toBe("Composed Title");
    });
    it("works with StackHeader compound component with Right child", function () {
      var result = appendScreenStackPropsToOptions({}, {
        children: /* @__PURE__ */_jsxs(StackHeader, {
          children: [/* @__PURE__ */_jsx(StackHeader.Title, {
            children: "Settings"
          }), /* @__PURE__ */_jsx(StackHeader.Right, {
            asChild: true,
            children: /* @__PURE__ */_jsx("button", {
              children: "Save"
            })
          })]
        })
      });
      expect(result.title).toBe("Settings");
      expect(result.headerRight).toBeDefined();
    });
    it("works with StackHeader compound component with SearchBar child", function () {
      var result = appendScreenStackPropsToOptions({}, {
        children: /* @__PURE__ */_jsxs(StackHeader, {
          children: [/* @__PURE__ */_jsx(StackHeader.Title, {
            large: true,
            children: "Articles"
          }), /* @__PURE__ */_jsx(StackHeader.SearchBar, {
            placeholder: "Search articles..."
          })]
        })
      });
      expect(result.title).toBe("Articles");
      expect(result.headerLargeTitle).toBe(true);
      expect(result.headerSearchBarOptions).toMatchObject({
        placeholder: "Search articles..."
      });
    });
    it("works with full compositional setup", function () {
      var result = appendScreenStackPropsToOptions({}, {
        options: {
          animation: "slide_from_right"
        },
        children: /* @__PURE__ */_jsxs(StackHeader, {
          blurEffect: "regular",
          children: [/* @__PURE__ */_jsx(StackHeader.Title, {
            large: true,
            children: "My App"
          }), /* @__PURE__ */_jsx(StackHeader.Left, {
            asChild: true,
            children: /* @__PURE__ */_jsx("button", {
              children: "Menu"
            })
          }), /* @__PURE__ */_jsx(StackHeader.Right, {
            asChild: true,
            children: /* @__PURE__ */_jsx("button", {
              children: "Settings"
            })
          }), /* @__PURE__ */_jsx(StackHeader.BackButton, {
            displayMode: "minimal"
          }), /* @__PURE__ */_jsx(StackHeader.SearchBar, {
            placeholder: "Search...",
            placement: "stacked"
          })]
        })
      });
      expect(result.animation).toBe("slide_from_right");
      expect(result.headerBlurEffect).toBe("regular");
      expect(result.title).toBe("My App");
      expect(result.headerLargeTitle).toBe(true);
      expect(result.headerTransparent).toBeUndefined();
      expect(result.headerLeft).toBeDefined();
      expect(result.headerRight).toBeDefined();
      expect(result.headerBackButtonDisplayMode).toBe("minimal");
      expect(result.headerSearchBarOptions).toMatchObject({
        placeholder: "Search...",
        placement: "stacked"
      });
    });
  });
});
//# sourceMappingURL=composition.test.native.js.map