@justifi/webcomponents 4.10.0-rc.0 → 4.10.0

package/dist/collection/components/business-forms/payment-provisioning/test/payment-provisioning.spec.js

@@ -0,0 +1,61 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { PaymentProvisioning } from "../payment-provisioning";
+describe.skip('justifi-payment-provisioning', () => {
+    let consoleSpy;
+    // Initialize the spy in the beforeEach
+    beforeEach(() => {
+        consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => { });
+    });
+    // Restore the original function in the afterEach
+    afterEach(() => {
+        consoleSpy.mockRestore();
+    });
+    it('should log a warning if no authToken is provided', async () => {
+        await newSpecPage({
+            components: [PaymentProvisioning],
+            html: `<justifi-payment-provisioning></justifi-payment-provisioning>`,
+        });
+    });
+    it('should log a warning if no businessId is provided', async () => {
+        await newSpecPage({
+            components: [PaymentProvisioning],
+            html: `<justifi-payment-provisioning></justifi-payment-provisioning>`,
+        });
+    });
+    it('should emit server error event if server error when fetching data', async () => {
+        await newSpecPage({
+            components: [PaymentProvisioning],
+            html: `<justifi-payment-provisioning business-id="biz_123" auth-token="some-token"></justifi-payment-provisioning>`,
+        });
+    });
+    it('should emit server error event if server error when patching data', async () => {
+        await newSpecPage({
+            components: [PaymentProvisioning],
+            html: `<justifi-payment-provisioning business-id="biz_123" auth-token="some-token"></justifi-payment-provisioning>`,
+        });
+    });
+    it('should render', async () => {
+        await newSpecPage({
+            components: [PaymentProvisioning],
+            html: `<justifi-payment-provisioning business-id="biz_123" auth-token="some-token"></justifi-payment-provisioning>`,
+        });
+    });
+    it('should call onSuccess when a step is successfully completed', async () => {
+        await newSpecPage({
+            components: [PaymentProvisioning],
+            html: `<justifi-payment-provisioning business-id="biz_123" auth-token="some-token"></justifi-payment-provisioning>`,
+        });
+    });
+    it('should emit clickEvent when a button is clicked', async () => {
+        await newSpecPage({
+            components: [PaymentProvisioning],
+            html: `<justifi-payment-provisioning business-id="biz_123" auth-token="some-token"></justifi-payment-provisioning>`,
+        });
+    });
+    it('should emit submitted event when a step is completed', async () => {
+        await newSpecPage({
+            components: [PaymentProvisioning],
+            html: `<justifi-payment-provisioning business-id="biz_123" auth-token="some-token"></justifi-payment-provisioning>`,
+        });
+    });
+});

package/dist/collection/components/business-forms/schemas/business-address-schema.js

@@ -1,15 +1,16 @@
 import { object, string } from "yup";
+import StateOptions from "../../../utils/state-options";
 export const legalAddressSchema = object({
     line1: string().required('Enter street address'),
     line2: string().nullable(),
     city: string().required('Enter city'),
-    state: string().required('Select state'),
+    state: string().required('Select state').oneOf(StateOptions.map((option) => option.value), 'Select state'),
     postal_code: string().required('Enter postal code'),
     country: string().required('Select country'),
 });
 export const identityAddressSchema = object({
     line1: string().required('Enter street address'),
     city: string().required('Enter city'),
-    state: string().required('Select state'),
+    state: string().required('Select state').oneOf(StateOptions.map((option) => option.value), 'Select state'),
     postal_code: string().required('Enter postal code'),
 });

