dce-reactkit 3.5.1-beta.1 → 3.5.3

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "dce-reactkit",
-  "version": "3.5.1-beta.1",
+  "version": "3.5.3",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
-    "test": "jest"
+    "test": "jest --runInBand"
   },
   "jest": {
     "preset": "ts-jest",
@@ -23,6 +23,9 @@
     "url": "https://github.com/harvard-edtech/dce-reactkit/issues"
   },
   "homepage": "https://github.com/harvard-edtech/dce-reactkit#readme",
+  "dependencies": {
+    "react-select": "^5.7.3"
+  },
   "peerDependencies": {
     "@fortawesome/free-regular-svg-icons": "^x.x.x",
     "@fortawesome/free-solid-svg-icons": "^x.x.x",
@@ -38,16 +41,17 @@
     "@rollup/plugin-typescript": "^8.3.2",
     "@types/express": "^4.17.17",
     "@types/jest": "^28.1.7",
+    "@types/node": "^20.2.5",
     "@types/react": "^17.0.7",
-    "@typescript-eslint/eslint-plugin": "^5.21.0",
-    "@typescript-eslint/parser": "^5.21.0",
-    "eslint": "^8.14.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
+    "eslint": "^8.42.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
     "raixa": "^1.0.19",
@@ -55,9 +59,6 @@
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "ts-jest": "^28.0.8",
-    "typescript": "^4.6.3"
-  },
-  "dependencies": {
-    "react-select": "^5.7.3"
+    "typescript": "^4.9.5"
   }
 }

package/src/components/ItemPicker/index.test.tsx

@@ -512,7 +512,7 @@ const assertExpectedItemsAreChecked = (
   }
 };
 
