Vue Unit Testing #16 - Header and navigation component tests

Summary

This video walks through testing Vue.js components, focusing on the Header and Navigation components. For the Header, it demonstrates verifying the presence of child components like Logo and HeaderProgress using shallow mounts. The test checks whether these components are properly rendered and highlights how the test fails if any component is removed. The Navigation component test ensures all three 'now item' components are rendered and confirms that each item is passed the correct prop. The video showcases the importance of shallow mounting and component prop validation in unit testing.

Takeaways

• 😀 The script focuses on testing Vue.js components, particularly the `header` and `navigation` components.
• 😀 The `header` component includes two child components: `logo` and `header progress`, which need to be tested for their presence.
• 😀 The shallow mount function from Vue Test Utils is used for rendering components without fully rendering child components, making testing faster and more isolated.
• 😀 A test is written to check if both the `logo` and `header progress` components exist inside the `header` component.
• 😀 If any of the child components are removed from the `header`, the test fails, ensuring proper component structure.
• 😀 The script transitions to testing the `navigation` component, specifically ensuring that all `now items` are rendered correctly.
• 😀 The `now` component uses a loop (`v-for`) to render the `now items`, which are imported from a constants module.
• 😀 A test is created to verify that the `now` component correctly renders three `now item` components as seen in the browser.
• 😀 The test checks if each `now item` component receives the correct prop (the item data from the `now items` array).
• 😀 The test ensures that if the prop is missing or incorrect, the test will fail, indicating issues in the component behavior.

Q & A

What is the purpose of testing the header component in the script?

The purpose of testing the header component is to ensure that it correctly renders its child components, namely the logo and header progress components, and that these child components are present within the header.

Why is the `shallowMount` function used to render components in the tests?

The `shallowMount` function is used to render components because it only renders the component itself without its child components, replacing them with stubs. This isolates the component under test and focuses on its functionality, making the test more efficient and focused.

What does the `findComponent` method do in the header component test?

The `findComponent` method is used to search for a specific child component by its name within the rendered output of the parent component. It returns the component wrapper if found, allowing tests to check its presence.

How does the test ensure the header component contains the logo and header progress?

The test ensures the header component contains the logo and header progress by calling `findComponent` for both components and verifying that they exist using the `exists()` method. If either is missing, the test will fail.

What will happen if the header component is missing either the logo or header progress?

If the header component is missing either the logo or header progress, the test will fail, indicating that the component does not contain the expected child components.

Why is the `findAllComponents` method used in the navigation component test?

The `findAllComponents` method is used to find all instances of the `NavItem` component within the `Navigation` component. This method allows the test to check if all three `NavItem` components are rendered correctly.

How does the navigation component test check the correctness of the props passed to the `NavItem` components?

The test checks the correctness of the props passed to the `NavItem` components by iterating over all `NavItem` components, accessing their `vm` (Vue model) instance, and comparing the `navItem` prop to the corresponding entry from the `navItems` array.

What is the role of the `navItems` array in the navigation component test?

The `navItems` array provides the data for the navigation items that should be rendered by the `Navigation` component. The test uses this array to verify that the correct number of `NavItem` components are rendered and that each component receives the correct prop.

What happens if a `NavItem` component does not receive the correct `navItem` prop?

If a `NavItem` component does not receive the correct `navItem` prop, the test will fail, indicating that the `Navigation` component is not passing the correct data to its child components.

Why does the test for the navigation component use a `forEach` loop on the `NavItem` components?

The `forEach` loop is used to iterate over each `NavItem` component, allowing the test to check whether the correct `navItem` prop is passed to each individual `NavItem` component, ensuring that all navigation items are correctly rendered with their respective data.