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

React Native for Web

"use strict";
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", function() {
  test("getSheet", function() {
    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", function() {
    expect(import__.default.absoluteFill).toMatchInlineSnapshot(`
      {
        "bottom": 0,
        "left": 0,
        "position": "absolute",
        "right": 0,
        "top": 0,
      }
    `);
  }), test("absoluteFillObject", function() {
    expect(import__.default.absoluteFillObject).toMatchInlineSnapshot(`
      {
        "bottom": 0,
        "left": 0,
        "position": "absolute",
        "right": 0,
        "top": 0,
      }
    `);
  }), test("compose", function() {
    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", function() {
    test("returns original style objects", function() {
      var style = import__.default.create({
        root: {
          position: "absolute"
        }
      });
      expect(style.root).toMatchInlineSnapshot(`
        {
          "position": "absolute",
        }
      `);
    }), test("e2e resolves to classname", function() {
      var style = import__.default.create({
        root: {
          position: "absolute"
        }
      });
      expect((0, import__.default)(style.root)).toMatchInlineSnapshot(`
        [
          "r-position-u8s1d",
          null,
        ]
      `);
    }), test("e2e flattens shadow style properties", function() {
      var 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", function() {
    test("should merge style objects", function() {
      var style = import__.default.flatten([
        {
          opacity: 1
        },
        {
          order: 2
        }
      ]);
      expect(style).toMatchInlineSnapshot(`
        {
          "opacity": 1,
          "order": 2,
        }
      `);
    }), test("should override style properties", function() {
      var 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`", function() {
      var style = import__.default.flatten([
        {
          backgroundColor: "#000"
        },
        {
          backgroundColor: void 0
        }
      ]);
      expect(style).toMatchInlineSnapshot(`
        {
          "backgroundColor": undefined,
        }
      `);
    }), test("should not fail on falsy values", function() {
      expect(function() {
        return import__.default.flatten([
          null,
          !1,
          void 0
        ]);
      }).not.toThrow();
    }), test("should recursively flatten arrays", function() {
      var style = import__.default.flatten([
        null,
        [],
        [
          {
            order: 2
          },
          {
            opacity: 1
          }
        ],
        {
          order: 3
        }
      ]);
      expect(style).toMatchInlineSnapshot(`
        {
          "opacity": 1,
          "order": 3,
        }
      `);
    });
  }), test("hairlineWidth", function() {
    expect(Number.isInteger(import__.default.hairlineWidth) === !0).toBeTruthy();
  }), describe("resolve", function() {
    test("empty", function() {
      expect((0, import__.default)()).toMatchInlineSnapshot(`
        [
          "",
          null,
        ]
      `), expect((0, import__.default)({})).toMatchInlineSnapshot(`
        [
          "",
          null,
        ]
      `), expect((0, import__.default)([])).toMatchInlineSnapshot(`
        [
          "",
          null,
        ]
      `);
    }), test("transforms compiled object to className", function() {
      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", function() {
      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", function() {
      var 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)"
      });
      var [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", function() {
      var 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",
          },
        ]
      `);
      var 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", function() {
      var 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",
          },
        ]
      `);
      var 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