Improved leave community function

jest.config.js

 module.exports = {
   preset: "@vue/cli-plugin-unit-jest",
   collectCoverage: true,
-  collectCoverageFrom: ['src/**/*.{js,vue}', '!**/node_modules/**']
+  collectCoverageFrom: ["src/**/*.{js,vue}", "!**/node_modules/**"],
 };

src/components/ChatComponents/ChatMessage.vue

@@ -110,6 +110,6 @@ export default {
       // if date is equal or within the first and last dates of the week
       return date >= firstDayOfWeek && date <= lastDayOfWeek;
     },
-  }
+  },
 };
 </script>

src/components/CommunityComponents/CommunityHamburger.vue

@@ -53,6 +53,7 @@ export default {
     this.admin = this.$store.state.user.adminList.includes(
       parseInt(this.communityID)
     );
+    console.log(this.communityID);
   },
 };
 </script>

src/components/CommunityComponents/CommunityHeader.vue

@@ -149,7 +149,7 @@ export default {
       this.hamburgerOpen = !this.hamburgerOpen;
     },
     leaveCommunity: async function () {
-      await LeaveCommunity(this.community.communityID);
+      await LeaveCommunity(this.community.communityId);
       this.$router.push("/");
     },
     async load() {

src/components/UserAuthComponents/LoginForm.vue

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

tests/unit/component-tests/ChatComponentsTest/ChatMessage.spec.js

 import { shallowMount } from "@vue/test-utils";
 import ChatMessage from "@/components/ChatComponents/ChatMessage.vue";
 
-jest.mock('@/utils/token-utils', () =>{ 
-    return {
-        parseCurrentUser: () => {
-            return {accountId: 1}
-        }
-    }
+jest.mock("@/utils/token-utils", () => {
+  return {
+    parseCurrentUser: () => {
+      return { accountId: 1 };
+    },
+  };
 });
 
 describe("ChatMessage.vue", () => {
-    let wrapper;
-    jest.mock('jwt-decode', () => () => ({ }));
-    
-    beforeEach(() => {
-        wrapper = shallowMount(ChatMessage, {
-            propsData: {
-                message: {
-                    id: 1,
-                    content: "Hello",
-                    timestamp: new Date(),
-                    from: 1,
-                    to: 0
-                }
-            }
-        });
-    })
+  let wrapper;
+  jest.mock("jwt-decode", () => () => ({}));
 
-    it("Is instansiated", () => {
-        expect(wrapper.exists()).toBeTruthy();
+  beforeEach(() => {
+    wrapper = shallowMount(ChatMessage, {
+      propsData: {
+        message: {
+          id: 1,
+          content: "Hello",
+          timestamp: new Date(),
+          from: 1,
+          to: 0,
+        },
+      },
     });
+  });
 
-    it("Test that message contains text", () => {
-        expect(wrapper.find(".message-container").findAll("span")[0].text()).toBe("Hello");
-    })
+  it("Is instansiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
 
-    it("Check that side is correct", () => {
-        expect(wrapper.vm.side()).toBe("justify-start");
-    })
-})
\ No newline at end of file
+  it("Test that message contains text", () => {
+    expect(wrapper.find(".message-container").findAll("span")[0].text()).toBe(
+      "Hello"
+    );
+  });
+
+  it("Check that side is correct", () => {
+    expect(wrapper.vm.side()).toBe("justify-start");
+  });
+});

tests/unit/component-tests/ChatComponentsTest/ChatProfile.spec.js

@@ -2,66 +2,67 @@ import { shallowMount } from "@vue/test-utils";
 import ChatProfile from "@/components/ChatComponents/ChatProfile.vue";
 
 describe("ChatProfile.vue", () => {
-    let wrapper;
-    const props = {
-        conversation: {
-            recipient: {
-                userId: 1,
-                firstName: "Test",
-                lastName: "Testersen",
-                picture: "www.google.com"
-            },
-            lastMessage: {
-                id: 0,
-                content: "Hello",
-                timestamp: new Date(),
-                from: 0,
-                to: 0
-            }
-        }
-    }
-    beforeEach(() => {
-        wrapper = shallowMount(ChatProfile, {
-            propsData: props
-        })
+  let wrapper;
+  const props = {
+    conversation: {
+      recipient: {
+        userId: 1,
+        firstName: "Test",
+        lastName: "Testersen",
+        picture: "www.google.com",
+      },
+      lastMessage: {
+        id: 0,
+        content: "Hello",
+        timestamp: new Date(),
+        from: 0,
+        to: 0,
+      },
+    },
+  };
+  beforeEach(() => {
+    wrapper = shallowMount(ChatProfile, {
+      propsData: props,
     });
+  });
 
-    it("Is instansiated", () => {
-        expect(wrapper.exists()).toBeTruthy();
-    });
+  it("Is instansiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
 
-    it("Test that selecting the user works", () => {
-        wrapper.find("a").trigger("click");
-        expect(wrapper.emitted()).toHaveProperty('recipient')
-    })
+  it("Test that selecting the user works", () => {
+    wrapper.find("a").trigger("click");
+    expect(wrapper.emitted()).toHaveProperty("recipient");
+  });
 
-    it("Test that last message renders", () => {
-        // Check that all information is rendered
-        expect(wrapper.findAll("span").length).toBe(3);
-        expect(wrapper.findAll("span")[0].text()).toBe("Test Testersen");
-        expect(wrapper.findAll("span")[1].text()).toBe("Just now");
-        expect(wrapper.findAll("span")[2].text()).toBe("Hello");
-    })
+  it("Test that last message renders", () => {
+    // Check that all information is rendered
+    expect(wrapper.findAll("span").length).toBe(3);
+    expect(wrapper.findAll("span")[0].text()).toBe("Test Testersen");
+    expect(wrapper.findAll("span")[1].text()).toBe("Just now");
+    expect(wrapper.findAll("span")[2].text()).toBe("Hello");
+  });
 
-    it("Test that timestamp changes message", async () => {
-        expect(wrapper.findAll("span")[1].text()).toBe("Just now");
+  it("Test that timestamp changes message", async () => {
+    expect(wrapper.findAll("span")[1].text()).toBe("Just now");
 
-        // update wrapper with a new instance and add 30 min to timestamp
-        const updatedProps = props;
-        let times = [
-            {value: 30 * 60 * 1000, expected: "30 minutes ago"},
-            {value: 60 * 60 * 1000, expected: "1 hours ago"},
-            {value: 24 * 60 * 60 * 1000, expected: "1 days ago"},
-            {value: 30 * 24 * 60 * 60 * 1000, expected: "1 months ago"},
-            {value: 365 * 24 * 60 * 60 * 1000, expected: "1 years ago"} 
-        ];
-        for (let i = 0; i < times.length; i++) { 
-            updatedProps.conversation.lastMessage.timestamp = Date.now() - times[i].value;
-            const newWrapper = shallowMount(ChatProfile, {
-                propsData: updatedProps
-            });
-            expect(newWrapper.exists()).toBeTruthy();
-            expect(newWrapper.findAll("span")[1].text()).toBe(times[i].expected);
-        }
-    });
+    // update wrapper with a new instance and add 30 min to timestamp
+    const updatedProps = props;
+    let times = [
+      { value: 30 * 60 * 1000, expected: "30 minutes ago" },
+      { value: 60 * 60 * 1000, expected: "1 hours ago" },
+      { value: 24 * 60 * 60 * 1000, expected: "1 days ago" },
+      { value: 30 * 24 * 60 * 60 * 1000, expected: "1 months ago" },
+      { value: 365 * 24 * 60 * 60 * 1000, expected: "1 years ago" },
+    ];
+    for (let i = 0; i < times.length; i++) {
+      updatedProps.conversation.lastMessage.timestamp =
+        Date.now() - times[i].value;
+      const newWrapper = shallowMount(ChatProfile, {
+        propsData: updatedProps,
+      });
+      expect(newWrapper.exists()).toBeTruthy();
+      expect(newWrapper.findAll("span")[1].text()).toBe(times[i].expected);
+    }
+  });
 });

tests/unit/component-tests/ChatComponentsTest/RentalMessage.spec.js

@@ -2,149 +2,154 @@ import { shallowMount } from "@vue/test-utils";
 import RentalMessage from "@/components/ChatComponents/RentalMessage.vue";
 import axios from "axios";
 
-jest.mock('@/utils/token-utils', () => {
-    return {
-        tokenHeader: () => {
-            return {}
-        }
-    }
+jest.mock("@/utils/token-utils", () => {
+  return {
+    tokenHeader: () => {
+      return {};
+    },
+  };
 });
 
 jest.mock("axios");
 
 describe("RentalMessage.vue", () => {
-    let wrapper;
-    beforeEach(() => {
-        wrapper = shallowMount(RentalMessage, {
-            propsData: {
-                rent: {
-                    rentId: 0,
-                    fromTime: new Date(1652733228545), // 16 May 2022
-                    toTime: new Date(1652833228545), // 18 May 2022
-                    isAccepted: false,
-                    listingId: 1,
-                    listing: {
-                        listingID: 1,
-                        title: "Test",
-                        description: "Test",
-                        pricePerDay: 100
-                    },
-                    renterId: 1,
-                    message: "Hello",
-                    deleted: false
-                }
-            }
-        });
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallowMount(RentalMessage, {
+      propsData: {
+        rent: {
+          rentId: 0,
+          fromTime: new Date(1652733228545), // 16 May 2022
+          toTime: new Date(1652833228545), // 18 May 2022
+          isAccepted: false,
+          listingId: 1,
+          listing: {
+            listingID: 1,
+            title: "Test",
+            description: "Test",
+            pricePerDay: 100,
+          },
+          renterId: 1,
+          message: "Hello",
+          deleted: false,
+        },
+      },
     });
-
-    it("Is instansiated", () => {
-        expect(wrapper.exists()).toBeTruthy();
-    });
-
-    it("Check that dates render correct", () => {
-        const text = wrapper.find(".text").findAll("p");
-        expect(text[0].text()).toBe("Dato: " + new Date(1652733228545).toLocaleDateString() + " - " + new Date(1652833228545).toLocaleDateString());
-    });
-
-    it("Check that buttons render", () => {
-        expect(wrapper.find(".buttons").exists()).toBeTruthy();
-        expect(wrapper.find(".buttons").findAll("button").length).toBe(2);
-    });
-
-    it("Check that the price is rendered correct", () => {
-        const text = wrapper.find(".text").findAll("p");
-        expect(text[1].text()).toBe("Pris: " + 100 * 2 + "kr");
-    })
-
-    it("Check that message is rendered", () => {
-        expect(wrapper.find(".more").find("p").text()).toBe("Hello");
-    })
-
-    it("Check accepted button click", async () => {
-        const button = wrapper.find(".buttons").findAll("button")[0];
-        axios.put.mockResolvedValueOnce();
-        button.trigger("click");
-        //Wait a tick
-        await wrapper.vm.$nextTick();
-        expect(axios.put).toHaveBeenCalledTimes(1);
-    })
-
-    it("Check reject button click", async () => {
-        const button = wrapper.find(".buttons").findAll("button")[1];
-        axios.delete.mockResolvedValueOnce();
-        button.trigger("click");
-        //Wait a tick
-        await wrapper.vm.$nextTick();
-        expect(axios.delete).toHaveBeenCalledTimes(1);
-    })
+  });
+
+  it("Is instansiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+
+  it("Check that dates render correct", () => {
+    const text = wrapper.find(".text").findAll("p");
+    expect(text[0].text()).toBe(
+      "Dato: " +
+        new Date(1652733228545).toLocaleDateString() +
+        " - " +
+        new Date(1652833228545).toLocaleDateString()
+    );
+  });
+
+  it("Check that buttons render", () => {
+    expect(wrapper.find(".buttons").exists()).toBeTruthy();
+    expect(wrapper.find(".buttons").findAll("button").length).toBe(2);
+  });
+
+  it("Check that the price is rendered correct", () => {
+    const text = wrapper.find(".text").findAll("p");
+    expect(text[1].text()).toBe("Pris: " + 100 * 2 + "kr");
+  });
+
+  it("Check that message is rendered", () => {
+    expect(wrapper.find(".more").find("p").text()).toBe("Hello");
+  });
+
+  it("Check accepted button click", async () => {
+    const button = wrapper.find(".buttons").findAll("button")[0];
+    axios.put.mockResolvedValueOnce();
+    button.trigger("click");
+    //Wait a tick
+    await wrapper.vm.$nextTick();
+    expect(axios.put).toHaveBeenCalledTimes(1);
+  });
+
+  it("Check reject button click", async () => {
+    const button = wrapper.find(".buttons").findAll("button")[1];
+    axios.delete.mockResolvedValueOnce();
+    button.trigger("click");
+    //Wait a tick
+    await wrapper.vm.$nextTick();
+    expect(axios.delete).toHaveBeenCalledTimes(1);
+  });
 });
 
 describe("RentalMessage.vue - Accepted", () => {
-    let wrapper;
-    beforeEach(() => {
-        wrapper = shallowMount(RentalMessage, {
-            propsData: {
-                rent: {
-                    rentId: 0,
-                    fromTime: new Date(1652733228545), // 16 May 2022
-                    toTime: new Date(1652833228545), // 18 May 2022
-                    isAccepted: true,
-                    listingId: 1,
-                    listing: {
-                        listingID: 1,
-                        title: "Test",
-                        description: "Test",
-                        pricePerDay: 100
-                    },
-                    renterId: 1,
-                    message: "",
-                    deleted: false
-                }
-            }
-        });
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallowMount(RentalMessage, {
+      propsData: {
+        rent: {
+          rentId: 0,
+          fromTime: new Date(1652733228545), // 16 May 2022
+          toTime: new Date(1652833228545), // 18 May 2022
+          isAccepted: true,
+          listingId: 1,
+          listing: {
+            listingID: 1,
+            title: "Test",
+            description: "Test",
+            pricePerDay: 100,
+          },
+          renterId: 1,
+          message: "",
+          deleted: false,
+        },
+      },
     });
+  });
 
-    it("Check that buttons are not rendered", () => {
-        expect(wrapper.find(".buttons").exists()).toBeFalsy();
-    });
+  it("Check that buttons are not rendered", () => {
+    expect(wrapper.find(".buttons").exists()).toBeFalsy();
+  });
 
-    it("Check that text of last div in message is Godtatt", () => {
-        const divs = wrapper.find(".message").findAll("div");
-        expect(divs[divs.length - 1].text()).toBe("Godtatt");
-    });
-})
+  it("Check that text of last div in message is Godtatt", () => {
+    const divs = wrapper.find(".message").findAll("div");
+    expect(divs[divs.length - 1].text()).toBe("Godtatt");
+  });
+});
 
 describe("RentalMessage.vue - Declined", () => {
-    let wrapper;
-    beforeEach(() => {
-        wrapper = shallowMount(RentalMessage, {
-            propsData: {
-                rent: {
-                    rentId: 0,
-                    fromTime: new Date(1652733228545), // 16 May 2022
-                    toTime: new Date(1652833228545), // 18 May 2022
-                    isAccepted: false,
-                    listingId: 1,
-                    listing: {
-                        listingID: 1,
-                        title: "Test",
-                        description: "Test",
-                        pricePerDay: 100
-                    },
-                    renterId: 1,
-                    message: "",
-                    deleted: true
-                }
-            }
-        });
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallowMount(RentalMessage, {
+      propsData: {
+        rent: {
+          rentId: 0,
+          fromTime: new Date(1652733228545), // 16 May 2022
+          toTime: new Date(1652833228545), // 18 May 2022
+          isAccepted: false,
+          listingId: 1,
+          listing: {
+            listingID: 1,
+            title: "Test",
+            description: "Test",
+            pricePerDay: 100,
+          },
+          renterId: 1,
+          message: "",
+          deleted: true,
+        },
+      },
     });
+  });
 
-    it("Check that buttons are not rendered", () => {
-        expect(wrapper.find(".buttons").exists()).toBeFalsy();
-    });
+  it("Check that buttons are not rendered", () => {
+    expect(wrapper.find(".buttons").exists()).toBeFalsy();
+  });
 
-    it("Check that text of last div in message is Avslått", () => {
-        const divs = wrapper.find(".message").findAll("div");
-        expect(divs[divs.length - 1].text()).toBe("Avslått");
-    });
-})
\ No newline at end of file
+  it("Check that text of last div in message is Avslått", () => {
+    const divs = wrapper.find(".message").findAll("div");
+    expect(divs[divs.length - 1].text()).toBe("Avslått");
+  });
+});

tests/unit/component-tests/time-picker-components-tests/date-range-picker-tests/DateRangePicker.spec.js

@@ -2,93 +2,94 @@ import { shallowMount } from "@vue/test-utils";
 import DateRangePicker from "@/components/TimepickerComponents/DatepickerRange/DatepickerRange.vue";
 
 describe("DateRangePicker.vue", () => {
-    let wrapper;
-    beforeEach(() => {
-        wrapper = shallowMount(DateRangePicker, {
-            propsData: {
-                blockedDaysRange: [
-                    [new Date(1651739228545)],  // 5 May
-                    [
-                        new Date(1652733228545), // 16 May
-                        new Date(1652833228545) // 18 May
-                    ]]
-            }
-        });
+  let wrapper;
+  beforeEach(() => {
+    wrapper = shallowMount(DateRangePicker, {
+      propsData: {
+        blockedDaysRange: [
+          [new Date(1651739228545)], // 5 May
+          [
+            new Date(1652733228545), // 16 May
+            new Date(1652833228545), // 18 May
+          ],
+        ],
+      },
     });
-
-    it("Is instansiated", () => {
-        expect(wrapper.exists()).toBeTruthy();
-    });
-
-    it("Check that calendar is closed", () => {
-        expect(wrapper.find(".picker").attributes().style).toBe("display: none;");
-    })
-
-    it("Click input to open calender", async () => {
-        wrapper.find("input").trigger("click");
-        // wait a tick
-        await wrapper.vm.$nextTick();
-        expect(wrapper.find(".picker").attributes().style).toBe("display: flex;");
-    })
-
-    it("Select blocked date", async () => {
-        wrapper.vm.$emit('selectDate', new Date(1651739228545));
-        await wrapper.vm.$nextTick();
-        // Check if startDate is set
-        expect(wrapper.vm.startDate).not.toBe(new Date(1651739228545));
-    })
-
-    it("Select valid date", async () => {
-        await wrapper.vm.selectDate(new Date(1661739228545));
-        // wait a tick
-        await wrapper.vm.$nextTick();
-        expect(wrapper.vm.startDate.getTime()).toBe(1661739228545);
-    })
-
-    it("Select valid range", async () => {
-        await wrapper.vm.selectDate(new Date(1661739228545));
-        await wrapper.vm.selectDate(new Date(1661939228545));
-
-        // wait a tick
-        await wrapper.vm.$nextTick();
-        expect(wrapper.vm.startDate.getTime()).toBe(1661739228545);
-        expect(wrapper.vm.endDate.getTime()).toBe(1661939228545);
-
-        // Click on the complete button to close the calendar
-        wrapper.find(".buttons").findAll("button")[1].trigger("click");
-        await wrapper.vm.$nextTick();
-        expect(wrapper.find(".picker").attributes().style).toBe("display: none;");
-    })
-
-    it("Select invalid range", async () => {
-        // Check that error is not present.
-        expect(wrapper.find(".error").exists()).not.toBeTruthy();
-
-        const start = 1652433228545;
-        const end = 1652933228545;
-
-        await wrapper.vm.selectDate(new Date(start));
-        await wrapper.vm.selectDate(new Date(end));
-        // Ceck that present is invalid
-        expect(wrapper.find(".error").exists()).toBeTruthy();
-    })
-
-    it("Check reset button", async () => {
-        // Check that error is not present.
-        expect(wrapper.find(".error").exists()).not.toBeTruthy();
-
-        const start = 1652433228545;
-        const end = 1652933228545;
-
-        await wrapper.vm.selectDate(new Date(start));
-        await wrapper.vm.selectDate(new Date(end));
-        // Ceck that present is invalid
-        expect(wrapper.find(".error").exists()).toBeTruthy();
-
-        wrapper.find(".buttons").findAll("button")[0].trigger("click");
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.vm.startDate.getTime()).not.toBe(1652433228545);
-        expect(wrapper.vm.endDate).toBe(null);
-    })
-})
+  });
+
+  it("Is instansiated", () => {
+    expect(wrapper.exists()).toBeTruthy();
+  });
+
+  it("Check that calendar is closed", () => {
+    expect(wrapper.find(".picker").attributes().style).toBe("display: none;");
+  });
+
+  it("Click input to open calender", async () => {
+    wrapper.find("input").trigger("click");
+    // wait a tick
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find(".picker").attributes().style).toBe("display: flex;");
+  });
+
+  it("Select blocked date", async () => {
+    wrapper.vm.$emit("selectDate", new Date(1651739228545));
+    await wrapper.vm.$nextTick();
+    // Check if startDate is set
+    expect(wrapper.vm.startDate).not.toBe(new Date(1651739228545));
+  });
+
+  it("Select valid date", async () => {
+    await wrapper.vm.selectDate(new Date(1661739228545));
+    // wait a tick
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.startDate.getTime()).toBe(1661739228545);
+  });
+
+  it("Select valid range", async () => {
+    await wrapper.vm.selectDate(new Date(1661739228545));
+    await wrapper.vm.selectDate(new Date(1661939228545));
+
+    // wait a tick
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.startDate.getTime()).toBe(1661739228545);
+    expect(wrapper.vm.endDate.getTime()).toBe(1661939228545);
+
+    // Click on the complete button to close the calendar
+    wrapper.find(".buttons").findAll("button")[1].trigger("click");
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find(".picker").attributes().style).toBe("display: none;");
+  });
+
+  it("Select invalid range", async () => {
+    // Check that error is not present.
+    expect(wrapper.find(".error").exists()).not.toBeTruthy();
+
+    const start = 1652433228545;
+    const end = 1652933228545;
+
+    await wrapper.vm.selectDate(new Date(start));
+    await wrapper.vm.selectDate(new Date(end));
+    // Ceck that present is invalid
+    expect(wrapper.find(".error").exists()).toBeTruthy();
+  });
+
+  it("Check reset button", async () => {
+    // Check that error is not present.
+    expect(wrapper.find(".error").exists()).not.toBeTruthy();
+
+    const start = 1652433228545;
+    const end = 1652933228545;
+
+    await wrapper.vm.selectDate(new Date(start));
+    await wrapper.vm.selectDate(new Date(end));
+    // Ceck that present is invalid
+    expect(wrapper.find(".error").exists()).toBeTruthy();
+
+    wrapper.find(".buttons").findAll("button")[0].trigger("click");
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.startDate.getTime()).not.toBe(1652433228545);
+    expect(wrapper.vm.endDate).toBe(null);
+  });
+});

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/UserAuthComponents/LoginForm.vue";
 
