Added test cases, added friendly due date names, code clean up

.gitignore

@@ -18,11 +18,9 @@ flatpak/generated-sources.json
 flatpak/com.github.ransome1.sleek.yml
 assets/icons/bak
 squashfs-root/
-test/
 src/__tests__
 .eslintrc.json
 build/
-test/
 package-lock.json
 .vs/
 .vscode/

README.md

@@ -99,7 +99,8 @@ A prioritized backlog of new features and known issues can be found <a href="htt
   - Italian
   - Spanish
   - French
-  - Simplified Chinese (简体中文)
+  - Simplified Chinese
+  - Brazilian Portugese
 * sleek can be minimized to tray
 * Existing todos can be used as templates for new ones
 

package.json

@@ -102,9 +102,10 @@
     "build:appx": "electron-builder -w appx --publish never",
     "build:pacman": "electron-builder -l pacman --publish never",
     "build:appimage": "electron-builder -l AppImage --publish never",
+    "pack": "electron-builder --dir",
     "lint": "eslint --ext .js, src --ext .mjs, src",
-    "jest": "jest",
-    "mocha": "mocha",
+    "test": "mocha --timeout 5000",
+    "test1": "mocha ./test/settings.js --timeout 5000",
     "sass": "sass -w src/scss/:src/css/",
     "start": "yarn sass & electron ."
   },
@@ -122,14 +123,12 @@
     "vanillajs-datepicker": "^1.1.4"
   },
   "devDependencies": {
-    "chai": "^4.3.4",
-    "electron": "^13.1.1",
+    "electron": "12.0.10",
     "electron-builder": "22.10.5",
     "eslint": "^7.25.0",
-    "jest": "^26.6.3",
-    "mocha": "^8.3.2",
+    "mocha": "^9.0.0",
     "sass": "^1.34.1",
-    "spectron": "^14.0.0",
+    "spectron": "14.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-sass-guidelines": "^8.0.0"
   }

src/__tests__/jest.js

-const Application = require("spectron").Application;
-const electronPath = require("electron");
-const path = require("path");
-
-let app;
-
-beforeAll(() => {
-  app = new Application({
-    path: electronPath,
-
-    args: [path.join(__dirname, "../../")]
-  });
-
-  return app.start();
-}, 15000);
-
-afterAll(function () {
-  if (app && app.isRunning()) {
-    return app.stop();
-  }
-});
-
-test("Displays App window", async function () {
-  let windowCount = await app.client.getWindowCount();
-
-  expect(windowCount).toBe(1);
-});
-
-test("Header displays appropriate text", async function () {
-  const headerElement = await app.client.$("h1");
-
-  let headerText = await headerElement.getText();
-
-  expect(headerText).toBe("💖 Hello World!");
-});

src/configs/i18next.config.js

