Vue Unit Testing #27 - Activity item component test

Summary

This video focuses on writing test scenarios for the Activity Item Component, particularly verifying the behavior of the Remaining Activity Seconds Component. It demonstrates how the component should render when the 'seconds to complete' property is non-zero and not render when the value is zero. The process includes creating a new activity using a helper function, passing the activity object as a prop, and ensuring the correct rendering behavior based on the activity's 'seconds to complete' property. The test scenarios confirm that the component behaves as expected in both cases.

Takeaways

• 😀 The script is focused on testing the `ActivityItem` component, particularly its interaction with the `RemainingActivitySeconds` component.
• 😀 The `RemainingActivitySeconds` component is rendered only when the `secondsToComplete` property of an `activity` object is not equal to zero.
• 😀 The test begins by creating a new `activity` object using a helper function called `createActivity` and assigning a non-zero value to `secondsToComplete`.
• 😀 The first test scenario ensures that if `secondsToComplete` is not zero, the `RemainingActivitySeconds` component is rendered and receives the correct `activity` object as a prop.
• 😀 The test checks whether the `RemainingActivitySeconds` component receives the same `activity` object as passed into the `ActivityItem` component.
• 😀 If the `secondsToComplete` property is set to zero, the second test scenario ensures that the `RemainingActivitySeconds` component is not rendered.
• 😀 The method `exists` is used in the test to confirm whether the `RemainingActivitySeconds` component is rendered or not.
• 😀 The tests validate that when `secondsToComplete` is zero, the `RemainingActivitySeconds` component does not exist in the rendered output.
• 😀 The process also includes debugging techniques like printing the `activity` object to verify the passed props.
• 😀 The script concludes by verifying that all tests pass, indicating that the `ActivityItem` component behaves as expected under different conditions.

Q & A

What is the purpose of the test described in the script?

The test is designed to verify that the value selected in the 'select' element is properly displayed in the 'remaining activity seconds' component when the 'seconds to complete' property of an activity is non-zero.

When does the 'remaining activity seconds' component render?

The 'remaining activity seconds' component renders only when the 'seconds to complete' property of an activity is not equal to zero.

How does the test determine whether the 'remaining activity seconds' component is rendered?

The test creates a new activity using a helper function and assigns a value to the 'seconds to complete' property. If this value is non-zero, the component is rendered, and the test confirms it by checking if the component receives the correct props.

What is the purpose of using the 'create activity' helper function in the test?

The 'create activity' helper function is used to generate an activity object with a specific 'seconds to complete' value, which is crucial for testing the rendering of the 'remaining activity seconds' component.

What does the test verify regarding the 'activity' prop passed to the 'remaining activity seconds' component?

The test verifies that the 'activity' prop passed to the 'remaining activity seconds' component is the same as the 'activity' object initially used to render the 'activity item' component.

What happens if the 'seconds to complete' value is set to zero?

If the 'seconds to complete' value is set to zero, the 'remaining activity seconds' component will not be rendered, and the test confirms this by checking that the component does not exist in the rendered output.

How does the test ensure that the 'remaining activity seconds' component is not rendered when the 'seconds to complete' value is zero?

The test assigns a zero value to the 'seconds to complete' property and then checks that the 'remaining activity seconds' component does not exist by calling the 'exists' method, which should return false.

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

The 'exists' method is used to check if the 'remaining activity seconds' component is present in the rendered output. If it returns false, it confirms that the component is not rendered.

What should happen if the 'seconds to complete' value is non-zero?

If the 'seconds to complete' value is non-zero, the 'remaining activity seconds' component should be rendered, and the test will pass if this is the case.

What does the final step of the test do?

The final step of the test removes the modification where the 'seconds to complete' property was set to zero, runs all tests in the project, and ensures that all tests pass successfully.