Added more tests for loginForm

src/components/FormComponents/LoginForm.vue

@@ -66,7 +66,7 @@
             >Glemt passord?</router-link
           >
 
-          <Button @click="loginClicked" :text="'Logg på'"></Button>
+          <Button class="login" @click="loginClicked" :text="'Logg på'"></Button>
         </div>
       </div>
     </div>

tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap

@@ -49,7 +49,7 @@ exports[`LoginForm component renders correctly 1`] = `
           Glemt passord?
         </router-link>
         <button
-          class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light"
+          class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light login"
         >
           Logg på
         </button>

tests/unit/component-tests/user-component-tests/login-form-component/login-form-component.spec.js

+import { shallowMount } from "@vue/test-utils";
+import LoginForm from "@/components/FormComponents/LoginForm.vue";
+
+jest.mock('@/utils/apiutil', () => {
+    return {
+        doLogin: () => {
+            return new Promise((resolve) => {
+                resolve({
+                    isLoggedIn: false
+                });
+            })
+        }
+    }
+});
+
+describe("LoginForm component", () => {
+    let wrapper;
+    const mockRouter = {
+        push: jest.fn()
+    }
+    const mockStore = {
+        commit: jest.fn()
+    }
+    
+    beforeEach(() => {
+        wrapper = shallowMount(LoginForm, {
+            global: {
+                mocks: {
+                    $router: mockRouter,
+                    $store: mockStore
+                }
+            }
+        });
+    });
+        
+    it("is instantiated", () => {
+        console.log(wrapper.html());
+        expect(wrapper.exists()).toBeTruthy();
+    });
+
+    it("Check that two input fields are rendered" , () => {
+        expect(wrapper.findAll("input").length).toBe(2);
+    });
+
+    it("Insert invalid email into the first input field", () => {
+        const field = wrapper.findAll("input")[0];
+        field.setValue("test");
+        expect(field.element.validity.valid).toBeFalsy();
+    });
+
+    it("Insert valid email into the first input field", () => {
+        const field = wrapper.findAll("input")[0];
+        field.setValue("test@test.com");
+        expect(field.element.validity.valid).toBeTruthy();
+    });
+
+    it("Check invalid login", async () => {
+        // Verify that the error message is empty
+        expect(wrapper.vm.message).toBe("");
+        const field = wrapper.findAll("input")[0];
+        field.setValue("test@test.com");
+        const field2 = wrapper.findAll("input")[1];
+        field2.setValue("testtest");
+
+        // Click on the login button
+        const button = wrapper.find(".login");
+        button.trigger("click");
+
+        // wait a tick
+        await wrapper.vm.$nextTick();
+
+        // Check that the error message is not empty
+        expect(wrapper.vm.message).not.toBe("");
+    })
+});
\ No newline at end of file

tests/unit/component-tests/user-component-tests/login-form-component/login-form-valid-login.spec.js

+import { shallowMount } from "@vue/test-utils";
+import LoginForm from "@/components/FormComponents/LoginForm.vue";
+import vueRouter from 'vue-router'
+
+jest.mock('@/utils/apiutil', () => {
+    return {
+        doLogin: () => {
+            return new Promise((resolve) => {
+                resolve({
+                    isLoggedIn: true
+                });
+            })
+        }
+    }
+});
+
+describe("LoginForm component", () => {
+    let wrapper;
+    const mockRouter = {
+        push: jest.fn()
+    }
+    const mockStore = {
+        commit: jest.fn()
+    }
+    
+    beforeEach(() => {
+        wrapper = shallowMount(LoginForm, {
+            global: {
+                mocks: {
+                    $router: mockRouter,
+                    $store: mockStore
+                },
+            }
+        });
+    });
+
+    it("Check valid login", async () => {
+            
+        // Verify that the error message is empty
+        expect(wrapper.vm.message).toBe("");
+        const field = wrapper.findAll("input")[0];
+        field.setValue("test@test.com");
+        const field2 = wrapper.findAll("input")[1];
+        field2.setValue("testtest");
+
+        // Click on the login button
+        const button = wrapper.find(".login");
+        button.trigger("click");
+
+        // wait a tick
+        await wrapper.vm.$nextTick();
+        
+        // Check that the error message is not empty
+        expect(mockRouter.push).toBeCalledTimes(1);
+    })
+})
\ No newline at end of file