Vue Unit Testing #8 - Select component test

Summary

In this lesson, the process of testing the base select component is explored. The first scenario checks that placeholder text appears correctly when passed as a prop, using both the text and HTML methods for verification. Next, the lesson covers testing the options prop, ensuring that options are rendered as individual elements with the correct value and label properties. By using assertions like 'find' and 'exists,' the test validates each option's presence and text content. The session concludes with a discussion on how tests handle missing attributes, ensuring reliability in the rendered component. The lesson wraps up with all tests passing successfully.

Takeaways

• 😀 Placeholder text visibility can be tested by passing it as a prop to the component and checking the rendered text content.
• 😀 You can use either the `text` method or the `HTML` method to check the placeholder text in the rendered markup.
• 😀 The `shallow mount` function can be used to test placeholder text without rendering child components.
• 😀 To test the passing of options as props, an array of options can be declared and passed to the component.
• 😀 Each option in the options array should follow a structure with two keys: `Val` and `label`.
• 😀 The component should render option elements based on the array of options passed as props.
• 😀 Use the `find` method to look for specific option elements based on their `value` attribute.
• 😀 A loop can be used to check all the options passed in the array to ensure that each option is rendered correctly.
• 😀 You can check that the rendered option elements contain the correct text by comparing it to the label from the options array.
• 😀 If the `value` attribute or the text for an option element is missing, the test will fail, ensuring the element’s integrity.
• 😀 After removing the temporary modifier from the test, all tests pass, confirming the proper functionality of the component.

Q & A

What is the purpose of this lesson?

The purpose of the lesson is to demonstrate how to write tests for the base select component, particularly focusing on testing placeholder text and passing options as props.

How is placeholder text tested in this script?

The placeholder text is tested by passing it as a prop to the component and checking if the rendered component contains the placeholder text, either by using the 'text' or 'HTML' methods.

What testing methods are used for checking the rendered markup?

The testing methods used are 'text' and 'HTML'. The 'text' method checks for the presence of specific text in the rendered component, while the 'HTML' method checks the entire markup.

Why is the shallow mount function used in some tests?

The shallow mount function is used because it renders only the component itself without any child components, which is useful when testing isolated functionality like the placeholder text.

What is being tested in the second scenario of the script?

In the second scenario, the test checks that an array of options passed as a prop to the base select component is rendered as individual 'option' elements, with each element containing the correct value and label.

How are the options passed to the base select component in the test?

The options are passed to the base select component as an array of objects. Each object in the array contains two properties: 'Val' (value) and 'label' (the display text).

What is the purpose of the 'find' method in the test for options?

The 'find' method is used to search for specific 'option' elements within the rendered component's markup. It checks if each option element exists based on its 'value' attribute.

What happens if the 'value' attribute is removed from the 'option' elements in the component?

If the 'value' attribute is removed, the test will fail because the 'value' is used to look for specific option elements in the rendered markup.

How is the option text verified in the test?

The option text is verified by extracting the text content of the 'option' elements and checking if it matches the 'label' value from the options array. This is done using the 'text' method.

What does the script conclude after running all the tests?

The script concludes by removing the 'modifier only' and running all tests in the project. After ensuring all tests pass, the lesson moves on to the next topic.