useComponentMount

Description

The useComponentMount composable simplifies the process of mounting Vue components for testing purposes in a Vue 3 application. It leverages the Vue Test Utils mount method to mount a component with various options, including props, slots, additional components, and custom attributes. This composable provides an easy interface for rendering components within the test environment and allows for flexible configuration.

FEATURE GOALS

• Simplify the process of mounting Vue components with various options.
• Allow for dynamic configuration of props, slots, and additional components.
• Provide an option to specify custom attributes and the dataTestid for testing.
• Attach the component to a specific DOM element or the default body.

FEATURE EXPECTATIONS

• Mount Vue components with specific configuration options like props, slots, and additional components.
• Automatically handles dataTestid and $attrs if passed.
• Allows for the component to be mounted on a specified DOM element or the default document body.
• Makes it easy to test components with complex configurations by providing a customizable mounting function.

DEV STRATEGIES

1. Composables Logic

const wrapper = useComponentMount(MyComponent, {
  someProp: "value",
  anotherProp: 123
}, "my-test-id", {
  default: "<p>Slot content</p>"
});

// Access mounted component
console.log(wrapper.text());  // Outputs component content

// Check if a specific element is rendered
const element = wrapper.find('[data-testid="my-test-id"]');
console.log(element.exists());  // Should return true if the element is found

• The composable uses the Vue Test Utils mount function to render a component with custom props, slots, attributes, and more.
• It returns a wrapper object that can be used to interact with and test the mounted component.

2. COMPOSABLE STRUCTURE

useComponentMount(
  component: DefineComponent,
  props?: Record<string, any>,
  dataTestIdValue?: string,
  slots?: Record<string, string>,
  components?: object,
  attachTo?: HTMLElement | string,
  $attrs?: object
): Wrapper<any>;

3. DEFAULT BEHAVIOR |Option | Default | Description | |--------|--------------|--------------------------------------------------------------| | props | {} | Custom props to be passed to the component during mounting. | | dataTestidValue | undefined | If provided, sets the data-testid attribute on the component for easy querying. | | slots | {} | Custom slots to be passed to the component. | | components | {} | Additional components to be registered within the component. | | attachTo | document.body | Allows specifying where to mount the component in the DOM (default is the document body). | | $attrs | {} | Custom $attrs to be passed to the component, typically used for attributes not explicitly defined as props. |

4. ERROR RESPONSE STRUCTURE

• The composable does not have explicit error handling, but any issues in tracking will generally result in silent failures in the Bazaarvoice SDK's internal implementation.

FLOW SUMMARY

• The useComponentMount composable provides a flexible way to mount Vue components for testing purposes.
• It supports passing custom props, slots, components, and attributes, ensuring that the component is mounted in a way that mirrors real-world usage.
• It returns a wrapper object that allows for interacting with the component, querying its content, and performing assertions in tests.