Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Jun 27, 2024. It is now read-only.

Commit 35fb10a

Browse files
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+
}
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+
}
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)

AltStyle によって変換されたページ (->オリジナル) /