Skip to content
Snippets Groups Projects
Commit 9b015ac0 authored by Sander August Heggland Schrader's avatar Sander August Heggland Schrader
Browse files

Merge branch 'frontend_login_testing' into 'main' 

Frontend login testing

See merge request !4
parents e313e8b4 c598bc60
No related branches found
No related tags found
1 merge request!4Frontend login testing
Pipeline #174689 passed
Stage: build
Stage: test
Stage: deploy
Hide whitespace changes
Inline Side-by-side
src/components/LoginForm.vue
+ 112
− 162
View file @ 9b015ac0
<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/router/index.js
+ 0
− 1
View file @ 9b015ac0
......@@ -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
......
src/utils/apiutil.js
+ 1
− 1
View file @ 9b015ac0
......@@ -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 @ e313e8b4
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 @ 9b015ac0
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