Feature: Unit testing

__tests__/components/Layout_test.re

@@ -0,0 +1,38 @@
+open Jest;
+open Expect;
+open Layout;
+open Helmet;
+
+describe("Layout", () => {
+  test("metaToHelmet - meta with name", () => {
+    let metaWithName =
+      MetaWithName(
+        "description",
+        "A playful avatar generator for the modern age.",
+      );
+    let actual = metaToHelmet(metaWithName);
+    let expected =
+      finalMetaItem(
+        ~name="description",
+        ~content="A playful avatar generator for the modern age.",
+        (),
+      );
+    expect(actual) |> toEqual(expected);
+  });
+
+  test("metaToHelmet - meta with property", () => {
+    let metaWithProperty =
+      MetaWithProperty(
+        "og:description",
+        "A playful avatar generator for the modern age.",
+      );
+    let actual = metaToHelmet(metaWithProperty);
+    let expected =
+      finalMetaItem(
+        ~property="og:description",
+        ~content="A playful avatar generator for the modern age.",
+        (),
+      );
+    expect(actual) |> toEqual(expected);
+  });
+});

__tests__/re/ColorSwatch_test.re

@@ -0,0 +1,60 @@
+open Jest;
+open Expect;
+open ReactTestingLibrary;
+
+describe("ColorSwatch", () => {
+  test("render enabled", () => {
+    let color = "#EEEFF4";
+    let selectedColor = "#EEEFF4";
+    let onSelectColor = value => {
+      expect(value) |> toBe("#EEEFF4") |> ignore;
+      Js.log("onSelectColor -> " ++ value);
+    };
+
+    let rendered =
+      <ColorSwatch
+        key=color
+        value=color
+        disabled={color === "#EEEFF5"}
+        selected={color === selectedColor}
+        onSelect={value => onSelectColor(value)}
+      />
+      |> render;
+
+    act(() =>
+      rendered
+      |> getByTestId(~matcher=`Str("enabled-color-swatch"))
+      |> FireEvent.click
+      |> ignore
+    );
+
+    rendered
+    |> getByTestId(~matcher=`Str("enabled-color-swatch"))
+    |> expect
+    |> toMatchSnapshot;
+  });
+
+  test("render disabled", () => {
+    let color = "#EEEFF5";
+    let selectedColor = "#EEEFF5";
+    let onSelectColor = value => {
+      expect(value) |> toBe("#EEEFF5");
+      Js.log("onSelectColor -> " ++ value);
+    };
+
+    let rendered =
+      <ColorSwatch
+        key=color
+        value=color
+        disabled={color === "#EEEFF5"}
+        selected={color === selectedColor}
+        onSelect={value => onSelectColor(value)}
+      />
+      |> render;
+
+    rendered
+    |> getByTestId(~matcher=`Str("disabled-color-swatch"))
+    |> expect
+    |> toMatchSnapshot;
+  });
+});

__tests__/re/__snapshots__/ColorSwatch_test.bs.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorSwatch render disabled 1`] = `
+<div
+  class="ColorSwatch-disabled"
+  data-testid="disabled-color-swatch"
+/>
+`;
+
+exports[`ColorSwatch render enabled 1`] = `
+<button
+  class="ColorSwatch"
+  data-testid="enabled-color-swatch"
+>
+  <img
+    height="20"
+    src="/images/checkmark.svg"
+    width="20"
+  />
+</button>
+`;

babel.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  presets: [
+    [
+      'babel-preset-gatsby',
+      {
+        targets: {
+          browsers: ['>0.25%', 'not dead'],
+        },
+      },
+    ],
+  ],
+  env: {
+    test: {
+      plugins: ['transform-es2015-modules-commonjs'],
+    },
+  },
+}

bsconfig.json

@@ -4,10 +4,17 @@
     "react-jsx": 3
   },
   "bsc-flags": ["-bs-super-errors"],
-  "sources": {
-    "dir": "src",
-    "subdirs": true
-  },
+  "sources": [
+    {
+      "dir": "src",
+      "subdirs": true
+    },
+    {
+      "dir": "__tests__",
+      "type": "dev",
+      "subdirs": true
+    }
+  ],
   "package-specs": [
     {
       "module": "es6",
@@ -17,5 +24,9 @@
   "suffix": ".bs.js",
   "namespace": true,
   "bs-dependencies": ["reason-react"],
+  "bs-dev-dependencies": [
+    "@glennsl/bs-jest",
+    "bs-react-testing-library"
+  ],
   "refmt": 3
 }

package.json

@@ -4,6 +4,7 @@
   "version": "1.0.0",
   "dependencies": {
     "gatsby": "^2.21.31",
+    "gatsby-plugin-compile-es6-packages": "^2.1.0",
     "gatsby-plugin-google-analytics": "^2.3.1",
     "gatsby-plugin-manifest": "^2.4.3",
     "gatsby-plugin-netlify": "^2.3.2",
@@ -12,12 +13,12 @@
     "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-source-filesystem": "^2.3.3",
     "gatsby-transformer-json": "^2.4.2",
-    "html2canvas": "^1.0.0-rc.5",
+    "html2canvas": "1.0.0-rc.5",
     "normalize.css": "^8.0.0",
     "react": "^16.5.1",
     "react-dom": "^16.5.1",
     "react-helmet": "^6.0.0",
-    "reason-react": "0.8.0"
+    "reason-react": "0.9.1"
   },
   "keywords": [
     "persona-avatar-generator",
@@ -30,14 +31,30 @@
     "build": "npm run re:build && npx patch-package && gatsby build",
     "develop": "gatsby develop",
     "format": "prettier --write '**/*.js'",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest --verbose"
   },
   "devDependencies": {
+    "@glennsl/bs-jest": "^0.6.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
+    "babel-preset-gatsby": "^0.8.0",
     "bs-platform": "^7.3.2",
+    "bs-react-testing-library": "^0.8.0",
+    "identity-obj-proxy": "^3.0.0",
     "prettier": "2.0.5"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/draftbit/persona-avatar-generator"
+  },
+  "jest": {
+    "testPathIgnorePatterns": [
+      "<rootDir>/.cache"
+    ],
+    "transformIgnorePatterns": [
+      "/node_modules/(?!@glennsl/bs-jest|bs-dom-testing-library|bs-react-testing-library|bs-platform|reason-react).+\\.js$"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less)$": "identity-obj-proxy"
+    }
   }
 }

src/re/ColorSwatch.re

@@ -1,15 +1,20 @@
 [%bs.raw {|require('./ColorSwatch.css')|}];
 
 [@react.component]
-let make = (~value, ~selected, ~disabled=false, ~onSelect) => {
-  disabled
-    ? <div className="ColorSwatch-disabled" />
-    : <button
+let make = (~value, ~selected, ~disabled=false, ~onSelect) =>
+  disabled ?
+    <TestId id="disabled-color-swatch">
+      <div className="ColorSwatch-disabled" />
+    </TestId> :
+    <TestId id="enabled-color-swatch">
+      <button
         onClick={_ => onSelect(value)}
         style={ReactDOMRe.Style.make(~backgroundColor={j|#$value|j}, ())}
         className="ColorSwatch">
-        {selected
-           ? <img width="20" height="20" src="/images/checkmark.svg" />
-           : React.null}
-      </button>;
-};
+        {
+          selected ?
+            <img width="20" height="20" src="/images/checkmark.svg" /> :
+            React.null
+        }
+      </button>
+    </TestId>;

src/re/TestId.re

@@ -0,0 +1,3 @@
+[@react.component]
+let make = (~id, ~children) =>
+  React.cloneElement(children, {"data-testid": id});