Skip to content
This repository was archived by the owner on Jun 27, 2024. It is now read-only.

Commit 35fb10a

Browse files
pascalbaljetpascalbaljet
committed
WIP
1 parent 2f4df2f commit 35fb10a

20 files changed

+585
-360
lines changed

‎app/resources/js/Layouts/Guest.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
3-
<div class="w-full max-w-7xl mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
2+
<div class="min-h-screen flex flex-col items-center bg-gray-100">
3+
<div class="w-full max-w-7xl mt-6 sm:px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
44
<slot />
55
</div>
66
</div>

‎app/resources/js/Pages/Users.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
import BreezeGuestLayout from "@/Layouts/Guest.vue";
33
import { Table } from "@protonemedia/inertiajs-tables-laravel-query-builder";
44
5+
// use this one for development:
6+
// import Table from "../../../../js/Components/Table.vue"
7+
58
defineProps(["users"])
69
</script>
710

@@ -10,6 +13,7 @@ defineProps(["users"])
1013
<Table
1114
:inertia="$inertia"
1215
:resource="users"
16+
:input-debounce-ms="50"
1317
>
1418
<template #cell(actions)="{ item: user }">
1519
<a

‎app/tests/Browser/ColumnTest.php

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<?php
2+
3+
namespace Tests\Browser;
4+
5+
use App\Models\User;
6+
use Laravel\Dusk\Browser;
7+
use Tests\DuskTestCase;
8+
9+
class ColumnTest extends DuskTestCase
10+
{
11+
/** @test */
12+
public function it_can_toggle_columns()
13+
{
14+
$this->browse(function (Browser $browser) {
15+
$users = User::query()
16+
->select(['id', 'name', 'email'])
17+
->orderBy('name')
18+
->get();
19+
20+
$browser->visit('/users/eloquent')
21+
->assertSeeIn('tr:first-child td:nth-child(2)', $users->get(0)->email)
22+
->press('@columns-dropdown')
23+
->press('@toggle-column-email')
24+
->waitUntilMissingText($users->get(0)->email)
25+
->press('@toggle-column-email')
26+
->waitForTextIn('tr:first-child td:nth-child(2)', $users->get(0)->email);
27+
});
28+
}
29+
}

‎app/tests/Browser/FilterTest.php

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<?php
2+
3+
namespace Tests\Browser;
4+
5+
use App\Models\User;
6+
use Laravel\Dusk\Browser;
7+
use Tests\DuskTestCase;
8+
9+
class FilterTest extends DuskTestCase
10+
{
11+
/** @test */
12+
public function it_can_use_select_filters()
13+
{
14+
$this->browse(function (Browser $browser) {
15+
User::orderBy('name')->first()->forceFill([
16+
'language_code' => 'en',
17+
])->save();
18+
19+
$users = User::query()
20+
->orderBy('name')
21+
->get();
22+
23+
$firstDutchUser = $users->firstWhere('language_code', 'nl');
24+
25+
$browser->visit('/users/eloquent')
26+
->assertSeeIn('tr:first-child td:nth-child(1)', $users->get(0)->name)
27+
->press('@filters-dropdown')
28+
->select('language_code', 'nl')
29+
->waitUntilMissingText($users->get(0)->name)
30+
->assertSeeIn('tr:first-child td:nth-child(1)', $firstDutchUser->name);
31+
});
32+
}
33+
}

‎app/tests/Browser/GlobalSearchTest.php

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<?php
2+
3+
namespace Tests\Browser;
4+
5+
use App\Models\User;
6+
use Laravel\Dusk\Browser;
7+
use Tests\DuskTestCase;
8+
9+
class GlobalSearchTest extends DuskTestCase
10+
{
11+
/** @test */
12+
public function it_can_globally_search()
13+
{
14+
$this->browse(function (Browser $browser) {
15+
User::first()->forceFill([
16+
'name' => 'Pascal Baljet',
17+
'email' => 'pascal@protone.media',
18+
])->save();
19+
20+
$users = User::query()
21+
->select(['id', 'name', 'email'])
22+
->orderBy('name')
23+
->get();
24+
25+
$browser->visit('/users/eloquent')
26+
// First user
27+
->assertSeeIn('tr:first-child td:nth-child(1)', $users->get(0)->name)
28+
->assertDontSee('Pascal Baljet')
29+
->type('global', 'Pascal Baljet')
30+
->waitForText('pascal@protone.media')
31+
->type('global', ' ')
32+
->waitUntilMissingText('pascal@protone.media')
33+
->type('global', 'pascal@protone.media')
34+
->waitForText('Pascal Baljet');
35+
});
36+
}
37+
}