@@ -7,7 +7,7 @@ const i18nextOptions = {
   fallbackLng: "en",
   namespace: "translation",
   defaultNS: "translation",
-  supportedLngs: ["de", "en", "it", "es", "fr", "zh"],
+  supportedLngs: ["de", "en", "it", "es", "fr", "zh", "pt"],
   debug: false,
   preload: fs.readdirSync(path.join(__dirname, "../locales")).filter((fileName) => {
     const joinedPath = path.join(path.join(__dirname, "../locales"), fileName)

src/configs/store.config.js

-const electron = require('electron');
-const path = require('path');
-const fs = require('fs');
-
+const electron = require("electron");
+const path = require("path");
+const fs = require("fs");
 class Store {
   constructor(opts) {
     // Renderer process has to get `app` module via `remote`, whereas the main process can get it directly
     let userDataPath;
     if(process.env.PORTABLE_EXECUTABLE_FILE) {
-      userDataPath = path.join(path.dirname(process.env.PORTABLE_EXECUTABLE_FILE), 'config', 'sleek');
+      userDataPath = path.join(path.dirname(process.env.PORTABLE_EXECUTABLE_FILE), "config", "sleek");
       if(!fs.existsSync(userDataPath)) fs.mkdirSync(userDataPath, {recursive: true});
     } else if(!process.env.PORTABLE_EXECUTABLE_FILE && !process.windowsStore && process.platform==="win32") {
       userDataPath = path.dirname(process.execPath);
       if(!fs.existsSync(userDataPath)) fs.mkdirSync(userDataPath, {recursive: true});
+    } else if(process.env.NODE_ENV==="testing" && process.env.CUSTOM_PREFERENCES_FOLDER) {
+      // path/env is defined in Mocha test file
+      userDataPath = path.join(electron.app.getAppPath(), "test", process.env.CUSTOM_PREFERENCES_FOLDER)
     } else {
-      userDataPath = (electron.app || electron.remote.app).getPath('userData');
+      userDataPath = (electron.app || electron.remote.app).getPath("userData");
     }
-    // We'll use the `configName` property to set the file name and path.join to bring it all together as a string
-    this.path = path.join(userDataPath, opts.configName + '.json');
+    // We"ll use the `configName` property to set the file name and path.join to bring it all together as a string
+    this.path = path.join(userDataPath, opts.configName + ".json");
     this.data = parseDataFile(this.path, opts.defaults);
   }
   // This will just return the property on the `data` object
@@ -26,8 +28,8 @@ class Store {
   // ...and this will set it
   set(key, val) {
     this.data[key] = val;
-    // Wait, I thought using the node.js' synchronous APIs was bad form?
-    // We're not writing a server so there's not nearly the same IO demand on the process
+    // Wait, I thought using the node.js" synchronous APIs was bad form?
+    // We"re not writing a server so there"s not nearly the same IO demand on the process
     // Also if we used an async API and our app was quit before the asynchronous write had a chance to complete,
     // we might lose that data. Note that in a real app, we would try/catch this.
     fs.writeFileSync(this.path, JSON.stringify(this.data));
@@ -35,7 +37,7 @@ class Store {
 }
 
 function parseDataFile(filePath, defaults) {
-  // We'll try/catch it in case the file doesn't exist yet, which will be the case on the first application run.
+  // We"ll try/catch it in case the file doesn"t exist yet, which will be the case on the first application run.
   // `fs.readFileSync` will return a JSON string which we then parse into a Javascript object
   try {
     console.log("User preferences located at: " + filePath);

src/css/dark.css

@@ -161,51 +161,57 @@ nav ul li.is-highlighted a {
   color: #CCCDCF !important;
 }
 
-#todoTable .flex-table#previousItem.is-highlighted {
+#todoTable .todo#previousItem.is-highlighted {
   background-color: #3B3B3B;
 }
-#todoTable .flex-table:hover .flex-row .button,
-#todoTable .flex-table.due .button {
+#todoTable .todo:hover .cell .button,
+#todoTable .todo.due .button {
   color: #f5f5f5;
 }
-#todoTable .flex-table {
+#todoTable .group.due {
+  color: #ebebeb;
+}
+#todoTable .group.due .button {
+  color: inherit;
+}
+#todoTable .todo {
   border-color: #3B3B3B;
 }
-#todoTable .flex-table .checkbox a {
+#todoTable .todo .checkbox a {
   color: #CCCDCF;
 }
-#todoTable .flex-table .checkbox a:hover {
+#todoTable .todo .checkbox a:hover {
   color: white;
 }
-#todoTable .flex-table .flex-row.text {
+#todoTable .todo .cell.text {
   color: #CCCDCF;
 }
-#todoTable .flex-table .flex-row.itemDueDate {
+#todoTable .todo .cell.itemDueDate {
   color: white;
 }
-#todoTable .flex-table .flex-row.itemDueDate i {
+#todoTable .todo .cell.itemDueDate i {
   color: inherit;
 }
-#todoTable .flex-table .flex-row.itemDueDate.isToday,
-#todoTable .flex-table .flex-row.itemDueDate.isPast {
+#todoTable .todo .cell.itemDueDate.isToday,
+#todoTable .todo .cell.itemDueDate.isPast {
   color: #ff3860;
 }
-#todoTable .flex-table .flex-row.itemDueDate.isToday i,
-#todoTable .flex-table .flex-row.itemDueDate.isPast i {
+#todoTable .todo .cell.itemDueDate.isToday i,
+#todoTable .todo .cell.itemDueDate.isPast i {
   color: inherit;
 }
-#todoTable .flex-table .flex-row.itemDueDate.isTomorrow i {
+#todoTable .todo .cell.itemDueDate.isTomorrow i {
   color: #fa745e !important;
 }
-#todoTable .flex-table .flex-row span.contexts {
+#todoTable .todo .cell span.contexts {
   color: #c5ede3 !important;
   background: #1e6251 !important;
 }
