Vue Unit Testing #22 - Activity item component test

Summary

In this lesson, we walk through the process of writing tests for an Activity Item component. The component displays individual activity items on the activities page, and the tests ensure functionality such as the presence of a delete button. The tutorial covers rendering the component with appropriate props, writing expectations for button type and icon, and testing button functionality like triggering function calls on click. Detailed explanations are given for using spies to monitor function calls and verifying expected behavior. The test structure is divided into preparation, action, and expectation stages for clarity and effectiveness.

Takeaways

• 😀 Mount the component in the test environment by passing necessary props (e.g., the 'activity' prop) to simulate its behavior.
• 😀 Verify that the Activity Item component renders the delete button correctly with the right properties (e.g., 'danger' type and 'trash' icon).
• 😀 Use the 'find' method to locate components like the 'base-button' and 'base-icon' within the mounted component during tests.
• 😀 Modify button properties in tests (e.g., change the button type) to confirm that the test fails if the component is not correctly configured.
• 😀 Test button click functionality to ensure associated functions (like 'deleteActivity' and 'resetTimelineItemActivity') are called.
• 😀 Use spies to mock and track function calls, verifying that the correct functions are triggered when actions (like button clicks) occur.
• 😀 Expect that the 'deleteActivity' function is called once with the correct arguments when the delete button is clicked.
• 😀 After performing the click action, verify the number of times the spy functions are called to ensure that side effects are triggered correctly.
• 😀 Group test logic into clear stages: preparation (setting up props), action (performing actions like clicks), and expectations (checking function calls).
• 😀 Ensure proper cleanup of mocks and spies after each test to avoid interference with subsequent tests.
• 😀 Validate that the test passes when the expected behavior occurs and fails when the component's behavior deviates from what is expected.

Q & A

What is the purpose of the 'activity item' component?

The 'activity item' component is responsible for displaying individual activity items on the activities page.

What is the first testing scenario in the script about?

The first testing scenario focuses on checking if the activity item component contains a delete button, ensuring it has the proper type and icon.

Why does the test initially throw an error?

The test throws an error because the 'activity' object, which is a prop in the component, has not been passed during rendering, resulting in an attempt to read an undefined property.

What is the solution to the error encountered during testing?

The solution is to pass the 'activity' object as a prop to the component during the test using the Mount function, ensuring that the component is rendered with the necessary data.

How does the script ensure the correct button type is present in the component?

The script checks for the button's 'type' prop, ensuring that it is set to 'danger' to match the expected button type for the delete button.

What does the second expectation in the test verify?

The second expectation checks that the delete button contains the correct icon, represented by a 'base icon' component with the 'trash' icon name.

What happens when the delete button is clicked in the test?

When the delete button is clicked, the test verifies that the 'delete activity' and 'reset activity' functions are called, ensuring the activity is deleted and reset correctly.

What is the role of spies in this test?

Spies are used to monitor the execution of the 'delete activity' and 'reset activity' functions. They help verify that these functions are called when the delete button is clicked, without requiring the actual implementation to execute.

Why is the 'activity' object necessary in the test?

The 'activity' object is necessary because it is passed as a prop to the component and is used as an argument for the functions being tested ('delete activity' and 'reset activity').

What happens if the delete button is not clicked or the functions are not called?

If the delete button is not clicked or the functions are not called, the test will fail because the spy checks will not pass, indicating that the expected behavior did not occur.