react-native-web-internals
Version:
React Native for Web
193 lines (192 loc) • 7.6 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
if (from && typeof from == "object" || typeof from == "function")
for (let key of __getOwnPropNames(from))
!__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
mod
));
var import_createReactDOMStyle = __toESM(require("../compiler/createReactDOMStyle"));
const reactNativeStyle = {
boxShadow: "1px 1px 1px 1px #000",
borderWidthLeft: 2,
borderWidth: 1,
borderWidthRight: 3,
display: "flex",
marginVertical: 0,
opacity: 0,
shadowColor: "red",
shadowOffset: { width: 1, height: 2 },
resizeMode: "contain"
};
describe("compiler/createReactDOMStyle", () => {
test("noop on DOM styles", () => {
const firstStyle = (0, import_createReactDOMStyle.default)(reactNativeStyle), secondStyle = (0, import_createReactDOMStyle.default)(firstStyle);
expect(firstStyle).toEqual(secondStyle);
}), test("shortform -> longform for inline styles", () => {
const style = {
borderStyle: "solid",
boxSizing: "border-box",
borderBottomColor: "white",
borderBottomWidth: 1,
borderWidth: 0,
marginTop: 50,
marginVertical: 25,
margin: 10,
overflow: "hidden",
overscrollBehavior: "contain",
paddingLeft: 50,
paddingHorizontal: 25,
padding: 10
};
expect((0, import_createReactDOMStyle.default)(style, !0)).toMatchInlineSnapshot(`
{
"borderBottomColor": "rgba(255,255,255,1.00)",
"borderBottomStyle": "solid",
"borderBottomWidth": "1px",
"borderLeftStyle": "solid",
"borderLeftWidth": "0px",
"borderRightStyle": "solid",
"borderRightWidth": "0px",
"borderTopStyle": "solid",
"borderTopWidth": "0px",
"boxSizing": "border-box",
"marginBottom": "25px",
"marginLeft": "10px",
"marginRight": "10px",
"marginTop": "50px",
"overflowX": "hidden",
"overflowY": "hidden",
"overscrollBehaviorX": "contain",
"overscrollBehaviorY": "contain",
"paddingBottom": "10px",
"paddingLeft": "50px",
"paddingRight": "25px",
"paddingTop": "10px",
}
`);
}), test("aspectRatio", () => {
expect((0, import_createReactDOMStyle.default)({ aspectRatio: 9 / 16 })).toEqual({
aspectRatio: "0.5625"
});
}), describe("flexbox styles", () => {
test("flex: -1", () => {
expect((0, import_createReactDOMStyle.default)({ flex: -1 })).toEqual({
flexGrow: 0,
flexShrink: 1,
flexBasis: "auto"
});
}), test("flex: 0", () => {
expect((0, import_createReactDOMStyle.default)({ flex: 0 })).toEqual({
flex: 0
});
}), test("flex: 1", () => {
expect((0, import_createReactDOMStyle.default)({ flex: 1 })).toEqual({
flex: 1
});
}), test("flex: 10", () => {
expect((0, import_createReactDOMStyle.default)({ flex: 10 })).toEqual({
flex: 10
});
}), test("flexBasis overrides", () => {
expect((0, import_createReactDOMStyle.default)({ flexBasis: "25%" })).toEqual({
flexBasis: "25%"
}), expect((0, import_createReactDOMStyle.default)({ flex: 1, flexBasis: "25%" })).toEqual({
flex: 1,
flexBasis: "25%"
});
}), test("flexShrink overrides", () => {
expect((0, import_createReactDOMStyle.default)({ flexShrink: 1 })).toEqual({
flexShrink: 1
}), expect((0, import_createReactDOMStyle.default)({ flex: 1, flexShrink: 2 })).toEqual({
flex: 1,
flexShrink: 2
});
});
}), describe("fontFamily", () => {
test("general case", () => {
expect((0, import_createReactDOMStyle.default)({ fontFamily: "Georgia, Times, serif" })).toMatchInlineSnapshot(`
{
"fontFamily": "Georgia, Times, serif",
}
`);
}), test('"monospace"', () => {
expect((0, import_createReactDOMStyle.default)({ fontFamily: "monospace" })).toMatchInlineSnapshot(`
{
"fontFamily": "monospace,monospace",
}
`);
}), test('"System"', () => {
expect((0, import_createReactDOMStyle.default)({ fontFamily: "System" })).toMatchInlineSnapshot(`
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
}
`), expect((0, import_createReactDOMStyle.default)({ font: "14px System" })).toMatchInlineSnapshot(`
{
"font": "14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
}
`);
}), test('"Noto, System"', () => {
expect((0, import_createReactDOMStyle.default)({ fontFamily: "Noto, System" })).toMatchInlineSnapshot(`
{
"fontFamily": "Noto,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
}
`), expect((0, import_createReactDOMStyle.default)({ font: "14px Noto, System" })).toMatchInlineSnapshot(`
{
"font": "14px Noto, -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
}
`);
}), test('"Noto, BlinkMacSystemFont"', () => {
expect((0, import_createReactDOMStyle.default)({ fontFamily: "Noto, BlinkMacSystemFont" })).toMatchInlineSnapshot(`
{
"fontFamily": "Noto,BlinkMacSystemFont",
}
`);
});
}), test("fontVariant", () => {
expect(
(0, import_createReactDOMStyle.default)({ fontVariant: ["common-ligatures", "small-caps"] })
).toEqual({
fontVariant: "common-ligatures small-caps"
});
}), test("textAlignVertical", () => {
expect(
(0, import_createReactDOMStyle.default)({
textAlignVertical: "center"
})
).toEqual({
verticalAlign: "middle"
});
}), describe("transform", () => {
test("string", () => {
const transform = "perspective(50px) scaleX(20) translateX(20px) rotate(20deg)", resolved = (0, import_createReactDOMStyle.default)({ transform });
expect(resolved).toEqual({ transform });
}), test("array", () => {
const resolved = (0, import_createReactDOMStyle.default)({
transform: [
{ perspective: 50 },
{ scaleX: 20 },
{ translateX: 20 },
{ rotate: "20deg" },
{ matrix: [1, 2, 3, 4, 5, 6] },
{ matrix3d: [1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4] }
]
});
expect(resolved).toEqual({
transform: "perspective(50px) scaleX(20) translateX(20px) rotate(20deg) matrix(1,2,3,4,5,6) matrix3d(1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4)"
});
});
});
});
//# sourceMappingURL=compiler-createReactDOMStyle-test.js.map