add a few client tests

.eslintrc.cjs

@@ -44,9 +44,10 @@ module.exports = {
     //   'jest/globals': true,
     // },
     globals: {
+      beforeEach: 'readonly',
       describe: 'readonly',
-      it: 'readonly',
       expect: 'readonly',
+      it: 'readonly',
     },
   }],
 };

.jest/jest.config.cjs

@@ -22,6 +22,7 @@ module.exports = {
     },
   },
   rootDir: resolve(__dirname, '../'),
+  setupFiles: ['<rootDir>/.jest/jest.setup.cjs'],
   setupFilesAfterEnv: [],
   testMatch: [
     '<rootDir>/src/**/__tests__/**/*.test.js',

.jest/jest.setup.cjs

@@ -0,0 +1 @@
+require( 'jest-localstorage-mock');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "recipes-nodejs",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "NodeJS recipe publisher, converts markdown/text recipe files into well formatted HTML.",
   "main": "build.js",
   "type": "module",
@@ -32,6 +32,7 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.29.0",
     "jest": "^29.7.0",
+    "jest-localstorage-mock": "^2.4.26",
     "nodemon": "^3.0.1"
   },
   "repository": {

src/static/scripts/libs/__tests__/preferences.test.js

@@ -0,0 +1,97 @@
+import {
+  KeyNames,
+  updateKey,
+  getKey,
+  updateMRUList,
+} from '../preferences';
+
+describe('preferences', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  describe('updateKey', () => {
+    it('should update the value of a key in the app data', () => {
+      const key = KeyNames.RECENT;
+      const value = ['recipe1', 'recipe2'];
+
+      updateKey(key, value);
+
+      const updatedValue = getKey(key);
+      expect(updatedValue).toEqual(value);
+    });
+  });
+
+  describe('getKey', () => {
+    it('should return the default value when `key` has not been set', () => {
+      const key = KeyNames.SEARCH;
+      const defaultValue = 'default';
+
+      const value = getKey(key, defaultValue);
+      expect(value).toEqual(defaultValue);
+    });
+
+    it('should return the default value if the key does not exist', () => {
+      const key = 'nonExistentKey';
+      const defaultValue = 'default';
+
+      const value = getKey(key, defaultValue);
+      expect(value).toEqual(defaultValue);
+    });
+  });
+
+  describe('updateMRUList', () => {
+    it('should add a value to the MRU list', () => {
+      const key = KeyNames.RECENT;
+      const maxLength = 3;
+      const value = 'recipe1';
+
+      updateMRUList(key, maxLength, value);
+
+      const updatedList = getKey(key);
+      expect(updatedList).toEqual([value]);
+    });
+
+    it('should place new values at top of the MRU list', () => {
+      const key = KeyNames.RECENT;
+      const maxLength = 3;
+      const value1 = 'recipe1';
+      const value2 = 'recipe2';
+
+      updateMRUList(key, maxLength, value1);
+      updateMRUList(key, maxLength, value2);
+
+      const updatedList = getKey(key);
+      expect(updatedList).toEqual([value2, value1]);
+    });
+
+    it('should move an existing value to the top of the MRU list', () => {
+      const key = KeyNames.RECENT;
+      const maxLength = 3;
+      const value1 = 'recipe1';
+      const value2 = 'recipe2';
+
+      updateMRUList(key, maxLength, value1);
+      updateMRUList(key, maxLength, value2);
+      updateMRUList(key, maxLength, value1);
+
+      const updatedList = getKey(key);
+      expect(updatedList).toEqual([value1, value2]);
+    });
+
+    it('should discard the last item if the MRU list exceeds the max length', () => {
+      const key = KeyNames.RECENT;
+      const maxLength = 2;
+      const value1 = 'recipe1';
+      const value2 = 'recipe2';
+      const value3 = 'recipe3';
+
+      updateMRUList(key, maxLength, value1);
+      updateMRUList(key, maxLength, value2);
+      updateMRUList(key, maxLength, value3);
+
+      const updatedList = getKey(key);
+      expect(updatedList).toEqual([value3, value2]);
+    });
+  });
+});

src/static/scripts/libs/__tests__/recentlyViewed.test.js

@@ -0,0 +1,20 @@
+import { toDisplay } from '../recentlyViewed';
+
+describe('recentlyViewed', () => {
+  describe('toDisplay', () => {
+    const tests = [
+      { value: 'hello-world', expectedResult: 'Hello World' },
+      { value: 'hello world', expectedResult: 'Hello World' },
+      { value: '    HeLLo            WoRLD      ', expectedResult: 'Hello World' },
+      { value: '', expectedResult: '' },
+      { value: '---', expectedResult: '' },
+    ];
+
+    tests.forEach((test) => {
+      it(`should convert "${test.value}" to "${test.expectedResult}"`, () => {
+        const result = toDisplay(test.value);
+        expect(result).toEqual(test.expectedResult);
+      });
+    });
+  });
+});

src/static/scripts/libs/__tests__/searchBox.test.js

@@ -0,0 +1,21 @@
+import { scrub } from '../searchBox';
+
+describe('searchBox', () => {
+  describe('scrub', () => {
+    const tests = [
+      { value: 'Hello World!', expectedResult: 'helloworld' },
+      { value: '  A very  delicious pumpkin -- pie! From, :Hasbro (99)  ', expectedResult: 'averydeliciouspumpkinpiefromhasbro99' },
+      { value: '  Hello   World  ', expectedResult: 'helloworld' },
+      { value: '12345', expectedResult: '12345' },
+      { value: '', expectedResult: '' },
+      { value: '---', expectedResult: '' },
+    ];
+
+    tests.forEach((test) => {
+      it(`should scrub "${test.value}" to "${test.expectedResult}"`, () => {
+        const result = scrub(test.value);
+        expect(result).toEqual(test.expectedResult);
+      });
+    });
+  });
+});

src/static/scripts/libs/preferences.js

@@ -59,7 +59,7 @@ export const updateMRUList = (key, maxLength, value) => {
   list.unshift(value);
 
   if (list.length > maxLength) {
-    list = list.slice(0, maxLength - 1);
+    list = list.slice(0, maxLength);
   }
 
   updateKey(key, list);

src/static/scripts/libs/recentlyViewed.js

@@ -18,9 +18,11 @@ const Styles = {
   MODAL_ACTIVE: 'modal--is-active',
 };
 
-const toDisplay = (value) => value
+export const toDisplay = (value) => value
   .replace(/-/g, ' ')
-  .replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
+  .replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase())
+  .replace(/\s+/g, ' ')
+  .trim();
 
 function onRecipeLinkClick(e) {
   const anchor = e.target.tagName === 'A'

src/static/scripts/libs/searchBox.js

@@ -17,7 +17,7 @@ const KeyCodes = {
 };
 /* eslint-enable key-spacing */
 
-const scrub = (value) => value
+export const scrub = (value) => value
   .trim()
   .toLowerCase()
   .replace(/\W/g, '')