assertVue*() methods support Vue 3 (#834)

Vue 3 no longer adds a __vue__ property to
DOM nodes to allow querying for props. Instead
the __vueParentComponent must be inspected.
Its 'ctx' property will return the:

* passed in component props
* data()
* computed props

When Dusk is looking up the Vue prop value
of a DOM node, it will first look for a Vue 2
__vue__ property, then fallback to
__vueParentComponent.ctx for Vue 3.

src/Concerns/MakesAssertions.php

@@ -876,7 +876,10 @@ public function vueAttribute($componentSelector, $key)
         $fullSelector = $this->resolver->format($componentSelector);
 
         return $this->driver->executeScript(
-            "return document.querySelector('".$fullSelector."').__vue__.".$key
+            "var el = document.querySelector('".$fullSelector."');".
+            "return typeof el.__vue__ === 'undefined' ".
+                '? JSON.parse(JSON.stringify(el.__vueParentComponent.ctx)).'.$key.
+                ': el.__vue__.'.$key
         );
     }
 

tests/MakesAssertionsTest.php

@@ -346,6 +346,24 @@ public function test_assert_selected()
         }
     }
 
+    public function test_assert_vue_contains_formats_vue_prop_query()
+    {
+        $driver = m::mock(stdClass::class);
+        $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'
+            )
+            ->once()
+            ->andReturn(['john']);
+
+        $browser = new Browser($driver);
+
+        $browser->assertVueContains('name', 'john', '@vue-component');
+    }
+
     public function test_assert_vue_contains()
     {
         $driver = m::mock(stdClass::class);