Addition of Unit Tests for LicenseDropdown.vue

src/components/LicenseDropdown.vue

@@ -1,67 +1,69 @@
 <template>
-    <b-field class="license-dropdown">
-        <b-select
-            :placeholder="this.$t('stepper.DD.placeholder')"
-            :value="shortName"
-            @input="setCurrentLicense"
-        >
-            <option
-                v-for="license in licenseList"
-                :key="license"
-                :value="license"
-            >
-                {{ license }}
-            </option>
-        </b-select>
-    </b-field>
+  <b-field class="license-dropdown">
+    <b-select
+      class="select"
+      :placeholder="this.$t('stepper.DD.placeholder')"
+      :value="shortName"
+      @input="setCurrentLicense"
+    >
+      <option
+        class="options"
+        v-for="license in licenseList"
+        :key="license"
+        :value="license"
+      >{{ license }}</option>
+    </b-select>
+  </b-field>
 </template>
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
 
 export default {
-    name: 'SelectedLicenseDropdown',
-    data() {
-        return {
-            licenseList: [
-                'CC0 1.0',
-                'CC BY 4.0',
-                'CC BY-SA 4.0',
-                'CC BY-ND 4.0',
-                'CC BY-NC 4.0',
-                'CC BY-NC-SA 4.0',
-                'CC BY-NC-ND 4.0'
-            ],
-            currentLicense: undefined
-        }
-    },
-    computed: {
-        ...mapGetters(['shortName', 'fullName'])
-    },
-    methods: {
-        setCurrentLicense(currentLicense) {
-            this.$store.commit('updateAttributesFromShort', currentLicense)
-            this.$emit('input')
-            if (process.env.NODE_ENV === 'production') {
-                this.$ga.event({
-                    eventCategory: 'LicenseDropdown',
-                    eventAction: 'licenseSelected',
-                    eventLabel: currentLicense
-                })
-            }
-        }
+  name: "SelectedLicenseDropdown",
+  data() {
+    return {
+      licenseList: [
+        "CC0 1.0",
+        "CC BY 4.0",
+        "CC BY-SA 4.0",
+        "CC BY-ND 4.0",
+        "CC BY-NC 4.0",
+        "CC BY-NC-SA 4.0",
+        "CC BY-NC-ND 4.0"
+      ],
+      currentLicense: undefined
+    };
+  },
+  computed: {
+    ...mapGetters(["shortName", "fullName"])
+  },
+
+  methods: {
+    setCurrentLicense(currentLicense) {
+      this.$store.commit("updateAttributesFromShort", currentLicense);
+      this.$emit("input");
+      if (process.env.NODE_ENV === "production") {
+        this.$ga.event({
+          eventCategory: "LicenseDropdown",
+          eventAction: "licenseSelected",
+          eventLabel: currentLicense
+        });
+      }
     }
-}
+  }
+};
 </script>
 <style lang="scss">
-    .license-dropdown {
-        margin-top: 1rem;
-        .label{
-            font-weight: normal;
-            opacity: 0.8;
-            font-size: 1em;
-        }
-        .select, select {
-            width: 100%;
-        }
-    }
+.license-dropdown {
+  margin-top: 1rem;
+  .label {
+    font-weight: normal;
+    opacity: 0.8;
+    font-size: 1em;
+  }
+  .select,
+  select {
+    width: 100%;
+  }
+}
 </style>

tests/unit/LicenseDropdown.spec.js

@@ -0,0 +1,68 @@
+import { mount, createLocalVue, config } from "@vue/test-utils";
+import LicenseDropdown from "@/Components/LicenseDropdown.vue";
+import VueI18n from "vue-i18n";
+import Vuex from "vuex";
+import Buefy from "buefy";
+
+describe("LicenseDropdown.vue", () => {
+    let wrapper;
+    let getters;
+    let store;
+    let state;
+
+    beforeEach(() => {
+        const localVue = createLocalVue();
+        localVue.use(VueI18n);
+        localVue.use(Vuex);
+        localVue.use(Buefy);
+
+        getters = {
+            shortName: state => {
+                return "name";
+            },
+
+            fullName: state => {
+                return "fullName";
+            }
+        };
+        store = new Vuex.Store({
+            store,
+            getters
+        });
+        const messages = require("@/locales/en.json");
+        const i18n = new VueI18n({
+            locale: "en",
+            fallbackLocale: "en",
+            messages: messages
+        });
+        config.mocks.i18n = i18n;
+        config.mocks.$t = key => {
+            return i18n.messages[key];
+        };
+        wrapper = mount(LicenseDropdown, {
+            localVue,
+            store
+        });
+    });
+
+    it("Has the field tag", () => {
+        expect(wrapper.contains(".license-dropdown")).toBe(true);
+    });
+
+    it("Has the option tag", () => {
+        expect(wrapper.contains(".options")).toBe(true);
+    });
+
+    it("should emit input event from setCurrentLicense method", async () => {
+        wrapper.vm.$emit("input");
+        await wrapper.vm.$nextTick();
+        expect(wrapper.emitted().input).toBeTruthy();
+    });
+
+    it("Checks whether select element is getting triggered", () => {
+        wrapper
+            .findAll(".select")
+            .at(0)
+            .trigger("input");
+    });
+});