Vue Unit Testing #20 - Logo component test

Summary

In this tutorial, the presenter demonstrates how to write unit tests for a logo component in a Vue.js application. The tests focus on ensuring the proper icon is rendered, the correct `href` attribute is set, and interactions such as clicking the logo trigger the appropriate actions. The presenter also covers the use of spies to track function calls and how to modify the `currentPage` to verify the logo’s behavior when on different pages. Overall, the video teaches essential techniques for writing effective unit tests for a reactive UI component using Jest and Vue Test Utils.

Takeaways

• 😀 The logo component in the application uses a base icon component, and the test ensures the correct icon is displayed.
• 😀 The first testing scenario checks if the correct `clock` icon is rendered by verifying the `name` prop passed to the `base icon` component.
• 😀 The shallow mount function is used to render the logo component without rendering its child components, simplifying the test process.
• 😀 A secondary method involves checking that the clock icon component from the Hero Icons library is rendered correctly by looking for the SVG markup.
• 😀 The second testing scenario ensures the `href` attribute in the logo component contains the correct value, verifying its functionality in different page contexts.
• 😀 The test for the `href` attribute fails when the value is changed (e.g., switching from `timeline page` to `progress page`).
• 😀 The third scenario ensures the logo scrolls the page to the current hour when clicked, but only if the current page is the timeline page.
• 😀 Spies are used to monitor the behavior of functions, like `scrollToCurrentHour`, to ensure they are called with the correct arguments upon a click event.
• 😀 The fourth test checks that clicking the logo navigates to the timeline page when the current page is not the timeline page.
• 😀 Mocked variables, such as `currentPage`, are used to simulate page navigation, and the test ensures the correct behavior based on the current page context.
• 😀 After the tests, it's important to restore any mocks used, ensuring that the test environment is cleaned up and does not affect subsequent tests.

Q & A

What is the purpose of using the shallowMount function in the test?

The shallowMount function is used to render the logo component while replacing all child components with stubs. This allows for testing the logo component independently without worrying about the behavior of its child components.

Why is the 'base icon' component checked in the test?

The 'base icon' component is checked to ensure that the correct icon (in this case, 'clock') is used for the logo. This is done by finding the base icon component and checking its 'name' prop.

How is the 'href' attribute tested in the logo component?

The 'href' attribute is tested by checking the value of the 'href' attribute in the logo component's rendered output. The test compares the actual value to the expected value (e.g., 'timeline page hash').

What happens when the test for the 'href' attribute fails?

If the 'href' attribute's value is incorrect (e.g., the wrong page name), the test will fail, ensuring that the logo's link points to the correct page in the application.

What is the role of the 'scrollToCurrentHour' function in the tests?

The 'scrollToCurrentHour' function is responsible for scrolling the page to the current timeline hour when the logo is clicked while on the timeline page. The test ensures that this function is called under the correct conditions.

Why is the 'currentPage' reactive variable manipulated in the tests?

The 'currentPage' reactive variable is manipulated to simulate different page states in the application. This allows testing the conditional logic based on the current page (e.g., ensuring the scroll function only runs on the timeline page).

What does the spy on the 'scrollToCurrentHour' function check for?

The spy on the 'scrollToCurrentHour' function checks whether the function is called when the logo is clicked on the timeline page and whether it is called with the correct argument (true).

What is tested in the scenario where the logo is clicked on a page other than the 'timeline page'?

In this scenario, the test checks whether the application navigates to the 'timeline page' when the logo is clicked while on a different page, ensuring that the correct page navigation logic is followed.

How does the test ensure that the 'navigate' function is called when on a different page?

The test simulates a click on the logo after setting the 'currentPage' to a page other than 'timeline'. It then checks if the 'navigate' function is called with the correct argument to navigate to the 'timeline page'.

Why is it important to restore mocks at the end of the test?

Restoring mocks at the end of the test ensures that any mock functions or spies set up during the test do not interfere with other tests, maintaining test isolation and preventing side effects.