Test diffs/app.vue as a whole component instead of by mocking individual function internals

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Follow-up from: !29830 (comment 329133936)

Rough paraphrase:

what counts as the public API of a vue component? Three things: props, events, and render. These are the mechanisms a vue component uses to communicate outside of itself.

Consider this though: every mock made under the wrapper.vm is a mocking of private implementation detail, which, when it comes to unit testing, is usually the very thing we are attempting to test.

I would consider the "unit-to-be-tested" here the component, and the behaviour of the component, instead of individual watchers, methods, etc. on the component. Consider the components "internals" (watchers, computed, methods, etc.) as the private API of the component. Generally, I try not to test just the private API, but instead the effect the private API has.

A huge proportion (close to 100%, with the exception of a single mocked endpoint) of the diffs app.vue tests the internals (as defined above, methods, computeds, etc.) of the component (one example, others throughout the file) rather than its external (public) API.

We should explore moving the test mocks/spies to the "effect the private API has" rather than circumventing those effects from ever happening.