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

Commit 396cc15

Browse files
pascalbaljetpascalbaljet
committed
Added more tests
1 parent a7cb027 commit 396cc15

File tree

9 files changed

+75
-96
lines changed

9 files changed

+75
-96
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
2+
<div class="min-h-screen flex flex-col items-center bg-gray-100">
33
<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>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ defineProps(["users"])
1313
<Table
1414
:inertia="$inertia"
1515
:resource="users"
16-
:prevent-overlapping-requests="false"
16+
:input-debounce="0"
1717
>
1818
<template #cell(actions)="{ item: user }">
1919
<a

‎app/tests/Browser/ColumnTest.php

+29
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

+33
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+
}

‎js/Components/Table.vue

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<fieldset
33
:key="`table-${name}`"
4+
class="min-w-0"
45
:class="{'opacity-75': isVisiting}"
56
:disabled="preventOverlappingRequests && isVisiting"
67
>

‎js/Components/TableAddSearchRow.vue

+1-8
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,7 @@
3030
<button
3131
v-for="(searchInput, key) in searchInputs"
3232
:key="key"
33-
class="
34-
text-left
35-
w-full
36-
px-4
37-
py-2
38-
text-sm text-gray-700
39-
hover:bg-gray-100 hover:text-gray-900
40-
"
33+
class="text-left w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
4134
role="menuitem"
4235
@click.prevent="enableSearch(searchInput.key)"
4336
>

‎js/Components/TableColumns.vue

+2-40
Original file line numberDiff line numberDiff line change
@@ -46,30 +46,11 @@
4646

4747
<button
4848
type="button"
49-
class="
50-
ml-4
51-
relative
52-
inline-flex
53-
flex-shrink-0
54-
h-6
55-
w-11
56-
border-2 border-transparent
57-
rounded-full
58-
cursor-pointer
59-
transition-colors
60-
ease-in-out
61-
duration-200
62-
focus:outline-none
63-
focus:ring-2
64-
focus:ring-offset-2
65-
focus:ring-light-blue-500
66-
"
49+
class="ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-light-blue-500"
6750
:class="{
6851
'bg-green-500': !column.hidden,
6952
'bg-gray-200': column.hidden,
70-
'cursor-not-allowed': !column.hidden && oneVisibleFilterLeft(),
7153
}"
72-
:disabled="!column.hidden && oneVisibleFilterLeft()"
7354
:aria-pressed="!column.hidden"
7455
:aria-labelledby="`toggle-column-${column.key}`"
7556
:aria-describedby="`toggle-column-${column.key}`"
@@ -83,19 +64,7 @@
8364
'translate-x-5': !column.hidden,
8465
'translate-x-0': column.hidden,
8566
}"
86-
class="
87-
inline-block
88-
h-5
89-
w-5
90-
rounded-full
91-
bg-white
92-
shadow
93-
transform
94-
ring-0
95-
transition
96-
ease-in-out
97-
duration-200
98-
"
67+
class="inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
9968
/>
10069
</button>
10170
</li>
@@ -107,7 +76,6 @@
10776

10877
<script setup>
10978
import ButtonWithDropdown from "./ButtonWithDropdown.vue";
110-
import filter from "lodash-es/filter";
11179
11280
const props = defineProps({
11381
columns: {
@@ -125,10 +93,4 @@ const props = defineProps({
12593
required: true,
12694
},
12795
});
128-
129-
function oneVisibleFilterLeft() {
130-
return filter(props.columns, (column) => {
131-
return !column.hidden;
132-
}).length === 1;
133-
}
13496
</script>

‎js/Components/TableFilter.vue

+3-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<ButtonWithDropdown
33
placement="bottom-end"
4+
dusk="filters-dropdown"
45
:active="hasEnabledFilters"
56
>
67
<template #button>
@@ -38,16 +39,9 @@
3839
<div class="p-2">
3940
<select
4041
v-if="filter.type === 'select'"
42+
:name="filter.key"
4143
:value="filter.value"
42-
class="
43-
block
44-
focus:ring-indigo-500 focus:border-indigo-500
45-
w-full
46-
shadow-sm
47-
sm:text-sm
48-
border-gray-300
49-
rounded-md
50-
"
44+
class="block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
5145
@change="onFilterChange(filter.key, $event.target.value)"
5246
>
5347
<option

‎js/Components/TableSearchRows.vue

+4-37
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,6 @@
11
<template>
22
<div
3-
class="
4-
w-full
5-
bg-gradient-to-r
6-
from-blue-50
7-
to-blue-100
8-
bg-white
9-
p-4
10-
mb-4
11-
rounded
12-
mt-4
13-
"
3+
class="w-full bg-gradient-to-r from-blue-50 to-blue-100 bg-white p-4 mb-4 rounded mt-4"
144
>
155
<div class="flex flex-row space-x-4">
166
<div class="space-y-4">
@@ -35,39 +25,16 @@
3525
<input
3626
:ref="skipUnwrap.el"
3727
:key="searchInput.key"
38-
class="
39-
block
40-
w-full
41-
sm:text-sm
42-
rounded-md
43-
shadow-sm
44-
focus:ring-indigo-500 focus:border-indigo-500
45-
border-gray-300
46-
"
28+
class="block w-full sm:text-sm rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300"
4729
:value="searchInput.value"
4830
type="text"
4931
@input="onChange(searchInput.key, $event.target.value)"
5032
>
5133
<div
52-
class="
53-
absolute
54-
inset-y-0
55-
right-0
56-
pr-3
57-
flex
58-
items-center
59-
"
34+
class="absolute inset-y-0 right-0 pr-3 flex items-center"
6035
>
6136
<button
62-
class="
63-
rounded-md
64-
text-gray-400
65-
hover:text-gray-500
66-
focus:outline-none
67-
focus:ring-2
68-
focus:ring-offset-2
69-
focus:ring-indigo-500
70-
"
37+
class="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
7138
@click.prevent="onRemove(searchInput.key)"
7239
>
7340
<span class="sr-only">Remove search</span>

0 commit comments

Comments
 (0)