Vue Unit Testing #30 - Nav item component test

Summary

This video lesson focuses on writing tests for a 'Now Item' component in a timeline application. The tests ensure the component behaves as expected when interacting with the page, such as scrolling to the current timeline hour or navigating to the corresponding page upon clicking. The tutorial demonstrates how to set up spies for specific functions like `scrollToCurrentHour` and `navigate`, then walk through the creation of two test cases to verify these behaviors. It concludes with a refactor of the test code to improve maintainability, making the tests cleaner and reusable across scenarios.

Takeaways

• 😀 The script focuses on writing tests for a feature that involves clicking the 'timeline now' item to scroll the page to the current timeline hour.
• 😀 A new test scenario is created to verify that clicking the 'timeline now' item triggers scrolling to the current hour, only if the timeline page is open.
• 😀 The `handleClick` function in the 'now item' component is responsible for triggering the scroll action, specifically the `scrollToCurrentHour` function.
• 😀 The `currentPage` reactive variable must be set correctly in order to make the condition for calling `scrollToCurrentHour` true.
• 😀 To test this behavior, a spy is used to monitor the `scrollToCurrentHour` function and confirm it is called when expected.
• 😀 The test ensures that if no click occurs or if the wrong argument is passed to the `scrollToCurrentHour` function, the test will fail.
• 😀 Another test scenario is introduced to check if clicking a 'timeline now' item correctly navigates the page to the corresponding timeline page.
• 😀 To test navigation, a spy is created for the `navigate` function in the router module to track when the page is redirected.
• 😀 Before running the test for navigation, the initial state of the page is set to something other than the timeline page (e.g., activities page).
• 😀 The component is refactored to extract common logic into a reusable function called `shallowMountTimelineNowItem`, streamlining the test code.

Q & A

What is the main focus of the testing scenario described in the script?

The main focus of the testing scenario is to verify the behavior of the 'timeline now item' component, particularly ensuring that the page scrolls to the current timeline hour when the 'Now' item is clicked, and that the correct navigation happens when the component is interacted with.

How is the 'scroll to current hour' function being tested?

The 'scroll to current hour' function is tested by creating a spy on the function and checking if it gets called when the 'Now' item is clicked. The test checks that the function is called with the correct argument, which should be 'true', and verifies that the page scrolls to the current timeline hour.

What is the purpose of using the 'spy' in the test?

The purpose of using a 'spy' in the test is to track if the 'scroll to current hour' function is called when the 'Now' item is clicked. It helps ensure that the function is invoked with the correct arguments, allowing the test to confirm that the behavior works as expected.

How do you ensure that the test simulates a correct user interaction?

The test simulates a user interaction by triggering a click event on the 'Now' item element using the 'trigger' method. This simulates the action of a user clicking the element to scroll the page to the current timeline hour.

What happens if the 'Now' item is not clicked in the test?

If the 'Now' item is not clicked, the test will throw an error. This is because the test expects the 'scroll to current hour' function to be called upon clicking the 'Now' item, and failing to do so causes the test to fail.

What additional functionality is tested in the second part of the script?

The second part of the script tests the functionality of navigating to the correct page when a 'Now' item is clicked. It ensures that the 'navigate' function is called correctly, redirecting the user to the appropriate page based on the 'Now' item selected.

How is the 'navigate' function being tested?

The 'navigate' function is tested by creating a spy for it and checking if it is called with the correct argument when a 'Now' item is clicked. The test ensures that the 'navigate' function is invoked with the correct page name, which is fetched from the 'Now item' prop.

Why is the current page set to a different page before the 'navigate' function test?

The current page is set to a different page before testing the 'navigate' function to simulate the scenario where the user is on a page other than the timeline. This ensures that when the 'Now' item is clicked, the user is correctly navigated to the corresponding page.

What role does the 'shallow mount' function play in the refactoring section?

The 'shallow mount' function is introduced to simplify the testing code by extracting the mounting logic of the 'Now item' component into a reusable function. This refactor reduces code duplication and makes the tests more concise and easier to maintain.

What is the significance of restoring mocks at the end of the tests?

Restoring mocks at the end of the tests ensures that all mock functions, such as the 'scroll to current hour' and 'navigate' functions, are reset to their original state. This prevents any potential side effects from affecting other tests and helps maintain a clean testing environment.