genesys-spark-components 4.0.0-beta.35 → 4.0.0-beta.37

package/dist/collection/utils/date/iso-dates.spec.js

@@ -0,0 +1,170 @@
+import { asIsoDate, asIsoDateRange, fromIsoDate, fromIsoDateRange } from "./iso-dates";
+describe('ISO Date', () => {
+  describe('#asIsoDate', () => {
+    [
+      { input: new Date(2020, 0, 1), expectedOutput: '2020-01-01' },
+      { input: new Date(2020, 1, 1), expectedOutput: '2020-02-01' },
+      { input: new Date(2020, 2, 1), expectedOutput: '2020-03-01' },
+      { input: new Date(2020, 3, 1), expectedOutput: '2020-04-01' },
+      { input: new Date(2020, 4, 1), expectedOutput: '2020-05-01' },
+      { input: new Date(2020, 5, 1), expectedOutput: '2020-06-01' },
+      { input: new Date(2020, 6, 1), expectedOutput: '2020-07-01' },
+      { input: new Date(2020, 7, 1), expectedOutput: '2020-08-01' },
+      { input: new Date(2020, 8, 1), expectedOutput: '2020-09-01' },
+      { input: new Date(2020, 9, 1), expectedOutput: '2020-10-01' },
+      { input: new Date(2020, 10, 1), expectedOutput: '2020-11-01' },
+      { input: new Date(2020, 11, 1), expectedOutput: '2020-12-01' }
+    ].forEach(({ input, expectedOutput }, index) => {
+      it(`should work as expected (${index + 1})`, () => {
+        const output = asIsoDate(input);
+        expect(output).toBe(expectedOutput);
+      });
+    });
+  });
+  describe('#asIsoDateRange', () => {
+    [
+      {
+        input: [new Date(2020, 0, 1), new Date(2020, 1, 15)],
+        expectedOutput: '2020-01-01/2020-02-15'
+      },
+      {
+        input: [new Date(2020, 1, 1), new Date(2020, 2, 15)],
+        expectedOutput: '2020-02-01/2020-03-15'
+      },
+      {
+        input: [new Date(2020, 2, 1), new Date(2020, 3, 15)],
+        expectedOutput: '2020-03-01/2020-04-15'
+      },
+      {
+        input: [new Date(2020, 3, 1), new Date(2020, 4, 15)],
+        expectedOutput: '2020-04-01/2020-05-15'
+      },
+      {
+        input: [new Date(2020, 4, 1), new Date(2020, 5, 15)],
+        expectedOutput: '2020-05-01/2020-06-15'
+      },
+      {
+        input: [new Date(2020, 5, 1), new Date(2020, 6, 15)],
+        expectedOutput: '2020-06-01/2020-07-15'
+      },
+      {
+        input: [new Date(2020, 6, 1), new Date(2020, 7, 15)],
+        expectedOutput: '2020-07-01/2020-08-15'
+      },
+      {
+        input: [new Date(2020, 7, 1), new Date(2020, 8, 15)],
+        expectedOutput: '2020-08-01/2020-09-15'
+      },
+      {
+        input: [new Date(2020, 8, 1), new Date(2020, 9, 15)],
+        expectedOutput: '2020-09-01/2020-10-15'
+      },
+      {
+        input: [new Date(2020, 9, 1), new Date(2020, 10, 15)],
+        expectedOutput: '2020-10-01/2020-11-15'
+      },
+      {
+        input: [new Date(2020, 10, 1), new Date(2020, 11, 15)],
+        expectedOutput: '2020-11-01/2020-12-15'
+      },
+      {
+        input: [new Date(2020, 11, 1), new Date(2021, 0, 15)],
+        expectedOutput: '2020-12-01/2021-01-15'
+      }
+    ].forEach(({ input, expectedOutput }, index) => {
+      it(`should work as expected (${index + 1})`, () => {
+        const output = asIsoDateRange(input[0], input[1]);
+        expect(output).toBe(expectedOutput);
+      });
+    });
+    it('should handle a start date after an end date', () => {
+      const output = asIsoDateRange(new Date(2020, 1, 1), new Date(2020, 0, 1));
+      expect(output).toBe('2020-01-01/2020-02-01');
+    });
+  });
+  describe('#fromIsoDate', () => {
+    [
+      { input: '2020-01-01', expectedOutput: new Date(2020, 0, 1) },
+      { input: '2020-02-01', expectedOutput: new Date(2020, 1, 1) },
+      { input: '2020-03-01', expectedOutput: new Date(2020, 2, 1) },
+      { input: '2020-04-01', expectedOutput: new Date(2020, 3, 1) },
+      { input: '2020-05-01', expectedOutput: new Date(2020, 4, 1) },
+      { input: '2020-06-01', expectedOutput: new Date(2020, 5, 1) },
+      { input: '2020-07-01', expectedOutput: new Date(2020, 6, 1) },
+      { input: '2020-08-01', expectedOutput: new Date(2020, 7, 1) },
+      { input: '2020-09-01', expectedOutput: new Date(2020, 8, 1) },
+      { input: '2020-10-01', expectedOutput: new Date(2020, 9, 1) },
+      { input: '2020-11-01', expectedOutput: new Date(2020, 10, 1) },
+      { input: '2020-12-01', expectedOutput: new Date(2020, 11, 1) }
+    ].forEach(({ input, expectedOutput }, index) => {
+      it(`should work as expected (${index + 1})`, () => {
+        const output = fromIsoDate(input);
+        expect(output).toStrictEqual(expectedOutput);
+      });
+    });
+  });
+  describe('#fromIsoDateRange', () => {
+    [
+      {
+        input: '2020-01-01/2020-02-15',
+        expectedOutput: [new Date(2020, 0, 1), new Date(2020, 1, 15)]
+      },
+      {
+        input: '2020-02-01/2020-03-15',
+        expectedOutput: [new Date(2020, 1, 1), new Date(2020, 2, 15)]
+      },
+      {
+        input: '2020-03-01/2020-04-15',
+        expectedOutput: [new Date(2020, 2, 1), new Date(2020, 3, 15)]
+      },
+      {
+        input: '2020-04-01/2020-05-15',
+        expectedOutput: [new Date(2020, 3, 1), new Date(2020, 4, 15)]
+      },
+      {
+        input: '2020-05-01/2020-06-15',
+        expectedOutput: [new Date(2020, 4, 1), new Date(2020, 5, 15)]
+      },
+      {
+        input: '2020-06-01/2020-07-15',
+        expectedOutput: [new Date(2020, 5, 1), new Date(2020, 6, 15)]
+      },
+      {
+        input: '2020-07-01/2020-08-15',
+        expectedOutput: [new Date(2020, 6, 1), new Date(2020, 7, 15)]
+      },
+      {
+        input: '2020-08-01/2020-09-15',
+        expectedOutput: [new Date(2020, 7, 1), new Date(2020, 8, 15)]
+      },
+      {
+        input: '2020-09-01/2020-10-15',
+        expectedOutput: [new Date(2020, 8, 1), new Date(2020, 9, 15)]
+      },
+      {
+        input: '2020-10-01/2020-11-15',
+        expectedOutput: [new Date(2020, 9, 1), new Date(2020, 10, 15)]
+      },
+      {
+        input: '2020-11-01/2020-12-15',
+        expectedOutput: [new Date(2020, 10, 1), new Date(2020, 11, 15)]
+      },
+      {
+        input: '2020-12-01/2021-01-15',
+        expectedOutput: [new Date(2020, 11, 1), new Date(2021, 0, 15)]
+      }
+    ].forEach(({ input, expectedOutput }, index) => {
+      it(`should work as expected (${index + 1})`, () => {
+        const output = fromIsoDateRange(input);
+        expect(output).toStrictEqual(expectedOutput);
+      });
+    });
+    it('should handle missing zero padding', () => {
+      const output = fromIsoDateRange('2020-1-1/2020-2-15');
+      expect(output).toStrictEqual([
+        new Date(2020, 0, 1),
+        new Date(2020, 1, 15)
+      ]);
+    });
+  });
+});

