vuejs click testing mouse event

Question

i have a template with the following

            <button type="button" id="alogin" class="btn btn-primary btn-raised btn-block btn-lg" @click="login()">Sign In</button>

the login function is quite long but composed of

login() {
    this.error = 'none';
    this.error_message = null;
    const self = this;
    authentication.login(config, self.id_number, self.password, (err, result) => {
      if (err) {

      } else {

          self.startSession();
        }

    });
  }

ive try testing clicking the login button like after setting

it('tries to login', () => {
  LoginComponent.id_number = '293io090';
  LoginComponent.password = 'password';

expect(LoginComponent.$el.querySelector('#alogin').click()).to.equal(true);

but end up getting undefined. ive used vuejs test utils to find('#alogin') but the result is still the same. getting stuck

Try remove `()` in `@click="login()"` – NF Lee Jul 27 '18 at 14:03 — NF Lee, Jul 27 '18 at 14:03

score 1 · Answer 1 · answered Jul 27 '18 at 23:40

If you are using mount or shallowMount from vue-test-utils so you should know that these functions return Wrapper for your component and find method returns wrapper as well. So you can invoke click handler like this:

LoginComponent.find('#alogin').trigger('click')

vuejs click testing mouse event

1 Answers1