https://www.lightspeedhq.nl/wp-content/themes/ls/dist/js/forms-rea…extInput-test.chunk.2a7d5504634abcc68a50.js

1"use strict";(globalThis.webpackChunklightspeed_marketing=globalThis.webpackChunklightspeed_marketing||[]).push([[17,102,1219,4021,4477,6297,6355,7489,7632,8619,8626],{76473(e,t,a){a.r(t),a.d(t,{default:()=>n});var r=a(96540);function n({message:e,showErrorMsg:t,errorId:a}){const[n,o]=(0,r.useState)(null);return(0,r.useEffect)(()=>{t&&e&&o(!0)},[t,e]),r.createElement(r.Fragment,null,n?r.createElement("span",{className:"".concat("tw:block tw:relative tw:right-0 tw:left-0 tw:text-xs tw:text-yellow-44 tw:bg-yellow-96 tw:border-2 tw:border-solid tw:border-yellow-76 tw:rounded-md tw:w-full tw:text-center tw:z-1 tw:px-1.5"," ").concat("tw:before:content=[''] tw:before:absolute tw:before:left-[calc(50%-10px)] tw:before:right-[initial] tw:before:top-[-10px] tw:before:w-0 tw:before:h-0 tw:before:border-b-10 tw:before:border-b-solid tw:before:border-b-yellow-76 tw:before:border-l-10 tw:before:border-l-solid tw:before:border-l-transparent tw:before:border-r-10 tw:before:border-r-solid tw:before:border-r-transparent"," ").concat(t&&e?"tw:animate-label-error-in":"tw:animate-label-error-out"),onAnimationEnd:e=>(e=>{"label-error-out"===e.animationName&&o(!1)})(e),id:a,dangerouslySetInnerHTML:{__html:e||""}}):null)}},77791(e,t,a){a.r(t),a.d(t,{default:()=>l});var r=a(96540),n=a(89458),o=a(68197),i=a(76473);function l({children:e,raiseLabel:t,isFieldValid:a,showErrorMsg:l,className:s,errorMsg:c,uniqueID:u,errorId:d}){const{type:b,name:m,required:f}=(0,r.useContext)(n.FieldConfigContext),{label:p}=(0,r.useContext)(o.LexicDataContext);return"checkbox"===b?r.createElement("div",{className:"gb-checkbox__container gb-checkbox__container--left"},r.createElement("div",{className:"gb-checkbox__fields gb-checkbox__fields--left"},r.createElement("div",{className:"tw:flex","data-formfield":"ls-form-field"},e,r.createElement("label",{className:"gb-checkbox__text text-left",htmlFor:"id_".concat(m,"_").concat(u)},p,f&&r.createElement("span",{className:"gb-checkbox__text--required"},"*"))))):r.createElement("div",{className:"gb-form__field gb-form__field-".concat(m," ").concat(null===a?"":"js-validated"," ").concat(s||"")},r.createElement("div",{className:"tw:relative tw:z-3"},e,r.createElement("label",{className:"gb-form__field-label tw:transform-(top) tw:transition-240 tw:transition-[cubic-bezier(0,.6,.6,1)] ".concat(t?"js-raised tw:top-1":"tw:top-[calc(50%-9px)]"),htmlFor:"id_".concat(m)},p)),r.createElement("div",{className:"gb-form__field-background tw:z-2"}),r.createElement(i.default,{message:c,showErrorMsg:l||!1,errorId:d}))}},7051(e,t,a){a.r(t);var r=a(54705),n=a(96540),o=a(40253),i=a(80614),l=(a(79515),a(89458)),s=a(68197),c=a(60841);function u(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),a.push.apply(a,r)}return a}function d(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?u(Object(a),!0).forEach(function(t){(0,r.A)(e,t,a[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):u(Object(a)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))})}return e}jest.mock("root/utils/cors/doFetch");const b=jest.fn();jest.mock("root/utils/tracking/GA4/googleTagManager",()=>({GoogleTagManager:{sendEvent:(...e)=>b(...e)}})),jest.mock("root/utils/tracking/GA4/formTracking",()=>({FormGTMObjectConstructor:jest.fn().mockImplementation(()=>({getFormGTMObject:(e,t,a)=>({event_action:e,field_value:t,field_name:a})}))})),jest.mock("lodash",()=>d(d({},jest.requireActual("lodash")),{},{debounce:e=>{const t=e;return t.cancel=jest.fn(),t}}));const m={name:"company",type:"text",required:!0,validation:{minLength:2,maxLength:150,pattern:"^([\\s]?(?![\\s]))[^#*%\\\\`\\/:<>_]{2,}$"}},f={exclude_field:"off",label:"Company",placeholder:"Store name",error:"Please enter a valid email address"},p=()=>(0,o.XX)(n.createElement("form",{"data-form-name":"test_form"},n.createElement(l.FieldConfigContext.Provider,{value:m},n.createElement(s.LexicDataContext.Provider,{value:f},n.createElement(c.default,null)))));describe("Company",()=>{const e=console.error;beforeAll(()=>{console.error=(...t)=>{"string"==typeof t[0]&&t[0].includes("not wrapped in act")||e.call(console,...t)}}),afterAll(()=>{console.error=e}),beforeEach(()=>{jest.clearAllMocks()}),afterEach(async()=>{await(0,o.Rb)(()=>new Promise(e=>setTimeout(e,0)))}),describe("Initial render",()=>{it("renders the text input field",()=>{p();const e=o.nj.getByRole("textbox");expect(e).toBeInTheDocument(),expect(e).toHaveAttribute("type","text"),expect(e).toHaveAttribute("name","company")}),it("renders with placeholder text",()=>{p();const e=o.nj.getByRole("textbox");expect(e).toHaveAttribute("placeholder","Store name")}

1),it("has no validation state initially",()=>{p();const e=o.nj.getByRole("textbox");expect(e).not.toHaveAttribute("data-valid"),expect(e).not.toHaveAttribute("aria-invalid")})}),describe("Valid syntax validation",()=>{it("accepts input format",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"John Bonanza"),o.rC.blur(e),await(0,o.fm)(()=>{expect(e).toHaveAttribute("aria-invalid","false")})}),it("rejects invalid input format",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"%@:."),o.rC.blur(e),await(0,o.fm)(()=>{expect(e).toHaveAttribute("aria-invalid","true")})})}),describe("Validation on blur",()=>{it("validates and sets invalid state on blur with invalid text input",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"a"),o.rC.blur(e),await(0,o.fm)(()=>{expect(e).toHaveAttribute("aria-invalid","true")})}),it("validates and sets valid state on blur with valid text input",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"John Washington Co"),o.rC.blur(e),await(0,o.fm)(()=>{expect(e).toHaveAttribute("aria-invalid","false")})}),it("hides error message on blur even when invalid",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"%"),o.rC.blur(e),await(0,o.fm)(()=>{expect(e).toHaveAttribute("aria-invalid","true")});const t=o.nj.queryByText("Please enter a valid email address");await(0,o.fm)(()=>{expect(t).not.toBeInTheDocument()})})}),describe("Validation on typing (soft validation)",()=>{it("marks as valid while typing when text input becomes valid",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"John Washington Co"),await(0,o.fm)(()=>{expect(e).toHaveAttribute("aria-invalid","false")})}),it("resets to neutral state when correcting invalid input",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"a"),o.rC.blur(e),await(0,o.fm)(()=>{expect(e).toHaveAttribute("aria-invalid","true")}),o.rC.focus(e),await i.Ay.clear(e),await i.Ay.type(e,"John Washington Co"),await(0,o.fm)(()=>{expect(e).toHaveAttribute("aria-invalid","false")})})}),describe("Error message visibility",()=>{it("shows error message on focus when field is invalid",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"j"),o.rC.blur(e),await(0,o.fm)(()=>{expect(e).toHaveAttribute("aria-invalid","true")}),o.rC.focus(e),await(0,o.fm)(()=>{const e=o.nj.getByText("Please enter a valid email address");expect(e).toBeInTheDocument()})}),it("does not show error message on blur",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"a"),o.rC.blur(e),await(0,o.fm)(()=>{expect(e).toHaveAttribute("aria-invalid","true")});const t=o.nj.queryByText("Please enter a valid email address");expect(t).not.toBeInTheDocument()}),it("hides error message when typing after error was shown",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"a"),o.rC.blur(e),await(0,o.fm)(()=>{expect(e).toHaveAttribute("aria-invalid","true")}),o.rC.focus(e),await(0,o.fm)(()=>{expect(o.nj.getByText("Please enter a valid email address")).toBeInTheDocument()}),await i.Ay.clear(e),await i.Ay.type(e,"John Washington Co"),await(0,o.fm)(()=>{const e=o.nj.queryByText("Please enter a valid email address");e?expect(e).toHaveClass("tw:animate-label-error-out"):expect(e).not.toBeInTheDocument()})})}),describe("Label behavior",()=>{it("raises label on focus",()=>{p();const e=o.nj.getByRole("textbox");o.rC.focus(e);const t=o.nj.getByText("Company");expect(t).toHaveClass("js-raised")}),it("keeps label raised when input has value after blur",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"John Washington Co"),e.blur();const t=o.nj.getByText("Company");expect(t).toHaveClass("js-raised")}),it("lowers label when input is empty after blur",async()=>{p();const e=o.nj.getByRole("textbox");o.rC.focus(e),o.rC.blur(e);const t=o.nj.getByText("Company");expect(t).not.toHaveClass("js-raised")})}),describe("Accessibility",()=>{it("sets aria-invalid to true when invalid",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"a"),o.rC.blur(e),await(0,o.fm)(()=>{expect(e).toHaveAttribute("aria-invalid","true")})}),it("sets aria-invalid to false when valid",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"John Washington Co"),o.rC.blur(e),await(0,o.fm)(()=>{expect(e).toHaveAttribute("aria-invalid","false")})}),it("sets aria-errormessage when invalid",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"a"),e.blur(),await(0,o.fm)(()=>{expect(e).toHaveAttribute("aria-errormessage","company-error-message")})}),it("removes aria-errormessage when valid",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"John Washington Co"),o.rC.blur(e),await(0,o.fm)(()=>{expect(e).not.toHaveAttribute("aria-errormessage")})})}),describe("GA4 tracking",()=>{it("sends field_completed event on blur when text input is valid",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"John Washington Co"),e.blur(),await(0,o.fm)(()=>{expect(e).toHaveAttribute("aria-invalid","false")}),expect(b).toHaveBeenCalledWith(expect.objectContaining({event_action:"field_completed",field_name:"company",field_value:"completed"}))}

1),it("sends field_validation_error event on blur when text input is invalid",async()=>{p();const e=o.nj.getByRole("textbox");await i.Ay.type(e,"a"),e.blur(),await(0,o.fm)(()=>{expect(e).toHaveAttribute("aria-invalid","true")}),expect(b).toHaveBeenCalledWith(expect.objectContaining({event_action:"field_validation_error",field_name:"company",field_value:"completed"}))})})})},60841(e,t,a){a.r(t),a.d(t,{default:()=>b});var r=a(96540),n=a(89458),o=a(67706),i=a(68197),l=a(1187),s=a(66135),c=a(96503),u=a(77791),d=a(96363);function b(){const{name:e,validation:t,required:a}=(0,r.useContext)(n.FieldConfigContext),{placeholder:b,error:m}=(0,r.useContext)(i.LexicDataContext),{isFormValidating:f,setInvalidFields:p}=(0,r.useContext)(o.FormSubmissionContext),x=(0,r.useRef)(null),v=(0,r.useRef)(null),y=(0,c.default)(e,x.current),[w,g]=(0,r.useState)(y||""),[h,C]=(0,r.useState)(w.length>0),[j,_]=(0,r.useState)(null),[A,E]=(0,r.useState)(!1),{clearCustomError:B,setCustomError:k,errorMessage:H}=(0,l.default)({inputElement:x.current,errorMsgObj:{default:m}}),R=()=>{B(),x.current&&(v.current||null===v.current?_(!!x.current.checkValidity()||null):(_(x.current.checkValidity()),!x.current.checkValidity()&&k()))},T=(0,s.default)(R),O=(0,r.useRef)(!0);(0,r.useEffect)(()=>{!h&&w.length>0&&C(!0);const e=document.activeElement!==x.current;return O.current&&w?(R(),void(O.current=!1)):e&&w?(R(),void(0,d.default)(null===(t=x.current)||void 0===t?void 0:t.checkValidity(),x.current)):void T();var t},[w]),(0,r.useEffect)(()=>{f&&x.current&&(!1===j?p(x.current):null===j&&(k(),_(!1),p(x.current)))},[f,j]);const F="".concat(e,"-error-message");return r.createElement(u.default,{raiseLabel:h,isFieldValid:j,showErrorMsg:A,errorMsg:H,errorId:F},r.createElement("input",{ref:x,className:"gb-form__field-text tw:z-3",id:"id_".concat(e),name:e,type:"text",value:w,placeholder:b,onFocus:()=>(null===v.current&&(v.current=!0),C(!0),void E(!0)),onChange:e=>g(e.target.value),onBlur:e=>(e=>{var t;v.current&&(v.current=!1),C(e.target.value.length>0),E(!1),R(),(0,d.default)(null===(t=x.current)||void 0===t?void 0:t.checkValidity(),e.target)})(e),onInvalid:e=>e.preventDefault(),pattern:t.pattern,minLength:t.minLength,maxLength:t.maxLength,required:a,"aria-invalid":null===j?void 0:!j,"aria-errormessage":!1===j?F:void 0,autoCapitalize:"none",autoCorrect:"off",autoComplete:t.autocomplete||"off",spellCheck:"false"}))}},89458(e,t,a){a.r(t),a.d(t,{FieldConfigContext:()=>r});const r=(0,a(96540).createContext)({})},67706(e,t,a){a.r(t),a.d(t,{FormSubmissionContext:()=>r});const r=(0,a(96540).createContext)({})},68197(e,t,a){a.r(t),a.d(t,{LexicDataContext:()=>r});const r=(0,a(96540).createContext)({})},1187(e,t,a){a.r(t),a.d(t,{default:()=>n});var r=a(96540);function n({inputElement:e,errorMsgObj:t}){const[a,n]=(0,r.useState)("");return{clearCustomError:()=>{e&&(e.setCustomValidity(""),n(""))},setCustomError:(a="default")=>{if(e){const r=t[a];return e.setCustomValidity(r),n(r),r}},errorMessage:a}}},66135(e,t,a){a.r(t),a.d(t,{default:()=>o});var r=a(96540),n=a(2543);function o(e){const t=(0,r.useMemo)(()=>(0,n.debounce)(()=>{e()},700),[e]);return(0,r.useEffect)(()=>()=>{t.cancel()},[t]),t}},96503(e,t,a){a.r(t),a.d(t,{default:()=>l});var r=a(96540),n=a(99243),o=a(21489),i=a(81785);function l(e,t){const a=(0,r.useRef)(!1),l=(e=>"estimated_annual_gtv"===e?"gtv":e)(e),s=function(e){const t=(0,o._G)(e);return null!=t?t:null}(l);return(0,r.useEffect)(()=>{if(s&&!a.current){const e=t?t.form:null;e&&(a.current=!0),((e,t)=>{if(!e)return;const a=new n.GU(e);i.d.sendEvent(a.getFormGTMObject("field_autocompleted","completed",t))})(e,l)}},[t]),s}},96363(e,t,a){a.r(t),a.d(t,{default:()=>i});var r=a(99243),n=a(94229),o=a(81785);const i=(e,t)=>{if(!t)return;const a=t.closest("form");if(!a)return;const i=new r.GU(a);o.d.sendEvent(i.getFormGTMObject(e?"field_completed":"field_validation_error",(0,n.Y)(t),t.name))}}}]);
2//# sourceMappingURL=forms-react-shared-Components-TextInput-TextInput-test.chunk.2a7d5504634abcc68a50.js.map