2

Code sample as below:

vue/test-utils failed to trigger events on quasar q-input. I am trying to write a unit test using vue/test-utils and using quasar framework. What I am thinking to test is "a error message should display after touch input field". here quasar demos. Please guide if I am going in wrong direction.

<!-- registration.vue -->
<q-input
      outlined
      v-model="fullName"
      label="Full Name *"
      lazy-rules
      :rules="[val => !!val || 'Field is required']"
      data-cy="fullName">
</q-input>
// registration.spec.ts

import RegistrationForm from "./registration.vue"
import { Quasar } from "quasar"
import { mount } from "@vue/test-utils"

describe("test registration vue component", () => {
  test("should show error when focus on full name", async () => {
    const wrapper = mount(RegistrationForm, {
      global: {
        plugins: [Quasar],
      },
    })
    const fullName = wrapper.get("[aria-label='Full Name *']")
    fullName.trigger("focus")
    fullName.trigger("blur")
    wrapper.get("[role='alert']")
  })
})

Error

Error: Unable to get [role='alert']

Environment

"quasar": "^2.6.6"
"vue": "^3.2.31"
"vite": "^2.9.1"
"vitest": "^0.8.1"
"@quasar/vite-plugin": "^1.0.9"

2 Answers 2

2

Even though this thread is old, I hope my answer could help in some way. I stumbled over this question too with a similar problem by trying to get the validation message, when the input is empty. I couldn't get it working either with focus and blur or even not with using an empty value. I kept trying to get it finally working with the empty value.

@Ryan Grahams Solution helped me to get to a passed test, that I had to struggle with. After successfully reaching the validation message via the refs, it tried to achieve the same by accessing the validate() method of the QInput Component itself.

Instead using Quasar as a plugin I imported QInput and used findComponent(QInput). additionally accessing the QInput method validate() through the view model.

I refactored your code like how it could work.

// registration.spec.ts

import RegistrationForm from "./registration.vue"
import { QInput } from "quasar"
import { mount } from "@vue/test-utils"

describe("test registration vue component", async () => {
  test("should show error when focus on full name", async () => {
    const wrapper = mount(RegistrationForm, {
      global: {
        plugins: [QInput],
      },
    })

    const fullName = wrapper.findComponent(QInput)

    await fullName.setValue("")
    await fullName.vm.validate()

    wrapper.get("[role='alert']")
  })
})

Maybe this could be helpful, if not, pease correct me :)

Sign up to request clarification or add additional context in comments.

Comments

1

Try adding a ref to your input, then manually validate the ref like this..

fullname.setValue('your value here...')
 await wrapper.vm.$refs.yourInputRef.validate()
 it("Should show error when input is blank", async () => {
        const wrapper = factory({
            emailLabel: "Email",
        });

        const emailInput = wrapper.find("input[aria-label='Email']");
        await emailInput.setValue("")
        await wrapper.vm.$refs.emailAddressRef.validate()
        const alert = wrapper.find("div[role='alert']");

        expect(alert.text()).toEqual(invalidEmailError)
    });

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.