Vue Unit Testing #24 - Activity item component test

Summary

In this video, the process of testing the `base-select` component inside the `activity-item` component is demonstrated. The focus is on ensuring that the component correctly renders props like `placeholder`, `options`, and `selected`. The test includes verifying that the correct `options` are passed from a constants module, and that the `selected` property reflects the `seconds-to-complete` value from the activity object. The process highlights how to write tests to ensure these props behave as expected, while making sure that the test fails when any of the expected props are omitted, ensuring robustness in the component's behavior.

Takeaways

• 😀 The main focus of the script is to test the presence of the `base select` component inside the `activity item` component.
• 😀 The test begins by mounting the `activity item` component and checking the component's markup to ensure the `base select` component is present.
• 😀 The `findComponent` method is used to locate the `base select` component within the wrapper object for further inspection.
• 😀 The script checks that the `placeholder` prop is passed correctly to the `base select` component and validates its value through an expectation.
• 😀 The `options` prop for the `base select` component is tested to ensure it contains the expected `period select options` array imported from another module.
• 😀 The script validates the `selected` prop, which is based on the `seconds to complete` property from the `activity` object, ensuring the correct value is passed.
• 😀 A random value is assigned to `seconds to complete` during rendering to verify that the `selected` prop receives this value correctly.
• 😀 An expectation is set to compare the full props object, ensuring that the `selected` prop is correctly populated from the overwritten `seconds to complete` value.
• 😀 The script checks that if any required props (`placeholder`, `options`, `selected`) are missing, the test fails, indicating that all props are necessary for correct functionality.
• 😀 After all tests pass, the script concludes with a final run of all tests in the project to confirm that everything works as expected.

Q & A

What is the primary purpose of the testing scenario described in the transcript?

The primary purpose is to ensure that the `base select` component, which displays period select options, is always present within the `activity item` component and functions correctly by testing its properties like `placeholder`, `options`, and `selected`.

What testing framework or method is being used in the provided scenario?

The testing framework being used is likely Vue Test Utils, with methods such as `mount`, `findComponent`, and `props` to test the `activity item` and `base select` components.

How is the `base select` component found in the test?

The `base select` component is located using the `findComponent` method on the wrapper object, which searches for the component by its name.

Why is the `base select` component cast to `any` in the code?

The `base select` component is cast to `any` to quickly fix a TypeScript error, allowing the test to run without type restrictions.

What is the purpose of using the `toMatchObject` matcher in the test?

The `toMatchObject` matcher is used to verify that the `props` object passed to the `base select` component contains the expected properties and values, ensuring correct functionality.

How does the `options` property for the `base select` component get tested?

The `options` property is tested by importing the `period select options` array from another module and comparing it with the `options` prop passed to the component.

What is the role of the `selected` prop in the test?

The `selected` prop is tested by ensuring it contains the value of the `seconds to complete` property from the `activity` object. This value is passed as a prop when rendering the `activity item` component.

How is the `seconds to complete` property of the `activity` object used in the test?

The `seconds to complete` property is manually set in the test to overwrite the default value, allowing the test to check if the `selected` prop in the `base select` component matches this value.

What happens if any of the required props are removed from the `base select` component?

If any of the required props (`placeholder`, `options`, or `selected`) are removed from the `base select` component, the test will fail, indicating that the component isn't functioning as expected.

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

The final step is to remove any modifications made during the test (such as adding a new `selected` property) and rerun the test to ensure that it passes with the original setup.