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] 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