@hanzogui/react-native-web-internals 2.0.0

package/dist/cjs/StyleSheet/__tests__/dom-createOrderedCSSStyleSheet-test.cjs

@@ -0,0 +1,121 @@
+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_createOrderedCSSStyleSheet = __toESM(require("../dom/createOrderedCSSStyleSheet.cjs"), 1);
+const insertStyleElement = () => {
+    const element = document.createElement("style"),
+      head = document.head;
+    return head.insertBefore(element, head.firstChild), element;
+  },
+  removeStyleElement = element => {
+    document.head.removeChild(element);
+  };
+describe("createOrderedCSSStyleSheet", () => {
+  describe("#insert", () => {
+    test("insertion order for same group", () => {
+      const sheet = (0, import_createOrderedCSSStyleSheet.default)();
+      expect(sheet.getTextContent()).toMatchInlineSnapshot('""'), sheet.insert(".a {}", 0), expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        .a {}"
+      `), sheet.insert(".b {}", 0), expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        .a {}
+        .b {}"
+      `), sheet.insert(".c {}", 0), expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        .a {}
+        .b {}
+        .c {}"
+      `);
+    }), test("deduplication for same group", () => {
+      const sheet = (0, import_createOrderedCSSStyleSheet.default)();
+      sheet.insert(".a {}", 0), sheet.insert(".a {}", 0), sheet.insert(".a {}", 0), expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        .a {}"
+      `);
+    }), test("order for same group", () => {
+      const sheet = (0, import_createOrderedCSSStyleSheet.default)();
+      sheet.insert(".c {}", 0), sheet.insert(".b {}", 0), sheet.insert(".a {}", 0), expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"0\\"]{}
+        .a {}
+        .b {}
+        .c {}"
+      `);
+    }), test("insertion order for different groups", () => {
+      const sheet = (0, import_createOrderedCSSStyleSheet.default)();
+      sheet.insert(".nine-1 {}", 9.9), sheet.insert(".nine-2 {}", 9.9), sheet.insert(".three {}", 3), sheet.insert(".one {}", 1), sheet.insert(".two {}", 2.2), sheet.insert(".four-1 {}", 4), sheet.insert(".four-2 {}", 4), sheet.insert(".twenty {}", 20), sheet.insert(".ten {}", 10), sheet.insert(".twenty-point2 {}", 20.2), expect(sheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"1\\"]{}
+        .one {}
+        [stylesheet-group=\\"2.2\\"]{}
+        .two {}
+        [stylesheet-group=\\"3\\"]{}
+        .three {}
+        [stylesheet-group=\\"4\\"]{}
+        .four-1 {}
+        .four-2 {}
+        [stylesheet-group=\\"9.9\\"]{}
+        .nine-1 {}
+        .nine-2 {}
+        [stylesheet-group=\\"10\\"]{}
+        .ten {}
+        [stylesheet-group=\\"20\\"]{}
+        .twenty {}
+        [stylesheet-group=\\"20.2\\"]{}
+        .twenty-point2 {}"
+      `);
+    });
+  }), describe("client-side hydration", () => {
+    let element;
+    beforeEach(() => {
+      element != null && removeStyleElement(element), element = insertStyleElement();
+    }), test("from SSR CSS", () => {
+      const serverSheet = (0, import_createOrderedCSSStyleSheet.default)();
+      serverSheet.insert(".one { width: 10px; }", 1), serverSheet.insert(".two-1 { height: 20px; }", 2), serverSheet.insert(".two-2 { color: red; }", 2), serverSheet.insert("@keyframes anim { 0% { opacity: 1; } }", 2);
+      const textContent = serverSheet.getTextContent();
+      element.appendChild(document.createTextNode(textContent));
+      const clientSheet = (0, import_createOrderedCSSStyleSheet.default)(element.sheet);
+      expect(clientSheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group=\\"1\\"] {}
+        .one {width: 10px;}
+        [stylesheet-group=\\"2\\"] {}
+        .two-1 {height: 20px;}
+        .two-2 {color: red;}
+        @keyframes anim { 
+          0% {opacity: 1;} 
+        }"
+      `);
+    }), test("works when the group marker is in single quotes", () => {
+      const serverSheet = (0, import_createOrderedCSSStyleSheet.default)();
+      serverSheet.insert(".a { color: red }", 0), serverSheet.insert(".b { color: red }", 1);
+      const textContent = serverSheet.getTextContent().replace(/"/g, "'");
+      element.appendChild(document.createTextNode(textContent));
+      const clientSheet = (0, import_createOrderedCSSStyleSheet.default)(element.sheet);
+      clientSheet.insert(".c { color: red }", 0), expect(clientSheet.getTextContent()).toMatchInlineSnapshot(`
+        "[stylesheet-group='0'] {}
+        .a {color: red;}
+        .c { color: red }
+        [stylesheet-group='1'] {}
+        .b {color: red;}"
+      `);
+    });
+  });
+});

package/dist/cjs/StyleSheet/__tests__/index-test.cjs

@@ -0,0 +1,404 @@
+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.cjs"), 1);
+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",
+          },
+        ]
+      `);
+    });
+  });
+});

package/dist/cjs/StyleSheet/__tests__/preprocess-test.cjs

