I am currently utilizing Vue with typescript and making an effort to perform a unit test on the input value for a login page. The issue lies in the fact that after setting the input value, it does not return as expected – instead, it comes back empty ("") and I am struggling to identify the cause.
Here is the code from Homepage.vue:
<form class="form" @submit.prevent="submit">
<input
id="userNameTextInput"
v-model="username"
placeholder="Name"
minlength="2"
/><br />
<input
id="passwordTextInput"
type="password"
v-model="password"
placeholder="Password"
minlength="8"
/><br />
<button
id="submitButton"
color="white"
background="darkslateblue"
type="submit"
@click="submit"
>
Submit
</button>
<div id="incorrectLoginBlock" v-show="toggleIncorrectLogin">
<p>Incorrect Membername or Password</p>
</div>
</form>
Also, here's the section of code from Homepage.spec.ts:
import HomePage from '@/components/HomePage.vue';
import {mount, VueWrapper} from '@vue/test-utils';
describe('Homepage.vue', () => {
let wrapper: VueWrapper<any>;
beforeEach(() => {
wrapper = mount(HomePage);
});
it('Checking for incorrect login message display', async () => {
const userTextValueInvalid = wrapper.find('#userNameTextInput');
userTextValueInvalid.setValue('wrongPass');
expect(userTextValueInvalid.element.textContent).toContain(
'incorrectName',
);
This is the error being encountered:
expect(received).toContain(expected) // indexOf
Expected substring: "incorrectName"
Received string: ""
const userTextValueInvalid = wrapper.find('#userNameTextInput');
userTextValueInvalid.setValue('wrongPass');
expect(userTextboxElementAccessDenied.element.textContent).toBe('incorrectName');