@justifi/webcomponents 4.9.1 → 4.10.0

package/dist/collection/components/form/test/form-control-select.spec.js

@@ -0,0 +1,84 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SelectInput } from "../form-control-select";
+describe('form-control-select', () => {
+    it('renders with default props', async () => {
+        const page = await newSpecPage({
+            components: [SelectInput],
+            html: `<form-control-select label="Test Select" name="test"></form-control-select>`,
+        });
+        expect(page.root).toMatchSnapshot();
+        expect(page.rootInstance.label).toBe('Test Select');
+        expect(page.rootInstance.name).toBe('test');
+    });
+    it('populates options correctly and handles selection', async () => {
+        const options = [
+            { label: 'Option 1', value: '1' },
+            { label: 'Option 2', value: '2' }
+        ];
+        const page = await newSpecPage({
+            components: [SelectInput],
+            html: `<form-control-select></form-control-select>`,
+        });
+        page.rootInstance.options = options;
+        await page.waitForChanges();
+        const selectElement = page.root.shadowRoot.querySelector('select');
+        expect(selectElement.children.length).toBe(options.length);
+        expect(selectElement.children[0].textContent).toBe(options[0].label);
+        selectElement.value = options[1].value;
+        expect(selectElement.value).toBe('2');
+    });
+    it('shows error and applies error styling when error prop is provided', async () => {
+        const page = await newSpecPage({
+            components: [SelectInput],
+            html: `<form-control-select error="This field is required."></form-control-select>`,
+        });
+        const shadowRoot = page.root.shadowRoot;
+        expect(shadowRoot.querySelector('.invalid-feedback').textContent).toBe('This field is required.');
+        expect(shadowRoot.querySelector('.form-select').classList.contains('is-invalid')).toBeTruthy();
+    });
+    it('emits formControlInput event on input', async () => {
+        const page = await newSpecPage({
+            components: [SelectInput],
+            html: `<form-control-select></form-control-select>`,
+        });
+        page.rootInstance.inputHandler = jest.fn();
+        const inputEventSpy = jest.fn();
+        page.root.addEventListener('formControlInput', inputEventSpy);
+        const selectElement = page.root.shadowRoot.querySelector('select');
+        selectElement.value = '1';
+        selectElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        await page.waitForChanges();
+        expect(inputEventSpy).toHaveBeenCalled();
+    });
+    it('emits formControlBlur event on blur', async () => {
+        const page = await newSpecPage({
+            components: [SelectInput],
+            html: `<form-control-select></form-control-select>`,
+        });
+        const blurEventSpy = jest.fn();
+        page.root.addEventListener('formControlBlur', blurEventSpy);
+        const selectElement = page.root.shadowRoot.querySelector('select');
+        selectElement.dispatchEvent(new Event('blur'));
+        expect(blurEventSpy).toHaveBeenCalled();
+    });
+    it('disables select when disabled prop is true', async () => {
+        const page = await newSpecPage({
+            components: [SelectInput],
+            html: `<form-control-select disabled="true"></form-control-select>`,
+        });
+        const selectElement = page.root.shadowRoot.querySelector('select');
+        // This is weird, but the value of the disabled 
+        // attribute is an empty string on Stencil mock DOM
+        expect(selectElement.attributes.getNamedItem('disabled').value).toBe('');
+    });
+    it('handles empty options array', async () => {
+        const page = await newSpecPage({
+            components: [SelectInput],
+            html: `<form-control-select></form-control-select>`,
+        });
+        page.rootInstance.options = [];
+        await page.waitForChanges();
+        const selectElement = page.root.shadowRoot.querySelector('select');
+        expect(selectElement.children.length).toBe(0);
+    });
+});

package/dist/collection/components/form/test/form-control-text.spec.js

