@applicaster/zapp-react-native-ui-components 16.0.0-rc.6 → 16.0.0-rc.61

package/Components/MasterCell/DefaultComponents/Image/hoc/utils/__tests__/withDimensions.test.ts

@@ -1,205 +1,500 @@
-import { withDimensions } from "..";
+import { mergeQueryParams, withDimensions } from "..";
+
+const mockWarning = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-utils/logger", () => {
+  const mockLogger = {
+    addSubsystem: jest.fn(() => mockLogger),
+    warning: (...args) => mockWarning(...args),
+  };
+
+  return { coreLogger: mockLogger };
+});
 
 describe("withDimensions", () => {
   const width = 300;
   const height = 200;
+  const defaultTemplate = "width={{width}}&height={{height}}";
 
-  it("only width in the beginning", () => {
-    const url = "https://some_url?width=511&quality=95&sharpen=true";
+  beforeEach(() => {
+    mockWarning.mockClear();
+  });
 
-    const result = withDimensions(url, width, height);
+  describe("with default template (width={{width}}&height={{height}})", () => {
+    it("injects width and height into a URL without existing dimension params", () => {
+      const url = "https://some_url?quality=95&sharpen=true";
 
-    expect(result).toEqual(
-      `https://some_url?width=${width}&quality=95&sharpen=true`
-    );
-  });
+      const result = withDimensions(url, width, height, defaultTemplate);
 
-  it("only width in the middle", () => {
-    const url = "https://some_url?quality=95&width=511&sharpen=true";
+      expect(result).toContain("width=300");
+      expect(result).toContain("height=200");
+      expect(result).toContain("quality=95");
+      expect(result).toContain("sharpen=true");
+    });
 
-    const result = withDimensions(url, width, height);
+    it("replaces existing width and height params regardless of original size", () => {
+      const url =
+        "https://some_url?width=511&quality=95&height=400&sharpen=true";
 
-    expect(result).toEqual(
-      `https://some_url?quality=95&width=${width}&sharpen=true`
-    );
-  });
+      const result = withDimensions(url, width, height, defaultTemplate);
 
-  it("only height in the beginning", () => {
-    const url = "https://some_url?height=511&quality=95&sharpen=true";
+      expect(result).toContain("width=300");
+      expect(result).toContain("height=200");
+      expect(result).toContain("quality=95");
+    });
 
-    const result = withDimensions(url, width, height);
+    it("replaces width even when new width is larger than original", () => {
+      const largeWidth = 1024;
+      const url = "https://some_url?width=511&quality=95&sharpen=true";
 
-    expect(result).toEqual(
-      `https://some_url?height=${height}&quality=95&sharpen=true`
-    );
-  });
+      const result = withDimensions(url, largeWidth, height, defaultTemplate);
 
-  it("only height in the middle", () => {
-    const url = "https://some_url?quality=95&height=511&sharpen=true";
+      expect(result).toContain("width=1024");
+    });
 
-    const result = withDimensions(url, width, height);
+    it("replaces height even when new height is larger than original", () => {
+      const largeHeight = 1024;
+      const url = "https://some_url?height=511&quality=95&sharpen=true";
 
-    expect(result).toEqual(
-      `https://some_url?quality=95&height=${height}&sharpen=true`
-    );
-  });
+      const result = withDimensions(url, width, largeHeight, defaultTemplate);
 
-  it("width and height", () => {
-    const url = "https://some_url?width=511&quality=95&height=400&sharpen=true";
+      expect(result).toContain("height=1024");
+    });
 
-    const result = withDimensions(url, width, height);
+    it("adds width and height to URL with no query params", () => {
+      const url = "https://some_url";
 
-    expect(result).toEqual(
-      `https://some_url?width=${width}&quality=95&height=${height}&sharpen=true`
-    );
-  });
+      const result = withDimensions(url, width, height, defaultTemplate);
 
-  it("no width and no height", () => {
-    const url = "https://some_url?quality=95&sharpen=true";
+      expect(result).toContain("width=300");
+      expect(result).toContain("height=200");
+    });
 
-    const result = withDimensions(url, width, height);
+    it("truncates decimal width values", () => {
+      const decimalWidth = 243.42857142857142;
+      const url = "https://some_url?quality=95";
 
-    expect(result).toEqual("https://some_url?quality=95&sharpen=true");
-  });
+      const result = withDimensions(url, decimalWidth, height, defaultTemplate);
 
-  it("undefined width", () => {
-    const url = "https://some_url?width=511&quality=95&sharpen=true";
+      expect(result).toContain("width=243");
+    });
 
-    const result = withDimensions(url, undefined, height);
+    it("replaces URL with width=0 in the original", () => {
+      const url = "https://some_url?width=0&quality=95&sharpen=true";
 
-    expect(result).toEqual(
-      "https://some_url?width=511&quality=95&sharpen=true"
-    );
-  });
+      const result = withDimensions(url, width, height, defaultTemplate);
 
-  it("undefined height", () => {
-    const url = "https://some_url?height=511&quality=95&sharpen=true";
+      expect(result).toContain("width=300");
+    });
 
-    const result = withDimensions(url, width, undefined);
+    it("replaces URL with empty width in the original", () => {
+      const url = "https://some_url?width=&quality=95&sharpen=true";
 
-    expect(result).toEqual(
-      "https://some_url?height=511&quality=95&sharpen=true"
-    );
+      const result = withDimensions(url, width, height, defaultTemplate);
+
+      expect(result).toContain("width=300");
+    });
   });
 
-  it("only Width", () => {
-    const url = "https://some_url?Width=511&quality=95&sharpen=true";
+  describe("with custom template", () => {
+    it("uses custom short param names (w, h)", () => {
+      const template = "w={{width}}&h={{height}}";
+      const url = "https://cdn.example.com/image.jpg?quality=95";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, template);
 
-    expect(result).toEqual(
-      `https://some_url?Width=${width}&quality=95&sharpen=true`
-    );
-  });
+      expect(result).toContain("w=300");
+      expect(result).toContain("h=200");
+      expect(result).toContain("quality=95");
+    });
 
-  it("only heighT", () => {
-    const url = "https://some_url?heighT=511&quality=95&sharpen=true";
+    it("uses template with combined size param (size=WxH)", () => {
+      const template = "size={{width}}x{{height}}";
+      const url = "https://cdn.example.com/image.jpg?quality=95";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, template);
 
-    expect(result).toEqual(
-      `https://some_url?heighT=${height}&quality=95&sharpen=true`
-    );
-  });
+      expect(result).toContain(`size=${width}x${height}`);
+      expect(result).toContain("quality=95");
+    });
 
-  it("no params", () => {
-    const url = "https://some_url";
+    it("replaces existing custom param with same key", () => {
+      const template = "w={{width}}&h={{height}}";
+      const url = "https://cdn.example.com/image.jpg?w=999&h=888&quality=95";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, template);
 
-    expect(result).toEqual(url);
-  });
+      expect(result).toContain("w=300");
+      expect(result).toContain("h=200");
+      expect(result).not.toContain("w=999");
+      expect(result).not.toContain("h=888");
+    });
 
-  it("round input width", () => {
-    const width = 243.42857142857142;
-    const url = "https://some_url?width=511&quality=95&sharpen=true";
+    it("handles template with only width", () => {
+      const template = "w={{width}}";
+      const url = "https://cdn.example.com/image.jpg";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, template);
 
-    expect(result).toEqual(
-      "https://some_url?width=243&quality=95&sharpen=true"
-    );
-  });
+      expect(result).toContain("w=300");
+      expect(result).not.toContain("height");
+    });
 
-  it("takes original width when provided width more than original", () => {
-    const width = 1024;
-    const url = "https://some_url?width=511&quality=95&sharpen=true";
+    it("handles template with only height", () => {
+      const template = "h={{height}}";
+      const url = "https://cdn.example.com/image.jpg";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, template);
 
-    expect(result).toEqual(url);
-  });
+      expect(result).toContain("h=200");
+      expect(result).not.toContain("width");
+    });
 
-  it("takes original height when provided height more than original", () => {
-    const height = 1024;
-    const url = "https://some_url?height=511&quality=95&sharpen=true";
+    it("handles case-insensitive placeholders", () => {
+      const template = "w={{Width}}&h={{HEIGHT}}";
+      const url = "https://cdn.example.com/image.jpg";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, template);
 
-    expect(result).toEqual(url);
+      expect(result).toContain("w=300");
+      expect(result).toContain("h=200");
+    });
   });
 
