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.