@@ -0,0 +1,104 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { TextInput } from "../form-control-text";
+describe('form-control-text', () => {
+    // Test 1: Initial Rendering and Props
+    it('renders with default props', async () => {
+        const page = await newSpecPage({
+            components: [TextInput],
+            html: `<form-control-text label="Username" name="username"></form-control-text>`,
+        });
+        expect(page.root).toMatchSnapshot();
+        expect(page.rootInstance.label).toBe('Username');
+        expect(page.rootInstance.name).toBe('username');
+    });
+    // Test 2: Rendering with all props
+    it('renders with all props provided', async () => {
+        const page = await newSpecPage({
+            components: [TextInput],
+            html: `
+        <form-control-text
+          label="Email"
+          name="email"
+          default-value="user@example.com"
+          error="Invalid email"
+          disabled
+        ></form-control-text>
+      `,
+        });
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        expect(page.rootInstance.label).toBe('Email');
+        expect(inputElement.value).toBe('user@example.com');
+        expect(inputElement.disabled).toBeTruthy();
+    });
+    // Test 3: Handle Default Value Changes
+    it('updates input value on defaultValue prop change', async () => {
+        const page = await newSpecPage({
+            components: [TextInput],
+            html: `<form-control-text default-value="initial"></form-control-text>`,
+        });
+        page.rootInstance.defaultValue = 'updated';
+        await page.waitForChanges();
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        expect(inputElement.value).toBe('updated');
+    });
+    // Test 4: User Interaction - Input
+    it('handles user input correctly', async () => {
+        const page = await newSpecPage({
+            components: [TextInput],
+            html: `<form-control-text></form-control-text>`,
+        });
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        const testValue = 'Hello, World!';
+        inputElement.value = testValue;
+        await inputElement.dispatchEvent(new Event('input'));
+        expect(inputElement.value).toBe(testValue);
+    });
+    // Test 5: Event Emission on Input
+    it('emits formControlInput event on input', async () => {
+        const page = await newSpecPage({
+            components: [TextInput],
+            html: `<form-control-text></form-control-text>`,
+        });
+        // Set a mock inputHandler to prevent it from being undefined
+        page.rootInstance.inputHandler = jest.fn();
+        const inputEventSpy = jest.fn();
+        page.root.addEventListener('formControlInput', inputEventSpy);
+        await page.waitForChanges();
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        inputElement.value = 'Hello, World!';
+        inputElement.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        await page.waitForChanges();
+        expect(inputEventSpy).toHaveBeenCalled();
+    });
+    // Test 6: Event Emission on Blur
+    it('emits formControlBlur event on blur', async () => {
+        const page = await newSpecPage({
+            components: [TextInput],
+            html: `<form-control-text></form-control-text>`,
+        });
+        const blurEventSpy = jest.fn();
+        page.win.addEventListener('formControlBlur', blurEventSpy);
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        inputElement.dispatchEvent(new Event('blur'));
+        expect(blurEventSpy).toHaveBeenCalled();
+    });
+    // Test 7: Disabled Prop
+    it('disables input when disabled prop is true', async () => {
+        const page = await newSpecPage({
+            components: [TextInput],
+            html: `<form-control-text disabled></form-control-text>`,
+        });
+        const inputElement = page.root.shadowRoot.querySelector('input');
+        expect(inputElement.disabled).toBeTruthy();
+    });
+    // Test 8: Error Prop
+    it('shows error and applies error styling when error prop is provided', async () => {
+        const page = await newSpecPage({
+            components: [TextInput],
+            html: `<form-control-text error="This field is required."></form-control-text>`,
+        });
+        const shadowRoot = page.root.shadowRoot;
+        expect(shadowRoot.querySelector('.invalid-feedback').textContent).toBe('This field is required.');
+        expect(shadowRoot.querySelector('.form-control').classList.contains('is-invalid')).toBeTruthy();
+    });
+});

package/dist/collection/components/form/test/form.spec.js

