Vue Unit Testing #25 - Activity item component test

Summary

This video script outlines a detailed process for testing the functionality of a dropdown component that updates an 'activity' object when an element is selected. The test scenario verifies that the 'update activity' function is triggered correctly, ensuring the object properties, such as 'seconds to complete', are updated accordingly. The script covers how to spy on the function, mock values, and check if the correct arguments are passed. Additionally, it ensures that the updated values are displayed in the rendered component and addresses asynchronous behavior in Vue updates, providing a robust testing strategy for the dropdown interaction.

Takeaways

• 😀 The dropdown element updates the 'seconds to complete' field of an activity object when selected.
• 😀 The 'update activity' function is implemented in the activities.ts module and is used to modify properties of the activity object.
• 😀 The activity object passed into the 'activity item' component is updated through the 'update activity' listener function.
• 😀 The test scenario ensures that selecting an option from the dropdown triggers the 'update activity' function exactly once.
• 😀 A spy is used to monitor the 'update activity' function, confirming that it is called with the correct arguments.
• 😀 The 'activity' object is created in the test and passed as a prop into the component to ensure proper testing of the functionality.
• 😀 The test checks that the 'seconds to complete' property of the activity object is properly updated after selection from the dropdown.
• 😀 Expectations are written to verify that the 'update activity' function is called with the correct 'activity' object and updated properties.
• 😀 The test checks that the formatted representation of the 'seconds to complete' property is properly displayed in the rendered component.
• 😀 Asynchronous updates in Vue require the use of 'await' to ensure the DOM is properly updated before running expectations in the test.

Q & A

What is the purpose of the dropdown in the activity item component?

The dropdown is used to update a property of the 'activity' object, specifically the 'seconds to complete' field, whenever a selection is made.

How is the updateActivity function triggered in the test?

The updateActivity function is triggered by firing the 'select' event on the dropdown component, simulating a selection action.

What is the role of the 'spyOn' method in the test?

The 'spyOn' method is used to create a mock function for the 'updateActivity' function, allowing the test to check if it has been called correctly.

Why does the test check if 'updateActivity' is called exactly once?

The test verifies that the 'updateActivity' function is called once when an element is selected from the dropdown, ensuring the correct behavior of the update mechanism.

What kind of object is passed as the first argument to the 'updateActivity' function?

The first argument is an 'activity' object that is passed into the 'activityItem' component as a prop, which will be updated during the test.

What is the purpose of the 'overwrites' object in the test?

The 'overwrites' object is used to specify the properties that should be updated in the activity object, such as the 'seconds to complete' field.

Why is the test initially failing when checking for multiple calls to 'updateActivity'?

The test fails because it expects the 'updateActivity' function to be called twice, but the logic in the script ensures it is only called once, showing the test correctly identifies unexpected behavior.

How does the test handle the asynchronous nature of view updates?

The test uses the 'await' keyword to ensure the view updates asynchronously before checking the DOM for the updated 'seconds to complete' value.

What is the significance of the 'formatSeconds' helper function in the test?

The 'formatSeconds' helper function is used to convert the raw 'seconds to complete' value into a formatted string that can be displayed in the UI and checked during the test.

What change does the test expect to see in the component markup after selecting a new value from the dropdown?

The test expects the component markup to display the updated, formatted 'seconds to complete' value that corresponds to the newly selected value.