@@ -0,0 +1,108 @@
+var import_preprocess = require("../preprocess.cjs");
+describe("StyleSheet/preprocess", () => {
+  describe("preprocesses multiple shadow styles into a single declaration", () => {
+    test("shadowColor only", () => {
+      expect((0, import_preprocess.preprocess)({
+        shadowColor: "red"
+      })).toEqual({
+        boxShadow: "0px 0px 0px rgba(255,0,0,1.00)"
+      });
+    }), test("shadowColor and shadowOpacity only", () => {
+      expect((0, import_preprocess.preprocess)({
+        shadowColor: "red",
+        shadowOpacity: 0.5
+      })).toEqual({
+        boxShadow: "0px 0px 0px rgba(255,0,0,0.50)"
+      });
+    }), test("shadowOffset only", () => {
+      expect((0, import_preprocess.preprocess)({
+        shadowOffset: {
+          width: 1,
+          height: 2
+        }
+      })).toEqual({
+        boxShadow: "1px 2px 0px rgba(0,0,0,1.00)"
+      });
+    }), test("shadowRadius only", () => {
+      expect((0, import_preprocess.preprocess)({
+        shadowRadius: 5
+      })).toEqual({
+        boxShadow: "0px 0px 5px rgba(0,0,0,1.00)"
+      });
+    }), test("shadowOffset, shadowRadius, shadowColor", () => {
+      expect((0, import_preprocess.preprocess)({
+        shadowColor: "rgba(50,60,70,0.5)",
+        shadowOffset: {
+          width: 1,
+          height: 2
+        },
+        shadowOpacity: 0.5,
+        shadowRadius: 3
+      })).toEqual({
+        boxShadow: "1px 2px 3px rgba(50,60,70,0.25)"
+      });
+    });
+  }), describe("preprocesses multiple textShadow styles into a single declaration", () => {
+    test("textShadowColor only", () => {
+      expect((0, import_preprocess.preprocess)({
+        textShadowColor: "red"
+      })).toEqual({});
+    }), test("textShadowOffset only", () => {
+      expect((0, import_preprocess.preprocess)({
+        textShadowOffset: {
+          width: 1,
+          height: 2
+        }
+      })).toEqual({});
+    }), test("textShadowRadius only", () => {
+      expect((0, import_preprocess.preprocess)({
+        textShadowRadius: 5
+      })).toEqual({});
+    }), test("textShadowColor and textShadowOffset only", () => {
+      expect((0, import_preprocess.preprocess)({
+        textShadowColor: "red",
+        textShadowOffset: {
+          width: 0,
+          height: 0
+        }
+      })).toEqual({}), expect((0, import_preprocess.preprocess)({
+        textShadowColor: "red",
+        textShadowOffset: {
+          width: -1,
+          height: 0
+        }
+      })).toEqual({
+        textShadow: "-1px 0px 0px rgba(255,0,0,1.00)"
+      }), expect((0, import_preprocess.preprocess)({
+        textShadowColor: "red",
+        textShadowOffset: {
+          width: 1,
+          height: 2
+        }
+      })).toEqual({
+        textShadow: "1px 2px 0px rgba(255,0,0,1.00)"
+      });
+    }), test("textShadowColor and textShadowRadius only", () => {
+      expect((0, import_preprocess.preprocess)({
+        textShadowColor: "red",
+        textShadowRadius: 0
+      })).toEqual({}), expect((0, import_preprocess.preprocess)({
+        textShadowColor: "red",
+        textShadowRadius: 5
+      })).toEqual({
+        textShadow: "0px 0px 5px rgba(255,0,0,1.00)"
+      });
+    }), test("textShadowColor, textShadowOffset, textShadowRadius", () => {
+      expect((0, import_preprocess.preprocess)({
+        textShadowColor: "rgba(50,60,70,0.50)",
+        textShadowOffset: {
+          width: 5,
+          height: 10
+        },
+        textShadowRadius: 15
+      })).toEqual({
+        textShadow: "5px 10px 15px rgba(50,60,70,0.50)"
+      });
+    });
+  });
+});

package/dist/cjs/StyleSheet/__tests__/validate-test.cjs

@@ -0,0 +1,36 @@
+var import_validate = require("../validate.cjs");
+describe("validate", () => {
+  beforeAll(() => {
+    jest.spyOn(console, "error").mockImplementation(() => {});
+  }), afterAll(() => {
+    console.error.mockRestore();
+  }), afterEach(() => {
+    console.error.mockClear();
+  }), test("invalid shortform properties", () => {
+    (0, import_validate.validate)({
+      background: "red"
+    }), (0, import_validate.validate)({
+      font: "arial"
+    }), (0, import_validate.validate)({
+      borderTop: "1px solid red"
+    }), expect(console.error).toHaveBeenCalled();
+  }), test("valid shortform values", () => {
+    (0, import_validate.validate)({
+      flex: 1
+    }), (0, import_validate.validate)({
+      margin: 10
+    }), (0, import_validate.validate)({
+      margin: "calc(10 * 1px)"
+    }), (0, import_validate.validate)({
+      margin: "calc(10 * calc(10 * 1px))"
+    }), expect(console.error).not.toHaveBeenCalled();
+  }), test("invalid shortform multi-values", () => {
+    (0, import_validate.validate)({
+      flex: "1 1 25%"
+    }), (0, import_validate.validate)({
+      margin: "10px 20px"
+    }), (0, import_validate.validate)({
+      margin: "calc(10 * 1px) var(--test)"
+    }), expect(console.error).toHaveBeenCalledTimes(3);
+  });
+});