From a7691f9303210222dde004c67f3309d3e0210eda Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 22 Apr 2022 09:36:21 +0200
Subject: [PATCH 1/2] Routing update

---
 src/router/index.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 60092e1..ab941a8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,7 +2,6 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
 import LoginView from "../views/LoginView.vue";
 
-
 const routes = [
   {
     path: "/endre", //Endre før push
@@ -19,10 +18,10 @@ const routes = [
       import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
   },
   {
-    path: "/login",
+    path: "/",
     name: "login",
     component: LoginView,
-  }
+  },
 ];
 
 const router = createRouter({
-- 
GitLab


From 037599b5493c98ae531f51388f3a2123c2b88f29 Mon Sep 17 00:00:00 2001
From: Titus Kristiansen <titusk@stud.ntnu.no>
Date: Fri, 22 Apr 2022 12:39:23 +0200
Subject: [PATCH 2/2] API login unit tests

---
 src/components/LoginForm.vue              | 274 +++++++++-------------
 src/utils/apiutil.js                      |   2 +-
 tests/unit/LoginFormComponentTest.spec.js |  16 --
 tests/unit/apiutil-login-mock.spec.js     |  37 +++
 4 files changed, 150 insertions(+), 179 deletions(-)
 delete mode 100644 tests/unit/LoginFormComponentTest.spec.js
 create mode 100644 tests/unit/apiutil-login-mock.spec.js

diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index 4f8b255..f2277ab 100644
--- a/src/components/LoginForm.vue
+++ b/src/components/LoginForm.vue
@@ -1,162 +1,112 @@
-<template>
-  <div>
-    <v-col
-        align="center"
-        justify="space-around"
-    >
-        <v-img
-            max-width="45%"
-            :src="require('../assets/logo3.svg')"
-            align="center"
-        ></v-img>
-      </v-col>
-
-    <v-form
-        ref="form"
-        v-model="valid"
-        lazy-validation
-    >
-      <v-col>
-        <v-text-field
-            v-model="user.email"
-            :rules="emailRules"
-            label="E-mail"
-            required
-        ></v-text-field>
-      </v-col>
-
-
-      <v-col
-        align="right"
-      >
-        <v-text-field
-            v-model="user.password"
-            :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
-            :rules="[rules.required, rules.min]"
-            :type="showPassword ? 'text' : 'password'"
-            name="input-10-1"
-            label="Password"
-            counter
-            @click:append="showPassword = !showPassword"
-        ></v-text-field>
-
-        <div class="text-decoration-underline mt-n4 mr-10">
-          Glemt passord
-        </div>
-      </v-col>
-
-
-
-      <v-col
-          align="center"
-          justify="space-around"
-      >
-        <v-btn
-            :disabled="!valid"
-            color="success"
-            class="mb-4 mt-4"
-            width="50%"
-            height="40px"
-            @click="loginClicked"
-        >
-          Logg inn
-        </v-btn>
-
-        <div>
-          <a
-              href="/"
-              class="text-decoration-none"
-          >Ny bruker</a>
-        </div>
-      </v-col>
-
-
-
-    </v-form>
-  </div>
-
-</template>
-
-<script>
-import useVuelidate from "@vuelidate/core";
-import { required, email, minLength, helpers } from "@vuelidate/validators";
-import { doLogin } from "@/utils/apiutil";
-import { mapState } from "vuex";
-
-export default {
-  name: "LoginForm.vue",
-
-  setup() {
-    return { v$: useVuelidate() };
-  },
-
-  validations() {
-    return {
-      user: {
-        email: {
-          required,
-          email: helpers.withMessage(`E-posten er ugyldig`, email),
-        },
-        password: {
-          required,
-          min: helpers.withMessage(
-            ({ $params }) => `Passordet må inneholde minst ${$params.min} tegn`,
-            minLength(8)
-          ),
-        },
-      },
-    };
-  },
-
-  computed: mapState({
-    token: (state) => state.user.token,
-  }),
-
-  data() {
-    return {
-      message: "",
-      user: {
-        email: "",
-        password: "",
-      },
-
-      showPassword: false,
-      valid : true,
-      emailRules: [
-        v => !!v || 'E-mail is required',
-        v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
-      ],
-      rules: {
-        required: value => !!value || 'Required.',
-        min: v => v.length >= 8 || 'Min 8 characters',
-      },
-    };
-  },
-
-  methods: {
-    async loginClicked() {
-      console.log(this.user.email + " " + this.user.password);
-      this.showError = true;
-      const loginRequest = {
-        email: this.user.email,
-        password: this.user.password,
-      };
-      const loginResponse = await doLogin(loginRequest);
-
-      if (loginResponse === "Failed login") {
-        this.message = "kunne ikke logge inn";
-        this.$store.commit('logout');
-        return;
-      }
-
-      this.$store.commit("saveToken", loginResponse);
-      console.log(loginResponse);
-    },
-
-
-    validate () {
-      this.$refs.form.validate()
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <v-col align="center" justify="space-around">
+      <v-img
+        max-width="45%"
+        :src="require('../assets/logo3.svg')"
+        align="center"
+      ></v-img>
+    </v-col>
+
+    <v-form ref="form" v-model="valid" lazy-validation>
+      <v-col>
+        <v-text-field
+          v-model="user.email"
+          :rules="emailRules"
+          label="E-mail"
+          required
+        ></v-text-field>
+      </v-col>
+
+      <v-col align="right">
+        <v-text-field
+          v-model="user.password"
+          :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+          :rules="[rules.required, rules.min]"
+          :type="showPassword ? 'text' : 'password'"
+          name="input-10-1"
+          label="Password"
+          counter
+          @click:append="showPassword = !showPassword"
+        ></v-text-field>
+
+        <div class="text-decoration-underline mt-n4 mr-10">Glemt passord</div>
+      </v-col>
+
+      <v-col align="center" justify="space-around">
+        <v-btn
+          :disabled="!valid"
+          color="success"
+          class="mb-4 mt-4"
+          width="50%"
+          height="40px"
+          @click="loginClicked"
+        >
+          Logg inn
+        </v-btn>
+
+        <div>
+          <a href="/" class="text-decoration-none">Ny bruker</a>
+        </div>
+      </v-col>
+    </v-form>
+      <label>{{ message }}</label>
+  </div>
+</template>
+
+<script>
+import { doLogin } from "@/utils/apiutil";
+import { mapState } from "vuex";
+
+export default {
+  name: "LoginForm.vue",
+
+  computed: mapState({
+    token: (state) => state.user.token,
+  }),
+
+  data() {
+    return {
+      message: "",
+      user: {
+        email: "",
+        password: "",
+      },
+
+      showPassword: false,
+      valid: true,
+      emailRules: [
+        (v) => !!v || "E-mail is required",
+        (v) => /.+@.+\..+/.test(v) || "E-mail must be valid",
+      ],
+      rules: {
+        required: (value) => !!value || "Required.",
+        min: (v) => v.length >= 8 || "Min 8 characters",
+      },
+    };
+  },
+
+  methods: {
+    async loginClicked() {
+      const loginRequest = {
+        email: this.user.email,
+        password: this.user.password,
+      };
+      const loginResponse = await doLogin(loginRequest);
+
+      if (loginResponse === "Failed login") {
+        this.message = "kunne ikke logge inn";
+        this.$store.commit("logout");
+        return;
+      }
+
+      this.$store.commit("saveToken", loginResponse);
+      console.log(loginResponse);
+    },
+
+    validate() {
+      this.$refs.form.validate();
+    },
+  },
+};
+</script>
diff --git a/src/utils/apiutil.js b/src/utils/apiutil.js
index 15809ca..773bd8d 100644
--- a/src/utils/apiutil.js
+++ b/src/utils/apiutil.js
@@ -2,7 +2,7 @@ import axios from "axios";
 
 export function doLogin(loginRequest) {
   return axios
-    .post(`http://localhost:8080/api/login/authentication`, loginRequest)
+    .post(`http://65.108.62.223:3000/api/login/authentication`, loginRequest)
     .then((response) => {
       return response.data;
     });
diff --git a/tests/unit/LoginFormComponentTest.spec.js b/tests/unit/LoginFormComponentTest.spec.js
deleted file mode 100644
index 1f892f5..0000000
--- a/tests/unit/LoginFormComponentTest.spec.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import LoginForm from "@/components/LoginForm";
-
-describe("Tests labels in LoginForm component", () => {
-    it("checks the E-post label", () => {
-        const wrapper = shallowMount(LoginForm);
-
-        expect(wrapper.find('#emailLabelId').text()).toMatch("E-post");
-    });
-
-    it("checks the password label", () => {
-        const wrapper = shallowMount(LoginForm);
-
-        expect(wrapper.find('#passwordLabelId').text()).toMatch("Passord");
-    });
-});
diff --git a/tests/unit/apiutil-login-mock.spec.js b/tests/unit/apiutil-login-mock.spec.js
new file mode 100644
index 0000000..4d0764e
--- /dev/null
+++ b/tests/unit/apiutil-login-mock.spec.js
@@ -0,0 +1,37 @@
+import { doLogin } from '@/utils/apiutil'
+import axios from 'axios';
+
+jest.mock('axios')
+
+describe('testing mocking of apiutil.js', () => {
+  it('check that login fails with wrong credentials - against mock', async () => {
+
+    // mock api response on POST call (once)
+    const expectedLoginResponse = {response: 'Login failed'};
+    axios.post.mockImplementation(() => Promise.resolve({data: expectedLoginResponse}));
+
+    // do the call
+    const loginRequest = {email: "wrong@email.com", password: "thisiswrong123"};
+    const loginResponse = await doLogin(loginRequest);
+
+    //  check response
+    //  note that even if wrong username and password are used, mock is configured to return Success
+    expect(loginResponse).toEqual(expectedLoginResponse);
+  });
+  it('check that login succeeds when correct credentials - against mock', async () => {
+
+    // mock api response on POST call (once)
+    const apiResponse = {response: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'};
+    const expectedLoginResponse = {response: 'Login failed'};
+    axios.post.mockImplementation(() => Promise.resolve({data: apiResponse}));
+
+    // do the call
+    const loginRequest = {email: "correct@email.com", password: "thisiscorrect123"};
+    const loginResponse = await doLogin(loginRequest);
+
+    //  check response
+    //  note that even if wrong username and password are used, mock is configured to return Success
+    expect(loginResponse).not.toEqual(expectedLoginResponse);
+  })})
+
+
-- 
GitLab