fix(phone-number): trigger event

ovh · Nov 16, 2023 · 9104220 · 9104220
1 parent 1e6a59f
commit 9104220
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 12 deletions.
diff --git a/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.e2e.ts b/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.e2e.ts
@@ -160,14 +160,49 @@ describe('e2e:osds-phone-number', () => {
       });
     });
 
-    it('should not receive event odsValueChange on type in input', async() => {
+    it('should receive event odsValueChange with invalid validity', async() => {
       await setup({ attributes: { isoCode: ODS_COUNTRY_ISO_CODE.FR }, cbkInterceptorRequest: myCbk });
 
       const spyOdsValueChange = await page.spyOnEvent('odsValueChange');
 
       await input.type('0');
       await page.waitForChanges();
-      expect(spyOdsValueChange).toHaveReceivedEventTimes(0);
+      expect(spyOdsValueChange).toHaveReceivedEventTimes(1);
+      expect(spyOdsValueChange).toHaveReceivedEventDetail({
+        isoCode: 'fr',
+        value: '0',
+        validity: {
+          customError: false,
+          forbiddenValue: false,
+          invalid: true,
+          stepMismatch: false,
+          valid: false,
+          valueMissing: false,
+        },
+      });
+    });
+
+    it('should receive event odsValueChange with invalid validity', async() => {
+      await setup({ attributes: { isoCode: ODS_COUNTRY_ISO_CODE.FR }, cbkInterceptorRequest: myCbk });
+
+      const spyOdsValueChange = await page.spyOnEvent('odsValueChange');
+
+      await input.type('0642');
+      await page.waitForChanges();
+      expect(spyOdsValueChange).toHaveReceivedEventTimes(4);
+      expect(spyOdsValueChange).toHaveReceivedEventDetail({
+        isoCode: 'fr',
+        value: '0642',
+        oldValue: '064',
+        validity: {
+          customError: false,
+          forbiddenValue: false,
+          invalid: true,
+          stepMismatch: false,
+          valid: false,
+          valueMissing: false,
+        },
+      });
     });
 
     it('should receive event odsValueChange with options selected', async() => {

diff --git a/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.spec.ts b/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.spec.ts
@@ -248,6 +248,14 @@ describe('spec:osds-phone-number', () => {
         expect(instance.value).toBe(detail.value);
         expect(instance.error).toBe(false);
         expect(spyEmitOdsValueChange).toHaveBeenCalledTimes(1);
+        expect(spyEmitOdsValueChange).toHaveBeenCalledWith({
+          value: '+33653535353',
+          isoCode: 'fr',
+          validity: {
+            invalid: false,
+            valid: true,
+          },
+        });
       });
 
       it('should handler the input change value with invalid value', async() => {
@@ -257,7 +265,15 @@ describe('spec:osds-phone-number', () => {
         instance.handlerOdsValueChange(new CustomEvent('odsValueChange', { detail }));
         expect(instance.value).toBe(detail.value);
         expect(instance.error).toBe(true);
-        expect(spyEmitOdsValueChange).toHaveBeenCalledTimes(0);
+        expect(spyEmitOdsValueChange).toHaveBeenCalledTimes(1);
+        expect(spyEmitOdsValueChange).toHaveBeenCalledWith({
+          value: '065353qsd5353',
+          isoCode: 'fr',
+          validity: {
+            invalid: true,
+            valid: false,
+          },
+        });
       });
 
       it('should handler the input change value with empty value', async() => {
@@ -268,6 +284,14 @@ describe('spec:osds-phone-number', () => {
         expect(instance.value).toBe(detail.value);
         expect(instance.error).toBe(false);
         expect(spyEmitOdsValueChange).toHaveBeenCalledTimes(1);
+        expect(spyEmitOdsValueChange).toHaveBeenCalledWith({
+          value: '',
+          isoCode: 'fr',
+          validity: {
+            invalid: false,
+            valid: true,
+          },
+        });
       });
 
       it('should emit an event with old value', async() => {
@@ -280,6 +304,10 @@ describe('spec:osds-phone-number', () => {
           value: '+33653535353',
           oldValue: '+330612345',
           isoCode: 'fr',
+          validity: {
+            invalid: false,
+            valid: true,
+          },
         });
       });
     });

diff --git a/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.tsx b/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.tsx
@@ -115,20 +115,29 @@ export class OsdsPhoneNumber implements OdsPhoneNumberAttribute, OdsPhoneNumberE
 
   private handlerInputEvent(event: OdsInputValueChangeEventDetail) {
     this.value = event.value || '';
-    if(!this.isValidValue(this.value)) {
-      this.error = true;
-      return;
-    }
+    this.error = !this.isValidValue(this.value);
     const number = this.controller.parseNumber(event.value);
-    const oldNumber =this.controller.parseNumber(event.oldValue);
+    const oldNumber = this.controller.parseNumber(event.oldValue);
     this.odsValueChange.emit({
       ...event,
-      value: number && this.phoneUtils.format(number, PhoneNumberFormat.E164),
-      oldValue: oldNumber && this.phoneUtils.format(oldNumber, PhoneNumberFormat.E164) || undefined,
+      value: this.formatValue(number, this.value),
+      oldValue: this.formatValue(oldNumber, event.oldValue) ,
       isoCode: this.isoCode,
+      validity: {
+        ...event.validity,
+        invalid: this.error,
+        valid: !this.error,
+      },
     });
   }
 
+  private formatValue(number: PhoneNumber | null, defaultValue?: string | null): string | undefined {
+    if (this.error || !number) {
+      return defaultValue ?? undefined;
+    }
+    return this.phoneUtils.format(number, PhoneNumberFormat.E164)
+  }
+
   @Watch('value')
   private validateValue(): void {
     this.error = !this.isValidValue(this.value);

diff --git a/packages/components/phone-number/src/index.html b/packages/components/phone-number/src/index.html
@@ -35,11 +35,10 @@
   <br/>
   <br/>
   <osds-phone-number disabled value="0642665892"></osds-phone-number>
-
   <script>
     const phoneNumber = document.getElementById('phoneNumber');
     phoneNumber.addEventListener('odsValueChange', (event) => {
-      console.log('event', event);
+      console.log('event', event.detail);
     })
   </script>
 </body>