Closes request #38280 Avoid usage of vm.$nextTick whenever possible How to test: No functional change. Unit tests should pass. Why? Using await wrapper.vm.$nextTick() has become a bit of a reflex, but there are shorter ways to do the same thing. 1. When simulating a click, we should use await wrapper.trigger("click"); It waits for Vue to update the DOM in reaction to the click. 2. When setting some data on a component, we should use await wrapper.setData(); It waits for Vue to update the DOM. 3.When setting props, we should use await wrapper.setProps(); It also waits for Vue to update the DOM. 4. When dealing with promises and asynchronous code, we should use await (jest|vi).runOnlyPendingTimersAsync(); For each level of promise, we had to add another $nextTick(). It was not clear how many were needed. This correctly waits until all layers of promise have been settled. It also works for the Artifact modal autocompleter test where we awaited the same promise several times as a work-around. 5. When simulating a sub-component event, we should still use await wrapper.vm.$nextTick() There is no built-in method in @vue/test-utils to await. 6. When we want to assert some loading state is shown, we must still use await wrapper.vm.$nextTick() If we wait for the promise to be resolved, our test will never see the loading state. Change-Id: I308633c5b2a0c4b211a12ecca6f3fd31f3463f70

+731 −1152

Author

Joris MASSON (jmasson) 2024-06-03 18:11

Committer

Joris MASSON (jmasson) 2024-06-04 16:10

Hash 071a600620aaa3a1b0658ee93b7b247e323829cf

Parent 5842bffc597919c9cbf970ba7d3b605b0fc9fd01

Reference git #tuleap/stable/071a600620aaa3a1b0658ee93b7b247e323829cf