Vue Unit Testing #28 - Nav item component test

Summary

This video tutorial walks through testing a 'nav item' component responsible for displaying menu items. The script demonstrates how to write tests using Vue.js, covering key aspects like verifying the rendering of proper labels and icons, checking the correctness of the href attribute, and ensuring expected behavior when props are passed to the component. Through various expectations, the tutorial shows how to test the text content, icon, and attribute values, ultimately validating the component's functionality. The tests pass successfully, with a final check on removing a label and running all tests cleanly.

Takeaways

• 😀 Test the `NavItem` component to ensure it renders menu items correctly, including the proper label, icon, and link attributes.
• 😀 Start testing by duplicating an existing test file to maintain structure and naming it `NaItem.test.ts`.
• 😀 The `NavItem` component requires a `nowItem` prop with `page` (label) and `icon` (icon name) fields to function correctly.
• 😀 The first step in testing involves shallow mounting the `NaItem` component to check its behavior in isolation.
• 😀 Ensure the rendered markup includes the correct values for the `page` and `icon` properties passed as props to avoid errors.
• 😀 Use the `findComponent` method to locate the `BaseIcon` component and verify the `name` prop matches the icon specified in the `nowItem` object.
• 😀 Check that the `href` attribute of the component correctly reflects the expected value, verifying link integrity.
• 😀 Verify that if any required prop is missing, such as `page`, an error is thrown indicating the issue.
• 😀 Test for the correct handling of props by comparing the rendered output to expected values to ensure everything works as intended.
• 😀 After completing the test cases, remove unnecessary modifiers and confirm that all tests pass successfully without errors.

Q & A

What is the main purpose of the nav item component in this script?

The nav item component is responsible for rendering menu items with proper labels and icons.

Why does the test throw an error initially when rendering the nav item component?

The error occurs because the component requires a prop called 'nowItem,' which hasn't been passed when rendering the component in the test.

What does the 'nowItem' object consist of?

The 'nowItem' object consists of two fields: 'page' and 'icon'. These are used to display the page name and the corresponding icon in the nav item component.

How is the 'nowItem' prop passed to the nav item component in the test?

The 'nowItem' object, which is taken from a 'timelineNowItem' constant, is passed as a prop to the nav item component during the test.

What is the first expectation being tested in the component?

The first expectation is that the text content of the nav item component should contain the page name, which comes from the 'page' property of the 'nowItem' object.

How does the test check if the correct icon is displayed for the nav item?

The test uses the 'findComponent' method to locate the 'baseIcon' component and checks if the 'name' prop of the icon corresponds to the icon specified in the 'nowItem' object.

What is the purpose of testing the 'href' attribute in the nav item component?

The test ensures that the 'href' attribute of the nav item element contains the expected value, verifying that the component's link functionality works as intended.

What happens if the 'href' attribute is modified incorrectly in the test?

If the 'href' attribute is modified incorrectly, the test will fail, indicating that the component's behavior is not as expected.

What happens when the label is removed from the nav item component during testing?

When the label is removed, the test will fail because the component is expected to render a label, and its absence breaks the expected behavior.

What is the final step in the testing process described in the script?

The final step is to remove the 'only' modifier from the test and ensure all tests pass before moving on to the next lesson.