Merge pull request #23 from DannyFeliz/fix-default-suggestions

Fix default suggestions

src/components/EmailDropdown.vue

@@ -32,9 +32,7 @@
           @keyup.up="handleListNavigation('up')"
           @keyup.down="handleListNavigation('down')"
           @keyup="convertCharToText"
-        >
-          {{ emailWithoutDomain }}@{{ domain }}
-        </li>
+        >{{ emailWithoutDomain }}@{{ domain }}</li>
       </ul>
     </div>
   </div>
@@ -125,14 +123,20 @@ export default {
       return this.suggestionList.includes(this.email.toLowerCase());
     },
     domainsList() {
-      if (!this.includesAt) return [];
+      if (!this.includesAt) {
+        return [];
+      }
 
       if (!this.emailDomain.length && this.defaultDomains.length) {
         return this.defaultDomains
           .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
           .slice(0, this.maxSuggestions);
       }
 
+      if (!this.emailDomain) {
+        return [];
+      }
+
       return this.domains
         .filter(domain => domain.startsWith(this.emailDomain))
         .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
@@ -144,7 +148,7 @@ export default {
       this.$emit("input", this.email);
       this.resetFocusIndex();
       if (this.isEscPressed) {
-        this.isEscPressed = false
+        this.isEscPressed = false;
       }
     }
   },
@@ -276,7 +280,8 @@ export default {
         border-top: none;
       }
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         background-color: #f2f2f2;
         border: 0.1px solid darkgrey;
         box-sizing: border-box;

tests/unit/email-dropdown.spec.js

@@ -1,4 +1,4 @@
-import Vue from "vue"
+import Vue from "vue";
 import { expect } from "chai";
 import { shallowMount } from "@vue/test-utils";
 import EmailDropdown from "@/components/EmailDropdown.vue";
@@ -84,7 +84,6 @@ describe("EmailDropdown.vue", () => {
     expect(wrapper.find(".email-dropdown-item").text()).to.be.equal("[email protected]");
   });
 
-
   it("hides suggestion list if remove '@' from the email", async () => {
     const wrapper = shallowMount(EmailDropdown, {
       propsData
@@ -99,11 +98,11 @@ describe("EmailDropdown.vue", () => {
   describe("events", () => {
     it("emits 'input' on email change", async () => {
       propsData.domains = ["gmail.com", "google.com"];
-  
+
       const wrapper = shallowMount(EmailDropdown, {
         propsData
       });
-  
+
       wrapper.find("input").setValue("hello@gmail");
       await Vue.nextTick();
       expect(wrapper.emitted().input[0]).to.have.length(1);
@@ -113,7 +112,7 @@ describe("EmailDropdown.vue", () => {
       expect(wrapper.emitted().input[1]).to.have.length(1);
       expect(wrapper.emitted().input[1][0]).to.be.equal("hello@gmail.");
     });
-  })
+  });
 
   describe("computed", () => {
     describe("includesAt", () => {
@@ -215,6 +214,18 @@ describe("EmailDropdown.vue", () => {
         expect(wrapper.vm.emailDomain).to.be.have.length(1);
         expect(wrapper.vm.domainsList).to.deep.equalInAnyOrder(propsData.domains);
       });
+
+      it("return an empty list if doesn't have default domains", () => {
+        propsData.domains = ["google.com", "gmail.com"];
+        propsData.defaultDomains = [];
+        propsData.initialValue = "hello@";
+
+        const wrapper = shallowMount(EmailDropdown, {
+          propsData
+        });
+
+        expect(wrapper.vm.domainsList).to.be.have.length(0);
+      });
     });
 
     describe("suggestionList", () => {