@globalpayments/vega 2.20.1 → 2.21.0

package/dist/collection/components/vega-table/test/vega-table-sorter.test.js

@@ -0,0 +1,508 @@
+import { VegaTableSortController } from '../slimmers/controllers/vega-table-sort-controller';
+import { VegaTableSorter } from '../slimmers/controllers/vega-table-sorter';
+describe('VegaTableSorter', () => {
+  const sortController = new VegaTableSortController();
+  function sortData(data, sorters) {
+    const updatedSorters = sorters.map((s) => {
+      return new VegaTableSorter(s.prop, s.order, s.sorter);
+    });
+    return sortController.sortData([...data], updatedSorters);
+  }
+  describe('should handle single sorting as expected', () => {
+    it('should sort by amount in desc', () => {
+      const data = [
+        {
+          amount: 100,
+          balance: 100,
+          date: '01/01/2022',
+          key: '1',
+          name: 'A',
+          status: 'In Progress',
+        },
+        {
+          amount: 300,
+          balance: 200,
+          date: '01/02/2022',
+          key: '2',
+          name: 'D',
+          status: 'In Progress',
+        },
+        {
+          amount: 400,
+          balance: 300,
+          date: '01/03/2022',
+          key: '3',
+          name: 'B',
+          status: 'Not Started',
+        },
+        {
+          amount: 200,
+          balance: 400,
+          date: '01/04/2022',
+          key: '4',
+          name: 'C',
+          status: 'Pending',
+        },
+      ];
+      const sorters = [
+        {
+          prop: 'amount',
+          order: 'desc',
+          sorter: (a, b) => {
+            return a['amount'] - b['amount'];
+          },
+        },
+      ];
+      expect(sortData(data, sorters)).toEqual([
+        {
+          amount: 400,
+          balance: 300,
+          date: '01/03/2022',
+          key: '3',
+          name: 'B',
+          status: 'Not Started',
+        },
+        {
+          amount: 300,
+          balance: 200,
+          date: '01/02/2022',
+          key: '2',
+          name: 'D',
+          status: 'In Progress',
+        },
+        {
+          amount: 200,
+          balance: 400,
+          date: '01/04/2022',
+          key: '4',
+          name: 'C',
+          status: 'Pending',
+        },
+        {
+          amount: 100,
+          balance: 100,
+          date: '01/01/2022',
+          key: '1',
+          name: 'A',
+          status: 'In Progress',
+        },
+      ]);
+    });
+    it('should sort by balance in desc', () => {
+      const data = [
+        {
+          amount: 100,
+          balance: 100,
+          date: '01/01/2022',
+          key: '1',
+          name: 'A',
+          status: 'In Progress',
+        },
+        {
+          amount: 300,
+          balance: 200,
+          date: '01/02/2022',
+          key: '2',
+          name: 'D',
+          status: 'In Progress',
+        },
+        {
+          amount: 400,
+          balance: 300,
+          date: '01/03/2022',
+          key: '3',
+          name: 'B',
+          status: 'Not Started',
+        },
+        {
+          amount: 200,
+          balance: 400,
+          date: '01/04/2022',
+          key: '4',
+          name: 'C',
+          status: 'Pending',
+        },
+      ];
+      const sorters = [
+        {
+          prop: 'balance',
+          order: 'desc',
+          sorter: (a, b) => {
+            return a['balance'] - b['balance'];
+          },
+        },
+      ];
+      expect(sortData(data, sorters)).toEqual([
+        {
+          amount: 200,
+          balance: 400,
+          date: '01/04/2022',
+          key: '4',
+          name: 'C',
+          status: 'Pending',
+        },
+        {
+          amount: 400,
+          balance: 300,
+          date: '01/03/2022',
+          key: '3',
+          name: 'B',
+          status: 'Not Started',
+        },
+        {
+          amount: 300,
+          balance: 200,
+          date: '01/02/2022',
+          key: '2',
+          name: 'D',
+          status: 'In Progress',
+        },
+        {
+          amount: 100,
+          balance: 100,
+          date: '01/01/2022',
+          key: '1',
+          name: 'A',
+          status: 'In Progress',
+        },
+      ]);
+    });
+  });
+  describe('should handle multi-sorting sorting as expected', () => {
+    it('should sort by age, then by score and where age is the same, sort by score', () => {
+      const data = [
+        { age: 25, score: 90 },
+        { age: 20, score: 85 },
+        { age: 25, score: 95 },
+        { age: 30, score: 85 },
+        { age: 20, score: 80 },
+        { age: 20, score: 100 },
+        { age: 25, score: 85 },
+        { age: 25, score: 85 },
+        { age: 30, score: 90 },
+        { age: 30, score: 90 },
+        { age: 30, score: 85 },
+      ];
+      const sorters = [
+        {
+          prop: 'age',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a['age'] - b['age'];
+          },
+        },
+        {
+          prop: 'score',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a['score'] - b['score'];
+          },
+        },
+      ];
+      expect(sortData(data, sorters)).toEqual([
+        { age: 20, score: 80 },
+        { age: 20, score: 85 },
+        { age: 20, score: 100 },
+        { age: 25, score: 85 },
+        { age: 25, score: 85 },
+        { age: 25, score: 90 },
+        { age: 25, score: 95 },
+        { age: 30, score: 85 },
+        { age: 30, score: 85 },
+        { age: 30, score: 90 },
+        { age: 30, score: 90 },
+      ]);
+    });
+    it('should sort by name, age and where name is the same, sort by age', () => {
+      const data = [
+        { name: 'Alice', age: 25, score: 88 },
+        { name: 'Bob', age: 22, score: 95 },
+        { name: 'Charlie', age: 25, score: 82 },
+        { name: 'Alice', age: 28, score: 78 },
+        { name: 'Bob', age: 22, score: 90 },
+      ];
+      const sorters = [
+        {
+          prop: 'name',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a.name.localeCompare(b.name);
+          },
+        },
+        {
+          prop: 'age',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a['age'] - b['age'];
+          },
+        },
+      ];
+      expect(sortData(data, sorters)).toEqual([
+        { name: 'Alice', age: 25, score: 88 },
+        { name: 'Alice', age: 28, score: 78 },
+        { name: 'Bob', age: 22, score: 95 },
+        { name: 'Bob', age: 22, score: 90 },
+        { name: 'Charlie', age: 25, score: 82 },
+      ]);
+    });
+    it('should sort by age, score and where age is the same, sort by score', () => {
+      const data = [
+        { age: 25, score: 88 },
+        { age: 22, score: 95 },
+        { age: 25, score: 82 },
+        { age: 28, score: 78 },
+        { age: 22, score: 90 },
+      ];
+      const sorters = [
+        {
+          prop: 'age',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a['age'] - b['age'];
+          },
+        },
+        {
+          prop: 'score',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a['score'] - b['score'];
+          },
+        },
+      ];
+      expect(sortData(data, sorters)).toEqual([
+        { age: 22, score: 90 },
+        { age: 22, score: 95 },
+        { age: 25, score: 82 },
+        { age: 25, score: 88 },
+        { age: 28, score: 78 },
+      ]);
+    });
+    it('should sort by name, age, score and where name is the same, sort by age, and where age is the same, sort by score', () => {
+      const data = [
+        { name: 'Alice', age: 25, score: 88 },
+        { name: 'Bob', age: 22, score: 95 },
+        { name: 'Charlie', age: 25, score: 82 },
+        { name: 'Alice', age: 28, score: 78 },
+        { name: 'Bob', age: 22, score: 90 },
+      ];
+      const sorters = [
+        {
+          prop: 'name',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a.name.localeCompare(b.name);
+          },
+        },
+        {
+          prop: 'age',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a['age'] - b['age'];
+          },
+        },
+        {
+          prop: 'score',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a['score'] - b['score'];
+          },
+        },
+      ];
+      expect(sortData(data, sorters)).toEqual([
+        { name: 'Alice', age: 25, score: 88 },
+        { name: 'Alice', age: 28, score: 78 },
+        { name: 'Bob', age: 22, score: 90 },
+        { name: 'Bob', age: 22, score: 95 },
+        { name: 'Charlie', age: 25, score: 82 },
+      ]);
+    });
+    it('should primarily sort by amount in desc order and if no tie in amount, secondary sorting of balance should not change sorted amount in desc', () => {
+      const data = [
+        {
+          amount: 100,
+          balance: 100,
+          date: '01/01/2022',
+          key: '1',
+          name: 'A',
+          status: 'In Progress',
+        },
+        {
+          amount: 300,
+          balance: 200,
+          date: '01/02/2022',
+          key: '2',
+          name: 'D',
+          status: 'In Progress',
+        },
+        {
+          amount: 400,
+          balance: 300,
+          date: '01/03/2022',
+          key: '3',
+          name: 'B',
+          status: 'Not Started',
+        },
+        {
+          amount: 200,
+          balance: 400,
+          date: '01/04/2022',
+          key: '4',
+          name: 'C',
+          status: 'Pending',
+        },
+      ];
+      const sorters = [
+        {
+          prop: 'amount',
+          order: 'desc',
+          sorter: (a, b) => {
+            return a['amount'] - b['amount'];
+          },
+        },
+        {
+          prop: 'balance',
+          order: 'desc',
+          sorter: (a, b) => {
+            return a['balance'] - b['balance'];
+          },
+        },
+      ];
+      expect(sortData(data, sorters)).toEqual([
+        {
+          amount: 400,
+          balance: 300,
+          date: '01/03/2022',
+          key: '3',
+          name: 'B',
+          status: 'Not Started',
+        },
+        {
+          amount: 300,
+          balance: 200,
+          date: '01/02/2022',
+          key: '2',
+          name: 'D',
+          status: 'In Progress',
+        },
+        {
+          amount: 200,
+          balance: 400,
+          date: '01/04/2022',
+          key: '4',
+          name: 'C',
+          status: 'Pending',
+        },
+        {
+          amount: 100,
+          balance: 100,
+          date: '01/01/2022',
+          key: '1',
+          name: 'A',
+          status: 'In Progress',
+        },
+      ]);
+    });
+    it('should sort by name A-Z then by amount from largest to smallest', () => {
+      const data = [
+        {
+          key: '1',
+          date: '01/03/2022',
+          name: 'C',
+          amount: 30,
+          amount2: 30,
+          balance: '$300',
+        },
+        {
+          key: '2',
+          date: '01/06/2022',
+          name: 'C',
+          amount: 20,
+          amount2: 20,
+          balance: '$400',
+        },
+        {
+          key: '3',
+          date: '01/05/2022',
+          name: 'C',
+          amount: 20,
+          amount2: 30,
+          balance: '$401',
+        },
+        {
+          key: '4',
+          date: '01/02/2022',
+          name: 'B',
+          amount: 20,
+          amount2: 125,
+          balance: '$200',
+        },
+        {
+          key: '5',
+          date: '01/04/2022',
+          name: 'D',
+          amount: 300,
+          amount2: 130,
+          balance: '$402',
+        },
+      ];
+      const sorters = [
+        {
+          prop: 'name',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a.name.localeCompare(b.name);
+          },
+        },
+        {
+          prop: 'amount',
+          order: 'desc',
+          sorter: (a, b) => {
+            return a['amount'] - b['amount'];
+          },
+        },
+      ];
+      expect(sortData(data, sorters)).toEqual([
+        {
+          key: '4',
+          date: '01/02/2022',
+          name: 'B',
+          amount: 20,
+          amount2: 125,
+          balance: '$200',
+        },
+        {
+          key: '1',
+          date: '01/03/2022',
+          name: 'C',
+          amount: 30,
+          amount2: 30,
+          balance: '$300',
+        },
+        {
+          key: '2',
+          date: '01/06/2022',
+          name: 'C',
+          amount: 20,
+          amount2: 20,
+          balance: '$400',
+        },
+        {
+          key: '3',
+          date: '01/05/2022',
+          name: 'C',
+          amount: 20,
+          amount2: 30,
+          balance: '$401',
+        },
+        {
+          key: '5',
+          date: '01/04/2022',
+          name: 'D',
+          amount: 300,
+          amount2: 130,
+          balance: '$402',
+        },
+      ]);
+    });
+  });
+});

