From b111b4850a149087ec05d37ab47b3227533fa63b Mon Sep 17 00:00:00 2001
From: Derek <derekmd@hotmail.com>
Date: Thu, 24 Mar 2022 08:22:49 -0400
Subject: [PATCH] Add Vue 3 Options API & Composition API tests

Test Laravel Dusk assertVue() changes.
---
 composer.json                     |  8 +++++-
 composer.lock                     | 36 +++++++++++++++++---------
 resources/js/Pages/Auth/Login.vue |  7 +++++-
 resources/js/Pages/Welcome.vue    | 42 +++++++++++++++++++++++++------
 tests/Browser/HomepageTest.php    | 20 +++++++++++++++
 tests/Browser/LoginTest.php       | 23 +++++++++++++++++
 6 files changed, 115 insertions(+), 21 deletions(-)
 create mode 100644 tests/Browser/HomepageTest.php
 create mode 100644 tests/Browser/LoginTest.php

diff --git a/composer.json b/composer.json
index 92fbe25..0421410 100644
--- a/composer.json
+++ b/composer.json
@@ -16,13 +16,19 @@
     "require-dev": {
         "fakerphp/faker": "^1.9.1",
         "laravel/breeze": "^1.8",
-        "laravel/dusk": "^6.22",
+        "laravel/dusk": "dev-vue-3-composition-api as 6.22",
         "laravel/sail": "^1.0.1",
         "mockery/mockery": "^1.4.4",
         "nunomaduro/collision": "^6.1",
         "phpunit/phpunit": "^9.5.10",
         "spatie/laravel-ignition": "^1.0"
     },
+    "repositories": [
+        {
+            "type": "vcs",
+            "url": "https://github.com/derekmd/dusk"
+        }
+    ],
     "autoload": {
         "psr-4": {
             "App\\": "app/",
diff --git a/composer.lock b/composer.lock
index 891cbe5..74a4352 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "be12ad012dcc31b339acdbacb5db0604",
+    "content-hash": "9f136be77e54cd49a7c9bfa2219b0374",
     "packages": [
         {
             "name": "brick/math",
@@ -5589,16 +5589,16 @@
         },
         {
             "name": "laravel/dusk",
-            "version": "v6.22.1",
+            "version": "dev-vue-3-composition-api",
             "source": {
                 "type": "git",
-                "url": "https://github.com/laravel/dusk.git",
-                "reference": "bc9fd27ea167746ba0616a7661e6b5bd4a80c472"
+                "url": "https://github.com/derekmd/dusk.git",
+                "reference": "2e8e16480d0adc178b095efa5e24f53f43d41a91"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/dusk/zipball/bc9fd27ea167746ba0616a7661e6b5bd4a80c472",
-                "reference": "bc9fd27ea167746ba0616a7661e6b5bd4a80c472",
+                "url": "https://api.github.com/repos/derekmd/dusk/zipball/2e8e16480d0adc178b095efa5e24f53f43d41a91",
+                "reference": "2e8e16480d0adc178b095efa5e24f53f43d41a91",
                 "shasum": ""
             },
             "require": {
@@ -5638,7 +5638,11 @@
                     "Laravel\\Dusk\\": "src/"
                 }
             },
-            "notification-url": "https://packagist.org/downloads/",
+            "autoload-dev": {
+                "psr-4": {
+                    "Laravel\\Dusk\\Tests\\": "tests/"
+                }
+            },
             "license": [
                 "MIT"
             ],
@@ -5655,10 +5659,9 @@
                 "webdriver"
             ],
             "support": {
-                "issues": "https://github.com/laravel/dusk/issues",
-                "source": "https://github.com/laravel/dusk/tree/v6.22.1"
+                "source": "https://github.com/derekmd/dusk/tree/vue-3-composition-api"
             },
-            "time": "2022-02-12T17:43:36+00:00"
+            "time": "2022-03-24T04:41:21+00:00"
         },
         {
             "name": "laravel/sail",
@@ -8060,9 +8063,18 @@
             "time": "2021-07-28T10:34:58+00:00"
         }
     ],
-    "aliases": [],
+    "aliases": [
+        {
+            "package": "laravel/dusk",
+            "version": "dev-vue-3-composition-api",
+            "alias": "6.22",
+            "alias_normalized": "6.22.0.0"
+        }
+    ],
     "minimum-stability": "dev",
