Tests

Author: pascalbaljet

app/resources/js/Pages/Users.vue

@@ -1,9 +1,9 @@
 <script setup>
 import BreezeGuestLayout from "@/Layouts/Guest.vue";
-import { Table } from "@protonemedia/inertiajs-tables-laravel-query-builder";
+// import { Table } from "@protonemedia/inertiajs-tables-laravel-query-builder";
 
 // use this one for development:
-// import Table from "../../../../js/Components/Table.vue"
+import Table from "../../../../js/Components/Table.vue"
 
 defineProps(["users"])
 </script>
@@ -13,7 +13,7 @@ defineProps(["users"])
     <Table
       :inertia="$inertia"
       :resource="users"
-      :input-debounce="0"
+      :input-debounce-ms="50"
     >
       <template #cell(actions)="{ item: user }">
         <a

app/tests/Browser/InputSearchTest.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Tests\Browser;
+
+use App\Models\User;
+use Laravel\Dusk\Browser;
+use Tests\DuskTestCase;
+
+class InputSearchTest extends DuskTestCase
+{
+    /** @test */
+    public function it_can_search_by_name_or_email()
+    {
+        $this->browse(function (Browser $browser) {
+            User::first()->forceFill([
+                'name'  => 'Pascal Baljet',
+                'email' => '[email protected]',
+            ])->save();
+
+            $users = User::query()
+                ->select(['id', 'name', 'email'])
+                ->orderBy('name')
+                ->get();
+
+            $browser->visit('/users/eloquent')
+                // First user
+                ->assertSeeIn('tr:first-child td:nth-child(1)', $users->get(0)->name)
+                ->assertDontSee('Pascal Baljet')
+                ->press('@add-search-row-dropdown')
+                ->press('@add-search-row-name')
+                ->type('name', 'Pascal Baljet')
+                ->waitForText('[email protected]')
+                ->press('@remove-search-row-name')
+                ->waitUntilMissingText('[email protected]')
+                ->press('@add-search-row-dropdown')
+                ->press('@add-search-row-email')
+                ->type('email', '[email protected]')
+                ->waitForText('Pascal Baljet');
+        });
+    }
+}

js/Components/Table.vue

@@ -205,7 +205,7 @@ const props = defineProps({
         required: false,
     },
 
-    inputDebounce: {
+    inputDebounceMs: {
         type: Number,
         default: 350,
         required: false,
@@ -341,7 +341,7 @@ function changeSearchInputValue(key, value) {
         queryBuilderData.value.searchInputs[intKey].value = value;
         queryBuilderData.value.cursor = null;
         queryBuilderData.value.page = 1;
-    }, props.inputDebounce);
+    }, props.inputDebounceMs);
 }
 
 function changeGlobalSearchValue(value) {

js/Components/TableAddSearchRow.vue

@@ -1,6 +1,7 @@
 <template>
   <ButtonWithDropdown
     ref="dropdown"
+    dusk="add-search-row-dropdown"
     :disabled="!hasSearchInputsWithoutValue"
     class="w-auto"
   >
@@ -30,6 +31,7 @@
       <button
         v-for="(searchInput, key) in searchInputs"
         :key="key"
+        :dusk="`add-search-row-${searchInput.key}`"
         class="text-left w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
         role="menuitem"
         @click.prevent="enableSearch(searchInput.key)"

js/Components/TableSearchRows.vue

@@ -25,6 +25,7 @@
             <input
               :ref="skipUnwrap.el"
               :key="searchInput.key"
+              :name="searchInput.key"
               class="block w-full sm:text-sm rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300"
               :value="searchInput.value"
               type="text"
@@ -35,6 +36,7 @@
             >
               <button
                 class="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                :dusk="`remove-search-row-${searchInput.key}`"
                 @click.prevent="onRemove(searchInput.key)"
               >
                 <span class="sr-only">Remove search</span>