-#todoTable .flex-table .flex-row span.projects {
+#todoTable .todo .cell span.projects {
   color: #f1d6f1 !important;
   background: #6f266f !important;
 }
-#todoTable .flex-table .flex-row .is-white {
+#todoTable .todo .cell .is-white {
   color: #CCCDCF;
   background: none;
 }
@@ -266,7 +272,7 @@ nav ul li.is-highlighted a {
 #drawerContainer .drawer h4.is-4 i {
   color: #CCCDCF !important;
 }
-#drawerContainer a.drawerClose {
+#drawerContainer #drawerClose {
   background: #3B3B3B !important;
 }
 #drawerContainer svg {
@@ -276,14 +282,14 @@ nav ul li.is-highlighted a {
   background: #212224 !important;
 }
 
-#filterMenu .card {
+#filterContext .card {
   background: #3B3B3B;
 }
-#filterMenu .card #filterMenuSave {
+#filterContext .card #filterContextSave {
   background-color: transparent !important;
   border-right: 1px solid #212224 !important;
 }
-#filterMenu .card-footer {
+#filterContext .card-footer {
   border-top: 1px solid #212224 !important;
 }
 

src/css/dark.css.map

-{"version":3,"sourceRoot":"","sources":["../scss/dark.scss","../scss/variables.scss"],"names":[],"mappings":"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","file":"dark.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/dark.scss","../scss/variables.scss"],"names":[],"mappings":"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","file":"dark.css"}
\ No newline at end of file

src/css/style.css

@@ -289,6 +289,9 @@ nav ul:nth-child(2) {
 #errorContainer p {
   margin: 0.1em 0;
 }
+#errorContainer i {
+  color: white !important;
+}
 #errorContainer .button {
   color: white;
 }
@@ -327,7 +330,7 @@ nav ul:nth-child(2) {
   cursor: ew-resize;
   z-index: 2;
 }
-#drawerContainer a.drawerClose {
+#drawerContainer #drawerClose {
   width: 2.5em;
   height: 2.5em;
   display: none;
@@ -380,7 +383,7 @@ nav ul:nth-child(2) {
 #drawerContainer .drawer h4.is-4.clickable i {
   color: #3273dc;
 }
-#drawerContainer .drawer .dropdown-item {
+#drawerContainer .drawer section {
   width: 100%;
   padding: 0;
   margin: 0 0 1.5em 0;
@@ -398,7 +401,7 @@ nav ul:nth-child(2) {
   display: block !important;
 }
 
-#drawerContainer:hover a.drawerClose {
+#drawerContainer:hover #drawerClose {
   display: inline-block;
 }
 
@@ -460,66 +463,67 @@ nav ul:nth-child(2) {
   width: 100%;
   float: left;
 }
-#todoTable .flex-table {
+#todoTable .todo {
   position: relative;
   display: flex;
   flex-flow: row wrap;
   border-bottom: solid 1px #ebebeb;
 }
-#todoTable .flex-table:last-child {
+#todoTable .todo:last-child {
   border: none;
 }
-#todoTable .flex-table#previousItem {
+#todoTable .todo#previousItem {
   -webkit-transition: background-color 0.5s ease-out;
   -moz-transition: background-color 0.5s ease-out;
   -o-transition: background-color 0.5s ease-out;
   transition: background-color 0.5s ease-out;
 }
-#todoTable .flex-table#previousItem.is-highlighted {
+#todoTable .todo#previousItem.is-highlighted {
   background-color: #f5f5f5;
 }
-#todoTable .flex-table.group {
+#todoTable .group {
+  min-height: 1em;
   margin-top: 0.5em;
   border: none;
   font-family: FreeSansBold;
 }
-#todoTable .flex-table.group .button {
+#todoTable .group .button {
   cursor: default;
   height: auto;
   line-height: auto;
   font-size: 1.2em;
   padding: 0 0.4em;
 }
-#todoTable .flex-table.group.due .button {
+#todoTable .group.due .button {
   padding: 0;
   background: transparent;
 }
-#todoTable .flex-table {
+#todoTable .todo {
   display: flex;
 }
-#todoTable .flex-table .flex-row {
+#todoTable .cell {
   padding: 0.75em 0;
   margin-right: 1em;
   height: auto;
   line-height: 1.5em;
 }
-#todoTable .flex-table .flex-row .is-white {
+#todoTable .cell .is-white {
   background: none;
 }