-  it("doesnt touch url if no width value is provided", () => {
-    const url = "https://some_url?width=&quality=95&sharpen=true";
+  describe("no template provided", () => {
+    it("returns original url when template is undefined", () => {
+      const url = "https://some_url?width=511&quality=95&sharpen=true";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, undefined);
 
-    expect(result).toEqual(url);
-  });
+      expect(result).toEqual(url);
+    });
+
+    it("returns original url when template is empty string", () => {
+      const url = "https://some_url?width=511&quality=95&sharpen=true";
+
+      const result = withDimensions(url, width, height, "");
+
+      expect(result).toEqual(url);
+    });
 
-  it("doesnt touch url if width=0", () => {
-    const url = "https://some_url?width=0&quality=95&sharpen=true";
+    it("returns original url when template is null", () => {
+      const url = "https://some_url?width=511&quality=95&sharpen=true";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, null);
 
-    expect(result).toEqual(url);
+      expect(result).toEqual(url);
+    });
   });
 
-  it("doesnt touch url if no height value is provided", () => {
-    const url = "https://some_url?height=&quality=95&sharpen=true";
+  describe("invalid / malformed template mappings", () => {
+    it("ignores params with unrecognized placeholders like {{heit}}", () => {
+      const template = "width={{width}}&height={{heit}}";
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("width=300");
+      expect(result).not.toContain("heit");
+      expect(result).not.toContain("height");
+      expect(result).toContain("quality=95");
+    });
+
+    it("ignores params with typo placeholder and keeps valid ones", () => {
+      const template = "w={{wdth}}&h={{height}}";
+      const url = "https://cdn.example.com/image.jpg?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("h=200");
+      expect(result).not.toContain("wdth");
+      expect(result).not.toContain("w=");
+      expect(result).toContain("quality=95");
+    });
+
+    it("returns original url when all template params are invalid", () => {
+      const template = "w={{wdth}}&h={{hght}}";
+      const url = "https://cdn.example.com/image.jpg?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toEqual(url);
+    });
+
+    it("ignores completely broken placeholder syntax", () => {
+      const template = "width={{width}}&height{{heit}}";
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("width=300");
+      expect(result).not.toContain("heit");
+      expect(result).toContain("quality=95");
+    });
+
+    it("ignores param with empty placeholder {{}}", () => {
+      const template = "width={{width}}&height={{}}";
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("width=300");
+      expect(result).not.toContain("{{}}");
+    });
+
+    it("ignores malformed placeholder with single closing brace {{heit}", () => {
+      const template = "width={{width}}&height={{heit}";
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("width=300");
+      expect(result).not.toContain("heit");
+      expect(result).toContain("quality=95");
+    });
+
+    it("ignores malformed placeholder missing closing braces entirely", () => {
+      const template = "width={{width}}&height={{height";
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("width=300");
+      expect(result).not.toContain("{{height");
+      expect(result).toContain("quality=95");
+    });
+
+    it("logs a warning for each invalid placeholder", () => {
+      const template = "width={{width}}&height={{heit}}";
+      const url = "https://some_url?quality=95";
+
+      withDimensions(url, width, height, template);
+
+      expect(mockWarning).toHaveBeenCalledTimes(1);
 
-    const result = withDimensions(url, width, height);
+      expect(mockWarning).toHaveBeenCalledWith(
+        expect.objectContaining({
+          message: expect.stringContaining("{{heit}}"),
+          data: expect.objectContaining({
+            invalidNames: ["heit"],
+          }),
+        })
+      );
+    });
 
-    expect(result).toEqual(url);
+    it("logs a warning for each dropped param pair independently", () => {
+      const template = "w={{wdth}}&h={{hght}}";
+      const url = "https://cdn.example.com/image.jpg?quality=95";
+
+      withDimensions(url, width, height, template);
+
+      expect(mockWarning).toHaveBeenCalledTimes(2);
+    });
+
+    it("does not log when all placeholders are valid", () => {
+      const url = "https://some_url?quality=95";
+
+      withDimensions(url, width, height, defaultTemplate);
+
+      expect(mockWarning).not.toHaveBeenCalled();
+    });
   });
 
-  it("doesnt touch url if height=0", () => {
-    const url = "https://some_url?height=0&quality=95&sharpen=true";
+  describe("leading question mark in template", () => {
+    it("strips leading ? from template", () => {
+      const template = "?width={{width}}&height={{height}}";
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("width=300");
+      expect(result).toContain("height=200");
+      expect(result).toContain("quality=95");
+    });
+
+    it("strips leading ? with whitespace from template", () => {
+      const template = "  ?width={{width}}&height={{height}}";
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("width=300");
+      expect(result).toContain("height=200");
+    });
+
+    it("strips leading ? on URL without existing query params", () => {
+      const template = "?w={{width}}&h={{height}}";
+      const url = "https://cdn.example.com/image.jpg";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("w=300");
+      expect(result).toContain("h=200");
+    });
+
+    it("handles template that is just ?", () => {
+      const template = "?";
+      const url = "https://some_url?quality=95";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, template);
 
-    expect(result).toEqual(url);
+      expect(result).toEqual(url);
+    });
   });
 
-  it("returns original url ir url is undefined", () => {
-    const url = undefined;
+  describe("URLs without query params", () => {
+    it("adds params to a clean URL with no query string", () => {
+      const url = "https://cdn.example.com/image.jpg";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, defaultTemplate);
 
-    expect(result).toEqual(url);
+      expect(result).toContain("width=300");
+      expect(result).toContain("height=200");
+    });
+
+    it("adds custom params to a clean URL with no query string", () => {
+      const template = "w={{width}}&h={{height}}";
+      const url = "https://cdn.example.com/path/to/image.jpg";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("w=300");
+      expect(result).toContain("h=200");
+    });
+
+    it("adds combined size param to URL with no query string", () => {
+      const template = "size={{width}}x{{height}}";
+      const url = "https://cdn.example.com/image.jpg";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("size=300x200");
+    });
+
+    it("adds only valid params to clean URL when template has invalid mappings", () => {
+      const template = "width={{width}}&height={{heit}}";
+      const url = "https://cdn.example.com/image.jpg";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("width=300");
+      expect(result).not.toContain("heit");
+    });
   });
 
-  it("returns original url ir url is empty string", () => {
-    const url = "";
+  describe("edge cases", () => {
+    it("returns original url when url is undefined", () => {
+      const result = withDimensions(undefined, width, height, defaultTemplate);
+
+      expect(result).toEqual(undefined);
+    });
+
+    it("returns original url when url is empty string", () => {
+      const result = withDimensions("", width, height, defaultTemplate);
+
+      expect(result).toEqual("");
+    });
+
+    it("returns original url when url is invalid (non-http)", () => {
+      const url = "invalid_url";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, defaultTemplate);
 
-    expect(result).toEqual(url);
+      expect(result).toEqual(url);
+    });
+
+    it("returns original url when url is a number passed as string", () => {
+      const url = 1 as unknown as string;
+
+      const result = withDimensions(url, width, height, defaultTemplate);
+
+      expect(result).toEqual(url);
+    });
+
+    it("returns original url when width is undefined and height is undefined", () => {
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, undefined, undefined, defaultTemplate);
+
+      expect(result).toEqual(url);
+    });
+
+    it("returns original url when width is 0 and height is 0", () => {
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, 0, 0, defaultTemplate);
+
+      expect(result).toEqual(url);
+    });
+
+    it("still works when only width is provided and does not inject height=0", () => {
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, width, undefined, defaultTemplate);
+
+      expect(result).toContain("width=300");
+      expect(result).not.toContain("height=0");
+      expect(result).not.toContain("height=");
+    });
+
+    it("still works when only height is provided and does not inject width=0", () => {
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, undefined, height, defaultTemplate);
+
+      expect(result).toContain("height=200");
+      expect(result).not.toContain("width=0");
+      expect(result).not.toContain("width=");
+    });
+
+    it("preserves URL hash fragment", () => {
+      const url = "https://some_url?quality=95#section1";
+
+      const result = withDimensions(url, width, height, defaultTemplate);
+
+      expect(result).toContain("width=300");
+      expect(result).toContain("height=200");
+    });
   });
+});
 
