Merge pull request #12 from DannyFeliz/feature-unit-test

Feature unit test

.travis.yml

@@ -0,0 +1,8 @@
+languaje: node_js
+node_js:
+  - 10
+cache:
+  directories:
+    - node_modules
+script:
+  - npm run test:unit

README.md

@@ -2,6 +2,7 @@
 
 A Vue component for autocomplete email domains
 
+[<img src="https://travis-ci.org/DannyFeliz/vue-email-dropdown.svg?branch=master">](https://travis-ci.org/DannyFeliz/vue-email-dropdown)
 [<img src="https://img.shields.io/npm/dt/vue-email-dropdown.svg">](https://www.npmjs.com/package/vue-email-dropdown)
 [<img src="https://img.shields.io/npm/v/vue-email-dropdown.svg">](https://www.npmjs.com/package/vue-email-dropdown)
 
@@ -82,7 +83,7 @@ yarn add vue-email-dropdown
 <script>
 // Import package
 import EmailDropdown from "vue-email-dropdown";
-// Import basic styles (optional)
+// Import styles
 import "vue-email-dropdown/dist/vue-email-dropdown.css";
 
 export default {
@@ -93,6 +94,7 @@ export default {
     return {
       domains: [
         "yourcompany.com",
+        "google.com",
         "gmx.de",
         "googlemail.com",
         "hotmail.fr",

package.json

@@ -28,6 +28,7 @@
     "bundle": "./node_modules/@vue/cli-service/bin/vue-cli-service.js build --target lib --name vue-email-dropdown ./src/components/EmailDropdown.vue",
     "publish": "npm publish --access public",
     "test:unit": "vue-cli-service test:unit",
+    "test:unit:watch": "vue-cli-service test:unit --watch",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

src/components/EmailDropdown.vue

@@ -48,9 +48,6 @@ export default {
     initialValue: {
       default: "",
       validator(value) {
-        if (value instanceof InputEvent) {
-          value = value.target.value;
-        }
         return typeof value === "string";
       }
     },

tests/unit/email-dropdown.spec.js

@@ -0,0 +1,64 @@
+import { expect } from "chai";
+import { shallowMount } from "@vue/test-utils";
+import EmailDropdown from "@/components/EmailDropdown.vue";
+
+describe("EmailDropdown.vue", () => {
+  let propsData;
+
+  beforeEach(() => {
+    propsData = {
+      initialValue: "hello@",
+      domains: ["google.com"],
+      defaultDomains: ["hotmail.com", "outlook.com"],
+      maxSuggestions: 4,
+      closeOnClickOutside: true
+    };
+  });
+
+  it("renders without show suggestions", () => {
+    propsData.initialValue = "hello";
+
+    const wrapper = shallowMount(EmailDropdown, {
+      propsData
+    });
+
+    expect(wrapper.find(".email-dropdown-list").exists()).to.be.false;
+  });
+
+  it("shows suggestions with default domains", () => {
+    const wrapper = shallowMount(EmailDropdown, {
+      propsData
+    });
+
+    const dropdownItems = wrapper.findAll(".email-dropdown-item");
+    expect(dropdownItems).to.have.length(2);
+    expect(dropdownItems.at(0).text()).to.equal("hello@hotmail.com");
+    expect(dropdownItems.at(1).text()).to.equal("hello@outlook.com");
+  });
+
+  it("shows suggestions based in initialValue", () => {
+    propsData.domains = ["gmail.com", "google.com", "outlook.com"];
+    propsData.initialValue = "hello@g";
+
+    const wrapper = shallowMount(EmailDropdown, {
+      propsData
+    });
+
+    const dropdownItems = wrapper.findAll(".email-dropdown-item");
+
+    expect(dropdownItems).to.have.length(2);
+    expect(dropdownItems.at(0).text()).to.be.equal("hello@gmail.com");
+    expect(dropdownItems.at(1).text()).to.be.equal("hello@google.com");
+  });
+
+  it("hides suggestions if email match the suggestion", () => {
+    propsData.initialValue = "hello@google.com";
+
+    const wrapper = shallowMount(EmailDropdown, {
+      propsData
+    });
+
+    expect(wrapper.text()).to.be.empty;
+    expect(wrapper.find(".email-dropdown-list").exists()).to.be.false;
+  });
+});