package/dist/collection/helpers/formatter/string-formatter/custom-formatter-strategy.js

@@ -1,3 +1,4 @@
+import { isNonNullable } from '../../../types/type-guard';
 /**
  * Used to format a string using a custom formatter.
  */
@@ -10,9 +11,12 @@ export class CustomFormatterStrategy {
    * string formatter class that you are passing to the constructor of the class. This custom string
    * formatter class likely contains methods or properties related to formatting strings in a specific
    * way according to your requirements.
+   * @param {boolean} resetCaretPosition - The caret position should update to the last or keep the current position after format
    */
-  constructor(formatter) {
+  constructor(formatter, resetCaretPosition = false) {
+    this.resetCaretPositionFlag = false;
     this.formatter = formatter;
+    this.resetCaretPositionFlag = resetCaretPosition;
   }
   /**
    * The format function in TypeScript takes a string input and returns the formatted output using a
@@ -31,16 +35,24 @@ export class CustomFormatterStrategy {
    *
    * @param {string} input - The `input` parameter in the `calculateCaretPosition` function is a string
    * that represents the text input where you want to calculate the caret position.
+   * @param {number} caretPosition - The current position of caret
    * @returns {Nullable<number>} The `calculateCaretPosition` function is returning the length of the formatted input
    * string.
    */
-  calculateCaretPosition(input) {
-    return this.format(input).length;
+  calculateCaretPosition(input, caretPosition) {
+    if (this.resetCaretPositionFlag === true) {
+      return this.format(input).length;
+    }
+    else if (isNonNullable(caretPosition)) {
+      const startValue = input.substring(0, caretPosition);
+      const maskedStartValue = this.format(startValue);
+      return caretPosition + (maskedStartValue.length - startValue.length);
+    }
   }
   /**
    * Trigger the formatter at init
    *
-   * @returns {boolean} true
+   * @returns {boolean} true or false
    */
   shouldTriggerAtInit() {
     return true;

package/dist/collection/helpers/formatter/test/string-formatter/custom-formatter-strategy.test.js

@@ -1,7 +1,12 @@
 import { CustomFormatterStrategy } from '../../string-formatter/custom-formatter-strategy';
 test('custom formatter strategy is working as expected', () => {
-  const customFormatterStrategy = new CustomFormatterStrategy((value) => value.toUpperCase());
+  const customFormatterStrategy = new CustomFormatterStrategy((value) => value.toUpperCase(), true);
   expect(customFormatterStrategy.format('test')).toBe('TEST');
-  expect(customFormatterStrategy.calculateCaretPosition('test')).toBe(4);
+  expect(customFormatterStrategy.calculateCaretPosition('test', null)).toBe(4);
   expect(customFormatterStrategy.shouldTriggerAtInit()).toBe(true);
 });
+test('custom formatter strategy method calculateCaretPosition is working as expected', () => {
+  const customFormatterStrategy = new CustomFormatterStrategy((value) => value.toUpperCase());
+  expect(customFormatterStrategy.calculateCaretPosition('test', null)).toBe(undefined);
+  expect(customFormatterStrategy.calculateCaretPosition('test', 3)).toBe(3);
+});

package/dist/collection/helpers/vega-telemetry-helper/test/vega-env-manager.test.js

@@ -4,7 +4,7 @@ test('should return the correct vega environment parameters', () => {
   const vegaEnv = VegaEnvManager.getVegaEnv();
   expect(vegaEnv).toEqual({
     framework: 'vanilla-js',
-    version: '2.20.1',
+    version: '2.21.0',
   });
 });
 test('should return the correct vega framework', () => {

package/dist/collection/helpers/vega-telemetry-helper/vega-env-manager.js

@@ -9,9 +9,9 @@ export var FrameworkEnum;
 /** The VegaEnvManager class manages vega environment parameters. */
 class VegaEnvManager {
   constructor() {
-    // The `2.20.1` will be replaced to a version string when running publish script.
+    // The `2.21.0` will be replaced to a version string when running publish script.
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    this.vegaVersion = '2.20.1';
+    this.vegaVersion = '2.21.0';
     this.framework = FrameworkEnum.VanillaJs;
   }
   /**

package/dist/collection/utils/e2e-utils.js

@@ -235,6 +235,7 @@ export const getScreenshotDiffResults = async (page, desc, selector) => {
  * @param {boolean} config.wrapped - set it to true when use visual test to catch the fixed area
  * @param {EventSemanticsConfig} config.eventSemanticsConfig - sets the event semantics configuration for the EventManager
  * @param {string} config.date --sets the date want to mock
+ * @param {number} config.timeout --sets the content timeout
  */
 export const initVegaE2EPage = async (content, config) => {
   const page = await newE2EPage();
@@ -245,9 +246,12 @@ export const initVegaE2EPage = async (content, config) => {
   const injectTestIcons = `<script type='module'>
     window.VegaIconManager.register(${JSON.stringify(TestIcons)});
   </script>`;
-  await page.setContent((config === null || config === void 0 ? void 0 : config.wrapped)
+  const contentHtml = (config === null || config === void 0 ? void 0 : config.wrapped)
     ? `${injectTestIcons}${script}<div style="padding: 10px" id="visual-container">${content}</div>`
-    : injectTestIcons + script + content);
+    : injectTestIcons + script + content;
+  (config === null || config === void 0 ? void 0 : config.timeout)
+    ? await page.setContent(contentHtml, { timeout: config.timeout })
+    : await page.setContent(contentHtml);
   await page.addStyleTag({ path: './src/test-assets/test-font-base64.css' });
   await disableAnimationForPage(page);
   await page.waitForChanges();