-#todoTable .flex-table .flex-row span.tag {
+#todoTable .cell span.tag {
   margin: 0 0.25em 0 0;
 }
-#todoTable .flex-table .flex-row span.tag.projects {
+#todoTable .cell span.tag.projects {
   background: #f1d6f1;
 }
-#todoTable .flex-table .flex-row span.tag.contexts {
+#todoTable .cell span.tag.contexts {
   background: #c5ede3;
 }
-#todoTable .flex-table .flex-row.checkbox a {
+#todoTable .cell.checkbox a {
   flex: 0 0 1em;
   font-size: 1.25em;
 }
-#todoTable .flex-table .flex-row.text {
+#todoTable .cell.text {
   width: auto;
   flex: 1;
   line-height: 1.7em;
@@ -527,115 +531,115 @@ nav ul:nth-child(2) {
   color: #4a4a4a;
   margin-right: 0;
 }
-#todoTable .flex-table .flex-row.text .categories {
+#todoTable .cell.text .categories {
   margin-right: 0.5em;
 }
-#todoTable .flex-table .flex-row.text .button {
+#todoTable .cell.text .button {
   font-size: 1.1em;
   font-family: FreeSansBold;
   height: auto;
   padding: 0 0.4em;
 }
-#todoTable .flex-table .flex-row.text .priority {
+#todoTable .cell.text .priority {
   background: transparent;
   color: #666666;
   margin-right: 0.5em;
 }
-#todoTable .flex-table .flex-row.text .text {
+#todoTable .cell.text .text {
   margin-right: 0.5em;
 }
-#todoTable .flex-table .flex-row.spacer {
+#todoTable .cell.spacer {
   width: 0.5em;
   background: transparent;
 }
-#todoTable .flex-table .flex-row.priority {
+#todoTable .cell.priority {
   background: #ccc;
   flex: 0 0 0.5em;
   opacity: 0.5;
 }
-#todoTable .flex-table .flex-row.priority.A,
-#todoTable .flex-table .flex-row .priority.A {
+#todoTable .cell.priority.A,
+#todoTable .cell .priority.A {
   color: #ffe6eb;
   background: #ff3860;
 }
-#todoTable .flex-table .flex-row.priority.B,
-#todoTable .flex-table .flex-row .priority.B {
+#todoTable .cell.priority.B,
+#todoTable .cell .priority.B {
   color: #fadcd8;
   background: #fa745e;
 }
-#todoTable .flex-table .flex-row.priority.C,
-#todoTable .flex-table .flex-row .priority.C {
+#todoTable .cell.priority.C,
+#todoTable .cell .priority.C {
   background: #ffdd57;
 }
-#todoTable .flex-table .flex-row .contexts {
+#todoTable .cell .contexts {
   background: #c5ede3;
 }
-#todoTable .flex-table .flex-row .projects {
+#todoTable .cell .projects {
   background: #f1d6f1;
 }
-#todoTable .flex-table .flex-row.itemDueDate {
+#todoTable .cell.itemDueDate {
   color: #4a4a4a;
   position: relative;
   white-space: nowrap;
   margin: 0 0.25em 0 0;
   text-transform: lowercase;
 }
-#todoTable .flex-table .flex-row.itemDueDate .fa-sort-down {
+#todoTable .cell.itemDueDate .fa-sort-down {
   position: absolute;
   right: 0.2em;
   bottom: 2.25em;
   display: none;
 }
-#todoTable .flex-table .flex-row.itemDueDate .tags {
+#todoTable .cell.itemDueDate .tags {
   position: absolute;
   top: -1.4em;
   right: -1.5em;
-  z-index: 50;
+  z-index: 40;
   display: none;
 }
-#todoTable .flex-table .flex-row.itemDueDate .tags .tag {
+#todoTable .cell.itemDueDate .tags .tag {
   margin: 0;
 }
-#todoTable .flex-table .flex-row.itemDueDate .tags .is-dark {
+#todoTable .cell.itemDueDate .tags .is-dark {
   background: #4a4a4a;
   font-family: FreeSansBold;
 }
-#todoTable .flex-table .flex-row.isToday,
-#todoTable .flex-table .flex-row.isToday .button {
+#todoTable .cell.isToday,
+#todoTable .cell.isToday .button {
   color: #ff3860;
 }