@@ -0,0 +1,60 @@
+import * as yup from "yup";
+import { FormController } from "../form";
+describe('FormController', () => {
+    let formController;
+    const mockSchema = yup.object().shape({
+        name: yup.string().required(),
+        email: yup.string().email().required(),
+    });
+    beforeEach(() => {
+        formController = new FormController(mockSchema);
+    });
+    it('should initialize with default empty values and errors', () => {
+        expect(formController.values.getValue()).toEqual({});
+        expect(formController.errors.getValue()).toEqual({});
+    });
+    it('should set initial values correctly', () => {
+        const initialValues = { name: 'John', email: 'john@example.com' };
+        formController.setInitialValues(initialValues);
+        expect(formController.values.getValue()).toEqual(initialValues);
+    });
+    it('should update values correctly', async () => {
+        const updateValues = { name: 'Jane' };
+        formController.setInitialValues({
+            name: 'John',
+            email: 'john@example.com',
+        });
+        formController.setValues(updateValues);
+        expect(formController.values.getValue()).toEqual({
+            name: 'Jane',
+            email: 'john@example.com',
+        });
+    });
+    it('should reset values to initial values', () => {
+        const initialValues = { name: 'John', email: 'john@example.com' };
+        formController.setInitialValues(initialValues);
+        formController.setValues({ name: 'Jane' }); // Update values
+        formController.resetValues(); // Reset to initial values
+        expect(formController.values.getValue()).toEqual(initialValues);
+    });
+    it('should validate and set errors correctly for invalid data', async () => {
+        formController.setValues({ email: 'invalid-email' }); // Set invalid email
+        await formController.validateAndSubmit(() => null);
+        expect(formController.errors.getValue()).toHaveProperty('email');
+    });
+    it('should call submit handler on valid data', async () => {
+        const submitHandlerMock = jest.fn();
+        formController.setInitialValues({
+            name: 'John',
+            email: 'john@example.com',
+        });
+        await formController.validateAndSubmit(submitHandlerMock);
+        expect(submitHandlerMock).toHaveBeenCalled();
+    });
+    it('should not call submit handler on invalid data', async () => {
+        const submitHandlerMock = jest.fn();
+        formController.setValues({ email: 'invalid-email' }); // Set invalid email
+        await formController.validateAndSubmit(submitHandlerMock);
+        expect(submitHandlerMock).not.toHaveBeenCalled();
+    });
+});

package/dist/collection/components/form/utils.js

@@ -1,2 +1,3 @@
 import { h } from "@stencil/core";
 export const FormAlert = (message) => (h("div", { class: 'alert alert-danger d-flex align-items-center', role: 'alert' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "currentColor", class: "bi bi-exclamation-triangle-fill flex-shrink-0 me-2", viewBox: "0 0 16 16", role: "img", "aria-label": "Warning:" }, h("path", { d: "M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" })), h("div", null, message)));
+export const LoadingSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")));

package/dist/collection/utils/utils.js

@@ -1,5 +1,7 @@
 import { format } from "date-fns";
 import Dinero from "dinero.js";
+import StateOptions from "./state-options";
+export const RegExZip = /^\d{5}/;
 export function formatCurrency(amount, withSymbol = true) {
     if (!amount)
         amount = 0;
@@ -153,6 +155,21 @@ export function snakeCaseToHumanReadable(snakeCaseStr) {
         .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
         .join(' ');
 }
+export function flattenNestedObject(obj) {
+    const result = {};
+    for (const key in obj) {
+        if (typeof obj[key] === 'object' && obj[key] !== null) {
+            const nestedObj = flattenNestedObject(obj[key]);
+            for (const nestedKey in nestedObj) {
+                result[nestedKey] = nestedObj[nestedKey];
+            }
+        }
+        else {
+            result[key] = obj[key];
+        }
+    }
+    return result;
+}
 export function composeQueryParams(values) {
     const queryParams = values.map((value) => {
         if (value === values[0]) {
@@ -187,3 +204,7 @@ export async function loadFontsOnParent() {
 export function isEmptyObject(obj) {
     return Object.keys(obj).length === 0 && obj.constructor === Object;
 }
+export function getStateAbbreviation(stateName) {
+    const state = StateOptions.find(s => s.label === stateName);
+    return state ? state.value : stateName;
+}