react-native-web-internals/dist/esm/StyleSheet/__tests__/compiler-createReactDOMStyle-test.mjs

React Native for Web

import createReactDOMStyle from "../compiler/createReactDOMStyle.mjs";
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 = createReactDOMStyle(reactNativeStyle),
      secondStyle = createReactDOMStyle(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(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", () => {
    expect(createReactDOMStyle({
      aspectRatio: 9 / 16
    })).toEqual({
      aspectRatio: "0.5625"
    });
  }), describe("flexbox styles", () => {
    test("flex: -1", () => {
      expect(createReactDOMStyle({
        flex: -1
      })).toEqual({
        flexGrow: 0,
        flexShrink: 1,
        flexBasis: "auto"
      });
    }), test("flex: 0", () => {
      expect(createReactDOMStyle({
        flex: 0
      })).toEqual({
        flex: 0
      });
    }), test("flex: 1", () => {
      expect(createReactDOMStyle({
        flex: 1
      })).toEqual({
        flex: 1
      });
    }), test("flex: 10", () => {
      expect(createReactDOMStyle({
        flex: 10
      })).toEqual({
        flex: 10
      });
    }), test("flexBasis overrides", () => {
      expect(createReactDOMStyle({
        flexBasis: "25%"
      })).toEqual({
        flexBasis: "25%"
      }), expect(createReactDOMStyle({
        flex: 1,
        flexBasis: "25%"
      })).toEqual({
        flex: 1,
        flexBasis: "25%"
      });
    }), test("flexShrink overrides", () => {
      expect(createReactDOMStyle({
        flexShrink: 1
      })).toEqual({
        flexShrink: 1
      }), expect(createReactDOMStyle({
        flex: 1,
        flexShrink: 2
      })).toEqual({
        flex: 1,
        flexShrink: 2
      });
    });
  }), describe("fontFamily", () => {
    test("general case", () => {
      expect(createReactDOMStyle({
        fontFamily: "Georgia, Times, serif"
      })).toMatchInlineSnapshot(`
        {
          "fontFamily": "Georgia, Times, serif",
        }
      `);
    }), test('"monospace"', () => {
      expect(createReactDOMStyle({
        fontFamily: "monospace"
      })).toMatchInlineSnapshot(`
        {
          "fontFamily": "monospace,monospace",
        }
      `);
    }), test('"System"', () => {
      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"', () => {
      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"', () => {
      expect(createReactDOMStyle({
        fontFamily: "Noto, BlinkMacSystemFont"
      })).toMatchInlineSnapshot(`
        {
          "fontFamily": "Noto,BlinkMacSystemFont",
        }
      `);
    });
  }), test("fontVariant", () => {
    expect(createReactDOMStyle({
      fontVariant: ["common-ligatures", "small-caps"]
    })).toEqual({
      fontVariant: "common-ligatures small-caps"
    });
  }), test("textAlignVertical", () => {
    expect(createReactDOMStyle({
      textAlignVertical: "center"
    })).toEqual({
      verticalAlign: "middle"
    });
  }), describe("transform", () => {
    test("string", () => {
      const transform = "perspective(50px) scaleX(20) translateX(20px) rotate(20deg)",
        resolved = createReactDOMStyle({
          transform
        });
      expect(resolved).toEqual({
        transform
      });
    }), test("array", () => {
      const resolved = createReactDOMStyle({
        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.mjs.map