Frontend testing (Vue3)

When testing UI components, it is important to treat them as black boxes, the same way we would test classes in an API, testing only inputs and outputs, not the internal workings.

This means we do not test:

• html classes
• html ids
• methods

Things we can test:

• What the component emits as a result of user interactions/child component emits
• What the component displays, as a result of changing props, events emitted from children, and user interaction

How we can test:

• by using what is rendered to the screen using methods like getByText, getByPlaceholderText, getByLabelText, these are visible to the user and should still be found even if the classes and ids change
• by using user input, e.g. user.click(some element), user.type(some element, some characters)

Pain points:

• because we are treating the UI as a black box we cannot stub out components and emit events from them, this can result in testing a component multiple times if it is nested or used in multiple places.