Testing user interactions in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to simulate a click event on the button.

Vue

<template>
  <button @click="increment">Click me</button>
  <p>Count: {{ count }}</p>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}

// Test
import { mount } from '@vue/test-utils'
const wrapper = mount({ template: '<button @click="increment">Click me</button>', methods: { increment() {} } })
await wrapper.find('button').trigger([1])
</script>

Drag options to blanks, or click blank then click option'

A'keydown'

B'submit'

C'hover'

D'click'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'submit' instead of 'click' for a button click event.

Using 'hover' which is not a valid trigger event in this context.

To simulate a user clicking a button, the event to trigger is 'click'.

2fill in blank

medium

Complete the code to check if the emitted event 'update' was triggered.

Vue

const wrapper = mount(MyComponent)
await wrapper.find('input').setValue('new value')
expect(wrapper.emitted()).toHaveProperty([1])

Drag options to blanks, or click blank then click option'

A'input'

B'update'

C'change'

D'submit'

Attempts:

3 left

💡 Hint

Common Mistakes

Checking for 'input' event which is native, not emitted by the component.

Using 'change' which is different from the emitted event.

The component emits an 'update' event when the input changes, so we check for 'update'.

3fill in blank

hard

Fix the error in the test code to wait for the DOM update after clicking.

Vue

import { nextTick } from 'vue'
await wrapper.find('button').trigger('click')
[1]
expect(wrapper.text()).toContain('Clicked')

Drag options to blanks, or click blank then click option'

Aawait wrapper.update()

Bawait setTimeout()

Cawait nextTick()

Dawait flushPromises()

Attempts:

3 left

💡 Hint

Common Mistakes

Using setTimeout which is not reliable for Vue DOM updates.

Using wrapper.update() which does not exist in Vue Test Utils.

Vue updates the DOM asynchronously, so we wait for nextTick() after triggering events.

4fill in blank

hard

Fill both blanks to test input value change and emitted event.

Vue

const input = wrapper.find('input')
await input.setValue([1])
expect(wrapper.emitted()[[2]][0]).toEqual(['hello'])

Drag options to blanks, or click blank then click option'

A'hello'

B'update:modelValue'

C'input'

D'change'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'input' event instead of 'update:modelValue' for emitted event.

Setting the wrong value in setValue.

We set the input value to 'hello' and check the 'update:modelValue' event emitted with that value.

5fill in blank

hard

Fill all three blanks to test a checkbox toggle and emitted event value.

Vue

const checkbox = wrapper.find('input[type="checkbox"]')
await checkbox.setChecked([1])
expect(wrapper.emitted()[[2]][0]).toEqual([[3]])

Drag options to blanks, or click blank then click option'

Atrue

B'update:checked'

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using string 'true' instead of boolean true in setChecked.

Checking wrong emitted event name.

We set the checkbox to true, then check the 'update:checked' event emitted with true.

Practice

1. What is the main purpose of using trigger in Vue Test Utils when testing user interactions?

easy

A. To simulate user events like clicks or typing on components

B. To mount the component before testing

C. To check the component's initial data state

D. To import Vue components into the test file

Solution

1. Step 1: Understand the role of trigger

   The trigger method simulates user events such as clicks or keyboard input on a mounted Vue component.

2. Step 2: Differentiate from other methods

   Mounting is done by mount, checking data is done by assertions, and importing components is unrelated to trigger.

3. Final Answer:

   To simulate user events like clicks or typing on components -> Option A

4. Quick Check:

   trigger simulates events = B [OK]

Hint: Remember: trigger = simulate user event [OK]

Common Mistakes:

• Confusing trigger with mount
• Thinking trigger checks data directly
• Assuming trigger imports components

2. Which of the following is the correct syntax to simulate a click event on a button with Vue Test Utils?

easy

A. wrapper.find('button').click()

B. wrapper.find('button').trigger('click')

C. wrapper.click('button')

D. wrapper.trigger('click')

Solution

1. Step 1: Identify the correct method to find and trigger

   First, find the button element using find('button'), then call trigger('click') on it.

