react-native-web-internals/dist/cjs/StyleSheet/__tests__/index-test.js

React Native for Web

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__ = __toESM(require("../index"));
describe("StyleSheet", () => {
  test("getSheet", () => {
    expect(import__.default.getSheet()).toMatchInlineSnapshot(`
      {
        "id": "react-native-stylesheet",
        "textContent": "[stylesheet-group=\\"0\\"]{}
      body{margin:0;}
      button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
      html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
      input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
      [stylesheet-group=\\"2.2\\"]{}
      .r-bottom-1p0dtai{bottom:0px;}
      .r-left-1d2f490{left:0px;}
      .r-position-u8s1d{position:absolute;}
      .r-right-zchlnj{right:0px;}
      .r-top-ipm5af{top:0px;}",
      }
    `);
  }), test("absoluteFill", () => {
    expect(import__.default.absoluteFill).toMatchInlineSnapshot(`
      {
        "bottom": 0,
        "left": 0,
        "position": "absolute",
        "right": 0,
        "top": 0,
      }
    `);
  }), test("absoluteFillObject", () => {
    expect(import__.default.absoluteFillObject).toMatchInlineSnapshot(`
      {
        "bottom": 0,
        "left": 0,
        "position": "absolute",
        "right": 0,
        "top": 0,
      }
    `);
  }), test("compose", () => {
    expect(import__.default.compose(1, 2)).toEqual([1, 2]), expect(import__.default.compose(1, null)).toBe(1), expect(import__.default.compose(null, 2)).toBe(2);
  }), describe("create", () => {
    test("returns original style objects", () => {
      const style = import__.default.create({ root: { position: "absolute" } });
      expect(style.root).toMatchInlineSnapshot(`
        {
          "position": "absolute",
        }
      `);
    }), test("e2e resolves to classname", () => {
      const style = import__.default.create({ root: { position: "absolute" } });
      expect((0, import__.default)(style.root)).toMatchInlineSnapshot(`
        [
          "r-position-u8s1d",
          null,
        ]
      `);
    }), test("e2e flattens shadow style properties", () => {
      const style = import__.default.create({
        root: {
          shadowColor: "rgba(50,60,70,0.5)",
          shadowOffset: { width: 1, height: 2 },
          shadowOpacity: 0.5,
          shadowRadius: 3,
          textShadowColor: "rgba(50,60,70,0.50)",
          textShadowOffset: { width: 5, height: 10 },
          textShadowRadius: 15
        }
      });
      expect((0, import__.default)(style.root)).toMatchInlineSnapshot(`
        [
          "r-boxShadow-o3ayyy r-textShadow-1x2q051",
          null,
        ]
      `);
    });
  }), describe("flatten", () => {
    test("should merge style objects", () => {
      const style = import__.default.flatten([{ opacity: 1 }, { order: 2 }]);
      expect(style).toMatchInlineSnapshot(`
        {
          "opacity": 1,
          "order": 2,
        }
      `);
    }), test("should override style properties", () => {
      const style = import__.default.flatten([
        { backgroundColor: "#000", order: 1 },
        { backgroundColor: "#023c69", order: null }
      ]);
      expect(style).toMatchInlineSnapshot(`
        {
          "backgroundColor": "#023c69",
          "order": null,
        }
      `);
    }), test("should overwrite properties with `undefined`", () => {
      const style = import__.default.flatten([
        { backgroundColor: "#000" },
        { backgroundColor: void 0 }
      ]);
      expect(style).toMatchInlineSnapshot(`
        {
          "backgroundColor": undefined,
        }
      `);
    }), test("should not fail on falsy values", () => {
      expect(() => import__.default.flatten([null, !1, void 0])).not.toThrow();
    }), test("should recursively flatten arrays", () => {
      const style = import__.default.flatten([
        null,
        [],
        [{ order: 2 }, { opacity: 1 }],
        { order: 3 }
      ]);
      expect(style).toMatchInlineSnapshot(`
        {
          "opacity": 1,
          "order": 3,
        }
      `);
    });
  }), test("hairlineWidth", () => {
    expect(Number.isInteger(import__.default.hairlineWidth) === !0).toBeTruthy();
  }), describe("resolve", () => {
    test("empty", () => {
      expect((0, import__.default)()).toMatchInlineSnapshot(`
        [
          "",
          null,
        ]
      `), expect((0, import__.default)({})).toMatchInlineSnapshot(`
        [
          "",
          null,
        ]
      `), expect((0, import__.default)([])).toMatchInlineSnapshot(`
        [
          "",
          null,
        ]
      `);
    }), test("transforms compiled object to className", () => {
      expect(
        (0, import__.default)([
          {
            $$css: !0,
            position: "position-absolute",
            opacity: "opacity-05",
            width: "width-200"
          }
        ])
      ).toMatchInlineSnapshot(`
        [
          "position-absolute opacity-05 width-200",
          null,
        ]
      `);
    }), test("transforms array of compiled objects to className", () => {
      expect(
        (0, import__.default)([
          {
            $$css: !0,
            borderWidth: "borderWidth-0",
            borderColor: "borderColor-red",
            display: "display-flex",
            width: "width-100"
          },
          {
            $$css: !0,
            position: "position-absolute",
            opacity: "opacity-05"
          },
          [
            {
              $$css: !0,
              width: "width-200"
            }
          ]
        ])
      ).toMatchInlineSnapshot(`
        [
          "borderWidth-0 borderColor-red display-flex position-absolute opacity-05 width-200",
          null,
        ]
      `);
    }), test("dedupes class names and inline styles", () => {
      const styleACompiled = {
        $$css: !0,
        backgroundColor: "backgroundColor-red",
        display: "display-block"
      }, styleBCompiled = {
        $$css: !0,
        backgroundColor: "backgroundColor-green",
        color: "color-green"
      }, styleBInline = {
        backgroundColor: "rgba(0,0,255,1.00)",
        color: null
      }, [className1, inlineStyle1] = (0, import__.default)([
        styleACompiled,
        styleBCompiled,
        styleBInline
      ]);
      expect(className1).toBe("display-block"), expect(inlineStyle1).toEqual({ backgroundColor: "rgba(0,0,255,1.00)" });
      const [className2, inlineStyle2] = (0, import__.default)([
        styleACompiled,
        styleBInline,
        styleBCompiled
      ]);
      expect(className2).toBe("display-block backgroundColor-green color-green"), expect(inlineStyle2).toEqual(null);
    }), test("long form inline style properties take precedence over static shorthand properties", () => {
      const styles1 = import__.default.create({
        test: { paddingHorizontal: "40px" }
      }), inlineStyle1 = { padding: "8px", paddingHorizontal: "40px" };
      expect((0, import__.default)([styles1.test, inlineStyle1])).toMatchInlineSnapshot(`
        [
          "",
          {
            "paddingBottom": "8px",
            "paddingLeft": "40px",
            "paddingRight": "40px",
            "paddingTop": "8px",
          },
        ]
      `);
      const styles2 = import__.default.create({ test: { marginVertical: "40px" } }), inlineStyle2 = { margin: "8px", marginVertical: "40px" };
      expect((0, import__.default)([styles2.test, inlineStyle2])).toMatchInlineSnapshot(`
        [
          "",
          {
            "marginBottom": "40px",
            "marginLeft": "8px",
            "marginRight": "8px",
            "marginTop": "40px",
          },
        ]
      `);
    }), test("polyfills logical styles", () => {
      const inlineA = { start: "12.34%" }, inlineB = { textAlign: "start" }, inlineC = { marginEnd: 10 }, a = import__.default.create({ x: { ...inlineA } }).x, b = import__.default.create({ x: { ...inlineB } }).x, c = import__.default.create({ x: { ...inlineC } }).x, writingDirection = "rtl", inlineStyle = [inlineA, inlineB, inlineC];
      expect((0, import__.default)(inlineStyle)).toMatchInlineSnapshot(`
        [
          "",
          {
            "left": "12.34%",
            "marginRight": "10px",
            "textAlign": "left",
          },
        ]
      `), expect((0, import__.default)(inlineStyle, { writingDirection })).toMatchInlineSnapshot(`
        [
          "",
          {
            "marginLeft": "10px",
            "right": "12.34%",
            "textAlign": "right",
          },
        ]
      `), expect(
        (0, import__.default)(
          [inlineStyle, { marginLeft: 1, marginEnd: 0, marginStart: 0, marginRight: 11 }],
          { writingDirection }
        )
      ).toMatchInlineSnapshot(`
        [
          "",
          {
            "marginLeft": "0px",
            "marginRight": "0px",
            "right": "12.34%",
            "textAlign": "right",
          },
        ]
      `), expect(
        (0, import__.default)([inlineStyle, { marginEnd: null, marginLeft: 11 }], {
          writingDirection
        })
      ).toMatchInlineSnapshot(`
        [
          "",
          {
            "marginLeft": "11px",
            "right": "12.34%",
            "textAlign": "right",
          },
        ]
      `);
      const staticStyle = [a, b, c];
      expect((0, import__.default)(staticStyle)).toMatchInlineSnapshot(`
        [
          "r-left-2s0hu9 r-textAlign-fdjqy7 r-marginRight-zso239",
          null,
        ]
      `), expect((0, import__.default)(staticStyle, { writingDirection })).toMatchInlineSnapshot(`
        [
          "r-right-1bnbe1j r-textAlign-1ff274t r-marginLeft-1n0xq6e",
          null,
        ]
      `), expect(
        (0, import__.default)(
          [staticStyle, { marginLeft: 1, marginEnd: 0, marginStart: 0, marginRight: 11 }],
          {
            writingDirection
          }
        )
      ).toMatchInlineSnapshot(`
        [
          "r-right-1bnbe1j r-textAlign-1ff274t",
          {
            "marginLeft": "0px",
            "marginRight": "0px",
          },
        ]
      `), expect(
        (0, import__.default)([staticStyle, { marginEnd: null, marginLeft: 11 }], {
          writingDirection
        })
      ).toMatchInlineSnapshot(`
        [
          "r-right-1bnbe1j r-textAlign-1ff274t",
          {
            "marginLeft": "11px",
          },
        ]
      `);
    });
  });
});
//# sourceMappingURL=index-test.js.map