Vue Unit Testing #14 - Activity form component test

Summary

This video tutorial walks through creating a test scenario for the activity form component, focusing on ensuring the submit button gets disabled after form submission. It covers challenges such as using `shallowMount` which prevents child components from rendering, requiring a switch to `mount`. The tutorial also addresses the need for asynchronous handling of Vue's DOM updates using `await`. After form submission, the test checks for the button's disabled state, and the process includes error handling to ensure the test behaves correctly under different conditions. The test successfully confirms that the button disables after submission, providing valuable insights into handling form interactions in Vue testing.

Takeaways

• 😀 The test scenario focuses on verifying the activity form's submit button behavior after submission.
• 😀 Initially, the form is populated with an arbitrary value in the input field to check the button's disabled state.
• 😀 The shallow mount function does not render child components, so the test fails when checking the button's disabled attribute.
• 😀 Switching from shallow mount to the Mount function allows rendering of child components, such as the base button.
• 😀 The DOM updates asynchronously in Vue, causing the test to fail if executed before the DOM update is complete.
• 😀 To handle asynchronous DOM updates, the test function is made synchronous by using `await`.
• 😀 The form submission is triggered using an `await` statement to ensure the DOM is updated properly after the submit event.
• 😀 After the form submission, the submit button's disabled attribute is expected to be re-enabled.
• 😀 Assertions are written using the `toHaveProperty` method, which checks for the disabled property on the button.
• 😀 Commenting out the form submission or altering the button's disabled attribute in the component will cause the test to fail.
• 😀 After making changes to the component, the test is verified to ensure all assertions pass successfully.

Q & A

Why is the shallow mount function not suitable for this test?

The shallow mount function does not render child components, meaning the button component, which is a child of the form, wouldn't be rendered. This prevents checking the button's disabled attribute, so the test fails when using shallow mount.

What change is made to the mount function to solve the issue with shallow mount?

The shallow mount function is replaced with the full `mount` function. This ensures that all child components, including the button, are rendered, allowing the test to check the button's attributes correctly.

Why do we need to use `await` when updating the DOM?

Vue updates the DOM asynchronously. Without `await`, the test may check the DOM before it is updated, leading to incorrect results. By using `await`, we ensure that the DOM is fully updated before performing assertions.

What is the purpose of emulating the form submission in the test?

Emulating the form submission is necessary to trigger the submit event, which should disable the submit button. The test needs to verify that after the form submission, the submit button correctly gets the `disabled` attribute.

How does the test ensure that the submit button is disabled after form submission?

After triggering the form submission event, the test waits for the DOM to update and then checks that the submit button has the `disabled` attribute, confirming that the button has been disabled after the submission.

What assertion method is preferred in this test to check the button's attributes?

The `.toHaveProperty` method is preferred for assertions. It is used to check whether the `disabled` property is present or not on the button's attributes before and after form submission.

How does the test handle asynchronous operations during form submission?

The test uses `await` to handle the asynchronous nature of the form submission. This ensures that the test waits for the form submission event to complete and for the DOM to be updated before making assertions.

What would cause the test to fail during execution?

The test would fail if the form submission is not triggered, if the `disabled` attribute is not correctly added to the button after submission, or if the button’s `disabled` property is removed in the component's implementation.

Why does the test pass when the form submission and DOM update are correctly handled?

The test passes when the form submission triggers the correct update of the DOM, and the button's `disabled` property is updated as expected, confirming that the button behaves properly during the form submission process.

What should be done after making changes in the component to ensure tests still pass?

After making changes in the component, such as removing the submit event handler or the `disabled` attribute from the button, the test should be rerun to ensure it still passes. If necessary, revert the changes and ensure the correct behavior is restored.