Skip to content
Snippets Groups Projects
Commit 037599b5 authored by Titus Netland's avatar Titus Netland
Browse files

API login unit tests

parent c7bbcf12
No related branches found
No related tags found
1 merge request!4Frontend login testing
Pipeline #174651 passed
Stage: build
Stage: test
Stage: deploy
Hide whitespace changes
Inline Side-by-side
src/components/LoginForm.vue
+ 112
− 162
View file @ 037599b5
<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>
src/utils/apiutil.js
+ 1
− 1
View file @ 037599b5
......@@ -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;
});
......
tests/unit/LoginFormComponentTest.spec.js deleted 100644 → 0
+ 0
− 16
View file @ c7bbcf12
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");
});
});
tests/unit/apiutil-login-mock.spec.js 0 → 100644
+ 37
− 0
View file @ 037599b5
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);
})})
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment