Skip to content

Fix Vue warnings about the Member component in component tests

Erwan Rouchet requested to merge fix-test-member-warn into master

Closes #1052 (closed). One step closer to actually getting working tests with Vue 3…

Vue was printing very unhelpful messages, so I had to coax it into showing actual errors. I couldn't find any magical setting to do it, so I used a terrible idea instead:

grep -lr '\[Vue warn\]' node_modules/@vue | while read name; do sed -i "s|\[Vue warn\]|\[$name\]|g" "$name"; done

This causes the dozen or so files that have logs for Vue warns to replace [Vue warn] with their filename. This will let me figure out which of the dozen files within node_modules are actually used within the tests.

This resulted in the following warnings:

[node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js]: Unhandled error during execution of render function 
  at <Member member= {
  id: 'member_id',
  level: 20,
  user: { id: 'user_id', email: 'james@test.me', display_name: 'James' },
  group: null
} ref="VTU_COMPONENT" > 
  at <VTUROOT>

I could then edit node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js to force the original error to be printed:

--- node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js.orig	2022-08-24 17:52:03.006411153 +0200
+++ node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js	2022-08-24 17:52:29.438228643 +0200
@@ -922,6 +922,7 @@ function renderComponentRoot(instance) {
     }
     catch (err) {
         blockStack.length = 0;
+        console.error('LOL', err);
         handleError(err, instance, 1 /* RENDER_FUNCTION */);
         result = createVNode(Comment);
     }

This got me to see the actual error:

LOL TypeError: Cannot read properties of null (reading 'email')
    at Proxy.isLoggedUser (/home/lucidiot/dev/ark/frontend/dist/webpack:/arkindex/src/components/Memberships/Member.vue:160:63)
    at ReactiveEffect.run (/home/lucidiot/dev/ark/frontend/dist/webpack:/arkindex/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:185:1)
    at ComputedRefImpl.get value [as value] (/home/lucidiot/dev/ark/frontend/dist/webpack:/arkindex/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:1144:1)
    at Object.get [as isLoggedUser] (/home/lucidiot/dev/ark/frontend/dist/webpack:/arkindex/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3428:1)
    at Proxy.render (/home/lucidiot/dev/ark/frontend/dist/webpack:/arkindex/src/components/Memberships/Member.vue:5:18)
    at renderComponentRoot (/home/lucidiot/dev/ark/frontend/dist/webpack:/arkindex/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:896:1)
    at ReactiveEffect.componentUpdateFn [as fn] (/home/lucidiot/dev/ark/frontend/dist/webpack:/arkindex/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5652:1)
    at ReactiveEffect.run (/home/lucidiot/dev/ark/frontend/dist/webpack:/arkindex/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:185:1)
    at instance.update (/home/lucidiot/dev/ark/frontend/dist/webpack:/arkindex/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5695:1)
    at callWithErrorHandling (/home/lucidiot/dev/ark/frontend/dist/webpack:/arkindex/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:155:1)
[node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js]: Unhandled error during execution of render function 
  at <Member member= {
  id: 'member_id',
  level: 20,
  user: { id: 'user_id', email: 'james@test.me', display_name: 'James' },
  group: null
} ref="VTU_COMPONENT" > 
  at <VTUROOT>
[node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <Member member= {
  id: 'member_id',
  level: 20,
  user: { id: 'user_id', email: 'james@test.me', display_name: 'James' },
  group: null
} ref="VTU_COMPONENT" > 
  at <VTUROOT>

This TypeError is caused by the Member component expecting a logged-in user, and not handling the case where there is none. This currently could not occur in the real frontend, because the Member component is always used within routes that are marked as requiresLogin and requiresVerified. However, the Vuex store is completely empty within unit tests, so there never is any logged-in user. Handling the issue on the component side rather than setting a logged-in user in each test is much easier.

Edited by Erwan Rouchet

Merge request reports

Loading