♻️ end: tests + cleanup

Author: ebullient

package-lock.json

@@ -48,8 +48,10 @@
     "ignoreCommitPattern": "(🔖|🔨|🧹|changelog|release|Update README).*"
   },
   "dependencies": {
+    "@types/jest": "^29.2.0",
     "compare-versions": "^4.1.3",
     "eta": "^1.12.3",
+    "jest-environment-jsdom": "^29.2.2",
     "random-word-slugs": "^0.1.6",
     "randomcolor": "^0.6.2"
   }

package.json

@@ -1,4 +1,3 @@
-
 export interface SnippetorSettings {
     snippets: Record<string, SnippetConfig>;
 }
@@ -13,7 +12,7 @@ export interface SnippetConfig {
 
 export interface TaskSnippetConfig extends SnippetConfig {
     taskSettings: TaskSettings[];
-    baseFontSize: number;
+    baseFontSize?: number;
     borderRadius?: number;
     hideColorPicker?: boolean;
     styleUncheckedTask?: boolean;
@@ -27,7 +26,7 @@ export interface TaskSettings {
     li: TaskListItemSettings;
     cache?: {
         // not persisted
-        i: number;
+        i?: number;
         expanded?: boolean;
         textEl?: HTMLSpanElement;
         itemEl?: HTMLLIElement;

src/@types/index.d.ts

@@ -63,10 +63,11 @@ class CreateCheckboxesModal extends Modal {
         this.snippetor = snippetor;
         this.containerEl.addClass("snippetor-checkboxes-modal");
         this.containerEl.id = "snippetor-modal";
-        this.cfg = taskSnippetCfg || snippetor.createNewTaskSnippetCfg();
 
         // Ensure required config, migrate old task data
-        this.snippetor.initTaskSnippetConfig(this.cfg);
+        this.cfg = this.snippetor.initTaskSnippetConfig(
+            taskSnippetCfg || snippetor.createNewTaskSnippetCfg()
+        );
 
         // save snapshot of task settings
         this.origTaskSettings = JSON.parse(
@@ -97,7 +98,7 @@ class CreateCheckboxesModal extends Modal {
         });
 
         this.elements.list = content.createEl("ul", {
-            cls: "contains-task-list has-list-bullet"
+            cls: "contains-task-list has-list-bullet",
         });
 
         this.showTasks();
@@ -329,10 +330,7 @@ class CreateCheckboxesModal extends Modal {
         }
     }
 
-    drawCheckboxSettings(
-        ts: TaskSettings,
-        parent: HTMLSpanElement
-    ): void {
+    drawCheckboxSettings(ts: TaskSettings, parent: HTMLSpanElement): void {
         const settings = parent.createSpan("snippetor-row");
         const i = ts.cache.i;
 
@@ -471,7 +469,9 @@ class CreateCheckboxesModal extends Modal {
         fontSize.sliderEl.name = "size-" + i;
         new ExtraButtonComponent(sizeGroup)
             .setIcon("reset")
-            .setTooltip("Reset font size to default: " + this.elements.defaultFontSize)
+            .setTooltip(
+                "Reset font size to default: " + this.elements.defaultFontSize
+            )
             .onClick(async () => {
                 fontSize.setValue(this.elements.defaultFontSize);
                 Reflect.deleteProperty(ts.checkbox.format, "fontSize");
@@ -528,10 +528,7 @@ class CreateCheckboxesModal extends Modal {
         );
     }
 
-    drawTextSettings(
-        ts: TaskSettings,
-        parent: HTMLSpanElement
-    ): void {
+    drawTextSettings(ts: TaskSettings, parent: HTMLSpanElement): void {
         const i = ts.cache.i;
 
         const settings = parent.createSpan("snippetor-row text-settings");
@@ -586,7 +583,9 @@ class CreateCheckboxesModal extends Modal {
         fontSize.sliderEl.name = "size-" + i;
         new ExtraButtonComponent(sizeGroup)
             .setIcon("reset")
-            .setTooltip("Reset font size to default: " + this.elements.defaultFontSize)
+            .setTooltip(
+                "Reset font size to default: " + this.elements.defaultFontSize
+            )
             .onClick(async () => {
                 fontSize.setValue(this.elements.defaultFontSize);
                 Reflect.deleteProperty(ts.checkbox.format, "fontSize");
@@ -645,10 +644,7 @@ class CreateCheckboxesModal extends Modal {
         );
     }
 
-    drawFontSettings(
-        ts: TaskSettings,
-        parent: HTMLSpanElement
-    ): void {
+    drawFontSettings(ts: TaskSettings, parent: HTMLSpanElement): void {
         const i = ts.cache.i;
 
         const settings = parent.createSpan("snippetor-row text-settings");
@@ -678,7 +674,6 @@ class CreateCheckboxesModal extends Modal {
             });
         textFont.inputEl.addClass("snippetor-font-setting");
 
-
         // List Item font
         const chkboxGroup = settings.createSpan(
             "snippetor-group decorated checkbox-font"
@@ -690,7 +685,8 @@ class CreateCheckboxesModal extends Modal {
         this.snippetor.initialize(ts, "checkbox", "format");
         const boxFont = new TextComponent(chkboxGroup)
             .setValue(
-                ts.checkbox.format === undefined || ts.checkbox.format.font === undefined
+                ts.checkbox.format === undefined ||
+                    ts.checkbox.format.font === undefined
                     ? ""
                     : ts.checkbox.format.font
             )
@@ -841,7 +837,6 @@ class CreateCheckboxesModal extends Modal {
     applySettingsToElements(taskSettings: TaskSettings): void {
         const itemEl = taskSettings.cache.itemEl;
         const checkboxEl = taskSettings.cache.checkboxEl;
-        const textEl = taskSettings.cache.textEl;
 
         // data-line attribute
         itemEl.setAttribute("data-line", taskSettings.cache.i + "");
@@ -881,6 +876,9 @@ class CreateCheckboxesModal extends Modal {
         if (taskSettings.li.format && taskSettings.li.format.fontSize) {
             fontSize = taskSettings.li.format.fontSize + "px";
         }
+        if (taskSettings.li.format && taskSettings.li.format.font) {
+            font = taskSettings.li.format.font;
+        }
 
         textEl.style.setProperty("--snippetor-text-decoration", decoration);
         textEl.style.setProperty("--snippetor-text-font", font);
@@ -914,17 +912,22 @@ class CreateCheckboxesModal extends Modal {
             COLOR.BACKGROUND
         );
 
-        li.style.setProperty("--checkbox-color",
+        li.style.setProperty(
+            "--checkbox-color",
             boxFgColor === "inherit" ? "var(--text-normal)" : boxFgColor
         );
 
         li.style.setProperty("--checkbox-bg", boxBgColor);
-        li.style.setProperty("--checkbox-border-color",
+        li.style.setProperty(
+            "--checkbox-border-color",
             taskSettings.checkbox.hideBorder ? "transparent" : boxFgColor
         );
 
         if (this.cfg.borderRadius) {
-            li.style.setProperty("--checkbox-radius", this.cfg.borderRadius + "%");
+            li.style.setProperty(
+                "--checkbox-radius",
+                this.cfg.borderRadius + "%"
+            );
         } else {
             li.style.removeProperty("--checkbox-radius");
         }
@@ -934,7 +937,6 @@ class CreateCheckboxesModal extends Modal {
     }
 
     setCheckboxStyles(taskSettings: TaskSettings): void {
-        const li = taskSettings.cache.itemEl;
         const checkbox = taskSettings.cache.checkboxEl;
 
         // content value for snippetor
@@ -949,17 +951,22 @@ class CreateCheckboxesModal extends Modal {
         if (taskSettings.checkbox.format && taskSettings.checkbox.format.font) {
             font = taskSettings.checkbox.format.font;
         }
-        if (taskSettings.checkbox.format && taskSettings.checkbox.format.fontSize) {
+        if (
+            taskSettings.checkbox.format &&
+            taskSettings.checkbox.format.fontSize
+        ) {
             fontSize = taskSettings.checkbox.format.fontSize + "px";
         }
 
         checkbox.style.setProperty("--snippetor-box-font", font);
         checkbox.style.setProperty("--snippetor-box-font-size", fontSize);
 
-        checkbox.style.setProperty("--snippetor-box-top",
+        checkbox.style.setProperty(
+            "--snippetor-box-top",
             (taskSettings.checkbox.top ? taskSettings.checkbox.top : 0) + "px"
         );
-        checkbox.style.setProperty("--snippetor-box-left",
+        checkbox.style.setProperty(
+            "--snippetor-box-left",
             (taskSettings.checkbox.left ? taskSettings.checkbox.left : 0) + "px"
         );
     }

src/snippetor-CreateCheckboxesModal.ts

@@ -68,10 +68,11 @@ class CreateFolderModal extends Modal {
         this.snippetor = snippetor;
         this.containerEl.addClass("snippetor-folders-modal");
         this.containerEl.id = "snippetor-modal";
-        this.cfg = folderSnippetCfg || snippetor.createNewFolderSnippetCfg();
 
         // Ensure required config, migrate old data
-        this.snippetor.initCommonConfig(this.cfg);
+        this.cfg = this.snippetor.initFolderSnippetConfig(
+            folderSnippetCfg || snippetor.createNewFolderSnippetCfg()
+        );
 
         // save snapshot of settings
         this.original = JSON.parse(JSON.stringify(this.cfg));
@@ -119,7 +120,7 @@ class CreateFolderModal extends Modal {
             .createDiv("nav-folder-children");
 
         // this will be cleared/emptied with showFolders
-        let basicFolderTitle = folderEl
+        const basicFolderTitle = folderEl
             .createDiv("nav-folder")
             .createDiv("nav-folder-title")
             .createDiv("nav-folder-title-content");

src/snippetor-CreateFoldersModal.ts

@@ -34,6 +34,7 @@ export const DEFAULT_FOLDER_SNIPPET_SETTINGS: Partial<FolderSnippetConfig> = {
     default: {
         cache: {
             folderEl: null,
+            titleEl: null,
         },
         target: "",
         lightMode: {

src/snippetor-Defaults.ts

@@ -388,7 +388,7 @@ export class ModalHelper {
         return true;
     }
 
-    createFilenameSetting(content: HTMLDivElement, cfg: SnippetConfig) {
+    createFilenameSetting(content: HTMLDivElement, cfg: SnippetConfig): void {
         new Setting(content)
             .setName("Name of generated snippet (filename)")
             .setClass("snippet-filename")
@@ -415,7 +415,7 @@ export class ModalHelper {
     }
 
     createHtmlStyleElement(cfg: SnippetConfig): HTMLStyleElement {
-        let style = document.createElement("style");
+        const style = document.createElement("style");
         if (cfg.cssFontImport) {
             style.replaceChildren(document.createTextNode(cfg.cssFontImport));
         }
@@ -427,8 +427,8 @@ export class ModalHelper {
         content: HTMLDivElement,
         cfg: SnippetConfig,
         style: HTMLStyleElement
-    ) {
-        let result = new Setting(content)
+    ): void {
+        const result = new Setting(content)
             .setName("Import (CSS) additional fonts")
             .setDesc(
                 "Cut/paste a CSS @import statement to add an additional font to this snippet."

src/snippetor-ModalHelper.ts

@@ -47,7 +47,7 @@ export class Snippetor {
         return new Set(["x", "-", ">"]);
     }
 
-    createNewTaskSnippetCfg(): TaskSnippetConfig {
+    createNewTaskSnippetCfg(): Partial<TaskSnippetConfig> {
         const result = Object.assign({}, DEFAULT_TASK_SNIPPET_SETTINGS, {
             id: this.generateId(),
             name: generateSlug(2),
@@ -58,7 +58,7 @@ export class Snippetor {
         });
         return result;
     }
-    createNewFolderSnippetCfg(): FolderSnippetConfig {
+    createNewFolderSnippetCfg(): Partial<FolderSnippetConfig> {
         const result = Object.assign({}, DEFAULT_FOLDER_SNIPPET_SETTINGS, {
             id: this.generateId(),
             name: generateSlug(2),
@@ -120,6 +120,7 @@ export class Snippetor {
             target: v,
             cache: {
                 folderEl: null,
+                titleEl: null,
             },
         };
     }
@@ -138,7 +139,14 @@ export class Snippetor {
         cfg.version = "0.1.8";
     }
 
-    initTaskSnippetConfig(cfg: Partial<TaskSnippetConfig>): void {
+    initFolderSnippetConfig(
+        cfg: Partial<FolderSnippetConfig>
+    ): FolderSnippetConfig {
+        this.initCommonConfig(cfg); // last, it bumps the version
+        return cfg as FolderSnippetConfig;
+    }
+
+    initTaskSnippetConfig(cfg: Partial<TaskSnippetConfig>): TaskSnippetConfig {
         cfg.taskSettings.forEach((ts) => {
             this.initTaskSettings(cfg.version, ts);
         });
@@ -150,6 +158,8 @@ export class Snippetor {
             cfg.baseFontSize = 14;
         }
         this.initCommonConfig(cfg); // last, it bumps the version
+
+        return cfg as TaskSnippetConfig;
     }
 
     initTaskSettings(version: string, ts: Partial<TaskSettings>): void {

src/snippetor-Snippetor.ts

@@ -16,6 +16,10 @@
       "es5",
       "scripthost",
       "es2019"
+    ],
+    "types": [
+      "mocha",
+      "jest"
     ]
   },
   "include": [