-jest.mock('@/utils/apiutil', () => {
-    return {
-        doLogin: () => {
-            return new Promise((resolve) => {
-                resolve({
-                    isLoggedIn: false
-                });
-            })
-        }
-    }
+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();
-    });
+  let wrapper;
+  const mockRouter = {
+    push: jest.fn(),
+  };
+  const mockStore = {
+    commit: jest.fn(),
+  };
 
-    it("Check that two input fields are rendered" , () => {
-        expect(wrapper.findAll("input").length).toBe(2);
+  beforeEach(() => {
+    wrapper = shallowMount(LoginForm, {
+      global: {
+        mocks: {
+          $router: mockRouter,
+          $store: mockStore,
+        },
+      },
     });
+  });
 
-    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("is instantiated", () => {
+    console.log(wrapper.html());
+    expect(wrapper.exists()).toBeTruthy();
+  });
 
-    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 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("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");
+  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();
+  });
 
-        // Click on the login button
-        const button = wrapper.find(".login");
-        button.trigger("click");
+  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");
 
-        // wait a tick
-        await wrapper.vm.$nextTick();
+    // Click on the login button
+    const button = wrapper.find(".login");
+    button.trigger("click");
 
-        // Check that the error message is not empty
-        expect(wrapper.vm.message).not.toBe("");
-    })
-});
\ No newline at end of file
+    // wait a tick
+    await wrapper.vm.$nextTick();
+
+    // Check that the error message is not empty
+    expect(wrapper.vm.message).not.toBe("");
+  });
+});

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

