apphouse/dist/utils/JS.test.ts

Component library for React that uses observable state management and theme-able components.

import JS from "./JS";

const exampleJs = {
  a: 1,
  b: "2",
  c: [1, 2, 3],
  d: [{ a: 1 }, { b: 2 }, { c: 3, d: 4 }],
  "hello-theme": {},
  "c-d": {
    d: 3,
    e: "4",
    f: [1, 2, 3],
  },
};
const exampleStr = `a:1,b:"2",c:[1,2,3],d:[{a:1},{b:2},{c:3,d:4}],"hello-theme":{},"c-d":{d:3,e:"4",f:[1,2,3]}`;
const exampleStrObj = `{${exampleStr}}`;

describe("JS", () => {
  test("prettify", () => {
    const result = JS.prettify(
      `fontSize:"72px",background:"linear-gradient(45deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)",-webkit-text-fill-color:"transparent",-webkit-background-clip:"text"`
    );
    expect(result).toBe(`{
  fontSize: "72px",
  background: "linear-gradient(45deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)",
  "-webkit-text-fill-color": "transparent",
  "-webkit-background-clip": "text"
    }`);
  });
  test("stringify", () => {
    expect(JS.stringify(exampleJs).response).toBe(exampleStr);
  });
  test("stringify, pretty = true", () => {
    expect(JS.stringify(exampleJs, true).response).toBe(`{
  a: 1,
  b: "2",
  c: [1, 2, 3],
  d: [{
    a: 1
  }, {
    b: 2
  }, {
    c: 3,
    d: 4
  }],
  "hello-theme": {},
  "c-d": {
    d: 3,
    e: "4",
    f: [1, 2, 3]
  }
}`);
  });

  test("jsSingleQuotesToDouble", () => {
    expect(
      JS.jsSingleQuotesToDouble(`hello: 'world', cruel: 3, world: "4"`)
    ).toBe(`hello: "world", cruel: 3, world: "4"`);
  });
  test("jsStringToObject simple", () => {
    expect(
      JS.jsStringToObject(
        `{background: "green", width: "20px", height: "20px", opacity: 1}`
      ).response
    ).toEqual({
      background: "green",
      width: "20px",
      height: "20px",
      opacity: 1,
    });
  });
  test("jsStringToObject complex", () => {
    expect(JS.jsStringToObject(exampleStrObj).response).toEqual(exampleJs);
  });

  test("jsStringToObject complex", () => {
    expect(JS.jsStringToObject(`{ image: "url(http://)"}`).response).toEqual({
      image: "url(http://)",
    });
  });
  test("jsStringToObject returns error when error", () => {
    expect(JS.jsStringToObject("{e'lsof' ddd}").error).toEqual(
      "SyntaxError: Unexpected token e in JSON at position 1"
    );
  });

  test("jsStringObjectToJSONObject jsonNotation = true", () => {
    expect(JS.jsStringObjectToJSONObject(exampleStrObj)).toEqual(
      `{"a":1,"b":"2","c":[1,2,3],"d":[{"a":1},{"b":2},{"c":3,"d":4}],"hello-theme":{},"c-d":{"d":3,"e":"4","f":[1,2,3]}}`
    );
  });

  test("ensure prettify does not remove spaces from value", () => {
    expect(
      JS.prettify(`padding: '3px 4px 20px 80px', borderRadius: "3px 0 0 0"`)
    ).toBe(`{
  padding: '3px 4px 20px 80px',
  borderRadius: "3px 0 0 0"
}`);
  });

  test("ensure stringify does not remove spaces from value", () => {
    const value = { padding: "3px 4px 20px 80px", borderRadius: "3px 0 0 0" };
    expect(JS.stringify(value).response).toBe(
      `padding:"3px 4px 20px 80px",borderRadius:"3px 0 0 0"`
    );
  });

  test("ensure urls are kept", () => {
    const value = JS.stringify({
      width: "300",
      height: "300",
      borderStyle: "dotted",
      borderWidth: "thick",
      backgroundImage:
        "url('https://cdn.vox-cdn.com/thumbor/6D7EpZ2PfDdXweRlfnbEDj-pqvY=/0x0:4400x2200/1200x800/filters:focal(1848x748:2552x1452)/cdn.vox-cdn.com/uploads/chorus_image/image/70520841/ST3_Production_Still_4.0.jpg')",
      backgroundSize: "contain",
    });
    expect(value.response).toEqual(
      `width:"300",height:"300",borderStyle:"dotted",borderWidth:"thick",backgroundImage:"url('https://cdn.vox-cdn.com/thumbor/6D7EpZ2PfDdXweRlfnbEDj-pqvY=/0x0:4400x2200/1200x800/filters:focal(1848x748:2552x1452)/cdn.vox-cdn.com/uploads/chorus_image/image/70520841/ST3_Production_Still_4.0.jpg')",backgroundSize:"contain`
    );
  });

  // const imageURL = `url('https://cdn.vox-cdn.com/thumbor/6D7EpZ2PfDdXweRlfnbEDj-pqvY=/0x0:4400x2200/1200x800/filters:focal(1848x748:2552x1452)/cdn.vox-cdn.com/uploads/chorus_image/image/70520841/ST3_Production_Still_4.0.jpg')`;
  const imageURL = `https://cdn.vox-cdn.com/thumbor/6D7EpZ2PfDdXweRlfnbEDj-pqvY=`;
  describe("objectToString", () => {
    test("ensure string value are properly quoted", () => {
      let str = JS.objectToString({ backgroundImage: "url('https')" });
      expect(str).toEqual(`backgroundImage:"url('https')",`);

      str = JS.objectToString({ backgroundImage: "url('https:')" });
      expect(str).toEqual(`backgroundImage:"url('https:')",`);
      str = JS.objectToString({ backgroundImage: "url('https::')" });
      expect(str).toEqual(`backgroundImage:"url('https::')",`);
      str = JS.objectToString({ backgroundImage: imageURL });
      expect(str).toEqual(`backgroundImage:"${imageURL}",`);
    });
  });

  describe("jsStringToObject", () => {
    test("ensure string value are split", () => {
      const str = JS.jsStringToObject(`{ backgroundImage: "${imageURL}" }`);
      expect(str).toEqual(`backgroundImage:"${imageURL}"`);
    });
  });

  describe("escapeJSON", () => {
    test("ensure string is escaped", () => {
      const str = JS.escapeJSON(`{ backgroundImage: "${imageURL}" }`);
      expect(str).toEqual(
        `{ backgroundImage: \\\"https:\\/\\/cdn.vox-cdn.com\\/thumbor\\/6D7EpZ2PfDdXweRlfnbEDj-pqvY=\\\" }`
      );
    });
  });

  describe("stringToObject", () => {
    test("handles empty object", () => {
      let value = JS.stringToObject("{}");
      expect(value).toEqual({});
    });
    test("handles empty string", () => {
      let value = JS.stringToObject("");
      expect(value).toEqual({});
    });
    test("handles simple object", () => {
      let value = JS.stringToObject(`{background: "red"}`);
      expect(value).toEqual({ background: '"red"' });
      value = JS.stringToObject(`{background: 0}`);
      expect(value).toEqual({ background: 0 });
    });
  });
});