Below is the login form component that needs to be tested for various scenarios:
- Verify successful login with both username and password filled
- Check for input error when either username or password is left blank
- Ensure input error is thrown when only username is entered without a password
- Validate input error when only password is entered without a username
<template>
<main>
<div class="main-logo">
<img src="../../assets/login-img/main_logo.svg" alt="Main Logo" />
</div>
<div class="main-form">
<div class="main-from__title">
<p class="main-from__title-text">Login</p>
</div>
<form @submit.prevent="login" class="main-form__login">
<p class="main-form__login-status">{{ this.loginStatus }}</p>
<input
class="main-form__login-input main-form__login-input_name"
id="login"
v-model="loginForm.username"
required
placeholder="Username"
type="text"
/>
<input
class="main-form__login-input main-form__login-input_password"
id="password"
v-model="loginForm.password"
required
placeholder="Password"
type="password"
/>
<input class="main-form__login-submit" v-if="this.loginBtn" type="submit" @click="handleLogin" value="Login" />
<input class="main-form__login-submit main-form__login-session" v-if="this.showLogoutEverywhereBtn" type="button" @click="websocketAuth" value="Log out from other windows" />
</form>
</div>
</main>
</template>
<script>
import { mapState } from 'vuex'
import { socketUrl } from '../../config/url'
export default {
name: 'Login',
data() {
return {
loginForm: {
username: 'user1',
password: '123',
},
};
},
computed: {
...mapState({
loginBtn: state => state.user.loginBtn,
loginStatus: state => state.user.loginStatus,
showLogoutEverywhereBtn: state => state.user.showLogoutEverywhereBtn,
})
},
mounted: function () {
console.log('login showLogoutEverywhereBtn', this.showLogoutEverywhereBtn)
socketUrl.on('toLogin', () => {
this.$router.push('/login')
})
},
methods: {
handleLogin(e) {
e.preventDefault()
this.$store.dispatch('login', this.loginForm)
.then((response) => {
console.log('login page response: ', response)
if (response.id_user !== undefined) {
this.$router.push({ path: '/' })
}
})
.catch((e) => { // If error
console.log('inside error: ', e);
});
},
websocketAuth(e) {
e.preventDefault()
console.log('login: ', this.loginForm.username, this.loginForm.password)
this.$store.dispatch("logoutEverywhere", {
user_login: this.loginForm.username,
user_password: this.loginForm.password
})
.then((resp) => {
let data = { userId: resp, page: 'login' }
socketUrl.emit('logoutEverywhere', data, (flag) => {
if(flag) {
this.$store.dispatch('duplicateLoginClear')
}
console.log(flag)
})
console.log('1 ', resp)
})
}
},
};
</script>
The current test file contains the following scenarios:
import Vue from 'vue'
import { mount } from '@vue/test-utils'
import Login from '../views/login/index'
// Describe groups together related tests. For example, all tests related to login functionality.
describe('Testing 4 possible login scenarios!', () => {
test('Verify successful login with both username and password.', () => {
expect(true).toBe(true)
});
test('Check for login error when either username or password is left blank', () => {
expect(true).toBe(true)
});
test('Ensure input error is thrown when only username is entered without a password', () => {
expect(true).toBe(true)
});
test('Validate input error when only password is entered without a username', () => {
expect(true).toBe(true)
});
});