-    "stability-flags": [],
+    "stability-flags": {
+        "laravel/dusk": 20
+    },
     "prefer-stable": true,
     "prefer-lowest": false,
     "platform": {
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 76002b0..1a9aae7 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -6,8 +6,9 @@ import BreezeInput from '@/Components/Input.vue';
 import BreezeLabel from '@/Components/Label.vue';
 import BreezeValidationErrors from '@/Components/ValidationErrors.vue';
 import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
+import { computed } from 'vue'
 
-defineProps({
+const props = defineProps({
     canResetPassword: Boolean,
     status: String,
 });
@@ -23,9 +24,12 @@ const submit = () => {
         onFinish: () => form.reset('password'),
     });
 };
+
+const cantResetPassword = computed(() => ! props.canResetPassword);
 </script>
 
 <template>
+    <div dusk="login">
     <BreezeGuestLayout>
         <Head title="Log in" />
 
@@ -64,4 +68,5 @@ const submit = () => {
             </div>
         </form>
     </BreezeGuestLayout>
+    </div>
 </template>
diff --git a/resources/js/Pages/Welcome.vue b/resources/js/Pages/Welcome.vue
index 613c1e6..4638edf 100644
--- a/resources/js/Pages/Welcome.vue
+++ b/resources/js/Pages/Welcome.vue
@@ -1,15 +1,42 @@
-<script setup>
+<script>
+// Vue 3 Options API
 import { Head, Link } from '@inertiajs/inertia-vue3';
 
-defineProps({
-    canLogin: Boolean,
-    canRegister: Boolean,
-    laravelVersion: String,
-    phpVersion: String,
-})
+export default {
+    components: {
+        Head,
+        Link,
+    },
+
+    props: {
+        canLogin: Boolean,
+        canRegister: Boolean,
+        laravelVersion: String,
+        phpVersion: String,
+    },
+
+    computed: {
+        cantLogin() {
+            return ! this.canLogin;
+        }
+    }
+}
+
+// Vue 3 composition API
+//
+// <script setup>
+// import { Head, Link } from '@inertiajs/inertia-vue3';
+
+// defineProps({
+//     canLogin: Boolean,
+//     canRegister: Boolean,
+//     laravelVersion: String,
+//     phpVersion: String,
+// })
 </script>
 
 <template>
+    <div dusk="homepage">
     <Head title="Welcome" />
 
     <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
@@ -121,6 +148,7 @@ defineProps({
             </div>
         </div>
     </div>
+    </div>
 </template>
 
 <style scoped>
diff --git a/tests/Browser/HomepageTest.php b/tests/Browser/HomepageTest.php
new file mode 100644
index 0000000..c01cc50
--- /dev/null
+++ b/tests/Browser/HomepageTest.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace Tests\Browser;
+
+use Illuminate\Foundation\Testing\DatabaseMigrations;
+use Laravel\Dusk\Browser;
+use Tests\DuskTestCase;
+
+class HomepageTest extends DuskTestCase
+{
+    public function testGuest()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('/')
+                    ->assertSee('Laravel')
+                    ->assertVue('canLogin', true, '@homepage')
+                    ->assertVue('cantLogin', false, '@homepage');
+        });
+    }
+}
diff --git a/tests/Browser/LoginTest.php b/tests/Browser/LoginTest.php
new file mode 100644
index 0000000..770dfaa
--- /dev/null
+++ b/tests/Browser/LoginTest.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Tests\Browser;
+
+use Illuminate\Foundation\Testing\DatabaseMigrations;
+use Laravel\Dusk\Browser;
+use Tests\DuskTestCase;
+
+class LoginTest extends DuskTestCase
+{
+    public function testEmailTyping()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('/login')
+                    ->assertSee('Email')
+                    ->assertSee('Password')
+                    ->type('#email', 'foo@bar.com')
+                    ->assertVue('canResetPassword', true, '@login') // prop
+                    ->assertVue('cantResetPassword', false, '@login') // computed prop
+                    ->assertVue('form.email', 'foo@bar.com', '@login'); // reactive data
+        });
+    }
+}