Vue Unit Testing #9 - Select component test

Summary

This tutorial walks through the process of testing a base select component to ensure it fires the correct events. It covers two primary scenarios: triggering a 'select' event when an option is chosen and firing the same event when a reset button is clicked. The video also explains how to use the emitted method to check fired events and ensures that the events are properly handled using shallow and full mounts in the testing environment. The final outcome ensures the select event is triggered as expected under different conditions, with all tests passing successfully.

Takeaways

• 😀 The BaseSelect component triggers a `select` event when an option is chosen, which can be listened to by the parent component.
• 😀 The test verifies that the `select` event is fired after the `change` event is triggered on the native `<select>` element.
• 😀 The `.trigger` method is used to simulate the `change` event, while `.emitted()` helps confirm the firing of the `select` event.
• 😀 If no events are fired, the `emitted` object should be empty, ensuring that no event was mistakenly triggered.
• 😀 The test ensures that only one `select` event is emitted after the `change` event, and it contains the correct payload.
• 😀 To prevent false positives, the test checks that the `select` event is not fired if the event handler is not present.
• 😀 The test setup initially uses `shallowMount`, but this causes issues with rendering child components, so `mount` is used instead.
• 😀 The `select` event can also be fired by clicking the reset button, as it triggers the same event handler as option selection.
• 😀 The component must be fully rendered using `mount` to ensure the reset button and its child elements are correctly rendered and interactable.
• 😀 Clean-up steps include removing unnecessary code (like print statements) and ensuring all tests pass before proceeding to the next lesson.

Q & A

What is the purpose of the `select` event in the context of the base select component?

The `select` event is fired when a user selects an option from the `select` element, allowing the parent component to listen for this event and react accordingly.

How does the event handling mechanism work for the `select` event in the base select component?

When the `change` event is triggered on the native `select` element, the `select` event handler fires another `select` event. This allows the parent component to listen for this second event.

What does the test scenario described in the script verify?

The test scenario verifies that the `select` event is fired when an option is selected from the `select` element. It checks the events fired and ensures they match the expected behavior.

How does the test ensure that the `select` event is triggered after selecting an option?

The test triggers the `change` event on the `select` element and then checks the emitted events by calling the `emitted()` method. It expects both the `change` event and the `select` event to be present in the emitted object.

Why is the first expectation regarding the `select` event unnecessary in the test scenario?

The first expectation is unnecessary because checking that the `select` property in the emitted object contains an array with one element already covers both cases: ensuring the event was fired and that it contains the correct payload.

What happens if the `select` event listener is accidentally removed in the component?

If the `select` event listener is removed from the component, the test will fail because the `select` event will not be fired as expected.

What is the purpose of switching from `shallowMount` to `mount` in the test scenario?

Switching from `shallowMount` to `mount` ensures that the full component, including child components, is rendered. This is necessary because shallow mounting doesn't render child components, which causes issues when trying to trigger events like `click` on the reset button.

What issue was encountered when using `shallowMount` in the test, and how was it resolved?

The issue encountered was that `shallowMount` didn't render child components, causing the reset button to be replaced with a `stop` element. This was resolved by switching to `mount`, which fully renders the component and all its children.

What does the emitted method do in the test scenario?

The `emitted()` method is used to check the events that were fired by the component. It returns an object where each key corresponds to an event name, and the value is an array of the payload data sent with the event.

How can we be sure that the `select` event will not fire if the listener is not present?

By removing the listener for the `select` event, the test will fail, confirming that the event was not fired in the absence of the listener.