Vue Unit Testing #29 - Nav item component test

Summary

This video script outlines a testing process for the 'now item' component, focusing on its hover state functionality. The goal is to verify that the background color of the 'now item' changes correctly based on whether it corresponds to the current page or not. The script walks through setting up a reactive variable for the current page, testing both the true and false states of this variable, and ensuring asynchronous DOM updates are handled properly. It also includes troubleshooting for test failures and provides an organized approach for writing the test scenario, resulting in a thorough verification of the hover state behavior.

Takeaways

• 😀 The test aims to verify that the background color of the 'now item' component correctly changes to light gray when hovered over, and this behavior is dependent on whether the 'now item' corresponds to the current active page.
• 😀 The logic for determining the hover state is managed via Vue's computed properties and a ternary expression, which checks if the 'now item' matches the current active page.
• 😀 The test involves manipulating a reactive `currentPage` variable to simulate different pages and observe if the hover state is applied accordingly.
• 😀 A key challenge in the test was that Vue updates the DOM asynchronously, which led to test failures because the DOM wasn't updated in time for the test to run.
• 😀 To address the asynchronous update issue, the test is refactored to be asynchronous using `async/await` to ensure that Vue completes the DOM update before assertions are made.
• 😀 The background color of the 'now item' should be light gray when it corresponds to the active page, and a hover class should be applied when it corresponds to a different page.
• 😀 The hover state is represented by a specific class (`hover:BG-gray-100`), which is applied when the `currentPage` is not the same as the page linked to the 'now item'.
• 😀 The test checks for the presence or absence of this hover class, depending on the value of the `currentPage` variable, to confirm that the hover effect works as expected.
• 😀 To make the test more readable and maintainable, the hover class is stored in a constant, which is referenced wherever needed in the test code.
• 😀 The test is divided into clear stages: preparation (setting the `currentPage`), action (modifying the reactive variable), and expectations (asserting the hover class presence or absence).
• 😀 After refactoring, the tests pass successfully, with the hover class being correctly applied or not applied based on the `currentPage`, and the logic is thoroughly validated.

Q & A

What is the primary goal of the test in the script?

The primary goal of the test is to verify that the 'now item' component properly changes its background color based on whether it corresponds to the current page and if the hover effect is applied correctly when the item is not active.

How does the test determine if the background color should be light gray?

The background color is set to light gray when the 'now item' corresponds to the current page. If the item is not the active page, the hover effect is applied, which also changes the background to light gray when the user hovers over the item.

What role does the reactive variable `currentPage` play in the test?

The `currentPage` reactive variable determines which page is currently active. The test modifies the `currentPage` variable to simulate different states, verifying whether the appropriate CSS class (either for the active page or hover effect) is applied based on the state of the page.

What issue occurred during the test execution and how was it resolved?

The issue was that Vue updates the DOM asynchronously, causing the test to fail because the DOM had not yet reflected the change in the `currentPage` variable. This was resolved by making the test asynchronous and using `flushPromises` to wait until Vue fully updated the DOM.

Why is the `flushPromises` function used in the test?

The `flushPromises` function is used to wait for all pending promises to resolve, ensuring that the DOM updates are completed before the test checks the expected outcomes. This resolves issues caused by Vue's asynchronous DOM updates.

What is the purpose of the ternary expression inside the `nowItem` component?

The ternary expression inside the `nowItem` component checks whether the item corresponds to the current page. Based on this check, it applies either the active page background color or a class for the hover effect if the item is not the active page.

Why is the hover class checked in two different cases within the test?

The hover class is checked in two cases: first, when the `nowItem` is on the current page, the hover class should not be applied; second, when the `nowItem` is not on the current page, the hover class should be applied upon hover. The test ensures both scenarios are correctly handled.

What is the significance of refactoring the test code to group preparation, action, and expectations?

Refactoring the test code to group it into preparation, action, and expectation phases helps improve clarity and maintainability. It clearly separates the setup of the test, the action that triggers the change, and the expectations for the outcome, making the test easier to understand and manage.

Why is a constant for the hover class used in the refactored test code?

A constant for the hover class is used to avoid duplication and make the code more maintainable. This way, the class name can be reused throughout the test without repeating the string, reducing potential errors and improving readability.

How does the test ensure that the correct CSS class is applied after the `currentPage` is changed?

The test modifies the `currentPage` variable, waits for the DOM update using `flushPromises`, and then checks whether the correct CSS class (the hover class) is applied to the `a` element. The test verifies that the class appears when the page is not active and does not appear when the page is active.