@mvf/external-components 3.31.1 → 3.32.1-dev.0

package/Components/Molecules/PhoneNumberTextFieldCustom/PhoneNumberTextField.test.js

@@ -0,0 +1,710 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var react_1 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var renderWithProviders_1 = __importDefault(require("../../../Helpers/React/renderWithProviders"));
+var PhoneNumberTextField_1 = __importDefault(require("./PhoneNumberTextField"));
+var countryData_1 = require("./__helpers__/utils/countryData");
+describe('PhoneNumberTextField', function () {
+    var defaultProps = {
+        label: 'Phone Number',
+        id: 'phone-input',
+        experimentName: 'default',
+        value: '',
+        isAnswered: false,
+        disabled: false,
+        isSafari: false,
+        isAutoFilledActive: false,
+        type: 'tel',
+        onBlur: jest.fn(),
+        onClick: jest.fn(),
+    };
+    beforeEach(function () {
+        jest.clearAllMocks();
+    });
+    describe('Basic Rendering', function () {
+        it('should display PhoneNumberTextField Component with label', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
+            expect(react_1.screen.getByText('Phone Number')).toBeInTheDocument();
+        });
+        it('should render with default country (first in list)', function () {
+            var countries = (0, countryData_1.getCountryData)();
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
+            // Should show the first country's flag and example
+            var input = react_1.screen.getByRole('textbox');
+            expect(input).toHaveAttribute('placeholder', countries[0].example);
+        });
+        it('should render with specified initial country', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "GB" })));
+            // Should show UK's example
+            var input = react_1.screen.getByRole('textbox');
+            var ukCountry = (0, countryData_1.getCountryData)().find(function (c) { return c.code === 'GB'; });
+            expect(input).toHaveAttribute('placeholder', ukCountry === null || ukCountry === void 0 ? void 0 : ukCountry.example);
+        });
+        it('should have tel input type by default', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
+            var input = react_1.screen.getByRole('textbox');
+            expect(input).toHaveAttribute('type', 'tel');
+        });
+        it('should accept custom input type', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { type: "text" })));
+            var input = react_1.screen.getByRole('textbox');
+            expect(input).toHaveAttribute('type', 'text');
+        });
+    });
+    describe('Phone Number Input and Formatting', function () {
+        it('should format phone number as user types', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var input;
+            return __generator(this, function (_a) {
+                (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
+                input = react_1.screen.getByRole('textbox');
+                // Type a US phone number
+                user_event_1.default.type(input, '2023456789');
+                // Should be formatted
+                expect(input).toHaveValue('(202) 345-6789');
+                return [2 /*return*/];
+            });
+        }); });
+        it('should handle international phone number input', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var input;
+            return __generator(this, function (_a) {
+                (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
+                input = react_1.screen.getByRole('textbox');
+                // Type an international number
+                user_event_1.default.type(input, '+441212345678');
+                // Should be formatted and country should change
+                expect(input.value).toContain('121 234 5678');
+                return [2 /*return*/];
+            });
+        }); });
+        it('should call phone number change callbacks', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var mockOnPhoneNumberChange, mockOnValidationChange, mockOnFormattedValueChange, mockOnChange, input;
+            return __generator(this, function (_a) {
+                mockOnPhoneNumberChange = jest.fn();
+                mockOnValidationChange = jest.fn();
+                mockOnFormattedValueChange = jest.fn();
+                mockOnChange = jest.fn();
+                (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { onPhoneNumberChange: mockOnPhoneNumberChange, onValidationChange: mockOnValidationChange, onFormattedValueChange: mockOnFormattedValueChange, onChange: mockOnChange })));
+                input = react_1.screen.getByRole('textbox');
+                user_event_1.default.type(input, '2023456789');
+                expect(mockOnPhoneNumberChange).toHaveBeenCalled();
+                expect(mockOnValidationChange).toHaveBeenCalled();
+                expect(mockOnFormattedValueChange).toHaveBeenCalled();
+                expect(mockOnChange).toHaveBeenCalled();
+                return [2 /*return*/];
+            });
+        }); });
+        it('should validate phone numbers correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var mockOnValidationChange, input, calls;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        mockOnValidationChange = jest.fn();
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { onValidationChange: mockOnValidationChange })));
+                        input = react_1.screen.getByRole('textbox');
+                        // Type a US number
+                        user_event_1.default.type(input, '2023456789');
+                        // Should call validation callback for each digit
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(mockOnValidationChange).toHaveBeenCalled();
+                            })];
+                    case 1:
+                        // Should call validation callback for each digit
+                        _a.sent();
+                        calls = mockOnValidationChange.mock.calls;
+                        expect(calls.length).toBeGreaterThan(0);
+                        // Check that all calls have the expected structure
+                        calls.forEach(function (call) {
+                            var callData = call[0];
+                            expect(callData).toEqual(expect.objectContaining({
+                                id: 'phone-input',
+                                isValid: expect.any(Boolean),
+                                phoneNumber: expect.any(String),
+                                validationResult: expect.any(Object),
+                            }));
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should show validation error for invalid numbers', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var mockOnValidationChange, input;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        mockOnValidationChange = jest.fn();
+                        // Error's are passed in from Chameleon - we check that the error message is displayed if the prop is passed in.
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { errorMessage: "Please enter a valid phone number", onValidationChange: mockOnValidationChange })));
+                        input = react_1.screen.getByRole('textbox');
+                        // Type incomplete number
+                        user_event_1.default.type(input, '555');
+                        // Should show error message from prop
+                        expect(react_1.screen.getByText('Please enter a valid phone number')).toBeInTheDocument();
+                        // Should call validation callback with invalid result
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(mockOnValidationChange).toHaveBeenCalledWith(expect.objectContaining({
+                                    isValid: false,
+                                    phoneNumber: '555',
+                                }));
+                            })];
+                    case 1:
+                        // Should call validation callback with invalid result
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should validate phone numbers without showing error UI when no errorMessage prop', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var mockOnValidationChange, input;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        mockOnValidationChange = jest.fn();
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { onValidationChange: mockOnValidationChange })));
+                        input = react_1.screen.getByRole('textbox');
+                        // Type incomplete number
+                        user_event_1.default.type(input, '555');
+                        // Should not show any error message in UI
+                        expect(react_1.screen.queryByText('Please enter a valid phone number')).not.toBeInTheDocument();
+                        // But should still call validation callback with invalid result
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(mockOnValidationChange).toHaveBeenCalledWith(expect.objectContaining({
+                                    isValid: false,
+                                    phoneNumber: '555',
+                                }));
+                            })];
+                    case 1:
+                        // But should still call validation callback with invalid result
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('Country Selection', function () {
+        it('should show country selector when enableCountryChange is true (default)', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
+            var countrySelector = react_1.screen.getByRole('button', {
+                name: /select country/i,
+            });
+            expect(countrySelector).toBeInTheDocument();
+            expect(countrySelector).toHaveStyle('cursor: pointer');
+        });
+        it('should disable country selector when enableCountryChange is false', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { enableCountryChange: false })));
+            var countryDisplay = react_1.screen.getByLabelText(/country:/i);
+            expect(countryDisplay).toBeInTheDocument();
+            expect(countryDisplay).toHaveStyle('cursor: default');
+        });
+        it('should open country dropdown when country selector is clicked', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var countrySelector;
+            return __generator(this, function (_a) {
+                (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { useModalForCountrySelection: false })));
+                countrySelector = react_1.screen.getByRole('button', {
+                    name: /select country/i,
+                });
+                user_event_1.default.click(countrySelector);
+                // Should open dropdown listbox
+                expect(react_1.screen.getByRole('listbox')).toBeInTheDocument();
+                return [2 /*return*/];
+            });
+        }); });
+        it('should open country modal when useModalForCountrySelection is true', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var countrySelector;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { useModalForCountrySelection: true })));
+                        countrySelector = react_1.screen.getByRole('button', {
+                            name: /select country/i,
+                        });
+                        user_event_1.default.click(countrySelector);
+                        // Should open modal
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(react_1.screen.getByRole('dialog')).toBeInTheDocument();
+                            })];
+                    case 1:
+                        // Should open modal
+                        _a.sent();
+                        expect(react_1.screen.getByText('Select Country')).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should call onCountryChange when country is selected', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var mockOnCountryChange, countrySelector, countries, targetCountry, countryOption;
+            return __generator(this, function (_a) {
+                mockOnCountryChange = jest.fn();
+                (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { onCountryChange: mockOnCountryChange, useModalForCountrySelection: false })));
+                countrySelector = react_1.screen.getByRole('button', {
+                    name: /select country/i,
+                });
+                user_event_1.default.click(countrySelector);
+                countries = (0, countryData_1.getCountryData)();
+                targetCountry = countries.find(function (c) { return c.code !== countries[0].code; });
+                if (targetCountry) {
+                    countryOption = react_1.screen.getByRole('option', {
+                        name: new RegExp(targetCountry.name),
+                    });
+                    user_event_1.default.click(countryOption);
+                    expect(mockOnCountryChange).toHaveBeenCalledWith(expect.objectContaining({
+                        selectedCountry: targetCountry,
+                        previousCountry: countries[0],
+                        id: 'phone-input',
+                    }));
+                }
+                return [2 /*return*/];
+            });
+        }); });
+        it('should preserve and reformat phone number when country changes', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var input, countrySelector, countries, targetCountry, countryOption;
+            return __generator(this, function (_a) {
+                (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { useModalForCountrySelection: false })));
+                input = react_1.screen.getByRole('textbox');
+                // Type a number first
+                user_event_1.default.type(input, '2023456789');
+                expect(input).toHaveValue('(202) 345-6789');
+                countrySelector = react_1.screen.getByRole('button', {
+                    name: /select country/i,
+                });
+                user_event_1.default.click(countrySelector);
+                countries = (0, countryData_1.getCountryData)();
+                targetCountry = countries.find(function (c) { return c.code !== countries[0].code; });
+                if (targetCountry) {
+                    countryOption = react_1.screen.getByRole('option', {
+                        name: new RegExp(targetCountry.name),
+                    });
+                    user_event_1.default.click(countryOption);
+                    // Phone number should be preserved (though it may be reformatted for the new country)
+                    expect(input).not.toHaveValue('');
+                    // The original digits should still be present in some form
+                    expect(input.value).toMatch(/2023456789/);
+                }
+                return [2 /*return*/];
+            });
+        }); });
+        it('should call onCountryChange when country is auto-detected from international number', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var mockOnCountryChange, input;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        mockOnCountryChange = jest.fn();
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "US", enableCountryChange: true, onCountryChange: mockOnCountryChange })));
+                        input = react_1.screen.getByRole('textbox');
+                        // Type a UK number (+44) - this should trigger auto-detection
+                        user_event_1.default.type(input, '+441234567890');
+                        // Should call onCountryChange for auto-detection
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(mockOnCountryChange).toHaveBeenCalledWith(expect.objectContaining({
+                                    id: 'phone-input',
+                                    selectedCountry: expect.objectContaining({
+                                        code: 'GB',
+                                        name: 'United Kingdom',
+                                    }),
+                                    previousCountry: expect.objectContaining({
+                                        code: 'US',
+                                    }),
+                                }));
+                            })];
+                    case 1:
+                        // Should call onCountryChange for auto-detection
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should call onCountryChange for different international numbers', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var mockOnCountryChange, input;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        mockOnCountryChange = jest.fn();
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "US", enableCountryChange: true, onCountryChange: mockOnCountryChange })));
+                        input = react_1.screen.getByRole('textbox');
+                        // Type a French number (+33) - this should trigger auto-detection
+                        user_event_1.default.type(input, '+33123456789');
+                        // Should call onCountryChange for auto-detection to France
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(mockOnCountryChange).toHaveBeenCalledWith(expect.objectContaining({
+                                    id: 'phone-input',
+                                    selectedCountry: expect.objectContaining({
+                                        code: 'FR',
+                                        name: 'France',
+                                    }),
+                                    previousCountry: expect.objectContaining({
+                                        code: 'US',
+                                    }),
+                                }));
+                            })];
+                    case 1:
+                        // Should call onCountryChange for auto-detection to France
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('Error States', function () {
+        it('should display external error message', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { errorMessage: "This field is required" })));
+            expect(react_1.screen.getByText('This field is required')).toBeInTheDocument();
+        });
+        it('should prioritize external error over validation error', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var input;
+            return __generator(this, function (_a) {
+                (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { errorMessage: "This field is required" })));
+                input = react_1.screen.getByRole('textbox');
+                // Type invalid number (would normally show validation error)
+                user_event_1.default.type(input, '123');
+                // Should still show external error, not validation error
+                expect(react_1.screen.getByText('This field is required')).toBeInTheDocument();
+                expect(react_1.screen.queryByText('Please enter a valid phone number')).not.toBeInTheDocument();
+                return [2 /*return*/];
+            });
+        }); });
+    });
+    describe('Value Prop and Controlled State', function () {
+        it('should parse and display value with country code', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "+441212345678" })));
+            var input = react_1.screen.getByRole('textbox');
+            // Should show formatted UK number
+            expect(input.value).toContain('0121 234 5678');
+        });
+        it('should detect country from international number', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "+441212345678" })));
+            // Should detect UK and show UK flag (test indirectly via placeholder)
+            var input = react_1.screen.getByRole('textbox');
+            var ukCountry = (0, countryData_1.getCountryData)().find(function (c) { return c.code === 'GB'; });
+            expect(input).toHaveAttribute('placeholder', ukCountry === null || ukCountry === void 0 ? void 0 : ukCountry.example);
+        });
+    });
+    describe('Accessibility', function () {
+        it('should have proper ARIA labels', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
+            var input = react_1.screen.getByRole('textbox');
+            expect(input).toHaveAttribute('id', 'phone-input');
+            var label = react_1.screen.getByText('Phone Number');
+            expect(label).toHaveAttribute('for', 'phone-input');
+        });
+        it('should support keyboard navigation for country selector', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var countrySelector;
+            return __generator(this, function (_a) {
+                (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
+                countrySelector = react_1.screen.getByRole('button', {
+                    name: /select country/i,
+                });
+                // Test Enter key
+                countrySelector.focus();
+                user_event_1.default.keyboard('{Enter}');
+                expect(react_1.screen.getByRole('listbox')).toBeInTheDocument();
+                return [2 /*return*/];
+            });
+        }); });
+        it('should support space key for country selector', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var countrySelector;
+            return __generator(this, function (_a) {
+                (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
+                countrySelector = react_1.screen.getByRole('button', {
+                    name: /select country/i,
+                });
+                // Test Space key
+                countrySelector.focus();
+                user_event_1.default.keyboard(' ');
+                expect(react_1.screen.getByRole('listbox')).toBeInTheDocument();
+                return [2 /*return*/];
+            });
+        }); });
+    });
+    describe('Country Search Feature', function () {
+        it('should enable country search by default', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var countrySelector;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { useModalForCountrySelection: true, enableCountrySearch: true })));
+                        countrySelector = react_1.screen.getByRole('button', {
+                            name: /select country/i,
+                        });
+                        user_event_1.default.click(countrySelector);
+                        // Should show search input in modal
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(react_1.screen.getByPlaceholderText('Search countries...')).toBeInTheDocument();
+                            })];
+                    case 1:
+                        // Should show search input in modal
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should disable country search when enableCountrySearch is false', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var countrySelector;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { enableCountrySearch: false, useModalForCountrySelection: true })));
+                        countrySelector = react_1.screen.getByRole('button', {
+                            name: /select country/i,
+                        });
+                        user_event_1.default.click(countrySelector);
+                        // Should not show search input in modal
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(react_1.screen.queryByPlaceholderText('Search countries...')).not.toBeInTheDocument();
+                            })];
+                    case 1:
+                        // Should not show search input in modal
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('Edge Cases', function () {
+        it('should handle empty value gracefully', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { value: "" })));
+            var input = react_1.screen.getByRole('textbox');
+            expect(input).toHaveValue('');
+        });
+        it('should handle invalid initial country code', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps, { initialCountry: "INVALID" })));
+            // Should fallback to first country
+            var countries = (0, countryData_1.getCountryData)();
+            var input = react_1.screen.getByRole('textbox');
+            expect(input).toHaveAttribute('placeholder', countries[0].example);
+        });
+        it('should handle cursor position correctly during formatting', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var input;
+            return __generator(this, function (_a) {
+                (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, __assign({}, defaultProps)));
+                input = react_1.screen.getByRole('textbox');
+                // Type partial number
+                user_event_1.default.type(input, '202345');
+                // Set cursor in middle
+                input.setSelectionRange(3, 3);
+                // Type more digits
+                user_event_1.default.type(input, '9');
+                // Cursor should be in reasonable position (exact position may vary due to formatting)
+                expect(input.selectionStart).toBeGreaterThan(0);
+                return [2 /*return*/];
+            });
+        }); });
+    });
+    describe('enableCountryChange disabled behavior', function () {
+        it('should not change country when typing international number and enableCountryChange is false', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onCountryChange, onPhoneNumberChange, input, lastCall, lastCallData;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onCountryChange = jest.fn();
+                        onPhoneNumberChange = jest.fn();
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { id: "test-phone", label: "Phone Number", value: "", initialCountry: "US", enableCountryChange: false, onBlur: function () { }, onClick: function () { }, disabled: false, isAnswered: false, isSafari: false, isAutoFilledActive: false, type: "tel", experimentName: "test", onCountryChange: onCountryChange, onPhoneNumberChange: onPhoneNumberChange }));
+                        input = react_1.screen.getByRole('textbox');
+                        // Type a UK number (+44) while US is selected
+                        user_event_1.default.type(input, '+447769481232');
+                        // Wait for state updates
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(onPhoneNumberChange).toHaveBeenCalled();
+                            })];
+                    case 1:
+                        // Wait for state updates
+                        _a.sent();
+                        // Country should NOT have changed to GB
+                        expect(onCountryChange).not.toHaveBeenCalled();
+                        lastCall = onPhoneNumberChange.mock.calls[onPhoneNumberChange.mock.calls.length - 1];
+                        lastCallData = lastCall[0];
+                        expect(lastCallData.phoneNumber).toContain('+447769481232');
+                        // Should still be using US country code context (validation should be against US)
+                        expect(lastCallData.phoneNumber).not.toMatch(/^\+44 7769 481232$/); // UK format
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should validate against selected country only when enableCountryChange is false', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onValidationChange, input, lastCall, lastCallData;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onValidationChange = jest.fn();
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { id: "test-phone", label: "Phone Number", value: "", initialCountry: "US", enableCountryChange: false, onBlur: function () { }, onClick: function () { }, disabled: false, isAnswered: false, isSafari: false, isAutoFilledActive: false, type: "tel", experimentName: "test", onValidationChange: onValidationChange }));
+                        input = react_1.screen.getByRole('textbox');
+                        // Type a UK number that's invalid for US
+                        user_event_1.default.type(input, '+447769481231');
+                        // Wait for validation
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(onValidationChange).toHaveBeenCalled();
+                            })];
+                    case 1:
+                        // Wait for validation
+                        _a.sent();
+                        lastCall = onValidationChange.mock.calls[onValidationChange.mock.calls.length - 1];
+                        lastCallData = lastCall[0];
+                        expect(lastCallData.isValid).toBe(false);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('disabled behavior', function () {
+        it('should disable country selector when disabled is true', function () {
+            var onCountryChange = jest.fn();
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { id: "test-phone", label: "Phone Number", value: "", initialCountry: "US", enableCountryChange: true, onBlur: function () { }, onClick: function () { }, disabled: true, isAnswered: false, isSafari: false, isAutoFilledActive: false, type: "tel", experimentName: "test", onCountryChange: onCountryChange }));
+            // Find the country selector by its aria-label (when disabled, it's not a button)
+            var countrySelector = react_1.screen.getByLabelText('Country: United States');
+            // When disabled, the country selector should not be interactive
+            // It should not have a button role and should not respond to clicks
+            expect(countrySelector).toBeInTheDocument();
+            expect(countrySelector).not.toHaveAttribute('role', 'button');
+            // The country selector should have reduced opacity (this is handled by CSS)
+            // We can verify the disabled state by checking that clicking doesn't open the dropdown
+            user_event_1.default.click(countrySelector);
+            // Since it's disabled, no country change should occur
+            expect(onCountryChange).not.toHaveBeenCalled();
+        });
+        it('should disable both phone input and country selector when disabled is true', function () {
+            (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { id: "test-phone", label: "Phone Number", value: "", initialCountry: "US", enableCountryChange: true, onBlur: function () { }, onClick: function () { }, disabled: true, isAnswered: false, isSafari: false, isAutoFilledActive: false, type: "tel", experimentName: "test" }));
+            var input = react_1.screen.getByRole('textbox');
+            var countrySelector = react_1.screen.getByLabelText('Country: United States');
+            // Both should be disabled
+            expect(input).toBeDisabled();
+            expect(countrySelector).toBeInTheDocument();
+            // The country selector should not be clickable when disabled
+            user_event_1.default.click(countrySelector);
+            // No dropdown should appear (this is handled by the useCountrySelector hook)
+            // We can verify this by checking that the country selector doesn't have button role
+            expect(countrySelector).not.toHaveAttribute('role', 'button');
+        });
+    });
+    describe('Cursor Preservation', function () {
+        it('should preserve cursor position when editing from the beginning of a formatted number', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onPhoneNumberChange, input;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onPhoneNumberChange = jest.fn();
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { id: "cursor-test", label: "Phone Number", onPhoneNumberChange: onPhoneNumberChange, initialCountry: "US", experimentName: "cursor-test" }));
+                        input = react_1.screen.getByRole('textbox');
+                        // Type a full phone number first
+                        user_event_1.default.type(input, '2023456789');
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(input).toHaveValue('(202) 345-6789');
+                            })];
+                    case 1:
+                        _a.sent();
+                        // Clear and test editing from beginning
+                        user_event_1.default.clear(input);
+                        user_event_1.default.type(input, '+12023456789');
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                // Should format as international number
+                                expect(input.value).toContain('202');
+                                expect(input.value).toContain('345');
+                                expect(input.value).toContain('6789');
+                            })];
+                    case 2:
+                        _a.sent();
+                        expect(onPhoneNumberChange).toHaveBeenCalled();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should handle cursor preservation with international numbers', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onPhoneNumberChange, input;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onPhoneNumberChange = jest.fn();
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { id: "international-cursor-test", label: "Phone Number", onPhoneNumberChange: onPhoneNumberChange, initialCountry: "US", enableCountryChange: true, experimentName: "international-cursor-test" }));
+                        input = react_1.screen.getByRole('textbox');
+                        // Type an international number
+                        user_event_1.default.type(input, '+447700900123');
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(onPhoneNumberChange).toHaveBeenCalled();
+                            })];
+                    case 1:
+                        _a.sent();
+                        // Verify the number is formatted
+                        expect(input.value).toContain('7700');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should maintain cursor position when editing in the middle of a number', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onPhoneNumberChange, input, changeEvent;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onPhoneNumberChange = jest.fn();
+                        (0, renderWithProviders_1.default)((0, jsx_runtime_1.jsx)(PhoneNumberTextField_1.default, { id: "middle-cursor-test", label: "Phone Number", onPhoneNumberChange: onPhoneNumberChange, initialCountry: "US", experimentName: "middle-cursor-test" }));
+                        input = react_1.screen.getByRole('textbox');
+                        // Type initial number
+                        user_event_1.default.type(input, '2023456789');
+                        return [4 /*yield*/, (0, react_1.waitFor)(function () {
+                                expect(input).toHaveValue('(202) 345-6789');
+                            })];
+                    case 1:
+                        _a.sent();
+                        changeEvent = new Event('change', { bubbles: true });
+                        Object.defineProperty(changeEvent, 'target', {
+                            value: { value: '(202) 355-6789', selectionStart: 7 },
+                            enumerable: true,
+                        });
+                        (0, react_1.fireEvent)(input, changeEvent);
+                        // The component should handle the change without cursor jumping
+                        expect(onPhoneNumberChange).toHaveBeenCalled();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+});
+//# sourceMappingURL=PhoneNumberTextField.test.js.map