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

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

import { describe, expect, it } from "vitest";
import { Platform } from "react-native-web";
import { StackHeaderTitle, appendStackHeaderTitlePropsToOptions } from "../StackHeaderTitle.mjs";
import { StackHeaderLeft, appendStackHeaderLeftPropsToOptions } from "../StackHeaderLeft.mjs";
import { StackHeaderRight, appendStackHeaderRightPropsToOptions } from "../StackHeaderRight.mjs";
import { StackHeaderBackButton, appendStackHeaderBackButtonPropsToOptions } from "../StackHeaderBackButton.mjs";
import { StackHeaderSearchBar, appendStackHeaderSearchBarPropsToOptions } from "../StackHeaderSearchBar.mjs";
import { StackHeaderComponent, appendStackHeaderPropsToOptions } from "../StackHeaderComponent.mjs";
import { appendScreenStackPropsToOptions } from "../StackScreen.mjs";
import { StackHeader } from "../index.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
describe("Stack Header Composition", () => {
  describe("StackHeaderTitle", () => {
    it("sets title from children", () => {
      const result = appendStackHeaderTitlePropsToOptions({}, {
        children: "My Title"
      });
      expect(result.title).toBe("My Title");
    });
    it("sets headerLargeTitle when large is true", () => {
      const result = appendStackHeaderTitlePropsToOptions({}, {
        large: true
      });
      expect(result.headerLargeTitle).toBe(true);
    });
    it("sets headerTitleAlign from style.textAlign", () => {
      const result = appendStackHeaderTitlePropsToOptions({}, {
        style: {
          textAlign: "center"
        }
      });
      expect(result.headerTitleAlign).toBe("center");
    });
    it("converts numeric fontWeight to string", () => {
      const result = appendStackHeaderTitlePropsToOptions({}, {
        style: {
          fontWeight: "700"
        }
      });
      expect(result.headerTitleStyle).toMatchObject({
        fontWeight: "700"
      });
    });
    it("preserves existing options", () => {
      const 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", () => {
      const originalOS = Platform.OS;
      Platform.OS = "ios";
      const iosResult = appendStackHeaderTitlePropsToOptions({}, {
        large: true
      });
      expect(iosResult.headerTransparent).toBe(true);
      Platform.OS = "android";
      const androidResult = appendStackHeaderTitlePropsToOptions({}, {
        large: true
      });
      expect(androidResult.headerTransparent).toBeUndefined();
      Platform.OS = "web";
      const webResult = appendStackHeaderTitlePropsToOptions({}, {
        large: true
      });
      expect(webResult.headerTransparent).toBeUndefined();
      Platform.OS = originalOS;
    });
  });
  describe("StackHeaderLeft", () => {
    it("does not set headerLeft without asChild", () => {
      const result = appendStackHeaderLeftPropsToOptions({}, {
        children: /* @__PURE__ */jsx("button", {
          children: "Back"
        })
      });
      expect(result.headerLeft).toBeUndefined();
    });
    it("sets headerLeft with asChild", () => {
      const CustomButton = () => /* @__PURE__ */jsx("button", {
        children: "Back"
      });
      const result = appendStackHeaderLeftPropsToOptions({}, {
        asChild: true,
        children: /* @__PURE__ */jsx(CustomButton, {})
      });
      expect(result.headerLeft).toBeDefined();
      expect(typeof result.headerLeft).toBe("function");
    });
    it("sets headerLeft with asChild even without children", () => {
      const result = appendStackHeaderLeftPropsToOptions({}, {
        asChild: true
      });
      expect(result.headerLeft).toBeDefined();
      expect(typeof result.headerLeft).toBe("function");
    });
    it("preserves existing options when setting headerLeft", () => {
      const 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", () => {
      const BackButton = () => /* @__PURE__ */jsx("button", {
        children: "Back"
      });
      const result = appendStackHeaderLeftPropsToOptions({}, {
        asChild: true,
        children: /* @__PURE__ */jsx(BackButton, {})
      });
      const headerLeftResult = result.headerLeft?.({});
      expect(headerLeftResult).toBeDefined();
    });
  });
  describe("StackHeaderRight", () => {
    it("does not set headerRight without asChild", () => {
      const result = appendStackHeaderRightPropsToOptions({}, {
        children: /* @__PURE__ */jsx("button", {
          children: "Action"
        })
      });
      expect(result.headerRight).toBeUndefined();
    });
    it("sets headerRight with asChild", () => {
      const CustomButton = () => /* @__PURE__ */jsx("button", {
        children: "Action"
      });
      const result = appendStackHeaderRightPropsToOptions({}, {
        asChild: true,
        children: /* @__PURE__ */jsx(CustomButton, {})
      });
      expect(result.headerRight).toBeDefined();
      expect(typeof result.headerRight).toBe("function");
    });
    it("sets headerRight with asChild even without children", () => {
      const result = appendStackHeaderRightPropsToOptions({}, {
        asChild: true
      });
      expect(result.headerRight).toBeDefined();
      expect(typeof result.headerRight).toBe("function");
    });
    it("preserves existing options when setting headerRight", () => {
      const 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", () => {
      const ActionButton = () => /* @__PURE__ */jsx("button", {
        children: "Action"
      });
      const result = appendStackHeaderRightPropsToOptions({}, {
        asChild: true,
        children: /* @__PURE__ */jsx(ActionButton, {})
      });
      const headerRightResult = result.headerRight?.({});
      expect(headerRightResult).toBeDefined();
    });
  });
  describe("StackHeaderBackButton", () => {
    it("sets headerBackTitle from children", () => {
      const result = appendStackHeaderBackButtonPropsToOptions({}, {
        children: "Go Back"
      });
      expect(result.headerBackTitle).toBe("Go Back");
    });
    it("sets headerBackVisible to false when hidden", () => {
      const result = appendStackHeaderBackButtonPropsToOptions({}, {
        hidden: true
      });
      expect(result.headerBackVisible).toBe(false);
    });
    it("sets headerBackButtonMenuEnabled", () => {
      const result = appendStackHeaderBackButtonPropsToOptions({}, {
        withMenu: true
      });
      expect(result.headerBackButtonMenuEnabled).toBe(true);
    });
    it("sets headerBackButtonDisplayMode", () => {
      const result = appendStackHeaderBackButtonPropsToOptions({}, {
        displayMode: "minimal"
      });
      expect(result.headerBackButtonDisplayMode).toBe("minimal");
    });
  });
  describe("StackHeaderSearchBar", () => {
    it("sets headerSearchBarOptions with placeholder", () => {
      const result = appendStackHeaderSearchBarPropsToOptions({}, {
        placeholder: "Search..."
      });
      expect(result.headerSearchBarOptions).toMatchObject({
        placeholder: "Search..."
      });
    });
    it("sets headerSearchBarOptions with autoCapitalize", () => {
      const result = appendStackHeaderSearchBarPropsToOptions({}, {
        autoCapitalize: "none"
      });
      expect(result.headerSearchBarOptions).toMatchObject({
        autoCapitalize: "none"
      });
    });
    it("sets headerSearchBarOptions with multiple props", () => {
      const 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", () => {
      const 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", () => {
      const result = appendStackHeaderSearchBarPropsToOptions({}, {
        placeholder: "Search...",
        placement: "stacked"
      });
      expect(result.headerSearchBarOptions).toMatchObject({
        placeholder: "Search...",
        placement: "stacked"
      });
    });
    it("sets empty headerSearchBarOptions when no props", () => {
      const result = appendStackHeaderSearchBarPropsToOptions({}, {});
      expect(result.headerSearchBarOptions).toBeDefined();
      expect(result.headerSearchBarOptions).toEqual({});
    });
  });
  describe("StackHeaderComponent", () => {
    it("sets headerShown false when hidden", () => {
      const result = appendStackHeaderPropsToOptions({}, {
        hidden: true
      });
      expect(result.headerShown).toBe(false);
    });
    it("sets headerBlurEffect", () => {
      const result = appendStackHeaderPropsToOptions({}, {
        blurEffect: "regular"
      });
      expect(result.headerBlurEffect).toBe("regular");
    });
    it("sets headerShadowVisible false when shadowColor is transparent", () => {
      const result = appendStackHeaderPropsToOptions({}, {
        style: {
          shadowColor: "transparent"
        }
      });
      expect(result.headerShadowVisible).toBe(false);
    });
    it("sets headerTransparent when backgroundColor is transparent", () => {
      const 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)", () => {
      const 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", () => {
      const 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", () => {
      const result = appendStackHeaderPropsToOptions({}, {
        children: /* @__PURE__ */jsx(StackHeaderBackButton, {
          hidden: true,
          children: "Back"
        })
      });
      expect(result.headerBackTitle).toBe("Back");
      expect(result.headerBackVisible).toBe(false);
    });
    it("processes multiple children", () => {
      const 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", () => {
      const result = appendStackHeaderPropsToOptions({}, {
        children: /* @__PURE__ */jsx(StackHeaderLeft, {
          asChild: true,
          children: /* @__PURE__ */jsx("button", {
            children: "Back"
          })
        })
      });
      expect(result.headerLeft).toBeDefined();
      expect(typeof result.headerLeft).toBe("function");
    });
    it("processes child Right component", () => {
      const result = appendStackHeaderPropsToOptions({}, {
        children: /* @__PURE__ */jsx(StackHeaderRight, {
          asChild: true,
          children: /* @__PURE__ */jsx("button", {
            children: "Action"
          })
        })
      });
      expect(result.headerRight).toBeDefined();
      expect(typeof result.headerRight).toBe("function");
    });
    it("processes child SearchBar component", () => {
      const result = appendStackHeaderPropsToOptions({}, {
        children: /* @__PURE__ */jsx(StackHeaderSearchBar, {
          placeholder: "Search..."
        })
      });
      expect(result.headerSearchBarOptions).toMatchObject({
        placeholder: "Search..."
      });
    });
    it("processes all child components together", () => {
      const 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", () => {
    it("StackHeader is same reference as StackHeaderComponent", () => {
      expect(StackHeader).toBe(StackHeaderComponent);
    });
    it("merges options with Header composition", () => {
      const 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)", () => {
      const 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", () => {
      const 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", () => {
      const 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", () => {
      const 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", () => {
      const 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", () => {
      const 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.mjs.map