Add computed properties unit test (#13)

Add computed properties unit test
DannyFeliz · Nov 17, 2019 · 408c2b3 · 408c2b3
2 parents 65d8a5d + 5c63398
commit 408c2b3
Show file tree

Hide file tree

Showing 5 changed files with 218 additions and 52 deletions.
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "@vue/test-utils": "1.0.0-beta.29",
     "babel-eslint": "^10.0.3",
     "chai": "^4.1.2",
+    "deep-equal-in-any-order": "^1.0.21",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
     "sass": "^1.19.0",

diff --git a/src/components/EmailDropdown.vue b/src/components/EmailDropdown.vue
@@ -46,10 +46,8 @@ export default {
   name: "EmailDropdown",
   props: {
     initialValue: {
-      default: "",
-      validator(value) {
-        return typeof value === "string";
-      }
+      type: String,
+      default: ""
     },
     domains: {
       type: Array,
@@ -97,7 +95,7 @@ export default {
   },
   computed: {
     shouldShowList() {
-      return this.includesAt && this.domainsList.length && !this.optionIsSelected && this.emailWithoutDomain;
+      return Boolean(this.domainsList.length && !this.optionIsSelected);
     },
     includesAt() {
       return this.email.toLowerCase().includes("@");
@@ -108,11 +106,11 @@ export default {
     emailDomain() {
       return this.email.toLowerCase().split("@")[1] || "";
     },
-    fakeDomains() {
+    suggestionList() {
       return this.domainsList.map(domain => `${this.emailWithoutDomain}@${domain}`.toLowerCase());
     },
     optionIsSelected() {
-      return this.fakeDomains.includes(this.email.toLowerCase());
+      return this.suggestionList.includes(this.email.toLowerCase());
     },
     domainsList() {
       if (!this.includesAt) return [];

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/tests/unit/email-dropdown.spec.js b/tests/unit/email-dropdown.spec.js
@@ -2,6 +2,11 @@ import { expect } from "chai";
 import { shallowMount } from "@vue/test-utils";
 import EmailDropdown from "@/components/EmailDropdown.vue";
 
+const deepEqualInAnyOrder = require("deep-equal-in-any-order");
+const chai = require("chai");
+
+chai.use(deepEqualInAnyOrder);
+
 describe("EmailDropdown.vue", () => {
   let propsData;
 
@@ -15,7 +20,7 @@ describe("EmailDropdown.vue", () => {
     };
   });
 
-  it("renders without show suggestions", () => {
+  it("renders without show suggestions if the email does not include '@'", () => {
     propsData.initialValue = "hello";
 
     const wrapper = shallowMount(EmailDropdown, {
@@ -60,5 +65,211 @@ describe("EmailDropdown.vue", () => {
 
     expect(wrapper.text()).to.be.empty;
     expect(wrapper.find(".email-dropdown-list").exists()).to.be.false;
+    expect(wrapper.vm.optionIsSelected).to.be.true;
+  });
+
+  it("filter the suggestion list when type in the input", () => {
+    propsData.initialValue = "hello@g";
+    propsData.domains = ["gmail.com", "google.com"];
+
+    const wrapper = shallowMount(EmailDropdown, {
+      propsData
+    });
+
+    expect(wrapper.findAll(".email-dropdown-item")).to.have.length(2);
+    wrapper.find("input").setValue("hello@gma");
+    expect(wrapper.findAll(".email-dropdown-item")).to.have.length(1);
+    expect(wrapper.find(".email-dropdown-item").text()).to.be.equal("hello@gmail.com");
+  });
+
+  it("emits 'input' on email change", () => {
+    propsData.domains = ["gmail.com", "google.com"];
+
+    const wrapper = shallowMount(EmailDropdown, {
+      propsData
+    });
+
+    wrapper.find("input").setValue("hello@gmail");
+    expect(wrapper.emitted().input[0]).to.have.length(1);
+    expect(wrapper.emitted().input[0][0]).to.be.equal("hello@gmail");
+    wrapper.find("input").setValue("hello@gmail.");
+    expect(wrapper.emitted().input[1]).to.have.length(1);
+    expect(wrapper.emitted().input[1][0]).to.be.equal("hello@gmail.");
+  });
+
+  it("hides suggestion list if remove '@' from the email", () => {
+    const wrapper = shallowMount(EmailDropdown, {
+      propsData
+    });
+
+    expect(wrapper.findAll(".email-dropdown-item")).to.have.length(2);
+    wrapper.find("input").setValue("hello");
+    expect(wrapper.find(".email-dropdown-list").exists()).to.be.false;
+  });
+
+  describe("computed", () => {
+    describe("includesAt", () => {
+      it("returns 'true' if email includes '@'", () => {
+        const wrapper = shallowMount(EmailDropdown, {
+          propsData
+        });
+
+        expect(wrapper.vm.includesAt).to.be.true;
+      });
+
+      it("returns 'false' if email does not includes '@'", () => {
+        propsData.initialValue = "hello";
+
+        const wrapper = shallowMount(EmailDropdown, {
+          propsData
+        });
+
+        expect(wrapper.vm.includesAt).to.be.false;
+      });
+    });
+
+    describe("emailWithoutDomain", () => {
+      it("returns the email without domain", () => {
+        propsData.initialValue = "hello@google.com";
+
+        const wrapper = shallowMount(EmailDropdown, {
+          propsData
+        });
+
+        expect(wrapper.vm.emailWithoutDomain).to.be.equal("hello");
+      });
+    });
+
+    describe("emailDomain", () => {
+      it("returns the email domain", () => {
+        propsData.initialValue = "hello@google.com";
+
+        const wrapper = shallowMount(EmailDropdown, {
+          propsData
+        });
+
+        expect(wrapper.vm.emailDomain).to.be.equal("google.com");
+      });
+    });
+
+    describe("optionIsSelected", () => {
+      it("returns 'true' if the email match an item from the suggestion list", () => {
+        propsData.initialValue = "hello@google.com";
+
+        const wrapper = shallowMount(EmailDropdown, {
+          propsData
+        });
+
+        expect(wrapper.vm.optionIsSelected).to.be.true;
+      });
+
+      it("returns 'false' if the email doesn't match an item from the suggestion list", () => {
+        propsData.initialValue = "hello@google.com";
+
+        const wrapper = shallowMount(EmailDropdown, {
+          propsData
+        });
+
+        expect(wrapper.vm.optionIsSelected).to.be.true;
+      });
+    });
+
+    describe("domainsList", () => {
+      it("returns an empty array if includesAt is 'false'", () => {
+        propsData.initialValue = "hello";
+
+        const wrapper = shallowMount(EmailDropdown, {
+          propsData
+        });
+
+        expect(wrapper.vm.includesAt).to.be.false;
+        expect(wrapper.vm.domainsList).to.be.empty;
+      });
+
+      it("returns default domains if doesn't have domain", () => {
+        const wrapper = shallowMount(EmailDropdown, {
+          propsData
+        });
+        expect(wrapper.vm.includesAt).to.be.true;
+        expect(wrapper.vm.emailDomain).to.be.have.length(0);
+        expect(wrapper.vm.defaultDomains).to.be.have.length.gt(0);
+        expect(wrapper.vm.domainsList).to.deep.equalInAnyOrder(propsData.defaultDomains);
+      });
+
+      it("returns the domains based on 'emailDomain'", () => {
+        propsData.domains = ["google.com", "gmail.com"];
+        propsData.initialValue = "hello@g";
+
+        const wrapper = shallowMount(EmailDropdown, {
+          propsData
+        });
+        expect(wrapper.vm.includesAt).to.be.true;
+        expect(wrapper.vm.emailDomain).to.be.have.length(1);
+        expect(wrapper.vm.domainsList).to.deep.equalInAnyOrder(propsData.domains);
+      });
+    });
+
+    describe("suggestionList", () => {
+      it("returns a suggestion domain list based on the domain list", () => {
+        propsData.domains = ["google.com", "gmail.com"];
+        propsData.initialValue = "hello@g";
+
+        const expected = ["hello@gmail.com", "hello@google.com"];
+
+        const wrapper = shallowMount(EmailDropdown, {
+          propsData
+        });
+
+        expect(wrapper.vm.suggestionList).to.deep.equalInAnyOrder(expected);
+      });
+
+      it("returns a suggestion domain list using the default domains", () => {
+        propsData.defaultDomains = ["yahoo.com", "mns.com"];
+
+        const expected = ["hello@yahoo.com", "hello@mns.com"];
+        const wrapper = shallowMount(EmailDropdown, {
+          propsData
+        });
+        expect(wrapper.vm.includesAt).to.be.true;
+        expect(wrapper.vm.emailDomain).to.be.have.length(0);
+        expect(wrapper.vm.suggestionList).to.deep.equalInAnyOrder(expected);
+      });
+    });
+
+    describe("shouldShowList", () => {
+      it("returns 'true' if domainsList is 'true' and optionIsSelected is 'false'", () => {
+        propsData.initialValue = "hello@";
+        const wrapper = shallowMount(EmailDropdown, {
+          propsData
+        });
+
+        expect(wrapper.vm.domainsList)
+          .to.be.an("array")
+          .have.length.gt(0);
+        expect(wrapper.vm.optionIsSelected).to.be.false;
+        expect(wrapper.vm.shouldShowList).to.be.true;
+      });
+
+      it("returns 'false' if 'domainsList' is empty", () => {
+        propsData.initialValue = "hello";
+        const wrapper = shallowMount(EmailDropdown, {
+          propsData
+        });
+        expect(wrapper.vm.domainsList)
+          .to.be.an("array")
+          .have.length(0);
+        expect(wrapper.vm.shouldShowList).to.be.false;
+      });
+
+      it("returns 'false' if 'optionIsSelected' is false", () => {
+        propsData.initialValue = "hello";
+        const wrapper = shallowMount(EmailDropdown, {
+          propsData
+        });
+
+        expect(wrapper.vm.optionIsSelected).to.be.false;
+        expect(wrapper.vm.shouldShowList).to.be.false;
+      });
+    });
   });
 });
diff --git a/tests/unit/example.spec.js b/tests/unit/example.spec.js