Add Vue 3 Options API & Composition API tests

Test Laravel Dusk assertVue() changes.
derekmd · Mar 24, 2022 · b111b48 · b111b48
1 parent 673ebf9
commit b111b48
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 21 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
+        });
+    }
+}