refactoring help overlay page and increasing tests coverage +5%

js/editor.js

@@ -1,16 +1,12 @@
 "use strict";
 import * as Sentry from "@sentry/browser";
-
 import * as currency from "./currency.js";
+import { createHelpTables } from "./help_page.js";
 import * as regex from "./regex.js";
-import helpOperators from "./help_operators.json";
-import helpShortcuts from "./help_shortcuts.json";
-import helpUnits from "./help_units.json";
+import showToast from "show-toast";
 import { LocalStorage } from "web-browser-storage";
 import { createUnit, unit, evaluate as mathjs_evaluate } from "mathjs";
-
 const storage = new LocalStorage();
-import showToast from "show-toast";
 var _ = require("lodash");
 
 let editor;
@@ -87,60 +83,6 @@ function onOverlayClick() {
   focusEditor();
 }
 
-async function createHelpTables() {
-  // Operator Table
-  const operatorColumns = ["Name", "Operator", "Example"];
-  const operatorsDataa = [...helpOperators.operators];
-  const operatorTableHtml = createTable(operatorColumns, operatorsDataa);
-  document.getElementById("operator-table-container").innerHTML =
-    operatorTableHtml;
-
-  // Keyboard shortcut table
-  const shortcutColumns = ["Action", "Shortcut"];
-  const shortcutsData = [...helpShortcuts.shortcuts];
-  const shortcutTableHtml = createTable(shortcutColumns, shortcutsData);
-  document.getElementById("shortcut-table-container").innerHTML =
-    shortcutTableHtml;
-
-  // Units table
-  const unitColumns = ["Value", "Units"];
-  const unitsData = [...helpUnits.units];
-  const unitTableHtml = createTable(unitColumns, unitsData);
-  document.getElementById("unit-table-container").innerHTML = unitTableHtml;
-}
-
-function createTable(columns, data) {
-  let table = "<table>";
-
-  // Create table header
-  table += "<thead><tr>";
-  columns.forEach((column) => {
-    table += `<th>${column}</th>`;
-  });
-  table += "</tr></thead>";
-
-  // Create table body
-  table += "<tbody>";
-  data.forEach((row) => {
-    table += "<tr>";
-    columns.forEach((column) => {
-      table += `<td>`;
-
-      if (Array.isArray(row[column])) {
-        row[column].forEach((item) => {
-          table += `${item}</br>`;
-        });
-      } else {
-        table += `${row[column]}`;
-      }
-      table += "</td>";
-    });
-    table += "</tr>";
-  });
-  table += "</tbody></table>";
-  return table;
-}
-
 export async function setupEvaluator() {
   homeCurrency = await setupHomeCurrency();
   createUnit(homeCurrency.toLowerCase());

js/help_page.js

@@ -0,0 +1,60 @@
+// Help page related activities happen in this File. Including DOM modifications
+
+"use strict";
+import helpOperators from "./help_operators.json";
+import helpShortcuts from "./help_shortcuts.json";
+import helpUnits from "./help_units.json";
+
+export async function createHelpTables() {
+  // Operator Table
+  const operatorColumns = ["Name", "Operator", "Example"];
+  const operatorsDataa = [...helpOperators.operators];
+  const operatorTableHtml = createTable(operatorColumns, operatorsDataa);
+  document.getElementById("operator-table-container").innerHTML =
+    operatorTableHtml;
+
+  // Keyboard shortcut table
+  const shortcutColumns = ["Action", "Shortcut"];
+  const shortcutsData = [...helpShortcuts.shortcuts];
+  const shortcutTableHtml = createTable(shortcutColumns, shortcutsData);
+  document.getElementById("shortcut-table-container").innerHTML =
+    shortcutTableHtml;
+
+  // Units table
+  const unitColumns = ["Value", "Units"];
+  const unitsData = [...helpUnits.units];
+  const unitTableHtml = createTable(unitColumns, unitsData);
+  document.getElementById("unit-table-container").innerHTML = unitTableHtml;
+}
+
+function createTable(columns, data) {
+  let table = "<table>";
+
+  // Create table header
+  table += "<thead><tr>";
+  columns.forEach((column) => {
+    table += `<th>${column}</th>`;
+  });
+  table += "</tr></thead>";
+
+  // Create table body
+  table += "<tbody>";
+  data.forEach((row) => {
+    table += "<tr>";
+    columns.forEach((column) => {
+      table += `<td>`;
+
+      if (Array.isArray(row[column])) {
+        row[column].forEach((item) => {
+          table += `${item}</br>`;
+        });
+      } else {
+        table += `${row[column]}`;
+      }
+      table += "</td>";
+    });
+    table += "</tr>";
+  });
+  table += "</tbody></table>";
+  return table;
+}

test/help_page.test.js

@@ -0,0 +1,33 @@
+import { createHelpTables } from "../js/help_page";
+import { describe, it, expect } from "vitest";
+import path from "path";
+import fs from "fs";
+
+describe("createHelpTables tests", () => {
+  const indexPath = path.resolve(__dirname, "../html/index.html");
+  const indexHtml = fs.readFileSync(indexPath, "utf-8");
+  document.body.innerHTML = indexHtml;
+
+  createHelpTables();
+
+  it("should create shortcut tables contents", () => {
+    const shortcutTables = document.getElementById("shortcut-table-container");
+    expect(shortcutTables.querySelectorAll("td")[4].outerHTML).toEqual(
+      "<td>Open/Close calculator History</td>"
+    );
+  });
+
+  it("should create operator tables contents", () => {
+    const operatorTables = document.getElementById("operator-table-container");
+    expect(operatorTables.querySelectorAll("td")[2].outerHTML).toEqual(
+      "<td>2 + 3 = 5</td>"
+    );
+  });
+
+  it("should create unit tables contents", () => {
+    const unitTables = document.getElementById("unit-table-container");
+    expect(unitTables.querySelectorAll("td")[5].outerHTML).toEqual(
+      "<td>m2, sqin, sqft, sqyd, sqmi, sqrd, sqch, sqmil, acre, hectare</td>"
+    );
+  });
+});