one
Version:
One is a new React Framework that makes Vite serve both native and web.
432 lines (431 loc) • 19.4 kB
JavaScript
import { describe, expect, it } from "vitest";
import { Platform } from "react-native-web";
import {
StackHeaderTitle,
appendStackHeaderTitlePropsToOptions
} from "../StackHeaderTitle";
import { StackHeaderLeft, appendStackHeaderLeftPropsToOptions } from "../StackHeaderLeft";
import {
StackHeaderRight,
appendStackHeaderRightPropsToOptions
} from "../StackHeaderRight";
import {
StackHeaderBackButton,
appendStackHeaderBackButtonPropsToOptions
} from "../StackHeaderBackButton";
import {
StackHeaderSearchBar,
appendStackHeaderSearchBarPropsToOptions
} from "../StackHeaderSearchBar";
import {
StackHeaderComponent,
appendStackHeaderPropsToOptions
} from "../StackHeaderComponent";
import { appendScreenStackPropsToOptions } from "../StackScreen";
import { StackHeader } from "../index";
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: !0 });
expect(result.headerLargeTitle).toBe(!0);
}), 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: !0 });
expect(iosResult.headerTransparent).toBe(!0), Platform.OS = "android";
const androidResult = appendStackHeaderTitlePropsToOptions({}, { large: !0 });
expect(androidResult.headerTransparent).toBeUndefined(), Platform.OS = "web";
const webResult = appendStackHeaderTitlePropsToOptions({}, { large: !0 });
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 result = appendStackHeaderLeftPropsToOptions(
{},
{
asChild: !0,
children: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx("button", { children: "Back" }), {})
}
);
expect(result.headerLeft).toBeDefined(), expect(typeof result.headerLeft).toBe("function");
}), it("sets headerLeft with asChild even without children", () => {
const result = appendStackHeaderLeftPropsToOptions({}, { asChild: !0 });
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: !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", () => {
const headerLeftResult = appendStackHeaderLeftPropsToOptions(
{},
{
asChild: !0,
children: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx("button", { children: "Back" }), {})
}
).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 result = appendStackHeaderRightPropsToOptions(
{},
{
asChild: !0,
children: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx("button", { children: "Action" }), {})
}
);
expect(result.headerRight).toBeDefined(), expect(typeof result.headerRight).toBe("function");
}), it("sets headerRight with asChild even without children", () => {
const result = appendStackHeaderRightPropsToOptions({}, { asChild: !0 });
expect(result.headerRight).toBeDefined(), expect(typeof result.headerRight).toBe("function");
}), it("preserves existing options when setting headerRight", () => {
const 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", () => {
const headerRightResult = appendStackHeaderRightPropsToOptions(
{},
{
asChild: !0,
children: /* @__PURE__ */ jsx(() => /* @__PURE__ */ jsx("button", { children: "Action" }), {})
}
).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: !0
}
);
expect(result.headerBackVisible).toBe(!1);
}), it("sets headerBackButtonMenuEnabled", () => {
const result = appendStackHeaderBackButtonPropsToOptions(
{},
{
withMenu: !0
}
);
expect(result.headerBackButtonMenuEnabled).toBe(!0);
}), 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: !0,
obscureBackground: !1
}
);
expect(result.headerSearchBarOptions).toMatchObject({
placeholder: "Search articles...",
autoCapitalize: "words",
hideWhenScrolling: !0,
obscureBackground: !1
});
}), it("preserves existing options when setting search bar", () => {
const 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", () => {
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: !0 });
expect(result.headerShown).toBe(!1);
}), 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(!1);
}), it("sets headerTransparent when backgroundColor is transparent", () => {
const 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)", () => {
const 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", () => {
const 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", () => {
const result = appendStackHeaderPropsToOptions(
{},
{
children: /* @__PURE__ */ jsx(StackHeaderBackButton, { hidden: !0, children: "Back" })
}
);
expect(result.headerBackTitle).toBe("Back"), expect(result.headerBackVisible).toBe(!1);
}), it("processes multiple children", () => {
const 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", () => {
const result = appendStackHeaderPropsToOptions(
{},
{
children: /* @__PURE__ */ jsx(StackHeaderLeft, { asChild: !0, 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: !0, 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: !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", () => {
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: !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)", () => {
const 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", () => {
const 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", () => {
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: !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", () => {
const 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", () => {
const 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.js.map