Vue Unit Testing #12 - Activity form component test

Summary

This video tutorial demonstrates how to write a test for the `activity-form` component. The test first ensures that the submit button is initially disabled and only becomes enabled when the input field is populated. The tutorial covers potential issues, such as Vue's asynchronous DOM updates, and how to resolve them using async/await. It also introduces alternative methods for checking the disabled property and verifies that the button remains disabled if the input field is not filled. The tutorial is ideal for developers learning testing strategies in Vue.js components.

Takeaways

• 😀 The ActivityForm component is responsible for rendering a form to add a new activity, which includes an input field and a submit button.
• 😀 Initially, the submit button is disabled and will only be enabled once the input field is filled.
• 😀 The first test scenario is to ensure that the submit button is initially disabled when the component is rendered.
• 😀 The test uses the 'shallowMount' function to render the component, but it only renders the component itself, not its child elements.
• 😀 When testing the initial state of the submit button, we check that the 'disabled' attribute is present.
• 😀 The second test scenario checks if the submit button becomes enabled after a value is entered into the input field.
• 😀 To simulate entering a value, the input field is populated using the '.setValue()' method.
• 😀 After filling the input field, the test verifies that the 'disabled' attribute is removed from the submit button.
• 😀 The test fails when the input field is not filled, as expected, confirming the behavior is correctly tested.
• 😀 Vue's asynchronous DOM update mechanism is handled by marking the test as 'async' and using 'await' to wait for the updates to occur before asserting the changes.
• 😀 Switching from 'shallowMount' to 'mount' ensures that child components are rendered and allows proper testing of the submit button's state change.

Q & A

What is the purpose of the ActivityForm component?

The ActivityForm component is responsible for rendering a form to add new activities, which includes an input field and a submit button. The button is initially disabled and becomes enabled once something is typed in the input field.

Why is the submit button initially disabled in the ActivityForm component?

The submit button is initially disabled to prevent users from submitting an incomplete form. It becomes enabled once a valid input is provided in the input field.

What function is used to render the ActivityForm component in the test?

The test uses the `mount` function from Vue Test Utils to render the ActivityForm component. Initially, `shallowMount` was used, but it was replaced with `mount` to include all child components.

What issue arose with using shallowMount in the test?

Using `shallowMount` led to the submit button not being rendered because it does not render child components. This issue was fixed by switching to `mount`, which renders the full component along with its children.

How does Vue handle DOM updates, and how does this affect the test?

Vue updates the DOM asynchronously, meaning the DOM changes may not be reflected immediately after an action. This affects the test because Vue's update may not be complete before the test assertions are made, so the test had to be made asynchronous using `await` and `nextTick()` to ensure DOM updates are finished.

What method is used to simulate typing into the input field in the test?

The method `setValue()` is used to simulate typing into the input field. This method updates the value of the input element in the test.

Why is it necessary to use `await wrapper.vm.$nextTick()` in the test?

The `await wrapper.vm.$nextTick()` is used to wait for Vue to complete its DOM updates asynchronously before the test assertions are made, ensuring that the submit button's state reflects the changes made in the input field.

How is the submit button's disabled state checked in the test?

The disabled state of the submit button is checked using `submitButton.attributes('disabled')`. Initially, it checks for the presence of the `disabled` attribute, and after input is filled, it checks that the `disabled` attribute is no longer present.

What is the purpose of the `setValue()` method in Vue Test Utils?

The `setValue()` method is used to simulate user input in form fields. In this case, it is used to set a value in the input field, which triggers the reactivity in Vue and updates the DOM.

What would happen if the input field is not populated in the test?

If the input field is not populated, the test is designed to fail because the submit button should remain disabled. The test verifies that the button only becomes enabled when the input field contains a value.