Vue Unit Testing #5 - Icon component test

Summary

This video script walks through testing the `BaseIcon` component of a Vue.js application. The `BaseIcon` component dynamically renders icons based on the `name` prop, with icons stored in an `icons` object. The script demonstrates how to write tests to ensure the component renders correctly with default classes and allows custom classes to be passed. The process includes using `mount` and `shallowMount` to isolate and verify component functionality, with a focus on checking class management and customization. The tests ensure that the component behaves as expected under different conditions, ensuring flexibility and proper styling.

Takeaways

• 😀 The base icon component dynamically renders icons based on a `name` prop using Vue's DynamicComponent.
• 😀 The `icons` object contains a mapping of icon names to their corresponding Vue components, allowing dynamic rendering.
• 😀 The `base icon` component uses `mount` and `shallowMount` methods for rendering during tests, with `shallowMount` isolating the component without rendering child components.
• 😀 The first test ensures the `base icon` component renders with the default `h8` class unless custom classes are provided.
• 😀 `shallowMount` is used in testing to avoid rendering child components, making tests more isolated and focused on the parent component.
• 😀 Custom classes can be supplied to the `base icon` component, and the test checks if the provided classes are applied correctly.
• 😀 The test for custom classes compares the applied class list using `join()` to convert the array into a string for comparison.
• 😀 Code repetition is minimized by extracting common logic into constants, enhancing readability and maintainability of tests.
• 😀 Tests should be run periodically to ensure that new tests don't break the application or introduce regressions.
• 😀 The script emphasizes testing Vue components in isolation to ensure that each component behaves as expected without interference from child components.

Q & A

What is the base button component responsible for?

The base button component is responsible for rendering all the icons used in the application.

What prop does the base icon component receive?

The base icon component receives a prop called 'name', which specifies which icon should be rendered.

How does the base icon component render the icon based on the 'name' prop?

The base icon component uses the Dynamic component to extract the relevant icon component from the icons object and renders it based on the 'name' prop.

What is the icons object in the context of this application?

The icons object is a collection of View components where each key represents an icon name, and the corresponding value is the component responsible for rendering that particular icon.

Where do the icon components in the icons object come from?

The icon components are imported from individual files in the 'icons' directory, and they are collected in the icons object for dynamic rendering.

What is the significance of the 'clock' icon name in the example?

The 'clock' icon name is used to demonstrate how the base icon component is rendered by specifying this name in the prop, which corresponds to a particular icon from the icons object.

What is the difference between using 'mount' and 'shallowMount' functions in the tests?

The 'mount' function renders the full component tree, including child components, while 'shallowMount' only renders the component being tested, replacing child components with stubs. 'shallowMount' is used to test components in isolation.

What is the purpose of the default 'h8' class in the base icon component?

The 'h8' class is the default class applied to the icon component unless custom classes are specified via the 'class' prop. The test checks that this default class is always present when no custom classes are provided.

How can you test if custom classes are applied to the base icon component?

To test custom classes, you supply a 'class' attribute with the desired classes, then use the 'classes' method in the test to ensure the custom classes are applied correctly by comparing them to the expected output.

Why is it important to run all tests in the project after writing new tests?

Running all tests ensures that new changes do not break existing functionality in the project. It provides an extra layer of confidence that the application continues to work as expected after adding new tests or features.