Merge branch 'master' into obtp-index-prop

momentum-design · Mar 4, 2021 · 1760a79 · 1760a79
2 parents dacf3e8 + 43b4be5
commit 1760a79
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 7 deletions.
diff --git a/web-components/src/components/phone-input/PhoneInput.test.ts b/web-components/src/components/phone-input/PhoneInput.test.ts
@@ -110,6 +110,64 @@ describe("PhoneInput Component", () => {
 
     expect(element.countryCallingCode).toEqual("+1268,AntiguaandBarbuda,AG");
   });
+  test("should not trigger a Country Change if the field is exited without a value", async () => {
+    const element = await fixture<PhoneInput.ELEMENT>(
+      html`
+        <md-phone-input></md-phone-input>
+      `
+    );
+    const event: CustomEvent = new CustomEvent("change-selected", {
+      composed: true,
+      bubbles: true,
+      detail: {
+        value: undefined
+      }
+    });
+    element.handleCountryChange(event);
+
+    expect(element.countryCallingCode).toEqual("");
+  });
+  test("should emit a custom event on input blur", async () => {
+    const parentElement = await fixture(
+      html`
+        <div class="parent"></div>
+      `
+    );
+    const element = await fixture<PhoneInput.ELEMENT>(
+      html`
+        <md-phone-input></md-phone-input>
+      `
+    );
+
+    const mockFunc = jest.fn();
+    parentElement.appendChild(element);
+    parentElement.addEventListener("phoneinput-blur", mockFunc);
+
+    const event: Event = new Event("input-blur");
+    element.handleBlur(event);
+
+    expect(mockFunc).toHaveBeenCalled();
+    expect(element.value).toBeFalsy();
+  });
+  test("should verify phone number on input blur", async () => {
+    const parentElement = await fixture(
+      html`
+        <div class="parent"></div>
+      `
+    );
+    const element = await fixture<PhoneInput.ELEMENT>(
+      html`
+        <md-phone-input value="(773)-777-6002"></md-phone-input>
+      `
+    );
+
+    parentElement.appendChild(element);
+
+    const event: Event = new Event("input-blur");
+    element.handleBlur(event);
+
+    expect(element.value).toBeTruthy();
+  });
 
   test("should trigger a Phone Change event", async () => {
     const element = await fixture<PhoneInput.ELEMENT>(

diff --git a/web-components/src/components/phone-input/PhoneInput.ts b/web-components/src/components/phone-input/PhoneInput.ts
@@ -1,10 +1,10 @@
 import "@/components/combobox/ComboBox";
 import "@/components/input/Input";
 import { Input } from "@/components/input/Input";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
 import reset from "@/wc_scss/reset.scss";
 import { customArray } from "country-codes-list";
 import { AsYouType, CountryCode, isValidNumberForRegion } from "libphonenumber-js";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
 import { html, internalProperty, LitElement, property } from "lit-element";
 import { repeat } from "lit-html/directives/repeat.js";
 import styles from "./scss/module.scss";
@@ -25,7 +25,6 @@ export namespace PhoneInput {
     errorMessage: string;
   };
 
-
   @customElementWithCheck("md-phone-input")
   export class ELEMENT extends LitElement {
     @property({ type: String }) codePlaceholder = "+1";
@@ -54,10 +53,6 @@ export namespace PhoneInput {
       return [reset, styles];
     }
 
-    get locale() {
-      return navigator.language;
-    }
-
     countryCodeOptionTemplate(country: PhoneInput.Country, index: number) {
       return html`
         <div
@@ -73,6 +68,9 @@ export namespace PhoneInput {
     }
 
     handleCountryChange(event: CustomEvent) {
+      if (!event.detail.value) {
+        return;
+      }
       this.countryCallingCode = event.detail.value.id;
       this.countryCode = event.detail.value.id.split(",")[2];
     }
@@ -110,7 +108,7 @@ export namespace PhoneInput {
     }
 
     handleBlur(event: Event) {
-      this.isValid = this.value ? isValidNumberForRegion(this.value, this.countryCode) : true;
+      this.isValid = this.value ? isValidNumberForRegion(this.value, this.countryCode) : false;
       event.stopPropagation();
       this.dispatchEvent(
         new CustomEvent("phoneinput-blur", {