Tests rendering and setting valus of input fields on AddNewItem component

src/components/AddNewItem.vue

@@ -9,8 +9,8 @@
     <div class="mb-6" :class="{ error: v$.item.title.$errors.length }">
       <label
         class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-        >Tittel</label
-      >
+        id="titleLabel"
+        >Tittel</label>
       <input
         type="text"
         id="title"
@@ -35,6 +35,7 @@
     <div class="mb-6">
       <label
         class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+        id="selectCategoryLabel"
         >Kategori</label
       >
       <select
@@ -70,6 +71,7 @@
     <div class="mb-6" :class="{ error: v$.item.price.$errors.length }">
       <label
         class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        id="priceLabel"
         >Pris</label
       >
       <input
@@ -96,6 +98,7 @@
     <div class="mb-6" :class="{ error: v$.item.description.$errors.length }">
       <label
         class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+        id="descriptionLabel"
         >Beskrivelse</label
       >
       <textarea
@@ -122,6 +125,7 @@
     <div>
       <label
         class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
+        id="imageLabel"
       >
         Bilder
       </label>
@@ -152,6 +156,7 @@
       <button
         @click="saveClicked"
         class="content-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        id="saveButton"
       >
         Lagre
       </button>

tests/unit/add-new-item.spec.js

+import { shallowMount } from "@vue/test-utils";
+import AddNewItem from "@/components/AddNewItem.vue";
+
+describe("addNewItem elements rendering", () => {
+
+    it("renders all labels", () => {
+
+        const wrapper = shallowMount(AddNewItem);
+
+        expect(wrapper.find('#titleLabel').text()).toMatch("Tittel");
+        expect(wrapper.find('#selectCategoryLabel').text()).toMatch("Kategori");
+        expect(wrapper.find('#priceLabel').text()).toMatch("Pris");
+        expect(wrapper.find('#descriptionLabel').text()).toMatch("Beskrivelse");
+        expect(wrapper.find('#imageLabel').text()).toMatch("Bilde");
+
+    });
+
+    it("Tests setting values of input field", async() => {
+
+        const wrapper = shallowMount(AddNewItem);
+
+        const titleInput = wrapper.find('#title');
+        await titleInput.setValue("Dyson");
+        expect(titleInput.element.value).toBe("Dyson");
+
+        const selectedCategory = wrapper.find('#categories');
+        await selectedCategory.setValue("Hage");
+        expect(selectedCategory.element.value).toBe("Hage");
+
+        const priceInput = wrapper.find('#price');
+        await priceInput.setValue(500);
+        expect(priceInput.element.value).toBe("500");
+
+        const descriptionInput = wrapper.find('#description');
+        await descriptionInput.setValue("Dette er en støvsuer fra Dyson");
+        expect(descriptionInput.element.value).toBe("Dette er en støvsuer fra Dyson");
+    });
+});