Merge pull request #6 from compositive/improve-test-suite

.vscode/settings.json

@@ -2,5 +2,6 @@
   "files.associations": {
     "stdio.h": "c",
     "node_api.h": "c"
-  }
-}
+  },
+  "jest.pathToJest": "npm test --"
+}

README.md

@@ -48,6 +48,17 @@ const size = createStringMeasurer(
 console.log(size); // "{ width: ..., height: ... }"
 ```
 
+### `makeImageDataFromURL`
+
+```js
+const { makeImageDataFromURL } = require("node-sketch-bridge");
+
+const base64EncodedImage = makeImageDataFromURL("https://placekitten.com/200/300");
+
+// The buffer will contain the PNG-encoded image of a kitten. Meow.
+const imageBuffer = Buffer.from(base64EncodedImage, "base64");
+```
+
 ## Development
 
 First, run `npm install`.

package.json

@@ -11,6 +11,7 @@
     "node-gyp-build": "^3.3.0"
   },
   "devDependencies": {
+    "@types/jest": "^24.0.25",
     "jest": "^24.9.0",
     "node-addon-api": "^1.7.1",
     "prebuildify": "^2.6.0"

tests/createStringMeasurer.test.js

@@ -1,10 +1,104 @@
 const { createStringMeasurer } = require("../");
 
-test("measures an empty string", () => {
-  const size = createStringMeasurer([], 400);
+const testBody = ({ content, within, expectedWidth, expectedHeight, ...textStyles }) => {
+  const { width, height } = createStringMeasurer([{ content, textStyles }], within);
 
-  expect(size).toEqual({
-    height: 15,
-    width: 0
+  // TODO(lordofthelake): Sketch uses round numbers for widths.
+  // Considering that these are pixels, would it make sense to return rounded numbers too?
+  const roundedUpWidth = Math.ceil(width);
+
+  expect(roundedUpWidth).toBe(expectedWidth);
+  expect(height).toBe(expectedHeight);
+};
+
+const testDescription = (...parameters) => {
+  let textStyles = parameters.includes("fontFamily") ? "$fontFamily" : "[System font]";
+  if (parameters.includes("fontWeight")) textStyles += " $fontWeight";
+  if (parameters.includes("fontStyle")) textStyles += " $fontStyle";
+  if (parameters.includes("fontSize")) textStyles += " $fontSize\u200bpx";
+  if (parameters.includes("lineHeight")) textStyles += "/$lineHeight\u200bpx";
+  if (parameters.includes("letterSpacing")) textStyles += " [$letterSpacing\u200bpx letter spacing]";
+  if (parameters.includes("textAlign")) textStyles += ", $textAlign-aligned,";
+
+  return `within $within\u200bpx, measures \`$content\` in ${textStyles} to be $expectedWidth✕$expectedHeight\u200bpx`;
+};
+
+describe("createStringMeasurer()", () => {
+  it("measures an empty string", () => {
+    const size = createStringMeasurer([], 400);
+
+    expect(size).toEqual({
+      height: 15,
+      width: 0
+    });
+  });
+
+  describe("when setting a line height", () => {
+    test.each`
+      content    | fontFamily          | fontSize | lineHeight | within | expectedWidth | expectedHeight
+      ${"Hello"} | ${"Helvetica"}      | ${14}    | ${16}      | ${400} | ${32}         | ${16}
+      ${"Hello"} | ${"Helvetica"}      | ${24}    | ${26}      | ${400} | ${55}         | ${26}
+      ${"Hello"} | ${"Helvetica"}      | ${72}    | ${74}      | ${400} | ${165}        | ${74}
+      ${"Hello"} | ${"Helvetica"}      | ${120}   | ${122}     | ${400} | ${274}        | ${122}
+      ${"Hello"} | ${"Impact"}         | ${24}    | ${26}      | ${400} | ${52}         | ${26}
+      ${"Hello"} | ${"Helvetica Neue"} | ${24}    | ${26}      | ${400} | ${55}         | ${26}
+      ${"Hello"} | ${"Georgia"}        | ${24}    | ${26}      | ${400} | ${58}         | ${26}
+    `(testDescription("fontFamily", "fontSize", "lineHeight"), testBody);
+  });
+
+  describe("when spaces are present", () => {
+    test.each`
+      content   | fontFamily     | fontSize | lineHeight | within | expectedWidth | expectedHeight
+      ${"."}    | ${"Helvetica"} | ${24}    | ${28}      | ${400} | ${7}          | ${28}
+      ${".."}   | ${"Helvetica"} | ${24}    | ${28}      | ${400} | ${14}         | ${28}
+      ${". ."}  | ${"Helvetica"} | ${24}    | ${28}      | ${400} | ${21}         | ${28}
+      ${".  ."} | ${"Helvetica"} | ${24}    | ${28}      | ${400} | ${27}         | ${28}
+    `(testDescription("fontFamily", "fontSize", "lineHeight"), testBody);
+  });
+
+  describe("when the text width exceeds the available space", () => {
+    test.each`
+      content          | fontFamily     | fontSize | lineHeight | within | expectedWidth | expectedHeight
+      ${"Hello"}       | ${"Helvetica"} | ${24}    | ${29}      | ${100} | ${55}         | ${29}
+      ${"Hello Hello"} | ${"Helvetica"} | ${24}    | ${29}      | ${200} | ${117}        | ${29}
+      ${"Hello Hello"} | ${"Helvetica"} | ${24}    | ${29}      | ${100} | ${62}         | ${58}
+      ${"HelloHello"}  | ${"Helvetica"} | ${24}    | ${29}      | ${100} | ${97}         | ${58}
+    `(testDescription("fontFamily", "fontSize", "lineHeight"), testBody);
+  });
+
+  describe("when using different font weights and styles", () => {
+    test.each`
+      content    | fontFamily     | fontSize | lineHeight | within | fontWeight  | fontStyle   | expectedWidth | expectedHeight
+      ${"Hello"} | ${"Helvetica"} | ${24}    | ${29}      | ${100} | ${"normal"} | ${"normal"} | ${55}         | ${29}
+      ${"Hello"} | ${"Helvetica"} | ${24}    | ${29}      | ${100} | ${"normal"} | ${"italic"} | ${55}         | ${29}
+      ${"Hello"} | ${"Helvetica"} | ${24}    | ${29}      | ${100} | ${"bold"}   | ${"normal"} | ${59}         | ${29}
+      ${"Hello"} | ${"Helvetica"} | ${24}    | ${29}      | ${100} | ${"bold"}   | ${"italic"} | ${59}         | ${29}
+      ${"Hello"} | ${"Helvetica"} | ${24}    | ${29}      | ${100} | ${"300"}    | ${"normal"} | ${55}         | ${29}
+      ${"Hello"} | ${"Helvetica"} | ${24}    | ${29}      | ${100} | ${"300"}    | ${"italic"} | ${55}         | ${29}
+    `(testDescription("fontFamily", "fontSize", "fontWeight", "fontStyle", "lineHeight"), testBody);
+  });
+
+  describe("when using different alignments", () => {
+    const loremIpsum =
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+
+    test.each`
+      content       | fontFamily     | fontSize | lineHeight | textAlign    | within | expectedWidth | expectedHeight
+      ${loremIpsum} | ${"Helvetica"} | ${24}    | ${29}      | ${"left"}    | ${200} | ${200}        | ${232}
+      ${loremIpsum} | ${"Helvetica"} | ${24}    | ${29}      | ${"right"}   | ${200} | ${200}        | ${232}
+      ${loremIpsum} | ${"Helvetica"} | ${24}    | ${29}      | ${"center"}  | ${200} | ${200}        | ${232}
+      ${loremIpsum} | ${"Helvetica"} | ${24}    | ${29}      | ${"justify"} | ${200} | ${200}        | ${232}
+    `(testDescription("fontFamily", "fontSize", "textAlign", "lineHeight"), testBody);
+  });
+
+  describe("when using letter spacing", () => {
+    test.each`
+      content    | fontFamily     | fontSize | lineHeight | letterSpacing | within | expectedWidth | expectedHeight
+      ${"Hello"} | ${"Helvetica"} | ${24}    | ${29}      | ${-1}         | ${200} | ${50}         | ${29}
+      ${"Hello"} | ${"Helvetica"} | ${24}    | ${29}      | ${0}          | ${200} | ${55}         | ${29}
+      ${"Hello"} | ${"Helvetica"} | ${24}    | ${29}      | ${1}          | ${200} | ${60}         | ${29}
+      ${"Hello"} | ${"Helvetica"} | ${24}    | ${29}      | ${10}         | ${200} | ${105}        | ${29}
+      ${"Hello"} | ${"Helvetica"} | ${24}    | ${29}      | ${20}         | ${200} | ${155}        | ${29}
+    `(testDescription("fontFamily", "fontSize", "letterSpacing", "lineHeight"), testBody);
   });
 });