-  it("returns original url ir url is invalid", () => {
-    const url = "invalid_url";
+describe("mergeQueryParams", () => {
+  it("adds new params to URL without existing params", () => {
+    const result = mergeQueryParams(
+      "https://example.com/img.jpg",
+      "w=300&h=200"
+    );
 
-    const result = withDimensions(url, width, height);
+    expect(result).toContain("w=300");
+    expect(result).toContain("h=200");
+  });
 
-    expect(result).toEqual(url);
+  it("overwrites existing params with same key", () => {
+    const result = mergeQueryParams(
+      "https://example.com/img.jpg?w=999&quality=95",
+      "w=300"
+    );
+
+    expect(result).toContain("w=300");
+    expect(result).not.toContain("w=999");
+    expect(result).toContain("quality=95");
   });
 
-  it("returns original url ir url is invalid", () => {
-    const url = 1 as unknown as string;
+  it("returns original URL if parsing fails", () => {
+    const badUrl = "not a url at all";
+
+    const result = mergeQueryParams(badUrl, "w=300");
 
-    const result = withDimensions(url, width, height);
+    expect(result).toEqual(badUrl);
+  });
+
+  it("handles combined values (e.g. size=300x200)", () => {
+    const result = mergeQueryParams(
+      "https://example.com/img.jpg?quality=95",
+      "size=300x200"
+    );
 
-    expect(result).toEqual(url);
+    expect(result).toContain("size=300x200");
+    expect(result).toContain("quality=95");
   });
 });