2. Step 2: Check each option

   wrapper.find('button').click() uses click() which is not a Vue Test Utils method. wrapper.trigger('click') calls trigger on wrapper, not on the button. wrapper.click('button') uses a non-existent click method.

3. Final Answer:

   wrapper.find('button').trigger('click') -> Option B

4. Quick Check:

   Find element then trigger event = D [OK]

Hint: Find element first, then trigger event [OK]

Common Mistakes:

• Calling trigger on wrapper instead of element
• Using .click() instead of .trigger('click')
• Wrong method order or syntax

3. Given this Vue component test snippet:

const wrapper = mount({
  template: `Clicked {{ count }} times`,
  data() { return { count: 0 } }
})
await wrapper.find('button').trigger('click')
await wrapper.find('button').trigger('click')
console.log(wrapper.text())

What will be logged to the console?

medium

A. Clicked 0 times

B. Clicked 1 times

C. Clicked NaN times

D. Clicked 2 times

Solution

1. Step 1: Understand the component's data and event

   The button shows the count and increments it by 1 on each click.

2. Step 2: Count the number of clicks triggered

   Two clicks are triggered, so count increases from 0 to 2.

3. Final Answer:

   Clicked 2 times -> Option D

4. Quick Check:

   2 clicks increment count to 2 = C [OK]

Hint: Each trigger('click') adds 1 to count [OK]

Common Mistakes:

• Assuming count does not update
• Confusing async behavior
• Ignoring the number of triggers

4. In this test code:

const wrapper = mount({
  template: ``,
  data() { return { value: '' } },
  methods: {
    updateValue(event) { this.value = event.target.value }
  }
})
await wrapper.find('input').trigger('input', { target: { value: 'hello' } })
console.log(wrapper.vm.value)

What is the output and why?

medium

A. hello

B. empty string

C. undefined

D. Error: event object missing

Solution

1. Step 1: Understand how trigger passes event data

   The trigger method emits the event using the second argument as properties of the synthetic event object, so event.target.value is set to 'hello'.

2. Step 2: Check why value is updated

   The updateValue method reads event.target.value ('hello') and sets this.value = 'hello'.

3. Final Answer:

   hello -> Option A

4. Quick Check:

   trigger('input', {target:{value:'hello'}}) updates handler = B [OK]

Hint: trigger('input', {target:{value:'x'}}) feeds to @input handler [OK]

Common Mistakes:

• Triggering 'input' without payload
• Confusing with v-model inputs (use setValue)
• Confusing input event with change event

5. You want to test a Vue component with a text input that updates a message on typing. Which approach correctly simulates typing 'Vue' and verifies the message updates?

template: `
{{ message }}
`,
data() { return { text: '', message: '' } },
watch: { text(newVal) { this.message = `Typed: ${newVal}` } }

Which test code is correct?

hard

A. wrapper.find('input').element.value = 'Vue'
await wrapper.find('input').trigger('change')
expect(wrapper.text()).toContain('Typed: Vue')

B. await wrapper.find('input').trigger('input')
expect(wrapper.text()).toContain('Typed: Vue')

C. await wrapper.find('input').setValue('Vue')
expect(wrapper.text()).toContain('Typed: Vue')

D. wrapper.find('input').setAttribute('value', 'Vue')
await wrapper.find('input').trigger('input')
expect(wrapper.text()).toContain('Typed: Vue')

Solution

1. Step 1: Understand how to simulate typing in Vue Test Utils

   The setValue method sets the input value and triggers the input event properly, updating v-model and watchers.

2. Step 2: Evaluate each option's correctness

   A uses setValue correctly. B: await wrapper.find('input').trigger('input') expect(wrapper.text()).toContain('Typed: Vue') triggers input without event data so v-model unchanged. C manually sets value but triggers 'change' not updating v-model. D uses invalid setAttribute.

3. Final Answer:

   await wrapper.find('input').setValue('Vue') expect(wrapper.text()).toContain('Typed: Vue') -> Option C

4. Quick Check:

   Use setValue to simulate typing = A [OK]

Hint: Use setValue() to simulate typing and update v-model [OK]

Common Mistakes:

• Using trigger('input') without setValue()
• Manually changing element.value without events
• Using non-existent methods like setAttribute