Event Bus + Rehydrate feature (#238)

Author: pascalbaljet

app/resources/views/form/emit.blade.php

@@ -0,0 +1,26 @@
+@extends('layout')
+
+@section('content')
+
+FormEmit
+
+<div class="space-y-4">
+    <p>Static: <span id="static" dusk="static">{{ now() }}</span></p>
+
+    <x-splade-rehydrate on="form-submitted">
+        <x-slot:placeholder> <p> Reloading... </p> </x-slot:placeholder>
+
+        <p>Dynamic: <span dusk="dynamic">{{ Str::random() }}</span></p>
+    </x-splade-rehydrate>
+
+    <x-splade-form action="/form/simple" @success="$splade.emit('form-submitted')" stay class="space-y-4">
+        <x-splade-input autocomplete="off" name="name" />
+        <x-splade-submit />
+    </x-splade-form>
+
+    <x-splade-script>
+        $splade.on('form-submitted', () => document.querySelector('#static').classList.add('bg-confetti'))
+    </x-splade-script>
+</div>
+
+@endsection

app/resources/views/script.blade.php

@@ -0,0 +1,13 @@
+@extends('layout')
+
+@section('content')
+
+ScriptComponent
+
+<div id="hey">Hey</div>
+
+<x-splade-script>
+    document.querySelector('div#hey').innerText = 'Hello World!';
+</x-splade-script>
+
+@endsection

app/routes/web.php

@@ -84,6 +84,7 @@
 
     Route::view('form/simple', 'form.simple')->name('form.simple');
     Route::post('form/simple', SimpleFormController::class)->name('form.simple.submit');
+    Route::view('form/emit', 'form.emit')->name('form.emit');
     Route::view('form/get', 'form.get')->name('form.get');
     Route::get('form/getData', SimpleFormController::class)->name('form.get.submit');
     Route::view('form/put', 'form.put')->name('form.put');
@@ -207,6 +208,8 @@
     Route::get('modal/validation', [ModalController::class, 'validation'])->name('modal.validation');
     Route::get('modal/size/{size}', [ModalController::class, 'size'])->name('modal.size');
 
+    Route::view('script', 'script')->name('script');
+
     Route::post('state', function () {
         Splade::share('info', 'This is invalid');
 

app/tests/Browser.php

@@ -8,6 +8,11 @@
 
 class Browser extends BaseBrowser
 {
+    public function getTextIn($selector): string
+    {
+        return $this->resolver->findOrFail($selector)->getText();
+    }
+
     public function assertLinkCanonical($href)
     {
         $driverHref = $this->driver->executeScript('return document.querySelector("link[rel=\"canonical\"]")?.getAttribute("href")');

app/tests/Browser/DataTest.php

@@ -50,6 +50,7 @@ public function it_can_remember_the_state_of_the_data()
         $this->browse(function (Browser $browser) {
             $browser->visit('/data/remember')
                 ->waitForText('DataRemember')
+                ->pause(250)
                 ->check('checkbox')
                 ->click('@binding')
                 ->waitForText('DataBinding')

app/tests/Browser/DialogTest.php

@@ -13,11 +13,14 @@ public function it_hides_the_dialog_on_navigation()
         $this->browse(function (Browser $browser) {
             $browser->visit('/navigation/one')
                 ->waitForText('NavigationOne')
+                ->pause(250)
                 ->click('@open-dialog')
+                ->pause(250)
                 ->click('@dialog-two')
                 ->waitForText('NavigationTwo')
                 ->assertMissing('@dialog-two')
                 ->back()
+                ->pause(250)
                 ->assertPresent('@dialog-two');
         });
     }

app/tests/Browser/EventBusTest.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace Tests\Browser;
+
+use Tests\Browser;
+use Tests\DuskTestCase;
+
+class EventBusTest extends DuskTestCase
+{
+    /** @test */
+    public function it_can_subscribe_to_an_event_with_a_custom_script()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('/form/emit')
+                ->waitForText('FormEmit');
+
+            $dynamicContent = $browser->getTextIn('@dynamic');
+
+            $browser->type('name', 'test')
+                ->press('Submit')
+                ->waitUntilMissingText($dynamicContent)
+                ->tap(fn (Browser $browser) => $this->assertStringContainsString('bg-confetti', $browser->element('#static')->getAttribute('class')));
+        });
+    }
+}

app/tests/Browser/EventTest.php

@@ -3,23 +3,19 @@
 namespace Tests\Browser;
 
 use App\Models\User;
-use Illuminate\Foundation\Testing\RefreshDatabase;
 use Illuminate\Support\Facades\Http;
 use Laravel\Dusk\Browser;
 use Tests\DuskTestCase;
 
 class EventTest extends DuskTestCase
 {
-    use RefreshDatabase;
     use UsesWebsocketsServerTrait;
 
-    public $seed = true;
-
     /** @test */
     public function it_can_redirect_on_an_event()
     {
         $this->browse(function (Browser $browser) {
-            $user = User::first();
+            $user = User::firstOrFail();
 
             $browser->loginAs($user)
                 ->visit('/event')
@@ -42,7 +38,7 @@ public function it_can_redirect_on_an_event()
     public function it_can_refresh_on_an_event()
     {
         $this->browse(function (Browser $browser) {
-            $user = User::first();
+            $user = User::firstOrFail();
 
             $browser->loginAs($user)
                 ->visit('/event')
@@ -67,7 +63,7 @@ public function it_can_refresh_on_an_event()
     public function it_can_show_the_event()
     {
         $this->browse(function (Browser $browser) {
-            $user = User::first();
+            $user = User::firstOrFail();
 
             $browser->loginAs($user)
                 ->visit('/event')
@@ -91,7 +87,7 @@ public function it_can_show_the_event()
     public function it_can_show_a_toast()
     {
         $this->browse(function (Browser $browser) {
-            $user = User::first();
+            $user = User::firstOrFail();
 
             $browser->loginAs($user)
                 ->visit('/event')

app/tests/Browser/Form/FilepondExistingTest.php

@@ -125,6 +125,7 @@ public function it_can_add_a_file_to_the_existing_multiple_media_uploads()
                 ->within('@photos', function (Browser $browser) {
                     $browser->waitForText('1.jpeg')
                         ->waitForText('Drag and drop your files')
+                        ->pause(500)
                         ->attachToFilepond(__DIR__ . '/../small.jpeg')
                         ->waitForText('Upload complete', 10)
                         ->press('Submit');

app/tests/Browser/FormLibrariesInModalTest.php

@@ -9,13 +9,15 @@
 class FormLibrariesInModalTest extends DuskTestCase
 {
     /** @test */
-    public function it_can_autosize_the_textarea()
+    public function it_can_autosize_the_textarea_in_a_modal()
     {
         $this->browse(function (Browser $browser) {
             $browser->visit('modal/base')
                 ->waitForText('ModalComponent')
+                ->pause(250)
                 ->click('@libraries')
                 ->waitForText('FormComponents')
+                ->pause(250)
                 ->type('textarea', Lorem::text(1000))
                 ->assertAttributeContains('textarea', 'style', 'height');
         });
@@ -46,9 +48,13 @@ public function it_can_use_the_choices_js_library_for_a_multiple_select_element_
                 ->waitForText('FormComponents')
                 ->pause(500)
                 ->choicesSelect('countries[]', 'NL')
+                ->pause(100)
                 ->assertSee('Selected countries: NL')
+                ->pause(100)
                 ->choicesSelect('countries[]', 'BE')
+                ->pause(100)
                 ->assertSee('Selected countries: NL, BE')
+                ->pause(100)
                 ->choicesRemoveItem('countries[]', 'NL')
                 ->assertSee('Selected countries: BE');
         });
@@ -64,7 +70,7 @@ public function it_can_close_the_choices_js_library_without_selecting_an_option(
                 ->waitForText('FormComponents')
                 ->click('@select-choices')
                 ->whenAvailable('div.choices.is-open', function (Browser $browser) {
-                    $coordinates = $browser->script("return document.querySelector('[dusk=\"text\"]').getBoundingClientRect()");
+                    $coordinates = $browser->pause(250)->script("return document.querySelector('[dusk=\"text\"]').getBoundingClientRect()");
 
                     $browser->clickAtPoint($coordinates[0]['x'], $coordinates[0]['y'])
                         ->pause(500)