‎app/tests/Browser/InputSearchTest.php

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<?php
2+
3+
namespace Tests\Browser;
4+
5+
use App\Models\User;
6+
use Laravel\Dusk\Browser;
7+
use Tests\DuskTestCase;
8+
9+
class InputSearchTest extends DuskTestCase
10+
{
11+
/** @test */
12+
public function it_can_search_by_name_or_email()
13+
{
14+
$this->browse(function (Browser $browser) {
15+
User::first()->forceFill([
16+
'name' => 'Pascal Baljet',
17+
'email' => 'pascal@protone.media',
18+
])->save();
19+
20+
$users = User::query()
21+
->select(['id', 'name', 'email'])
22+
->orderBy('name')
23+
->get();
24+
25+
$browser->visit('/users/eloquent')
26+
// First user
27+
->assertSeeIn('tr:first-child td:nth-child(1)', $users->get(0)->name)
28+
->assertDontSee('Pascal Baljet')
29+
->press('@add-search-row-dropdown')
30+
->press('@add-search-row-name')
31+
->type('name', 'Pascal Baljet')
32+
->waitForText('pascal@protone.media')
33+
->press('@remove-search-row-name')
34+
->waitUntilMissingText('pascal@protone.media')
35+
->press('@add-search-row-dropdown')
36+
->press('@add-search-row-email')
37+
->type('email', 'pascal@protone.media')
38+
->waitForText('Pascal Baljet');
39+
});
40+
}
41+
}

‎app/tests/Browser/SortTest.php

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<?php
2+
3+
namespace Tests\Browser;
4+
5+
use App\Models\User;
6+
use Laravel\Dusk\Browser;
7+
use Tests\DuskTestCase;
8+
9+
class SortTest extends DuskTestCase
10+
{
11+
/** @test */
12+
public function it_sorts_by_name_by_default()
13+
{
14+
$this->browse(function (Browser $browser) {
15+
$users = User::query()
16+
->select(['id', 'name', 'email'])
17+
->orderBy('name')
18+
->get();
19+
20+
$usersByEmail = $users->sortBy->email->values();
21+
22+
$browser->visit('/users/eloquent')
23+
// First user
24+
->assertSeeIn('tr:first-child td:nth-child(1)', $users->get(0)->name)
25+
->assertSeeIn('tr:last-child td:nth-child(1)', $users->get(9)->name)
26+
27+
// Sort desc
28+
->press('@sort-name')
29+
->waitUntilMissingText($users->get(0)->name)
30+
->assertSeeIn('tr:first-child td:nth-child(1)', $users->get(99)->name)
31+
->assertSeeIn('tr:last-child td:nth-child(1)', $users->get(90)->name)
32+
33+
// Restore asc sort
34+
->press('@sort-name')
35+
->waitUntilMissingText($users->get(99)->name)
36+
->assertSeeIn('tr:first-child td:nth-child(1)', $users->get(0)->name)
37+
->assertSeeIn('tr:last-child td:nth-child(1)', $users->get(9)->name)
38+
39+
// Sort by other column
40+
->press('@sort-email')
41+
->waitForTextIn('tr:first-child td:nth-child(2)', $usersByEmail->get(0)->email)
42+
->assertSeeIn('tr:first-child td:nth-child(2)', $usersByEmail->get(0)->email)
43+
->assertSeeIn('tr:last-child td:nth-child(2)', $usersByEmail->get(9)->email);
44+
});
45+
}
46+
}

‎js/Components/ButtonWithDropdown.vue

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<button
55
ref="button"
66
type="button"
7+
:dusk="dusk"
78
:disabled="disabled"
89
class="w-full bg-white border rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
910
:class="{'border-green-300': active, 'border-gray-300': !active, 'cursor-not-allowed': disabled }"
@@ -46,6 +47,12 @@ const props = defineProps({
4647
required: false,
4748
},
4849
50+
dusk: {
51+
type: String,
52+
default: null,
53+
required: false,
54+
},
55+
4956
disabled: {
5057
type: Boolean,
5158
default: false,

‎js/Components/HeaderCell.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
<template>
22
<th
33
v-show="!cell.hidden"
4-
class="no-padding"
5-
:class="{ 'cursor-pointer': cell.sortable }"
64
>
75
<component
86
:is="cell.sortable ? 'button' : 'div'"
97
class="py-3 px-6 w-full"
8+
:dusk="cell.sortable ? `sort-${cell.key}` : null"
109
@click.prevent="onClick"
1110
>
1211
<span class="flex flex-row items-center">

0 commit comments

Comments
 (0)