this.$nextTick() prevent 'errors with notification when a new moderator is required before leaving' test from src/components/LeftSidebar/ConversationsList/Conversation.spec.js to pass.

Added flush-promises for Jest to work with multiple promises. Dependency could be removed after migration to Vue 3 and @vue/test-utils v2.0.0 (also added TODO for this).

Thanks to @ShGKme for the suggestion

this.$nextTick() prevent 'errors with notification when a new moderator is required before leaving' test from src/components/LeftSidebar/ConversationsList/Conversation.spec.js to pass.

Added flush-promises for Jest to work with multiple promises. Dependency could be removed after migration to Vue 3 and @vue/test-utils v2.0.0 (also added TODO for this).

Thanks to @ShGKme for the suggestion

For the record.

What happens in the test:

1. Click on the "Leave conversation" button, which has some async handler
2. await trigger('click') (= await nextTick())
3. Check that the result of the handler is correct

const action = shallowMountAndGetAction('Leave conversation')

await action.find('button').trigger('click')

expect(actionHandler).toHaveBeenCalled()

What was not correct:

A promise of the async handler is not related to the nextTick's promise. Waiting for async in Vue reactivity doesn't guarantee some async method (handler) to be resolved.

What is correct:

Wait for the handler's promise to be resolved. It's not easy to do. But waiting for all promises to be resolved works fine, and that is a common practice. flushPromises does it.

Why it worked previously and failed after the update in this PR:

The async handler was kind of the only async process in the component. Waiting for the nextTick's promise was enough because its handler stayed later in the microtasks queue.

1. Mount component
2. Click on the button - the async handler is executed
3. Mocked executor in async hander finished immediately - add the promise's resolve handler to the microtasks queue (X)
4. await nextTick - add Vue scheduler's promise's resolve handler to the microtasks queue (Y)
5. Go to the microtasks queue. X is done
6. Go to the microtasks queue. Y is done
7. ✅ Check that X is done

Calling nextTick early on the component's creation breaks it.

1. Mount component
2. await nextTick - add Vue scheduler's promise's resolve handler to the microtasks queue (Y)
3. Click on the button - the handler is executed
4. Mocked executor in async hander finished immediately - add the promise's resolve handler to the microtasks queue (X)
5. Go to the microtasks queue. Y - done
6. ❌ Check that X is done
7. Go to the microtasks queue. X - done. Too late...

Adding waiting for literally any promise would work too.

await action.find('button').trigger('click')
await Promise.resolve() // Even this is enough to wait for the end of microtasks queue in this case

/backport to stable25