I am attempting to monitor the value of the #username element when I change the data in form.username
// Regitser.vue
...
<div class="form-group">
<label for="username">Username</label>
<input type="text"
class="form-control"
id="username"
v-model="form.username" />
</div>
...
<script>
export default {
name: "RegisterPage",
data: function() {
return {
form: {
username: "",
emailAddress: "",
password: ""
}
};
}
};
</script>
This is a sample code snippet
// Test
describe("RegisterPage.vue", () => {
let wrapper;
let fieldUsername;
let fieldEmailAddress;
let fieldPassword;
let buttonSubmit;
beforeEach(() => {
wrapper = mount(RegisterPage);
fieldUsername = wrapper.find("#username");
fieldEmailAddress = wrapper.find("#emailAddress");
fieldPassword = wrapper.find("#password");
buttonSubmit = wrapper.find('form button[type="submit"]');
});
it("should have form inputs bound with data model", () => {
const username = "sunny";
const emailAddress = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8cbcdd6d6c1f8ccd9cbd3d9dfd1d4dd96dbd7d5">[email protected]</a>";
const password = "VueJsRocks!";
wrapper.vm.form.username = username;
wrapper.vm.form.emailAddress = emailAddress;
wrapper.vm.form.password = password;
expect(fieldUsername.element.value).toEqual(username);
expect(fieldEmailAddress.element.value).toEqual(emailAddress);
expect(fieldPassword.element.value).toEqual(password);
});
Upon running the test, it failed
// Test failed
RegisterPage.vue › should have form inputs bound with data model
expect(received).toEqual(expected) // deep equality
Expected: "sunny"
Received: ""
52 | console.log(wrapper.find("#username").element.value);
53 |
> 54 | expect(fieldUsername.element.value).toEqual(username);
| ^
55 | expect(fieldEmailAddress.element.value).toEqual(emailAddress);
56 | expect(fieldPassword.element.value).toEqual(password);
57 | });
at Object.<anonymous> (tests/unit/RegisterPage.spec.js:54:45)
I input 'sunny' in form.username but the element did not change. How can I resolve this issue?