Closed agualis closed 3 years ago
Oops. Some tests are failing with newMapConsumer.eachMapping is not a function
. First time I see this kind of error. I will wait to see if you have an explanation before starting investigating.
Hi, thanks for this!! π this is great, it was one of the missing pieces to make sure VTL can support Vue 3, and I'm not experienced enough when it comes to vue apollo to make it work.
I would prefer not to do it and use some VTU option to call global.provide but I didn't find that option
It does exist: https://vue-test-utils.vuejs.org/v2/api/#global-provide
It does exist: https://vue-test-utils.vuejs.org/v2/api/#global-provide
I actually tried that but it didn't work. Maybe you can help to understand why...
it was one of the missing pieces to make sure VTL can support Vue 3
Happy if I can help with something else π
It does exist: https://vue-test-utils.vuejs.org/v2/api/#global-provide
I actually tried that but it didn't work. Maybe you can help to understand why...
Sure! Can you share what failed? I'm also on the VTU team so I can run the issue internally if needed π
Sure! Can you share what failed? I'm also on the VTU team so I can run the issue internally if needed π
If, instead of using ComponentWithInjectedApollo
, you just render the Component
like this:
render(Component, {
props: {id: '1'},
global: {
provide: {
DefaultApolloClient: apolloClient,
}
}
})
the apollo client won't be injected and you'll get this error when running the test:
Apollo Client with id default not found
Sure! Can you share what failed? I'm also on the VTU team so I can run the issue internally if needed π
If, instead of using
ComponentWithInjectedApollo
, you just render theComponent
like this:render(Component, { props: {id: '1'}, global: { provide: { DefaultApolloClient: apolloClient, } } })
the apollo client won't be injected and you'll get this error when running the test:
Apollo Client with id default not found
You should have something like this π instead:
import { DefaultApolloClient } from '@vue/apollo-composable'
...
render(Component, {
props: {id: '1'},
global: {
provide: {
[DefaultApolloClient]: apolloClient,
}
}
})
NB: I can prepare another PR if needed.
@agualis @afontcu You should refer to this Vue 3 Project Template for proper testing infrastructure support using @testing-library/vue
. And you can clone the repo to start your own project π . Though, I will love your feedbacks.
You should have something like this π instead:
Oh. I missed that I needed square brackets because DefaultApolloClient
is a symbol
. Than you very much atanda!
Vue 3 Project Template
I looks good. Thanks for sharing.
Looks like we have some CI issues π€ I ran tests locally and got the following error:
Defined is not defined. To be or not to be π
Which node version are you using? yarn or npm?
I recall that I had to use a fixed apollo-composable
version because I was having the same error (and we're not alone):
https://github.com/vuejs/vue-apollo/issues/1085
I'll try to reproduce it in another machine. It's funny that we are also having a different error in GHA CI π (bug fragmentation π€£ ).
@agualis I will like you to invite me to the repository you are working on because I'm able to resolve the failing tests and I don't want to create a separate PR for this project or for your fork. see loom recording below:
https://www.loom.com/share/abf53aaedce448d89564afc22c1ebfcf
cc: @afontcu
I will like you to invite me to the repository you are working on
I'm not sure if I'm following you @heywhy I don't have another project, just the fork.
I will like you to invite me to the repository you are working on
I'm not sure if I'm following you @heywhy I don't have another project, just the fork.
I don't want to create another fork of this project instead I want to push the changes directly to your own fork because I made the fixes on your fork but I don't have access to your fork so I can't push the changes. I hope that's clear
Looks like this PR contains changes that are already there in next
. Can you make sure you check out from latest next
changes? π€
@afontcu I don't understand why the CI fails, can you help delete the cache for this PR workflow
Merging #192 (aabe84c) into next (49208ef) will not change coverage. The diff coverage is
n/a
.
@@ Coverage Diff @@
## next #192 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 1 1
Lines 91 91
Branches 30 30
=========================================
Hits 91 91
Continue to review full report at Codecov.
Legend - Click here to learn more
Ξ = absolute <relative> (impact)
,ΓΈ = not affected
,? = missing data
Powered by Codecov. Last update 49208ef...aabe84c. Read the comment docs.
@agualis can you explain what went wrong??
Finally ready to merge π . It seems that apollo+vue
ecosystem is very active right now and this affected our PR.
@heywhy I enabled CI in my fork and I discovered that version 3.2.2 of apollo client
was the one affecting our tests π I didn't investigate the root cause but updating to the last stable one (3.3.6) fixed the problem.
@afontcu will keep an eye on this topic because apollo related dependencies will be fixed soon and we will be able to get rid of the nasty postinstall patch
.
Thanks both for your patience and help π
Looks great :) Thank you for this!
:tada: This PR is included in version 6.3.2 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
Updates the existing
Graphql
example to make it compatible withVue 3
+@vue/apollo-composable
.The example needs a temporary patch until a pending PR is merged in
vue-apollo
project. That's why we have to use specific"@vue/apollo-composable": "4.0.0-alpha.10"
version for now.Implementation detail:
I had to create a wrapper component
ComponentWithInjectedApollo
to globally provide apollo client in the test. I would prefer not to do it and use some VTU option to callglobal.provide
but I didn't find that option π€· Maybe you know how to do it.Bonus: I could add an additional test to check what happens when the Graphql request returns an error (It would involve adding some kind of error handling to the
VueApollo.vue
component).