isso: js: Add Jest testing config and examples

isso/js/jest.config.js

@@ -0,0 +1,38 @@
+/* https://jestjs.io/docs/configuration
+ *
+ * Best practices by mailchimp:
+ * https://mailchimp.com/developer/open-commerce/docs/testing-requirements/
+ * When writing your test:
+ *  - Do not add extra describe blocks. Jest tests are automatically file-scoped,
+ *    so a file that performs a single test does not need a describe block in it.
+ *    You may add multiple describe blocks to group related tests within one
+ *    file, but you should not have a file with only a single describe block in
+ *    it.
+ *  - Always use test() instead of it() to define test functions.
+ *  - Do not import describe, test, jest, jasmine, or expect. They are automatic
+ *    globals in all test files.
+ *  - Use arrow functions for all describe and test functions.
+ *  - Use Jest’s built-in expect function for assertions.
+ *  - You might need to test asynchronous code: functions that either return a
+ *    Promise or take a callback argument. You should use Promises unless you
+ *    need to use a callback, such as when the API of another package requires
+ *    it. When using callbacks, make sure to add a done argument to your test
+ *    function and call done when all testing is complete.
+ */
+
+const config = {
+  /* modulePaths:
+   * An alternative API to setting the NODE_PATH env variable, modulePaths is
+   * an array of absolute paths to additional locations to search when
+   * resolving modules. Use the <rootDir> string token to include the path to
+   * your project's root directory. Example: ["<rootDir>/app/"].
+   */
+  modulePaths: ["<rootDir>"],
+  /* rootDir already set to pwd when running jest with this config as arg */
+  moduleNameMapper: {
+    "\.svg$": "<rootDir>/tests/mocks/fileMock.js",
+    "^pug": "pug-loader",
+  },
+};
+
+module.exports = config;

isso/js/tests/mocks/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

isso/js/tests/unit/config.test.js

@@ -0,0 +1,34 @@
+// https://stackoverflow.com/questions/41098009/mocking-document-in-jest
+var document_mock = {
+    getElementsByTagName: () => {
+        return [{
+            className: 'welcome',
+            attributes: [
+                { name: "data-isso-css", value: true },
+                { name: "data-isso-css-url", value: null },
+                { name: "data-isso-lang", value: "" },
+                { name: "data-isso-default-lang", value: "en" },
+                { name: "data-isso-reply-to-self", value: false },
+                { name: "data-isso-require-email", value: false },
+                { name: "data-isso-require-author", value: false },
+                { name: "data-isso-reply-notifications", value: false },
+                { name: "data-isso-max-comments-top", value: "inf" },
+                { name: "data-isso-max-comments-nested", value: 5 },
+                { name: "data-isso-reveal-on-click", value: 5 },
+                { name: "data-isso-gravatar", value: false },
+                { name: "data-isso-avatar", value: true },
+            ],
+        }]
+    },
+};
+
+global.document = document_mock;
+global.navigator = { languages: null };
+
+const config = require("app/config");
+
+
+test("Client configuration", () => {
+  let expected_langs = ["en", "en"];
+  expect(config["langs"]).toStrictEqual(expected_langs);
+});

isso/js/tests/unit/utils.test.js

@@ -0,0 +1,9 @@
+const utils = require("app/utils");
+
+test("Pad string with zeros", function() {
+  let to_be_padded = "12345";
+  let pad_to = 10;
+  let padding_char = "0";
+  let expected = "0000012345"
+  expect(utils.pad(to_be_padded, pad_to, padding_char)).toStrictEqual(expected);
+});

package.json

@@ -6,11 +6,14 @@
   "repository": "github:posativ/isso",
   "dependencies": {},
   "scripts": {
+    "test": "jest --config isso/js/jest.config.js isso/js/tests/" ,
+    "test-unit": "jest --config isso/js/jest.config.js isso/js/tests/unit/",
     "build-dev": "webpack --config isso/js/webpack.config.js --config-name dev",
     "watch-dev": "webpack --config isso/js/webpack.config.js --config-name dev --watch",
     "build-prod": "webpack --config isso/js/webpack.config.js --merge --config-name dev --config-name prod"
   },
   "devDependencies": {
+    "jest": "^27.5.0",
     "pug": "^2.0.4",
     "pug-loader": "^2.4.0",
     "pug-runtime": "^3.0.1",