From f7b60ad4eda1996b0430ee0414d9a668cd3e13cb Mon Sep 17 00:00:00 2001
From: Derek <derekmd@hotmail.com>
Date: Wed, 23 Mar 2022 23:46:40 -0400
Subject: [PATCH] assertVue*() methods support Vue 3 composition API

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.
---
 src/Concerns/MakesAssertions.php | 11 +++++++---
 tests/MakesAssertionsTest.php    | 37 ++++++++++++++++++++++----------
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/Concerns/MakesAssertions.php b/src/Concerns/MakesAssertions.php
index 9caf263a0..f868332fc 100644
--- a/src/Concerns/MakesAssertions.php
+++ b/src/Concerns/MakesAssertions.php
@@ -1102,9 +1102,14 @@ public function vueAttribute($componentSelector, $key)
 
         return $this->driver->executeScript(
             "var el = document.querySelector('".$fullSelector."');".
-            "return typeof el.__vue__ === 'undefined' ".
-                '? JSON.parse(JSON.stringify(el.__vueParentComponent.ctx)).'.$key.
-                ': el.__vue__.'.$key
+            "if (typeof el.__vue__ !== 'undefined')".
+            '    return el.__vue.'.$key.';'.
+            'try {'.
+            '    var attr = el.__vueParentComponent.ctx.'.$key.';'.
+            "    if (typeof attr !== 'undefined')".
+            '        return attr;'.
+            '} catch (e) {}'.
+            'return el.__vueParentComponent.setupState.'.$key.';'
         );
     }
 }
diff --git a/tests/MakesAssertionsTest.php b/tests/MakesAssertionsTest.php
index 41ce819b4..1e09adbb8 100644
--- a/tests/MakesAssertionsTest.php
+++ b/tests/MakesAssertionsTest.php
@@ -1018,10 +1018,15 @@ public function test_assert_vue()
         $driver = m::mock(stdClass::class);
         $driver->shouldReceive('executeScript')
             ->with(
-                'var el = document.querySelector(\'body foo\');'.
-                "return typeof el.__vue__ === 'undefined' ".
-                    '? JSON.parse(JSON.stringify(el.__vueParentComponent.ctx)).foo'.
-                    ': el.__vue__.foo'
+                "var el = document.querySelector('body foo');".
+                "if (typeof el.__vue__ !== 'undefined')".
+                '    return el.__vue.foo;'.
+                'try {'.
+                '    var attr = el.__vueParentComponent.ctx.foo;'.
+                "    if (typeof attr !== 'undefined')".
+                '        return attr;'.
+                '} catch (e) {}'.
+                'return el.__vueParentComponent.setupState.foo;'
             )
             ->twice()
             ->andReturn('foo');
@@ -1071,10 +1076,15 @@ public function test_assert_vue_is_not()
         $driver = m::mock(stdClass::class);
         $driver->shouldReceive('executeScript')
             ->with(
-                'var el = document.querySelector(\'body foo\');'.
-                "return typeof el.__vue__ === 'undefined' ".
-                    '? JSON.parse(JSON.stringify(el.__vueParentComponent.ctx)).foo'.
-                    ': el.__vue__.foo'
+                "var el = document.querySelector('body foo');".
+                "if (typeof el.__vue__ !== 'undefined')".
+                '    return el.__vue.foo;'.
+                'try {'.
+                '    var attr = el.__vueParentComponent.ctx.foo;'.
+                "    if (typeof attr !== 'undefined')".
+                '        return attr;'.
+                '} catch (e) {}'.
+                'return el.__vueParentComponent.setupState.foo;'
             )
             ->twice()
             ->andReturn('foo');
@@ -1125,9 +1135,14 @@ public function test_assert_vue_contains_formats_vue_prop_query()
         $driver->shouldReceive('executeScript')
             ->with(
                 'var el = document.querySelector(\'body [dusk="vue-component"]\');'.
-                "return typeof el.__vue__ === 'undefined' ".
-                    '? JSON.parse(JSON.stringify(el.__vueParentComponent.ctx)).name'.
-                    ': el.__vue__.name'
+                "if (typeof el.__vue__ !== 'undefined')".
+                '    return el.__vue.name;'.
+                'try {'.
+                '    var attr = el.__vueParentComponent.ctx.name;'.
+                "    if (typeof attr !== 'undefined')".
+                '        return attr;'.
+                '} catch (e) {}'.
+                'return el.__vueParentComponent.setupState.name;'
             )
             ->once()
             ->andReturn(['john']);