react-native-web-internals
Version:
React Native for Web
222 lines (221 loc) • 6.51 kB
JavaScript
import createReactDOMStyle from "../compiler/createReactDOMStyle.native.js";
var 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", function () {
test("noop on DOM styles", function () {
var firstStyle = createReactDOMStyle(reactNativeStyle),
secondStyle = createReactDOMStyle(firstStyle);
expect(firstStyle).toEqual(secondStyle);
}), test("shortform -> longform for inline styles", function () {
var 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(createReactDOMStyle(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", function () {
expect(createReactDOMStyle({
aspectRatio: 9 / 16
})).toEqual({
aspectRatio: "0.5625"
});
}), describe("flexbox styles", function () {
test("flex: -1", function () {
expect(createReactDOMStyle({
flex: -1
})).toEqual({
flexGrow: 0,
flexShrink: 1,
flexBasis: "auto"
});
}), test("flex: 0", function () {
expect(createReactDOMStyle({
flex: 0
})).toEqual({
flex: 0
});
}), test("flex: 1", function () {
expect(createReactDOMStyle({
flex: 1
})).toEqual({
flex: 1
});
}), test("flex: 10", function () {
expect(createReactDOMStyle({
flex: 10
})).toEqual({
flex: 10
});
}), test("flexBasis overrides", function () {
expect(createReactDOMStyle({
flexBasis: "25%"
})).toEqual({
flexBasis: "25%"
}), expect(createReactDOMStyle({
flex: 1,
flexBasis: "25%"
})).toEqual({
flex: 1,
flexBasis: "25%"
});
}), test("flexShrink overrides", function () {
expect(createReactDOMStyle({
flexShrink: 1
})).toEqual({
flexShrink: 1
}), expect(createReactDOMStyle({
flex: 1,
flexShrink: 2
})).toEqual({
flex: 1,
flexShrink: 2
});
});
}), describe("fontFamily", function () {
test("general case", function () {
expect(createReactDOMStyle({
fontFamily: "Georgia, Times, serif"
})).toMatchInlineSnapshot(`
{
"fontFamily": "Georgia, Times, serif",
}
`);
}), test('"monospace"', function () {
expect(createReactDOMStyle({
fontFamily: "monospace"
})).toMatchInlineSnapshot(`
{
"fontFamily": "monospace,monospace",
}
`);
}), test('"System"', function () {
expect(createReactDOMStyle({
fontFamily: "System"
})).toMatchInlineSnapshot(`
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
}
`), expect(createReactDOMStyle({
font: "14px System"
})).toMatchInlineSnapshot(`
{
"font": "14px -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
}
`);
}), test('"Noto, System"', function () {
expect(createReactDOMStyle({
fontFamily: "Noto, System"
})).toMatchInlineSnapshot(`
{
"fontFamily": "Noto,-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
}
`), expect(createReactDOMStyle({
font: "14px Noto, System"
})).toMatchInlineSnapshot(`
{
"font": "14px Noto, -apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif",
}
`);
}), test('"Noto, BlinkMacSystemFont"', function () {
expect(createReactDOMStyle({
fontFamily: "Noto, BlinkMacSystemFont"
})).toMatchInlineSnapshot(`
{
"fontFamily": "Noto,BlinkMacSystemFont",
}
`);
});
}), test("fontVariant", function () {
expect(createReactDOMStyle({
fontVariant: ["common-ligatures", "small-caps"]
})).toEqual({
fontVariant: "common-ligatures small-caps"
});
}), test("textAlignVertical", function () {
expect(createReactDOMStyle({
textAlignVertical: "center"
})).toEqual({
verticalAlign: "middle"
});
}), describe("transform", function () {
test("string", function () {
var transform = "perspective(50px) scaleX(20) translateX(20px) rotate(20deg)",
style = {
transform
},
resolved = createReactDOMStyle(style);
expect(resolved).toEqual({
transform
});
}), test("array", function () {
var style = {
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]
}]
},
resolved = createReactDOMStyle(style);
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.native.js.map