[6.x] assertVue*() methods support Vue 3 composition API #969
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
If Vue's composition API used, reactive data and computed props cannot
be inspected through these methods.
When fetching a component prop, attempt these paths:
1. el.__vue__.key
* Vue 2
2. el.__vueParentComponent.ctx.key
* Vue 3 options API
* Vue 3 composition API for definedProps()
3. el.__vueParentComponent.setupState.key
* Vue 3 composition API reactive(), computed(), or any other
<script setup> variables.
If the ctx key is undefined, the setupState fallback is attempted.
Wrap in a try/catch for attempts to access undefined nested props which
could throw an error.
Member
|
Thanks! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Methods
assertVue(),assertVueIsNot,assertVueContains, andassertVueDoesNotContaincan fail in apps using Vue 3's newer composition API.When fetching a component prop, attempt these paths:
el.__vue__.keyel.__vueParentComponent.ctx.keydefinedProps()el.__vueParentComponent.setupState.key[added in this PR]reactive(),computed(), or any other<script setup>variables.If the
ctxkey is undefined, thesetupStatefallback is attempted. Wrap in a try/catch for attempts to access undefined nested props likeel.__vueParentComponent.ctx.form.emailwith no definedel.__vueParentComponent.ctx.form.This also fixes #968 by removing JSON serialization of
el.__vueParentComponent.ctx. When I submitted PR #834, theJSON.parse(JSON.stringify(...))snippet was taken from a forum post I read about the Vue 3 equivalent of Vue 2'sel.__vue__. The JSON transformation evaluates Vue prop getters and strips functions for a simple cloned payload. e..g,This wouldn't be needed when fetching one component prop at runtime. It maybe cleaned up the output of
console.log(JSON.parse(JSON.stringify(el.__vueParentComponent.ctx)))if any developer editsvendor/laravel/dusk/src/Concerns/MakeAssertions.phpmethodvueAttribute()in debug dump desperation. Otherwise I don't see a reason to keep this in place. Removing this now won't affect passing test suite assertions of existing Laravel apps.