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";
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 < "u" && 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: !0
      });
      expect(result.headerLargeTitle).toBe(!0);
    }), 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: !0
      });
      expect(iosResult.headerTransparent).toBe(!0), Platform.OS = "android";
      var androidResult = appendStackHeaderTitlePropsToOptions({}, {
        large: !0
      });
      expect(androidResult.headerTransparent).toBeUndefined(), Platform.OS = "web";
      var webResult = appendStackHeaderTitlePropsToOptions({}, {
        large: !0
      });
      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"
          });
        },
        result = appendStackHeaderLeftPropsToOptions({}, {
          asChild: !0,
          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: !0
      });
      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: !0,
        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,
        BackButton = function () {
          return /* @__PURE__ */_jsx("button", {
            children: "Back"
          });
        },
        result = appendStackHeaderLeftPropsToOptions({}, {
          asChild: !0,
          children: /* @__PURE__ */_jsx(BackButton, {})
        }),
        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"
          });
        },
        result = appendStackHeaderRightPropsToOptions({}, {
          asChild: !0,
          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: !0
      });
      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: !0
      }, {
        asChild: !0,
        children: /* @__PURE__ */_jsx("button", {
          children: "Action"
        })
      });
      expect(result.title).toBe("Existing Title"), expect(result.headerLargeTitle).toBe(!0), expect(result.headerRight).toBeDefined();
    }), it("headerRight function returns children when called", function () {
      var _result_headerRight,
        ActionButton = function () {
          return /* @__PURE__ */_jsx("button", {
            children: "Action"
          });
        },
        result = appendStackHeaderRightPropsToOptions({}, {
          asChild: !0,
          children: /* @__PURE__ */_jsx(ActionButton, {})
        }),
        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: !0
      });
      expect(result.headerBackVisible).toBe(!1);
    }), it("sets headerBackButtonMenuEnabled", function () {
      var result = appendStackHeaderBackButtonPropsToOptions({}, {
        withMenu: !0
      });
      expect(result.headerBackButtonMenuEnabled).toBe(!0);
    }), 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: !0,
        obscureBackground: !1
      });
      expect(result.headerSearchBarOptions).toMatchObject({
        placeholder: "Search articles...",
        autoCapitalize: "words",
        hideWhenScrolling: !0,
        obscureBackground: !1
      });
    }), it("preserves existing options when setting search bar", function () {
      var result = appendStackHeaderSearchBarPropsToOptions({
        title: "Articles",
        headerLargeTitle: !0
      }, {
        placeholder: "Search..."
      });
      expect(result.title).toBe("Articles"), expect(result.headerLargeTitle).toBe(!0), 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: !0
      });
      expect(result.headerShown).toBe(!1);
    }), 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(!1);
    }), it("sets headerTransparent when backgroundColor is transparent", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        style: {
          backgroundColor: "transparent"
        }
      });
      expect(result.headerTransparent).toBe(!0), 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(!0), expect(result.headerSearchBarOptions).toMatchObject({
        placeholder: "Search..."
      });
    }), it("processes child Title component", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        children: /* @__PURE__ */_jsx(StackHeaderTitle, {
          large: !0,
          children: "Test Title"
        })
      });
      expect(result.title).toBe("Test Title"), expect(result.headerLargeTitle).toBe(!0);
    }), it("processes child BackButton component", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        children: /* @__PURE__ */_jsx(StackHeaderBackButton, {
          hidden: !0,
          children: "Back"
        })
      });
      expect(result.headerBackTitle).toBe("Back"), expect(result.headerBackVisible).toBe(!1);
    }), it("processes multiple children", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        children: [/* @__PURE__ */_jsx(StackHeaderTitle, {
          large: !0,
          children: "My Screen"
        }, "title"), /* @__PURE__ */_jsx(StackHeaderBackButton, {
          hidden: !0
        }, "back")]
      });
      expect(result.title).toBe("My Screen"), expect(result.headerLargeTitle).toBe(!0), expect(result.headerBackVisible).toBe(!1);
    }), it("processes child Left component", function () {
      var result = appendStackHeaderPropsToOptions({}, {
        children: /* @__PURE__ */_jsx(StackHeaderLeft, {
          asChild: !0,
          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: !0,
          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: !0,
          children: "Articles"
        }, "title"), /* @__PURE__ */_jsx(StackHeaderLeft, {
          asChild: !0,
          children: /* @__PURE__ */_jsx("button", {
            children: "Back"
          })
        }, "left"), /* @__PURE__ */_jsx(StackHeaderRight, {
          asChild: !0,
          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(!0), 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: !0
        },
        children: /* @__PURE__ */_jsx(StackHeaderComponent, {
          blurEffect: "regular",
          children: /* @__PURE__ */_jsx(StackHeaderTitle, {
            large: !0,
            children: "Composed Title"
          })
        })
      });
      expect(result.animation).toBe("slide_from_right"), expect(result.gestureEnabled).toBe(!0), expect(result.headerBlurEffect).toBe("regular"), expect(result.title).toBe("Composed Title"), expect(result.headerLargeTitle).toBe(!0);
    }), 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: !0,
            children: "Large Title Test"
          })
        })
      });
      expect(result.title).toBe("Large Title Test"), expect(result.headerLargeTitle).toBe(!0);
    }), it("works with StackHeader compound component with Left child", function () {
      var result = appendScreenStackPropsToOptions({}, {
        children: /* @__PURE__ */_jsxs(StackHeader, {
          children: [/* @__PURE__ */_jsx(StackHeader.Title, {
            large: !0,
            children: "Articles"
          }), /* @__PURE__ */_jsx(StackHeader.Left, {
            asChild: !0,
            children: /* @__PURE__ */_jsx("button", {
              children: "Back"
            })
          })]
        })
      });
      expect(result.title).toBe("Articles"), expect(result.headerLargeTitle).toBe(!0), 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: !0,
            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: !0,
            children: "Articles"
          }), /* @__PURE__ */_jsx(StackHeader.SearchBar, {
            placeholder: "Search articles..."
          })]
        })
      });
      expect(result.title).toBe("Articles"), expect(result.headerLargeTitle).toBe(!0), 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: !0,
            children: "My App"
          }), /* @__PURE__ */_jsx(StackHeader.Left, {
            asChild: !0,
            children: /* @__PURE__ */_jsx("button", {
              children: "Menu"
            })
          }), /* @__PURE__ */_jsx(StackHeader.Right, {
            asChild: !0,
            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(!0), 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