package/dist/collection/utils/date/year-month-values.spec.js

@@ -0,0 +1,81 @@
+import { getISOYearMonth, getYearMonthObject } from "./year-month-values";
+describe('Year Month Values', () => {
+  describe('#getISOYearMonth', () => {
+    [
+      { year: 2022, month: '01', expectedOutput: '2022-01' },
+      { year: 2022, month: '02', expectedOutput: '2022-02' },
+      { year: 2022, month: '03', expectedOutput: '2022-03' },
+      { year: 2022, month: '04', expectedOutput: '2022-04' },
+      { year: 2022, month: '05', expectedOutput: '2022-05' },
+      { year: 2022, month: '06', expectedOutput: '2022-06' },
+      { year: 2022, month: '07', expectedOutput: '2022-07' },
+      { year: 2022, month: '08', expectedOutput: '2022-08' },
+      { year: 2022, month: '09', expectedOutput: '2022-09' },
+      { year: '2022', month: 10, expectedOutput: '2022-10' },
+      { year: '2022', month: 11, expectedOutput: '2022-11' },
+      { year: '2022', month: 12, expectedOutput: '2022-12' }
+    ].forEach(({ year, month, expectedOutput }, index) => {
+      it(`should work as expected (${index + 1})`, () => {
+        const output = getISOYearMonth(year, month);
+        expect(output).toBe(expectedOutput);
+      });
+    });
+  });
+  describe('#getYearMonthObject', () => {
+    [
+      {
+        ISOYearMonth: '2022-01',
+        expectedOutput: { year: '2022', month: '01' }
+      },
+      {
+        ISOYearMonth: '2022-02',
+        expectedOutput: { year: '2022', month: '02' }
+      },
+      {
+        ISOYearMonth: '2022-03',
+        expectedOutput: { year: '2022', month: '03' }
+      },
+      {
+        ISOYearMonth: '2022-04',
+        expectedOutput: { year: '2022', month: '04' }
+      },
+      {
+        ISOYearMonth: '2022-05',
+        expectedOutput: { year: '2022', month: '05' }
+      },
+      {
+        ISOYearMonth: '2022-06',
+        expectedOutput: { year: '2022', month: '06' }
+      },
+      {
+        ISOYearMonth: '2022-07',
+        expectedOutput: { year: '2022', month: '07' }
+      },
+      {
+        ISOYearMonth: '2022-08',
+        expectedOutput: { year: '2022', month: '08' }
+      },
+      {
+        ISOYearMonth: '2022-09',
+        expectedOutput: { year: '2022', month: '09' }
+      },
+      {
+        ISOYearMonth: '2022-10',
+        expectedOutput: { year: '2022', month: '10' }
+      },
+      {
+        ISOYearMonth: '2022-11',
+        expectedOutput: { year: '2022', month: '11' }
+      },
+      {
+        ISOYearMonth: '2022-12',
+        expectedOutput: { year: '2022', month: '12' }
+      }
+    ].forEach(({ ISOYearMonth, expectedOutput }, index) => {
+      it(`should work as expected (${index + 1})`, () => {
+        const output = getYearMonthObject(ISOYearMonth);
+        expect(output).toStrictEqual(expectedOutput);
+      });
+    });
+  });
+});