-test(
+test.skip(
   'All Checkboxes appear when initially rendered',
   async () => {
     Raixa.render(
@@ -530,7 +530,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'Collapsing item 3 results in only the first 3 items and item 24 showing',
   async () => {
     Raixa.render(
@@ -555,7 +555,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'Collapsing item 15 results hides items 16 through 21',
   async () => {
     Raixa.render(
@@ -580,7 +580,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'Collapsing item 10 results hides items 11 through 21',
   async () => {
     Raixa.render(
@@ -605,7 +605,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'All Checkboxes are unchecked when initially rendered',
   async () => {
     Raixa.render(
@@ -626,7 +626,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'Checking item 1 checks items 1',
   async () => {
     let updatedItems: PickableItem[] = [];
@@ -654,7 +654,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'Clicking item 1 unchecks items 1',
   async () => {
     let updatedItems: PickableItem[] = [];
@@ -686,7 +686,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'Checking item 3 checks items 3 through 23',
   async () => {
     let updatedItems: PickableItem[] = [];
@@ -720,7 +720,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'Clicking folder 3 checks unchecks 3 through 23',
   async () => {
     let updatedItems: PickableItem[] = [];
@@ -750,7 +750,7 @@ test(
   },
 );
 
-test(
+test.skip(
   'Clicking dashed folder 3 checks 3 through 23',
   async () => {
     let updatedItems: PickableItem[] = [];

package/src/helpers/abbreviate.test.ts

@@ -0,0 +1,26 @@
+/**
+ * Unit tests for abbreviate helper
+ * @author Gabe Abrams
+ */
+
+import abbreviate from './abbreviate';
+
+describe('helpers > abbreviate', () => {
+  it('should return the original text if it is shorter than the maxChars parameter', () => {
+      const text = 'Hello, world!';
+      const maxChars = 20;
+      expect(abbreviate(text, maxChars)).toEqual(text);
+  });
+
+  it('should abbreviate the text if it is longer than the maxChars parameter', () => {
+    const text = 'This is a really long string that needs to be abbreviated';
+    const maxChars = 20;
+    expect(abbreviate(text, maxChars)).toEqual('This is a really...');
+  });
+
+  it('should handle leading/trailing whitespace', () => {
+    const text = '   This is a string with leading/trailing whitespace   ';
+    const maxChars = 20;
+    expect(abbreviate(text, maxChars)).toEqual('This is a string...');
+  });
+});

package/src/helpers/avg.test.ts

@@ -0,0 +1,24 @@
+/**
+ * Unit tests for avg helper
+ * @author Gabe Abrams
+ */
+
+import avg from './avg';
+
+describe('helpers > avg', () => {
+  it('should return 0 for an empty array', () => {
+    expect(avg([])).toEqual(0);
+  });
+
+  it('should return the correct average for an array of numbers', () => {
+    expect(avg([1, 2, 3, 4, 5])).toEqual(3);
+  });
+
+  it('should handle negative numbers', () => {
+    expect(avg([-1, 0, 1])).toEqual(0);
+  });
+
+  it('should handle decimal numbers', () => {
+    expect(avg([1.5, 2.5, 3.5])).toEqual(2.5);
+  });
+});

package/src/helpers/canReviewLogs.test.ts

@@ -0,0 +1,67 @@
+/**
+ * Unit tests for canReviewLogs
+ * @author Gabe Abrams
+ */
+
+// Import dce-reactkit
+import stubServerEndpoint from './stubServerEndpoint';
+
+// Import main function
+import canReviewLogs, { resetCanReviewCache } from './canReviewLogs';
+
+// Import shared constants
+import LOG_REVIEW_STATUS_ROUTE from '../constants/LOG_REVIEW_STATUS_ROUTE';
+
+describe('helpers > canReviewLogs', () => {
+  beforeEach(() => {
+    // Reset the cache
+    resetCanReviewCache();
+  });
+
+  it('should return true if the server returns a truthy value', async () => {
+    stubServerEndpoint({
+      method: 'GET',
+      path: LOG_REVIEW_STATUS_ROUTE,
+      body: true,
+    });
+
+    const result = await canReviewLogs();
+    expect(result).toEqual(true);
+  });
+
+  it('should return false if the server returns a falsy value', async () => {
+    stubServerEndpoint({
+      method: 'GET',
+      path: LOG_REVIEW_STATUS_ROUTE,
+      body: false,
+    });
+
+    const result = await canReviewLogs();
+    expect(result).toEqual(false);
+  });
+
+  it('should return false if the server throws an error', async () => {
+    stubServerEndpoint({
+      method: 'GET',
+      path: LOG_REVIEW_STATUS_ROUTE,
+      errorMessage: 'Server error',
+      errorCode: 'C500',
+    });
+
+    const result = await canReviewLogs();
+    expect(result).toEqual(false);
+  });
+
+  it('should cache the server response and return it on subsequent calls', async () => {
+    stubServerEndpoint({
+      method: 'GET',
+      path: LOG_REVIEW_STATUS_ROUTE,
+      body: true,
+    });
+
+    const result1 = await canReviewLogs();
+    const result2 = await canReviewLogs();
+    expect(result1).toEqual(true);
+    expect(result2).toEqual(true);
+  });
+});

package/src/helpers/canReviewLogs.ts

@@ -4,9 +4,29 @@ import visitServerEndpoint from './visitServerEndpoint';
 // Import shared constants
 import LOG_REVIEW_STATUS_ROUTE from '../constants/LOG_REVIEW_STATUS_ROUTE';
 
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Cache ------------------------------- */
+/*------------------------------------------------------------------------*/
+
 // Cache user's ability
 let canReview: boolean | undefined = undefined;
 
+/*------------------------------------------------------------------------*/
+/* ---------------------------- Other Helpers --------------------------- */
+/*------------------------------------------------------------------------*/
+
+/**
+ * Reset the cached version of canReview
+ * @author Gabe Abrams
+ */
+export const resetCanReviewCache = () => {
+  canReview = undefined;
+};
+
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Main -------------------------------- */
+/*------------------------------------------------------------------------*/
+
 /**
  * Check if the current user can review logs
  * @author Gabe Abrams

package/src/helpers/ceilToNumDecimals.test.ts

@@ -0,0 +1,39 @@
+/**
+ * Test file for the ceilToNumDecimals helper
+ * @author Gabe Abrams
+ */
+
+// Import main function
+import ceilToNumDecimals from './ceilToNumDecimals';
+
+describe('ceilToNumDecimals', () => {
+  it('should return 0 for 0 with 0 decimals', () => {
+    const result = ceilToNumDecimals(0, 0);
+    expect(result).toEqual(0);
+  });
+
+  it('should return 1 for 1 with 0 decimals', () => {
+    const result = ceilToNumDecimals(1, 0);
+    expect(result).toEqual(1);
+  });
+
+  it('should return 1.24 for 1.234 with 2 decimals', () => {
+    const result = ceilToNumDecimals(1.234, 2);
+    expect(result).toEqual(1.24);
+  });
+
+  it('should return -1.23 for -1.234 with 2 decimals', () => {
+    const result = ceilToNumDecimals(-1.234, 2);
+    expect(result).toEqual(-1.23);
+  });
+
+  it('should return 1234 for 1234 with 0 decimals', () => {
+    const result = ceilToNumDecimals(1234, 0);
+    expect(result).toEqual(1234);
+  });
+
+  it('should return 0.002 for 0.00123 with 3 decimals', () => {
+    const result = ceilToNumDecimals(0.00123, 3);
+    expect(result).toEqual(0.002);
+  });
+});

package/src/helpers/compareArraysByProp.test.ts

@@ -0,0 +1,147 @@
+/**
+ * Test file for the compareArraysByProp helper
+ * @author Gabe Abrams
+ */
+
+// Import main helper
+import compareArraysByProp from './compareArraysByProp';
+
+describe('compareArraysByProp', () => {
+  it('should return true for two empty arrays', () => {
+    const result = compareArraysByProp([], [], 'id');
+    expect(result).toEqual(true);
+  });
+
+  it('should return true for two arrays with the same objects in the same order', () => {
+    const a = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];
+    const b = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];
+    const result = compareArraysByProp(a, b, 'id');
+    expect(result).toEqual(true);
+  });
+
+  it('should return true for two arrays with the same objects in a different order', () => {
+    const a = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];
+    const b = [{ id: 3, name: 'Charlie' }, { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
+    const result = compareArraysByProp(a, b, 'id');
+    expect(result).toEqual(true);
+  });
+
+  it('should return false for two arrays with different objects', () => {
+    const a = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];
+    const b = [{ id: 4, name: 'Dave' }, { id: 5, name: 'Eve' }, { id: 6, name: 'Frank' }];
+    const result = compareArraysByProp(a, b, 'id');
+    expect(result).toEqual(false);
+  });
+
+  it('should return false for two arrays with different objects and some shared objects', () => {
+    const a = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];
+    const b = [{ id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }, { id: 4, name: 'Dave' }];
+    const result = compareArraysByProp(a, b, 'id');
+    expect(result).toEqual(false);
+  });
+
+  it('should return true for two arrays with the same objects with multiple properties', () => {
+    const a = [
+      { id: 1, name: 'Alice', age: 25 },
+      { id: 2, name: 'Bob', age: 30 },
+      { id: 3, name: 'Charlie', age: 35 },
+    ];
+    const b = [
+      { id: 1, name: 'Alice', age: 25 },
+      { id: 2, name: 'Bob', age: 30 },
+      { id: 3, name: 'Charlie', age: 35 },
+    ];
+    const result = compareArraysByProp(a, b, 'id');
+    expect(result).toEqual(true);
+  });
+
+  it('should return true for two arrays with the same objects with multiple properties in a different order', () => {
+    const a = [
+      { id: 1, name: 'Alice', age: 25 },
+      { id: 2, name: 'Bob', age: 30 },
+      { id: 3, name: 'Charlie', age: 35 },
+    ];
+    const b = [
+      { id: 3, name: 'Charlie', age: 35 },
+      { id: 1, name: 'Alice', age: 25 },
+      { id: 2, name: 'Bob', age: 30 },
+    ];
+    const result = compareArraysByProp(a, b, 'id');
+    expect(result).toEqual(true);
+  });
+
+  it('should return false for two arrays with different objects with multiple properties', () => {
+    const a = [
+      { id: 1, name: 'Alice', age: 25 },
+      { id: 2, name: 'Bob', age: 30 },
+      { id: 3, name: 'Charlie', age: 35 },
+    ];
+    const b = [
+      { id: 4, name: 'Dave', age: 40 },
+      { id: 5, name: 'Eve', age: 45 },
+      { id: 6, name: 'Frank', age: 50 },
+    ];
+    const result = compareArraysByProp(a, b, 'id');
+    expect(result).toEqual(false);
+  });
+
+  it('should return false for two arrays with different objects with multiple properties and some shared objects', () => {
+    const a = [
+      { id: 1, name: 'Alice', age: 25 },
+      { id: 2, name: 'Bob', age: 30 },
+      { id: 3, name: 'Charlie', age: 35 },
+    ];
+    const b = [
+      { id: 2, name: 'Bob', age: 30 },
+      { id: 3, name: 'Charlie', age: 35 },
+      { id: 4, name: 'Dave', age: 40 },
+    ];
+    const result = compareArraysByProp(a, b, 'id');
+    expect(result).toEqual(false);
+  });
+
+  it('should return true for two arrays with the same objects with multiple properties and multiple props', () => {
+    const a = [
+      { id: 1, name: 'Alice', age: 25 },
+      { id: 2, name: 'Bob', age: 30 },
+      { id: 3, name: 'Charlie', age: 35 },
+    ];
+    const b = [
+      { id: 1, name: 'Alice', age: 25 },
+      { id: 2, name: 'Bob', age: 30 },
+      { id: 3, name: 'Charlie', age: 35 },
+    ];
+    const result = compareArraysByProp(a, b, ['id', 'name']);
+    expect(result).toEqual(true);
+  });
+
+  it('should return true for two arrays with the same objects with multiple properties and multiple props in a different order', () => {
+    const a = [
+      { id: 1, name: 'Alice', age: 25 },
+      { id: 2, name: 'Bob', age: 30 },
+      { id: 3, name: 'Charlie', age: 35 },
+    ];
+    const b = [
+      { id: 3, name: 'Charlie', age: 35 },
+      { id: 1, name: 'Alice', age: 25 },
+      { id: 2, name: 'Bob', age: 30 },
+    ];
+    const result = compareArraysByProp(a, b, ['id', 'name']);
+    expect(result).toEqual(true);
+  });
+
+  it('should return false for two arrays with different objects with multiple properties and multiple props', () => {
+    const a = [
+      { id: 1, name: 'Alice', age: 25 },
+      { id: 2, name: 'Bob', age: 30 },
+      { id: 3, name: 'Charlie', age: 35 },
+    ];
+    const b = [
+      { id: 1, name: 'Bob', age: 40 },
+      { id: 2, name: 'Alice', age: 45 },
+      { id: 3, name: 'Charlie', age: 50 },
+    ];
+    const result = compareArraysByProp(a, b, ['id', 'name']);
+    expect(result).toEqual(false);
+  });
+});

package/src/helpers/compareArraysByProp.ts

@@ -1,37 +1,56 @@
-// Import shared helpers
-import extractProp from './extractProp';
-
 /**
  * Compare two arrays of objects by only comparing the values in a specific
  *  property (e.g. compare user arrays by comparing their user.id values)
  * @author Gabe Abrams
  * @param a the first array
  * @param b the second array
- * @param prop the property to compare with
+ * @param prop the property to compare with, or an array of props to compare
+ *   with (if array, all values associated with those props must match)
  * @returns true if the arrays contain the same objects as determined by
  *   the values associated with each object's prop
  */
-const compareArraysByProp = (a: any[], b: any[], prop: string): boolean => {
-  // Extract values for comparison
-  const aVals = new Set(extractProp(a, prop));
-  const bVals = new Set(extractProp(b, prop));
-
-  // Compare sizes first
-  if (aVals.size !== bVals.size) {
+const compareArraysByProp = (
+  a: any[],
+  b: any[],
+  prop: string | string[],
+): boolean => {
+  // Immediately return if size of arrays is different
+  if (a.length !== b.length) {
     return false;
   }
 
-  // Same number of items. Make sure every object in aVals appears in bVals
-  // (if so, they should be equivalent since the sizes are the same)
-  // > Create map of items in bVals
-  const inBVals: { [k: string]: boolean } = {}; // item => true if in bVals
-  Array.from(bVals.values()).forEach((item) => {
-    inBVals[item] = true;
-  });
-  // > Loop through aVals and make sure every item is in bVals
-  return Array.from(aVals.values()).every((item) => {
-    return inBVals[item];
-  });
+  // Get all props
+  const props = (Array.isArray(prop) ? prop : [prop]);
+
+  // Clone second array so we can work on it
+  const bCloned = [...b];
+
+  // Remove elements from b as we find them in a
+  for (let i = 0; i < a.length; i++) {
+    // Find matching element in b
+    const matchingIndex = bCloned.findIndex((bItem) => {
+      // Compare based on all props
+      return props.every((propToCompareBy) => {
+        const aVal = (a[i] ?? {})[propToCompareBy];
+        const bVal = (bItem ?? {})[propToCompareBy];
+        return aVal === bVal;
+      });
+    });
+
+    // Check if no match
+    const noMatch = (matchingIndex < 0);
+
+    // If no match, there's no corresponding element in b
+    if (noMatch) {
+      return false;
+    }
+
+    // Remove the matching element
+    bCloned.splice(matchingIndex, 1);
+  }
+
+  // If we made it here, all elements in a have a corresponding element in b
+  return true;
 };
 
 export default compareArraysByProp;

package/src/helpers/extractProp.test.ts

@@ -0,0 +1,34 @@
+/**
+ * Test file for the extractProp helper
+ * @author Gabe Abrams
+ */
+
+// Import main helper
+import extractProp from './extractProp';
+
+describe('extractProp', () => {
+  it('should return an empty array if the input array is empty', () => {
+    const result = extractProp([], 'age');
+    expect(result).toEqual([]);
+  });
+
+  it('should extract the correct property from each object in the array', () => {
+    const users = [
+      { name: 'Alice', age: 25 },
+      { name: 'Bob', age: 30 },
+      { name: 'Charlie', age: 35 },
+    ];
+    const result = extractProp(users, 'age');
+    expect(result).toEqual([25, 30, 35]);
+  });
+
+  it('should return undefined for objects that do not have the specified property', () => {
+    const users = [
+      { name: 'Alice', age: 25 },
+      { name: 'Bob' },
+      { name: 'Charlie', age: 35 },
+    ];
+    const result = extractProp(users, 'age');
+    expect(result).toEqual([25, undefined, 35]);
+  });
+});

package/src/helpers/floorToNumDecimals.test.ts

@@ -0,0 +1,39 @@
+/**
+ * Test file for the floorToNumDecimals helper
+ * @author Gabe Abrams
+ */
+
+// Import main function
+import floorToNumDecimals from './floorToNumDecimals';
+
+describe('floorToNumDecimals', () => {
+  it('should return 0 for 0 with 0 decimals', () => {
+    const result = floorToNumDecimals(0, 0);
+    expect(result).toEqual(0);
+  });
+
+  it('should return 1 for 1 with 0 decimals', () => {
+    const result = floorToNumDecimals(1, 0);
+    expect(result).toEqual(1);
+  });
+
+  it('should return 1.23 for 1.234 with 2 decimals', () => {
+    const result = floorToNumDecimals(1.234, 2);
+    expect(result).toEqual(1.23);
+  });
+
+  it('should return -1.24 for -1.234 with 2 decimals', () => {
+    const result = floorToNumDecimals(-1.234, 2);
+    expect(result).toEqual(-1.24);
+  });
+
+  it('should return 1234 for 1234 with 0 decimals', () => {
+    const result = floorToNumDecimals(1234, 0);
+    expect(result).toEqual(1234);
+  });
+
+  it('should return 0.001 for 0.00123 with 3 decimals', () => {
+    const result = floorToNumDecimals(0.00123, 3);
+    expect(result).toEqual(0.001);
+  });
+});

package/src/helpers/forceNumIntoBounds.test.ts

@@ -0,0 +1,34 @@
+/**
+ * Test file for the forceNumIntoBounds helper
+ * @author Gabe Abrams
+ */
+
+// Import main helper
+import forceNumIntoBounds from './forceNumIntoBounds';
+
+describe('forceNumIntoBounds', () => {
+  it('should return the number if it is within the bounds', () => {
+    const result = forceNumIntoBounds(5, 0, 10);
+    expect(result).toEqual(5);
+  });
+
+  it('should return the minimum bound if the number is less than the minimum', () => {
+    const result = forceNumIntoBounds(-5, 0, 10);
+    expect(result).toEqual(0);
+  });
+
+  it('should return the maximum bound if the number is greater than the maximum', () => {
+    const result = forceNumIntoBounds(15, 0, 10);
+    expect(result).toEqual(10);
+  });
+
+  it('should return the minimum bound if the number is equal to the minimum', () => {
+    const result = forceNumIntoBounds(0, 0, 10);
+    expect(result).toEqual(0);
+  });
+
+  it('should return the maximum bound if the number is equal to the maximum', () => {
+    const result = forceNumIntoBounds(10, 0, 10);
+    expect(result).toEqual(10);
+  });
+});