@justifi/webcomponents 4.10.0-rc.0 → 4.10.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/utils/utils.js

@@ -1,5 +1,6 @@
 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)
@@ -203,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;
+}