Vue Unit Testing #19 - Header progress component test

Summary

This video tutorial walks through a test scenario for a progress component in a UI. The process involves verifying that when all time is assigned or tracked, the component displays a 'Day Complete' label instead of showing progress. The presenter demonstrates how to mock the return values of the total progress function, ensuring the component displays the correct label and icon when the percentage reaches 100%. The tutorial also emphasizes testing practices such as restoring mocks and using hooks for proper setup and teardown, ensuring clean test execution.

Takeaways

• 😀 The component should display a 'day complete' label when no time is assigned to activities or when the tracked time exceeds the assigned time.
• 😀 A test scenario is created to ensure that the 'day complete' label is displayed when the progress reaches 100%.
• 😀 Before writing the test logic, the component is rendered to verify its current text content, which shows 'current progress'.
• 😀 The progress is initially mocked with a 66% value, but it needs to be updated to 100% to trigger the 'day complete' label.
• 😀 To simulate the completion state, the return value of the mocked `useTotalProgress` function is adjusted to return a 100% value.
• 😀 Once the mocked value is updated to 100%, the component is expected to show 'day complete' instead of 'current progress'.
• 😀 Two expectations are written: one to check the presence of the 'day complete' label and another to check that the proper icon appears next to it.
• 😀 The expected icon next to the 'day complete' label is a check-circle icon, which is verified by checking the `name` prop of the `base-icon` component.
• 😀 The test is purposefully made to fail by removing the icon, confirming that the test catches this change.
• 😀 Mocks are restored after each test execution using the `afterEach` hook to maintain test isolation and prevent interference between tests.

Q & A

What is the primary goal of the test described in the transcript?

The primary goal is to ensure that the progress component displays the 'day complete' label when no time is assigned or when the assigned time is exceeded, showing the completion state.

What was the issue with the current progress displayed before the test modification?

The component was showing 'current progress' because the mocked return value of the 'useTotalProgress' function was set to a percentage of 66%.

How was the issue with the progress label resolved in the test?

The issue was resolved by mocking the return value of the 'useTotalProgress' function to return a value corresponding to 100%, which triggered the 'day complete' label to be displayed.

What is the purpose of the 'percentage' computed property in the component?

The 'percentage' computed property is used to determine the progress of the task. When it is set to 100%, the 'day complete' label is shown.

What specific change was made to the mocked 'useTotalProgress' function during the test?

The mocked function was updated to return an object with a 'percentage' value of 100% and a corresponding 'color class' to match the expected final state of the component.

Why was the icon next to the 'day complete' label checked during the test?

The icon next to the 'day complete' label was checked to ensure that the correct icon (a check circle icon) was displayed alongside the label, confirming that the component behaves as expected.

How did the test confirm that the correct icon was displayed?

The test used the 'exists' method to check that the base icon component was present, and then compared its 'name' prop to ensure that the correct icon (check circle) was used.

What was the purpose of making the test fail at one point?

The purpose was to ensure that the test would fail when the icon was removed from the component, thus confirming that the icon was an essential part of the component's final rendering.

What improvement was made to the icon expectation in the test?

The expectation was improved by not only checking for the presence of the icon but also validating that the icon's 'name' prop matched the expected icon name ('checkCircle').

What testing practice was followed at the end of the test suite to ensure proper mock restoration?

The 'afterEach' hook was used to call 'restoreAllMocks' after each test execution, ensuring that mocks were properly reset between tests, promoting cleaner and more reliable tests.