@@ -2,63 +2,62 @@ import { shallowMount } from "@vue/test-utils";
 import LoginForm from "@/components/UserAuthComponents/LoginForm.vue";
 
 jest.mock("@/services/user.service", () => {
-    return {
-        getAdminList: () => {
-            return new Promise((resolve) => {
-                resolve([]);
-            });
-        }
-    };
+  return {
+    getAdminList: () => {
+      return new Promise((resolve) => {
+        resolve([]);
+      });
+    },
+  };
 });
-jest.mock('@/utils/apiutil', () => {
-    return {
-        doLogin: () => {
-            return new Promise((resolve) => {
-                resolve({
-                    isLoggedIn: true
-                });
-            })
-        }
-    }
+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()
-    }
+  let wrapper;
+  const mockRouter = {
+    push: jest.fn(),
+  };
+  const mockStore = {
+    commit: jest.fn(),
+  };
 
-    beforeEach(() => {
-        wrapper = shallowMount(LoginForm, {
-            global: {
-                mocks: {
-                    $router: mockRouter,
-                    $store: mockStore
-                },
-            }
-        });
+  beforeEach(() => {
+    wrapper = shallowMount(LoginForm, {
+      global: {
+        mocks: {
+          $router: mockRouter,
+          $store: mockStore,
+        },
+      },
     });
+  });
 
-    it("Check valid login", async () => {
+  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");
 
-        // 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");
 
-        // Click on the login button
-        const button = wrapper.find(".login");
-        button.trigger("click");
-
-        // wait for two ticks
-        await wrapper.vm.$nextTick();
-        await wrapper.vm.$nextTick();
-        // Check that the error message is not empty
-        expect(mockRouter.push).toBeCalledTimes(1);
-    })
-})
\ No newline at end of file
+    // wait for two ticks
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+    // Check that the error message is not empty
+    expect(mockRouter.push).toBeCalledTimes(1);
+  });
+});