tests/findFontName.test.js

@@ -1,10 +1,82 @@
 const { findFontName } = require("../");
 
-test("returns font name", () => {
-  const fontName = findFontName({
-    fontFamily: "Impact",
-    fontSize: 18
+const testEach = cases => {
+  test.each(cases)("for %p returns %s", (textStyle, expectedFontName) => {
+    if (expectedFontName instanceof RegExp) expect(findFontName(textStyle)).toMatch(expectedFontName);
+    else expect(findFontName(textStyle)).toEqual(expectedFontName);
   });
+};
 
-  expect(fontName).toEqual("Impact");
+describe("findFontName()", () => {
+  describe("with regular fonts", () => {
+    testEach([
+      // Regular font, one style available
+      [{ fontFamily: "Impact" }, "Impact"],
+      [{ fontFamily: "Impact", fonstStyle: "italic" }, "Impact"],
+
+      // Font with more variants
+      [{ fontFamily: "Helvetica", fontWeight: "bold" }, "Helvetica-Bold"],
+      [{ fontFamily: "Helvetica", fontStyle: "italic" }, "Helvetica-Oblique"],
+      [{ fontFamily: "Helvetica", fontStyle: "oblique" }, "Helvetica-Oblique"],
+      [{ fontFamily: "Helvetica", fontWeight: "300" }, "Helvetica-Light"],
+      [{ fontFamily: "Helvetica", fontWeight: "300", fontStyle: "italic" }, "Helvetica-LightOblique"]
+    ]);
+
+    describe("when a weight is missing, it uses the next one available", () => {
+      testEach([
+        [{ fontFamily: "Helvetica", fontWeight: "900" }, "Helvetica-Bold"],
+        [{ fontFamily: "Helvetica", fontWeight: "600" }, "Helvetica-Bold"],
+        [{ fontFamily: "Helvetica", fontWeight: "500" }, "Helvetica-Bold"],
+        [{ fontFamily: "Helvetica", fontWeight: "200" }, "Helvetica-Light"]
+      ]);
+    });
+  });
+
+  describe("for a system font, uses SF Text", () => {
+    testEach([
+      [{ fontFamily: ".AppleSystemUIFont" }, /^\.SFNS\w*(-Regular)?$/],
+      [{ fontFamily: "System" }, /^\.SFNS/],
+      [{ fontFamily: "System", fontSize: 12 }, /^\.SFNS\w*(-Regular)?$/],
+      [{ fontFamily: "System", fontWeight: "bold" }, /^\.SFNS\w*-Bold$/],
+      [{ fontFamily: "System", fontStyle: "italic" }, /^\.SFNS\w*-(Regular)?Italic$/],
+      [{ fontFamily: "System", fontWeight: "bold", fontStyle: "italic" }, /^\.SFNS\w*-BoldItalic$/],
+      [{ fontFamily: "System", fontStyle: "oblique" }, /^\.SFNS\w*-(Regular)?Italic$/]
+    ]);
+  });
+
+  describe("missing fonts default to the system font", () => {
+    testEach([[{ fontFamily: "MissingFont" }, /^\.SFNS\w*(-Regular)?$/]]);
+  });
+
+  describe("when the fontFamily property is missing", () => {
+    // TODO(lordofthelake): Does this make sense, considering the missing font case?
+    // Shouldn't it default to the system font?
+    it("defaults to Helvetica", () => {
+      expect(findFontName({})).toEqual("Helvetica");
+    });
+  });
+
+  describe("when the fontFamily property is blank", () => {
+    // TODO(lordofthelake): Coherence problem as above.
+    it("defaults to the system font", () => {
+      expect(findFontName({ fontFamily: "" })).toMatch(/^\.SFNS\w*(-Regular)?$/);
+    });
+  });
+
+  describe("when the fontWeight is invalid", () => {
+    it("when given a number, throws an error", () => {
+      // TODO(lordofthelake): Shouldn't this case be handled more gracefully?
+      expect(() => findFontName({ fontWeight: 300 })).toThrow("Could not get string length");
+    });
+
+    it("when given an invalid string, defaults to regular", () => {
+      expect(findFontName({ fontFamily: "Helvetica", fontWeight: "bolder" })).toEqual("Helvetica");
+    });
+  });
+
+  describe("when the fontStyle is invalid", () => {
+    it("returns the regular version", () => {
+      expect(findFontName({ fontFamily: "Helvetica", fontStyle: "happy" })).toEqual("Helvetica");
+    });
+  });
 });

tests/makeImageDataFromURL.test.js

@@ -1,15 +1,24 @@
 const { makeImageDataFromURL } = require("../");
 
-test("returns a default image", () => {
-  const data = makeImageDataFromURL();
+const itEncodesAsPNG = (description, ...args) => {
+  it(description, async () => {
+    const data = makeImageDataFromURL(...args);
 
-  expect(typeof data).toEqual("string");
-});
+    expect(typeof data).toEqual("string");
+    expect(Buffer.from(data, "base64")[0]).toBe(0x89); // PNG byte mark
+  });
+};
+
+describe("makeImageDataFromURL()", () => {
+  itEncodesAsPNG("returns a base64-encoded red image");
 
-test("returns a fetched image", () => {
-  const data = makeImageDataFromURL(
+  itEncodesAsPNG(
+    "returns the fetched image as a base64-encoded string",
     "https://www.mjt.me.uk/assets/images/smallest-png/openstreetmap.png"
   );
 
-  expect(typeof data).toEqual("string");
+  itEncodesAsPNG(
+    "re-encodes images in other formats to PNG",
+    "https://upload.wikimedia.org/wikipedia/commons/3/38/JPEG_example_JPG_RIP_001.jpg"
+  );
 });