-#todoTable .flex-table .flex-row.isToday .tags .is-dark,
-#todoTable .flex-table .flex-row.isToday .button .tags .is-dark {
+#todoTable .cell.isToday .tags .is-dark,
+#todoTable .cell.isToday .button .tags .is-dark {
   background: #ff3860;
   font-family: FreeSansBold;
 }
-#todoTable .flex-table .flex-row.isTomorrow,
-#todoTable .flex-table .flex-row.isTomorrow .button {
+#todoTable .cell.isTomorrow,
+#todoTable .cell.isTomorrow .button {
   color: #fa745e;
 }
-#todoTable .flex-table .flex-row.isTomorrow .tags .is-dark,
-#todoTable .flex-table .flex-row.isTomorrow .button .tags .is-dark {
+#todoTable .cell.isTomorrow .tags .is-dark,
+#todoTable .cell.isTomorrow .button .tags .is-dark {
   background: #fa745e;
   font-family: FreeSansBold;
 }
-#todoTable .flex-table .flex-row.isPast,
-#todoTable .flex-table .flex-row.isPast .button {
+#todoTable .cell.isPast,
+#todoTable .cell.isPast .button {
   color: #ff3860;
 }
-#todoTable .flex-table .flex-row.isPast .tags .is-dark,
-#todoTable .flex-table .flex-row.isPast .button .tags .is-dark {
+#todoTable .cell.isPast .tags .is-dark,
+#todoTable .cell.isPast .button .tags .is-dark {
   background: #ff3860;
   font-family: FreeSansBold;
 }
-#todoTable .flex-table .flex-row:hover .tags,
-#todoTable .flex-table .flex-row:focus .tags {
+#todoTable .cell:hover .tags,
+#todoTable .cell:focus .tags {
   display: block;
 }
-#todoTable .flex-table .flex-row:hover i.fa-sort-down,
-#todoTable .flex-table .flex-row:focus i.fa-sort-down {
+#todoTable .cell:hover i.fa-sort-down,
+#todoTable .cell:focus i.fa-sort-down {
   display: block;
 }
-#todoTable .flex-table.completed .flex-row {
+#todoTable .todo.completed .cell {
   filter: opacity(50%) grayscale(100%);
 }
 
@@ -666,10 +670,6 @@ nav ul:nth-child(2) {
 #modalForm .card-header-title {
   font-family: "FreeSansBold";
 }
-#modalForm .message {
-  display: none;
-  margin: 1em 0;
-}
 #modalForm .is-active {
   display: block;
 }
@@ -689,6 +689,13 @@ nav ul:nth-child(2) {
   border: none;
   color: #3273dc !important;
 }
+#modalForm .message {
+  display: none;
+  margin: 1em 0 0 0;
+}
+#modalForm .message.is-active {
+  display: block;
+}
 #modalForm #btnItemStatus {
   display: none;
   text-align: center;
@@ -714,12 +721,12 @@ nav ul:nth-child(2) {
   display: none;
   z-index: 50;
   opacity: 0.9;
-  padding: 0.25em 0.5em;
+  padding: 0.75em 1em;
 }
-#autoCompleteContainer .dropdown-item {
+#autoCompleteContainer section {
   margin: 0;
 }
-#autoCompleteContainer .dropdown-item .button {
+#autoCompleteContainer section .button {
   margin: 0 0.5rem 0.5rem 0;
 }
 #autoCompleteContainer h4.title {
@@ -749,16 +756,16 @@ nav ul:nth-child(2) {
   display: block;
 }
 
-#filterMenu {
+#filterContext {
   display: none;
   position: fixed;
   z-index: 60;
 }
-#filterMenu #filterMenuDelete {
+#filterContext #filterContextDelete {
   color: #ff3860;
 }
 
-#filterMenu.is-active {
+#filterContext.is-active {
   display: block;
 }
 
@@ -963,7 +970,7 @@ nav ul:nth-child(2) {
 }
 
 .modal.content {
-  z-index: 55;
+  z-index: 60;
   justify-content: start !important;
   padding-top: 2.5em;
   margin: 0 !important;
@@ -1073,34 +1080,34 @@ nav ul:nth-child(2) {
   color: #3273dc;
 }
 
-.messages {
+#messages {
   width: 25em;
   position: fixed;
   right: 2em;
   bottom: 1em;
-  z-index: 55;
+  z-index: 45 !important;
 }
-.messages i {
+#messages i {
   color: #3273dc;