Vue Unit Testing #15 - Activity form component test

Summary

This video tutorial walks through writing unit tests for a form component. The first test focuses on ensuring that the page scrolls to the bottom after a form submission, using spies and synchronization to handle asynchronous DOM updates. The second test checks that the input field is automatically cleared after submission. By leveraging shallow mounting and triggering form submissions, the tests validate the expected behavior, ensuring that both the page scrolls and input clears correctly. The tutorial emphasizes using proper test practices like restoring mocks and managing asynchronous behavior in Vue tests.

Takeaways

• 😀 Use shallowMount to render components in Vue test cases for simpler testing without mounting the full DOM.
• 😀 Populate form input fields with random values using setValue to simulate user input in your tests.
• 😀 Trigger form submission with the trigger method to test how the component responds after the form is submitted.
• 😀 Spy on methods (like scrollTo) to ensure specific behaviors are executed during test execution.
• 😀 Ensure that asynchronous updates in Vue are handled properly by using 'await' to make tests wait for DOM changes.
• 😀 Use mock restores (restoreAllMocks) after tests to avoid side effects in subsequent tests.
• 😀 Verify that the page is scrolled to the bottom after a form submission by checking if scrollTo is called.
• 😀 Check if input fields are cleared after form submission by comparing the input value before and after submission.
• 😀 Tests should fail if the expected behavior (scrolling or clearing input) does not happen, ensuring the accuracy of tests.
• 😀 For more complex behaviors, break down the tests into individual assertions to focus on specific functionalities (e.g., scroll, input clear).
• 😀 Writing tests for Vue components helps ensure that both UI interactions and component methods are functioning correctly, including DOM updates and event handling.

Q & A

What is the purpose of the 'scrollTo' method in the component's form submission?

The 'scrollTo' method is responsible for scrolling the page to the bottom after a form is successfully submitted. This behavior is an essential part of the component's functionality.

Why did the test initially fail to detect the 'scrollTo' method being called?

The test failed because Vue updates the DOM asynchronously, while the test was running synchronously. As a result, the test finished before Vue had a chance to apply the DOM update and scroll the page.

How was the asynchronous issue with the test resolved?

The asynchronous issue was resolved by adding 'await' before the actions that trigger DOM updates. This ensured the test waited for Vue to finish updating the DOM before continuing.

What is the role of the 'jest.spyOn' method in the tests?

'jest.spyOn' is used to monitor and track method calls within the code. In this case, it is used to track the 'scrollTo' method to ensure it is called correctly after the form is submitted.

What is the importance of using 'restoreAllMocks' in the test?

'restoreAllMocks' is used to reset all mocks after the test has run. This is important to prevent any mock behavior from affecting other tests, ensuring that each test is independent and isolated.

Why was the test checking for the input field's value after form submission?

The test checks that the input field is cleared after the form submission to ensure that the component behaves as expected. This is part of verifying the form submission behavior.

What happens if the line responsible for clearing the input is commented out?

If the line responsible for clearing the input is commented out, the test will fail, as the input value will not be empty after form submission, indicating the behavior is not working correctly.

What is the purpose of using 'shallowMount' in these tests?

'shallowMount' is used to render the component in isolation, meaning that child components are not rendered. This allows the tests to focus solely on the component’s behavior and simplifies the testing process.

What is the expected argument for the 'scrollTo' method in the test?

The expected arguments for the 'scrollTo' method are '0' for the horizontal scroll position and 'document.body.scrollHeight' for the vertical scroll position, indicating that the page is scrolled to the bottom.

How does the test ensure that the 'scrollTo' method is called only once?

The test uses the 'toHaveBeenCalledTimes' assertion with the argument '1' to ensure that the 'scrollTo' method is called exactly once during the form submission process.