package/dist/collection/utils/decorator/on-click-outside.js

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { Build as BUILD, getElement } from '@stencil/core';
+import { Build as BUILD, getElement } from "@stencil/core";
 const OnClickOutsideOptionsDefaults = {
   triggerEvents: 'click',
   exclude: ''

package/dist/collection/utils/decorator/on-mutation.js

@@ -4,7 +4,7 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import { Build as BUILD, getElement } from '@stencil/core';
+import { Build as BUILD, getElement } from "@stencil/core";
 export function OnMutation(options) {
   return (proto, methodName) => {
     // this is to resolve the 'compiler optimization issue':

package/dist/collection/utils/decorator/on-resize.js

@@ -4,7 +4,7 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-import { Build as BUILD, getElement } from '@stencil/core';
+import { Build as BUILD, getElement } from "@stencil/core";
 export function OnResize() {
   return (proto, methodName) => {
     // this is to resolve the 'compiler optimization issue':

package/dist/collection/utils/dom/event-is-from.spec.js

@@ -0,0 +1,29 @@
+import { eventIsFrom } from "./event-is-from";
+describe('#eventIsFrom', () => {
+  const parentElement = {
+    matches: selector => {
+      return selector === '.parent';
+    }
+  };
+  const targetElement = {
+    matches: selector => {
+      return selector === '.target';
+    },
+    parentElement
+  };
+  const dummyEvent = {
+    target: targetElement
+  };
+  it('returns true when the event target matches the selector', () => {
+    expect(eventIsFrom('.target', dummyEvent)).toBe(true);
+  });
+  it('returns true when a target ancestor matches the selector', () => {
+    expect(eventIsFrom('.parent', dummyEvent)).toBe(true);
+  });
+  it('returns false when no ancestor matches the selector', () => {
+    expect(eventIsFrom('.nothing', dummyEvent)).toBe(false);
+  });
+  it('returns false when the current target element matches the selector', () => {
+    expect(eventIsFrom('.currentTarget', dummyEvent)).toBe(false);
+  });
+});

package/dist/collection/utils/dom/manipulate-elements-classes.spec.js

@@ -0,0 +1,104 @@
+import { JSDOM } from "jsdom";
+import { addClassToElements, removeClassToElements } from "./manipulate-elements-classes";
+describe('manipulate elements classes', () => {
+  let dom;
+  let element1;
+  let element2;
+  let element3;
+  let element4;
+  let element5;
+  beforeEach(() => {
+    dom = new JSDOM(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+         <title>JSDOM DOM</title>
+        </head>
+        <body>
+          <div id="element-1" class="class-1 class-2"><div>
+          <div id="element-2" class="class-1 class-2"><div>
+          <div id="element-3" class="class-1 class-2"><div>
+          <div id="element-4" class="class-1 class-2"><div>
+          <div id="element-5" class="class-1 class-2"><div>
+        </body>
+      </html>
+    `);
+    element1 = dom.window.document.getElementById('element-1');
+    element2 = dom.window.document.getElementById('element-2');
+    element3 = dom.window.document.getElementById('element-3');
+    element4 = dom.window.document.getElementById('element-4');
+    element5 = dom.window.document.getElementById('element-5');
+  });
+  describe('#addClassToElements', () => {
+    it('should add a class to an element', () => {
+      expect(element1.classList.contains('class-1')).toBe(true);
+      expect(element1.classList.contains('class-2')).toBe(true);
+      expect(element1.classList.contains('class-3')).toBe(false);
+      addClassToElements(element1, 'class-3');
+      expect(element1.classList.contains('class-1')).toBe(true);
+      expect(element1.classList.contains('class-2')).toBe(true);
+      expect(element1.classList.contains('class-3')).toBe(true);
+    });
+    it('should add a class to an array of elements', () => {
+      expect(element1.classList.contains('class-3')).toBe(false);
+      expect(element2.classList.contains('class-3')).toBe(false);
+      expect(element3.classList.contains('class-3')).toBe(false);
+      expect(element4.classList.contains('class-3')).toBe(false);
+      expect(element5.classList.contains('class-3')).toBe(false);
+      addClassToElements([element1, element2, element3, element4, element5], 'class-3');
+      expect(element1.classList.contains('class-3')).toBe(true);
+      expect(element2.classList.contains('class-3')).toBe(true);
+      expect(element3.classList.contains('class-3')).toBe(true);
+      expect(element4.classList.contains('class-3')).toBe(true);
+      expect(element5.classList.contains('class-3')).toBe(true);
+    });
+    it('should handle an undefined input for elements', () => {
+      expect(element1.classList.contains('class-3')).toBe(false);
+      expect(element2.classList.contains('class-3')).toBe(false);
+      expect(element3.classList.contains('class-3')).toBe(false);
+      expect(element4.classList.contains('class-3')).toBe(false);
+      expect(element5.classList.contains('class-3')).toBe(false);
+      addClassToElements(undefined, 'class-3');
+      expect(element1.classList.contains('class-3')).toBe(false);
+      expect(element2.classList.contains('class-3')).toBe(false);
+      expect(element3.classList.contains('class-3')).toBe(false);
+      expect(element4.classList.contains('class-3')).toBe(false);
+      expect(element5.classList.contains('class-3')).toBe(false);
+    });
+  });
+  describe('#removeClassToElements', () => {
+    it('should add a class to an element', () => {
+      expect(element1.classList.contains('class-1')).toBe(true);
+      expect(element1.classList.contains('class-2')).toBe(true);
+      removeClassToElements(element1, 'class-2');
+      expect(element1.classList.contains('class-1')).toBe(true);
+      expect(element1.classList.contains('class-2')).toBe(false);
+    });
+    it('should add a class to an array of elements', () => {
+      expect(element1.classList.contains('class-2')).toBe(true);
+      expect(element2.classList.contains('class-2')).toBe(true);
+      expect(element3.classList.contains('class-2')).toBe(true);
+      expect(element4.classList.contains('class-2')).toBe(true);
+      expect(element5.classList.contains('class-2')).toBe(true);
+      removeClassToElements([element1, element2, element3, element4, element5], 'class-2');
+      expect(element1.classList.contains('class-2')).toBe(false);
+      expect(element2.classList.contains('class-2')).toBe(false);
+      expect(element3.classList.contains('class-2')).toBe(false);
+      expect(element4.classList.contains('class-2')).toBe(false);
+      expect(element5.classList.contains('class-2')).toBe(false);
+    });
+    it('should handle an undefined input for elements', () => {
+      expect(element1.classList.contains('class-2')).toBe(true);
+      expect(element2.classList.contains('class-2')).toBe(true);
+      expect(element3.classList.contains('class-2')).toBe(true);
+      expect(element4.classList.contains('class-2')).toBe(true);
+      expect(element5.classList.contains('class-2')).toBe(true);
+      removeClassToElements(undefined, 'class-2');
+      expect(element1.classList.contains('class-2')).toBe(true);
+      expect(element2.classList.contains('class-2')).toBe(true);
+      expect(element3.classList.contains('class-2')).toBe(true);
+      expect(element4.classList.contains('class-2')).toBe(true);
+      expect(element5.classList.contains('class-2')).toBe(true);
+    });
+  });
+});

package/dist/collection/utils/dom/on-input-disabled-state-change.js

@@ -1,4 +1,4 @@
-import { calculateInputDisabledState } from './calculate-input-disabled-state';
+import { calculateInputDisabledState } from "./calculate-input-disabled-state";
 export function onInputDisabledStateChange(element, callback) {
   const fieldSet = element.closest('fieldset');
   const observer = new MutationObserver(mutations => {

package/dist/collection/utils/dom/random-html-id.spec.js

@@ -0,0 +1,14 @@
+import { randomHTMLId } from "./random-html-id";
+describe('#randomHTMLId', () => {
+  it('should return an id with a default prefix', () => {
+    const output = randomHTMLId();
+    expect(output.startsWith('gux-')).toBe(true);
+    expect(output.length).toBeGreaterThan(4);
+  });
+  it('should return an id with a supplied prefix', () => {
+    const prefix = 'test';
+    const output = randomHTMLId(prefix);
+    expect(output.startsWith(`${prefix}-`)).toBe(true);
+    expect(output.length).toBeGreaterThan(`${prefix}-`.length);
+  });
+});

package/dist/collection/utils/dom/set-input-value.js

@@ -1,4 +1,4 @@
-import simulateNativeEvent from './simulate-native-event';
+import simulateNativeEvent from "./simulate-native-event";
 export default function setInputValue(input, value, focusAfter) {
   input.value = value;
   simulateNativeEvent(input, 'input');

package/dist/collection/utils/dom/when-event-is-from.spec.js

@@ -0,0 +1,37 @@
+import { whenEventIsFrom } from "./when-event-is-from";
+describe('#whenEventIsFrom', () => {
+  const parentElement = {
+    matches: selector => {
+      return selector === '.parent';
+    }
+  };
+  const targetElement = {
+    matches: selector => {
+      return selector === '.target';
+    },
+    parentElement
+  };
+  const dummyEvent = {
+    target: targetElement
+  };
+  it('runs the handler when the event target matches the selector', () => {
+    const mockHandler = jest.fn();
+    whenEventIsFrom('.target', dummyEvent, mockHandler);
+    expect(mockHandler.mock.calls[0][0]).toBe(targetElement);
+  });
+  it('runs the handler when a target ancestor matches the selector', () => {
+    const mockHandler = jest.fn();
+    whenEventIsFrom('.parent', dummyEvent, mockHandler);
+    expect(mockHandler.mock.calls[0][0]).toBe(parentElement);
+  });
+  it('does not run the handler when no ancestor matches the selector', () => {
+    const mockHandler = jest.fn();
+    whenEventIsFrom('.nothing', dummyEvent, mockHandler);
+    expect(mockHandler.mock.calls.length).toBe(0);
+  });
+  it('does not run the handler when the current target element matches the selector', () => {
+    const mockHandler = jest.fn();
+    whenEventIsFrom('.currentTarget', dummyEvent, mockHandler);
+    expect(mockHandler.mock.calls.length).toBe(0);
+  });
+});

package/dist/collection/utils/string/search.spec.js

@@ -0,0 +1,40 @@
+import { getFuzzyReplacements, matchesFuzzy } from "./search";
+describe('search', () => {
+  describe('matches fuzzy', () => {
+    it('should not match irrelevant strings', () => {
+      expect(matchesFuzzy('foo', 'bar')).toBe(false);
+    });
+    it('should match exact strings', () => {
+      expect(matchesFuzzy('foo', 'foo')).toBe(true);
+    });
+    it('should match contains', () => {
+      expect(matchesFuzzy('oba', 'foobar')).toBe(true);
+    });
+    it('should match starts with', () => {
+      expect(matchesFuzzy('foo', 'foobar')).toBe(true);
+    });
+    it('should match ends with', () => {
+      expect(matchesFuzzy('bar', 'foobar')).toBe(true);
+    });
+    it('should match multiple partial words', () => {
+      expect(matchesFuzzy('dial ph', 'Dial Home Phone')).toBe(true);
+    });
+    it('should match multiple partial words using +', () => {
+      expect(matchesFuzzy('dial+ph', 'Dial Home Phone')).toBe(true);
+    });
+    it('should match strings that contain special regex characters', () => {
+      expect(matchesFuzzy('foo[bar', 'foo[bar[baz')).toBe(true);
+    });
+  });
+  describe('getFuzzyReplacements', () => {
+    it('returns matchers for each word', () => {
+      expect(getFuzzyReplacements('foo bar')).toEqual([/foo/i, /bar/i]);
+    });
+    it('returns matches for words split by +', () => {
+      expect(getFuzzyReplacements('foo+bar')).toEqual([/foo/i, /bar/i]);
+    });
+    it('can return matches for word with special regex characters', () => {
+      expect(getFuzzyReplacements('foo[bar')).toEqual([/foo\[bar/i]);
+    });
+  });
+});

package/dist/collection/utils/tracking/usage.js

@@ -1,4 +1,4 @@
-import packageInfo from '../../../package.json';
+import packageInfo from "../../../package.json";
 // The number of actions to process every interval
 const ACTION_BATCH_SIZE = 20;
 const NR_LIMIT_INTERVAL = 30000; // 30s

package/dist/collection/utils/tracking/usage.spec.js

@@ -0,0 +1,121 @@
+import { trackComponent, trackAction, getVersionEvent } from "./usage";
+import packageInfo from "../../../package.json";
+const component = document.createElement('gux-button');
+const addPageAction = jest.fn();
+describe('tracking/usage', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+  beforeEach(() => {
+    addPageAction.mockClear();
+    window.newrelic = {
+      addPageAction
+    };
+    window.document.contains = jest.fn().mockReturnValue(true);
+  });
+  describe('Component usage tracking', () => {
+    test("Doesn't throw when newrelic is not present", () => {
+      window.newrelic = undefined;
+      expect(() => {
+        trackComponent(component);
+      }).not.toThrow();
+    });
+    test('Logs the library after the first component loads', () => {
+      trackComponent(component);
+      jest.runOnlyPendingTimers();
+      expect(addPageAction).toHaveBeenCalledTimes(2);
+      expect(addPageAction.mock.calls[0][0]).toBe('spark-library');
+      const versionInfo = addPageAction.mock.calls[0][1];
+      expect(versionInfo.fullVersion).toBe(packageInfo.version);
+      expect(packageInfo.version.startsWith(versionInfo.majorVersion)).toBe(true);
+      expect(packageInfo.version.startsWith(versionInfo.minorVersion)).toBe(true);
+    });
+    test('Logs the tag name when a component is tracked', () => {
+      trackComponent(component);
+      jest.runOnlyPendingTimers();
+      expect(addPageAction).toHaveBeenCalledWith('spark-component', {
+        component: 'gux-button',
+        version: packageInfo.version,
+        queueDepth: 0
+      });
+    });
+    test('Optionally logs a tag variant', () => {
+      trackComponent(component, { variant: 'test' });
+      jest.runOnlyPendingTimers();
+      expect(addPageAction).toHaveBeenCalledWith('spark-component', {
+        component: 'gux-button',
+        version: packageInfo.version,
+        variant: 'test',
+        queueDepth: 0
+      });
+    });
+  });
+  describe('Component action tracking', () => {
+    test("Doesn't throw when newrelic is not present", () => {
+      window.newrelic = undefined;
+      expect(() => {
+        trackAction(component, 'click');
+      }).not.toThrow();
+    });
+    test('Logs the component tag and action', () => {
+      trackAction(component, 'click');
+      jest.runOnlyPendingTimers();
+      expect(addPageAction).toHaveBeenCalledWith('spark-action', {
+        component: 'gux-button',
+        action: 'click',
+        queueDepth: 0
+      });
+    });
+    test('Optionally logs metadata', () => {
+      trackAction(component, 'click', { strength: 'real hard' });
+      jest.runOnlyPendingTimers();
+      expect(addPageAction).toHaveBeenCalledWith('spark-action', {
+        component: 'gux-button',
+        action: 'click',
+        strength: 'real hard',
+        queueDepth: 0
+      });
+    });
+  });
+});
+describe('getVersionObject', () => {
+  [
+    {
+      packageLockVersion: '0.0.1',
+      expectedVersionObject: {
+        fullVersion: '0.0.1',
+        majorVersion: '0',
+        minorVersion: '0.0'
+      }
+    },
+    {
+      packageLockVersion: '0.1.1',
+      expectedVersionObject: {
+        fullVersion: '0.1.1',
+        majorVersion: '0',
+        minorVersion: '0.1'
+      }
+    },
+    {
+      packageLockVersion: '1.1.1',
+      expectedVersionObject: {
+        fullVersion: '1.1.1',
+        majorVersion: '1',
+        minorVersion: '1.1'
+      }
+    },
+    {
+      packageLockVersion: '2.0.0-alpha.0',
+      expectedVersionObject: {
+        fullVersion: '2.0.0-alpha.0',
+        majorVersion: '2',
+        minorVersion: '2.0'
+      }
+    }
+  ].forEach(({ packageLockVersion, expectedVersionObject }, index) => {
+    it(`should return expected versionObject (${index + 1})`, async () => {
+      const versionEvent = getVersionEvent(packageLockVersion);
+      expect(versionEvent.metadata).toEqual(expectedVersionObject);
+    });
+  });
+});

package/dist/deploy-info.json

@@ -1,9 +1,9 @@
 {
   "name": "spark-components",
-  "version": "4.0.0-beta.35",
+  "version": "4.0.0-beta.37",
   "ecosystem": "pc",
   "team": "Core UI",
   "indexFiles": [],
-  "build": "37",
-  "buildDate": "2023-09-29T04:16:31.795478Z"
+  "build": "42",
+  "buildDate": "2023-10-04T04:11:55.248770Z"
 }