package/dist/collection/components/checkout/checkout-core.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { extractComputedFontsToLoad } from "../../utils/utils";
+import { extractComputedFontsToLoad, formatCurrency } from "../../utils/utils";
 import { config } from "../../../config";
 export class CheckoutCore {
     constructor() {
@@ -11,7 +11,7 @@ export class CheckoutCore {
         this.checkoutId = undefined;
         this.hasLoadedFonts = false;
         this.isLoading = false;
-        this.checkout = {};
+        this.checkout = undefined;
         this.serverError = false;
         this.errorMessage = '';
         this.creatingNewPaymentMethod = false;
@@ -78,8 +78,8 @@ export class CheckoutCore {
         });
     }
     render() {
-        var _a, _b;
-        return (h(Host, null, h("div", { class: "row gy-3" }, h("div", { class: "col-12 mb-4" }, h("h2", { class: "fs-5 fw-bold" }, "Summary"), h("div", null, "Product desctiption"), h("div", null, "Total $100.00")), h("div", { class: "col-12" }, h("h2", { class: "fs-5 fw-bold border-bottom pb-3" }, "Payment"), h("h3", { class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { class: "d-flex flex-column" }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": ((_a = this.checkout.payment_settings) === null || _a === void 0 ? void 0 : _a.credit_card_payments) || true, "show-ach": ((_b = this.checkout.payment_settings) === null || _b === void 0 ? void 0 : _b.ach_payments) || true, "client-id": this.checkout.payment_client_id, "account-id": this.checkout.account_id, savedPaymentMethods: this.checkout.payment_methods }))), h("div", { class: "col-12" }, h("div", { class: "d-flex justify-content-end" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: this.isLoading, class: `btn btn-primary jfi-submit-button ${this.isLoading ? 'jfi-submit-button-loading' : ''}` }, this.isLoading ? this.loadingSpinner : 'Pay'))))));
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return (h(Host, null, h("div", { class: "row gy-3" }, h("div", { class: "col-12 mb-4" }, h("h2", { class: "fs-5 fw-bold" }, "Summary"), this.checkout && (h("div", null, h("div", null, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", null, "Total ", formatCurrency(+this.checkout.payment_amount))))), h("div", { class: "col-12" }, h("h2", { class: "fs-5 fw-bold border-bottom pb-3" }, "Payment"), h("h3", { class: "fs-6 fw-bold lh-lg" }, "Select payment type"), h("div", { class: "d-flex flex-column" }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": ((_c = (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.payment_settings) === null || _c === void 0 ? void 0 : _c.credit_card_payments) || true, "show-ach": ((_e = (_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_settings) === null || _e === void 0 ? void 0 : _e.ach_payments) || true, "client-id": (_f = this.checkout) === null || _f === void 0 ? void 0 : _f.payment_client_id, "account-id": (_g = this.checkout) === null || _g === void 0 ? void 0 : _g.account_id, savedPaymentMethods: (_h = this.checkout) === null || _h === void 0 ? void 0 : _h.payment_methods }))), h("div", { class: "col-12" }, h("div", { class: "d-flex justify-content-end" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: this.isLoading, class: `btn btn-primary jfi-submit-button ${this.isLoading ? 'jfi-submit-button-loading' : ''}` }, this.isLoading ? this.loadingSpinner : 'Pay'))))));
     }
     static get is() { return "justifi-checkout-core"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/form/form-control-datepart.js

@@ -7,7 +7,7 @@ export class DatePartInput {
         this.name = undefined;
         this.error = undefined;
         this.defaultValue = undefined;
-        this.type = undefined;
+        this.type = 'day';
         this.inputHandler = undefined;
         this.disabled = undefined;
     }
@@ -15,45 +15,49 @@ export class DatePartInput {
         this.updateInput(newValue);
     }
     componentDidLoad() {
-        if (this.textInput) {
-            let maskOptions;
-            switch (this.type) {
-                case 'day':
-                    maskOptions = { mask: Number, min: 1, max: 31 };
-                    break;
-                case 'month':
-                    maskOptions = { mask: Number, min: 1, max: 12 };
-                    break;
-                case 'year':
-                    maskOptions = {
-                        mask: Number,
-                        min: 1900,
-                        max: new Date().getFullYear(),
-                    };
-                    break;
-                default:
-                    throw new Error('Invalid type prop');
-            }
-            this.imask = IMask(this.textInput, maskOptions);
-            this.imask.on('accept', () => {
-                const rawValue = this.imask.unmaskedValue;
-                this.inputHandler(this.name, rawValue);
-            });
-            this.textInput.addEventListener('blur', () => {
-                this.formControlBlur.emit();
-            });
-            this.updateInput(this.defaultValue);
+        this.initializeMask();
+        this.updateInput(this.defaultValue);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    initializeMask() {
+        if (!this.textInput) {
+            return;
         }
+        let maskOptions;
+        switch (this.type) {
+            default:
+            case 'day':
+                maskOptions = { mask: Number, min: 1, max: 31 };
+                break;
+            case 'month':
+                maskOptions = { mask: Number, min: 1, max: 12 };
+                break;
+            case 'year':
+                maskOptions = {
+                    mask: Number,
+                    min: 1900,
+                    max: new Date().getFullYear(),
+                };
+                break;
+        }
+        this.imask = IMask(this.textInput, maskOptions);
+        this.imask.on('accept', () => {
+            const rawValue = this.imask.unmaskedValue;
+            this.inputHandler(this.name, rawValue);
+            this.formControlInput.emit({ name: this.name, value: rawValue });
+        });
+        this.textInput.addEventListener('blur', () => {
+            this.formControlBlur.emit();
+        });
     }
     updateInput(newValue) {
         if (this.imask) {
             this.imask.value = String(newValue);
         }
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
-    }
     render() {
         return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { ref: el => (this.textInput = el), id: this.name, name: this.name, onBlur: () => this.formControlBlur.emit(), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
     }
@@ -154,7 +158,8 @@ export class DatePartInput {
                     "text": ""
                 },
                 "attribute": "type",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'day'"
             },
             "inputHandler": {
                 "type": "unknown",

package/dist/collection/components/form/form-control-monetary.js

@@ -13,29 +13,31 @@ export class MonetaryInput {
         this.updateInput(newValue);
     }
     componentDidLoad() {
-        if (this.textInput) {
-            this.imask = IMask(this.textInput, {
-                mask: Number,
-                scale: 2,
-                thousandsSeparator: ',',
-                padFractionalZeros: true,
-                normalizeZeros: true,
-                radix: '.',
-            });
-            this.imask.on('accept', () => {
-                const rawValue = this.imask.unmaskedValue;
-                this.inputHandler(this.name, rawValue);
-            });
-            this.textInput.addEventListener('blur', () => {
-                this.formControlBlur.emit();
-            });
-        }
+        this.initializeIMask();
         this.updateInput(this.defaultValue);
     }
     disconnectedCallback() {
         var _a;
         (_a = this.imask) === null || _a === void 0 ? void 0 : _a.destroy();
     }
+    initializeIMask() {
+        if (!this.textInput)
+            return;
+        this.imask = IMask(this.textInput, {
+            mask: Number,
+            scale: 2,
+            thousandsSeparator: ',',
+            padFractionalZeros: true,
+            normalizeZeros: true,
+            radix: '.',
+        });
+        this.imask.on('accept', () => {
+            const rawValue = this.imask.unmaskedValue;
+            this.inputHandler(this.name, rawValue);
+            this.formControlInput.emit({ name: this.name, value: rawValue });
+        });
+        this.textInput.addEventListener('blur', () => this.formControlBlur.emit());
+    }
     updateInput(newValue) {
         if (this.imask) {
             this.imask.value = String(newValue);
@@ -76,11 +78,11 @@ export class MonetaryInput {
                 "reflect": false
             },
             "name": {
-                "type": "any",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/form/form-control-number.js

@@ -22,6 +22,7 @@ export class NumberInput {
         const target = event.target;
         const name = target.getAttribute('name');
         this.inputHandler(name, target.value);
+        this.formControlInput.emit({ name, value: target.value });
     }
     componentDidLoad() {
         this.updateInput(this.defaultValue);

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

@@ -19,12 +19,14 @@ export class SelectInput {
         const target = event.target;
         const name = target.getAttribute('name');
         this.inputHandler(name, target.value);
+        this.formControlInput.emit(target.value);
     }
     componentDidLoad() {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { ref: el => (this.selectElement = el), id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, this.options.map(option => (h("option", { value: option.value }, option.label)))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+        var _a;
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { ref: el => (this.selectElement = el), id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), part: `input ${this.error ? 'input-invalid' : ''}`, class: this.error ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
     }
     static get is() { return "form-control-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,12 +22,13 @@ export class TextInput {
         const target = event.target;
         const name = target.getAttribute('name');
         this.inputHandler(name, target.value);
+        this.formControlInput.emit(target.value);
     }
     componentDidLoad() {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), part: `input ${this.error && 'input-invalid'} ${this.disabled && 'input-disabled'}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { id: this.name, name: this.name, onInput: (event) => this.handleFormControlInput(event), onBlur: () => this.formControlBlur.emit(), part: `input ${this.error ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.error ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
     }
     static get is() { return "form-control-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,88 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { DatePartInput } from "../form-control-datepart";
+import * as IMaskPackage from "imask";
+jest.mock('imask', () => ({
+    default: jest.fn().mockImplementation(() => ({
+        on: jest.fn(),
+        destroy: jest.fn(),
+        value: '',
+        unmaskedValue: '',
+    })),
+}));
+const IMaskSpy = jest.spyOn(IMaskPackage, 'default');
+afterEach(() => {
+    jest.clearAllMocks();
+});
+describe('form-control-datepart', () => {
+    it('renders correctly with default props', async () => {
+        const page = await newSpecPage({
+            components: [DatePartInput],
+            html: `<form-control-datepart label="Date Part" name="datepart"></form-control-datepart>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('should initialize IMask with correct options for "day" type', async () => {
+        await newSpecPage({
+            components: [DatePartInput],
+            html: '<form-control-datepart type="day"></form-control-datepart>',
+        });
+        expect(IMaskSpy).toHaveBeenCalled();
+        expect(IMaskSpy.mock.calls[0][1]).toEqual({ mask: Number, min: 1, max: 31 });
+    });
+    it('should initialize IMask with correct options for "month" type', async () => {
+        // Clear mocks to reset the calls count
+        jest.clearAllMocks();
+        await newSpecPage({
+            components: [DatePartInput],
+            html: '<form-control-datepart type="month"></form-control-datepart>',
+        });
+        expect(IMaskSpy).toHaveBeenCalled();
+        expect(IMaskSpy.mock.calls[0][1]).toEqual({ mask: Number, min: 1, max: 12 });
+    });
+    it('should initialize IMask with correct options for "year" type', async () => {
+        // Clear mocks to reset the calls count
+        jest.clearAllMocks();
+        await newSpecPage({
+            components: [DatePartInput],
+            html: '<form-control-datepart type="year"></form-control-datepart>',
+        });
+        expect(IMaskSpy).toHaveBeenCalled();
+        expect(IMaskSpy.mock.calls[0][1]).toEqual({ mask: Number, min: 1900, max: new Date().getFullYear() });
+    });
+    it('emits formControlBlur on input blur', async () => {
+        const page = await newSpecPage({
+            components: [DatePartInput],
+            html: `<form-control-datepart></form-control-datepart>`,
+        });
+        const blurSpy = jest.fn();
+        page.win.addEventListener('formControlBlur', blurSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        input.dispatchEvent(new Event('blur', { bubbles: true }));
+        await page.waitForChanges();
+        expect(blurSpy).toHaveBeenCalled();
+    });
+    it('calls inputHandler and emits formControlInput on user input', async () => {
+        const inputHandlerMock = jest.fn();
+        const page = await newSpecPage({
+            components: [DatePartInput],
+            html: `<form-control-datepart type="day" name="day"></form-control-datepart>`,
+        });
+        page.rootInstance.inputHandler = inputHandlerMock;
+        await page.waitForChanges();
+        const inputSpy = jest.fn();
+        page.win.addEventListener('formControlInput', inputSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        input.value = '15'; // Assuming 'day' type for simplicity
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        await page.waitForChanges();
+        expect(inputHandlerMock).toHaveBeenCalledWith('day', '15');
+        expect(inputSpy).toHaveBeenCalled();
+    });
+    it('displays error message correctly', async () => {
+        const page = await newSpecPage({
+            components: [DatePartInput],
+            html: `<form-control-datepart error="Error message"></form-control-datepart>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,69 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { MonetaryInput } from "../form-control-monetary";
+describe('form-control-monetary', () => {
+    it('renders correctly with default props', async () => {
+        const page = await newSpecPage({
+            components: [MonetaryInput],
+            html: `<form-control-monetary></form-control-monetary>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('handles props correctly', async () => {
+        const page = await newSpecPage({
+            components: [MonetaryInput],
+            html: `
+      <form-control-monetary
+        label="Amount"
+        name="amount"
+        error="Invalid amount"  
+        defaultValue="1000"
+      ></form-control-monetary>
+    `,
+        });
+        await page.waitForChanges();
+        const label = page.root.shadowRoot.querySelector('label');
+        const input = page.root.shadowRoot.querySelector('input');
+        const errorDiv = page.root.shadowRoot.querySelector('.invalid-feedback');
+        expect(label.textContent).toBe('Amount');
+        expect(input.getAttribute('name')).toBe('amount');
+        expect(errorDiv.textContent).toBe('Invalid amount');
+    });
+    it('calls inputHandler and emits formControlInput on user input', async () => {
+        const inputHandlerMock = jest.fn();
+        const page = await newSpecPage({
+            components: [MonetaryInput],
+            html: `<form-control-monetary></form-control-monetary>`,
+        });
+        page.rootInstance.inputHandler = inputHandlerMock;
+        await page.waitForChanges();
+        const inputSpy = jest.fn();
+        page.win.addEventListener('formControlInput', inputSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        input.value = '1234.56';
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        await page.waitForChanges();
+        expect(inputHandlerMock).toHaveBeenCalled();
+        expect(inputSpy).toHaveBeenCalled();
+    });
+    it('emits formControlBlur on input blur', async () => {
+        const page = await newSpecPage({
+            components: [MonetaryInput],
+            html: `<form-control-monetary></form-control-monetary>`,
+        });
+        const blurSpy = jest.fn();
+        page.win.addEventListener('formControlBlur', blurSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        input.dispatchEvent(new Event('blur', { bubbles: true }));
+        await page.waitForChanges();
+        expect(blurSpy).toHaveBeenCalled();
+    });
+    it('displays error message when error prop is set', async () => {
+        const page = await newSpecPage({
+            components: [MonetaryInput],
+            html: `<form-control-monetary error="Invalid amount"></form-control-monetary>`,
+        });
+        const errorDiv = page.root.shadowRoot.querySelector('.invalid-feedback');
+        expect(errorDiv.textContent).toBe('Invalid amount');
+        expect(page.root).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,77 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { NumberInput } from "../form-control-number";
+describe('form-control-number', () => {
+    it('renders with default props', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number label="Age"></form-control-number>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('renders with an error message', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number label="Age" error="Invalid input"></form-control-number>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('handles the disabled state', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number label="Age" disabled></form-control-number>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it('updates the input value when defaultValue changes', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number label="Age"></form-control-number>`,
+        });
+        let input = page.root.shadowRoot.querySelector('input');
+        expect(input.value).toBe(''); // Default should be empty
+        page.root.defaultValue = '30';
+        await page.waitForChanges();
+        input = page.root.shadowRoot.querySelector('input');
+        expect(input.value).toBe('30');
+    });
+    it('calls inputHandler on user input', async () => {
+        const inputHandlerMock = jest.fn();
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number name="age"></form-control-number>`,
+        });
+        page.rootInstance.inputHandler = inputHandlerMock;
+        await page.waitForChanges();
+        const input = page.root.shadowRoot.querySelector('input');
+        input.value = '25';
+        await input.dispatchEvent(new Event('input', { bubbles: true }));
+        expect(inputHandlerMock).toHaveBeenCalledWith('age', '25');
+    });
+    it('emits formControlBlur on input blur', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number></form-control-number>`,
+        });
+        const blurSpy = jest.fn();
+        page.win.addEventListener('formControlBlur', blurSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        await input.dispatchEvent(new CustomEvent('blur'));
+        expect(blurSpy).toHaveBeenCalled();
+    });
+    it('emits formControlInput on input', async () => {
+        const page = await newSpecPage({
+            components: [NumberInput],
+            html: `<form-control-number name="age"></form-control-number>`,
+        });
+        page.rootInstance.inputHandler = jest.fn();
+        await page.waitForChanges();
+        const inputSpy = jest.fn();
+        page.win.addEventListener('formControlInput', inputSpy);
+        const input = page.root.shadowRoot.querySelector('input');
+        input.value = '25';
+        const mockEvent = new Event('input', { bubbles: true });
+        Object.defineProperty(mockEvent, 'target', { value: input, enumerable: true });
+        await input.dispatchEvent(mockEvent);
+        expect(inputSpy).toHaveBeenCalled();
+    });
+});

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);
+    });
+});