Fix jest failure in Vue3
What does this MR do and why?
closes #3336 (closed)
Vue3 in using a _cache
as second param of a compiled render function to cache handlers on vdom, see example
template
<button type="button" id="btnIncrement" @click="increment">
Increment
</button>
compiled render function
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock("button", {
type: "button",
id: "btnIncrement",
onClick: _cache[1] || (
_cache[1] = ($event, ...args) => (_ctx.increment($event, ...args))
)
}, "Increment"))
}
thus, while we are calling upstream render function without passing _cache
param, errors will throw if there is a listener on the root element of the component.
This MR adds a empty _cache
object for every render function calling.
And in app/assets/javascripts/groups/components/group_folder.vue
the group-item
is not registered, there is some bug if we call upstream render function, so this MR rewrite the prop to make v-if
on group_folder
to be false
, which does not affect the test case.
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
Before | After |
---|---|
How to set up and validate locally
env VUE_VERSION=3 yarn run jest 'jh/spec/frontend/groups/components/group_item_spec.js'
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.