Skip to content

Commit ac29ea8

Browse files
luanfreitasdevluanfreitasdev
authored
Add toggle columns cypress tests (#1770)
1 parent 8d0c2a2 commit ac29ea8

File tree

5 files changed

+88
-13
lines changed

5 files changed

+88
-13
lines changed

‎resources/views/components/cols.blade.php

+17-11
Original file line numberDiff line numberDiff line change
@@ -34,18 +34,24 @@
3434
? data_get($this->setUp, "responsive.sortOrder.{$field}", null)
3535
: null;
3636
@endphp
37-
<th
38-
x-data="{ sortable: @js(data_get($column, 'sortable')) }"
39-
@if ($sortOrder) sort_order="{{ $sortOrder }}" @endif
40-
class="{{ theme_style($theme, 'table.header.th') . ' ' . data_get($column, 'headerClass') }}"
41-
@if ($isFixedOnResponsive) fixed @endif
42-
@if (data_get($column, 'enableSort')) x-multisort-shift-click="{{ $this->getId() }}"
43-
wire:click="sortBy('{{ $field }}')" @endif
44-
style="{{ data_get($column, 'hidden') === true ? 'display:none;' : '' }} width: max-content !important; @if (data_get($column, 'enableSort')) cursor:pointer; @endif {{ data_get($column, 'headerStyle') }}"
37+
<th x-data="{ sortable: @js(data_get($column, 'sortable')) }"
38+
data-column="{{ data_get($column, 'isAction') ? 'actions' : $field }}"
39+
@if ($sortOrder) sort_order="{{ $sortOrder }}" @endif
40+
@if ($isFixedOnResponsive) fixed @endif
41+
@if (data_get($column, 'enableSort')) x-multisort-shift-click="{{ $this->getId() }}"
42+
wire:click="sortBy('{{ $field }}')" @endif
43+
@class([
44+
theme_style($theme, 'table.header.th') => true,
45+
data_get($column, 'headerClass') => true,
46+
])
47+
@style([
48+
'display:none' => data_get($column, 'hidden') === true,
49+
'cursor:pointer' => data_get($column, 'enableSort'),
50+
data_get($column, 'headerStyle') => filled(data_get($column, 'headerStyle')),
51+
'width: max-content !important',
52+
])
4553
>
46-
<div
47-
class="{{ theme_style($theme, 'cols.div') }}"
48-
>
54+
<div class="{{ theme_style($theme, 'cols.div') }}">
4955
<span data-value>{!! data_get($column, 'title') !!}</span>
5056

5157
@if (data_get($column, 'enableSort'))

‎resources/views/components/frameworks/bootstrap5/header/toggle-columns.blade.php

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@if (data_get($setUp, 'header.toggleColumns'))
33
<div class="btn-group">
44
<button
5+
data-cy="toggle-columns-{{ $tableName }}"
56
class="btn btn-secondary dropdown-toggle"
67
type="button"
78
data-bs-toggle="dropdown"
@@ -12,8 +13,9 @@ class="btn btn-secondary dropdown-toggle"
1213
<ul class="dropdown-menu">
1314
@foreach ($this->visibleColumns as $column)
1415
<li
16+
wire:key="toggle-column-{{ data_get($column, 'isAction') ? 'actions' : data_get($column, 'field') }}"
17+
data-cy="toggle-field-{{ data_get($column, 'isAction') ? 'actions' : data_get($column, 'field') }}"
1518
wire:click="$dispatch('pg:toggleColumn-{{ $tableName }}', { field: '{{ data_get($column, 'field') }}'})"
16-
wire:key="toggle-column-{{ data_get($column, 'field') }}"
1719
>
1820
<a
1921
class="dropdown-item"

‎resources/views/components/frameworks/tailwind/header/toggle-columns.blade.php

+3-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ class="mr-2 mt-2 sm:mt-0"
55
@click.outside="open = false"
66
>
77
<button
8+
data-cy="toggle-columns-{{ $tableName }}"
89
@click.prevent="open = ! open"
910
class="focus:ring-primary-600 focus-within:focus:ring-primary-600 focus-within:ring-primary-600 dark:focus-within:ring-primary-600 flex rounded-md ring-1 transition focus-within:ring-2 dark:ring-pg-primary-600 dark:text-pg-primary-300 text-gray-600 ring-gray-300 dark:bg-pg-primary-800 bg-white dark:placeholder-pg-primary-400 rounded-md border-0 bg-transparent py-2 px-3 ring-0 placeholder:text-gray-400 focus:outline-none sm:text-sm sm:leading-6 w-auto"
1011
>
@@ -33,8 +34,9 @@ class="absolute z-10 mt-2 w-56 rounded-md dark:bg-pg-primary-700 bg-white shadow
3334
>
3435
@foreach ($this->visibleColumns as $column)
3536
<div
37+
wire:key="toggle-column-{{ data_get($column, 'isAction') ? 'actions' : data_get($column, 'field') }}"
38+
data-cy="toggle-field-{{ data_get($column, 'isAction') ? 'actions' : data_get($column, 'field') }}"
3639
wire:click="$dispatch('pg:toggleColumn-{{ $tableName }}', { field: '{{ data_get($column, 'field') }}'})"
37-
wire:key="toggle-column-{{ data_get($column, 'field') }}"
3840
@class([
3941
'font-semibold bg-pg-primary-100 dark:bg-pg-primary-800 ' => data_get($column, 'hidden'),
4042
'py-1' => $loop->first || $loop->last,

‎resources/views/components/row.blade.php

+1
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
data_get($column, 'bodyStyle'),
6262
])
6363
wire:key="row-{{ substr($rowId, 0, 6) }}-{{ $field }}-{{ $childIndex ?? 0 }}"
64+
data-column="{{ data_get($column, 'isAction') ? 'actions' : $field }}"
6465
>
6566
@if (count(data_get($column, 'customContent')) > 0)
6667
@include(data_get($column, 'customContent.view'), data_get($column, 'customContent.params'))

‎tests/cypress/cypress/e2e/setup/show-toggle-columns.cy.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
describe('Toggle columns functionality', () => {
2+
[
3+
'/setup-toggle-columns?powerGridTheme=tailwind',
4+
'/setup-toggle-columns?powerGridTheme=bootstrap'
5+
].forEach((route) => {
6+
beforeEach(() => {
7+
cy.visit(route);
8+
});
9+
10+
const toggleButton = '[data-cy="toggle-columns-setup-toggle-columns"]';
11+
const toggleFields = {
12+
id: '[data-cy="toggle-field-id"]',
13+
name: '[data-cy="toggle-field-name"]',
14+
email: '[data-cy="toggle-field-email"]',
15+
created: '[data-cy="toggle-field-created_at_formatted"]',
16+
actions: '[data-cy="toggle-field-actions"]'
17+
};
18+
19+
const tableColumns = {
20+
id: {
21+
header: 'th[data-column="id"]',
22+
cells: 'td[data-column="id"]'
23+
},
24+
name: {
25+
header: 'th[data-column="name"]',
26+
cells: 'td[data-column="name"]'
27+
},
28+
email: {
29+
header: 'th[data-column="email"]',
30+
cells: 'td[data-column="email"]'
31+
},
32+
created: {
33+
header: 'th[data-column="created_at_formatted"]',
34+
cells: 'td[data-column="created_at_formatted"]'
35+
},
36+
actions: {
37+
header: 'th[data-column="actions"]',
38+
cells: 'td[data-column="actions"]'
39+
}
40+
};
41+
42+
Object.entries(toggleFields).forEach(([field, toggleSelector]) => {
43+
it(`should toggle the visibility of the ${field} column`, () => {
44+
cy.get(toggleButton).click();
45+
46+
cy.get(toggleSelector).click();
47+
48+
cy.get(tableColumns[field].header).should('have.css', 'display', 'none');
49+
50+
cy.get(tableColumns[field].cells).each(($cell) => {
51+
cy.wrap($cell).should('have.css', 'display', 'none');
52+
});
53+
54+
cy.get(toggleSelector).click({force: true});
55+
56+
cy.get(tableColumns[field].header).should('not.have.css', 'display', 'none');
57+
58+
cy.get(tableColumns[field].cells).each(($cell) => {
59+
cy.wrap($cell).should('not.have.css', 'display', 'none');
60+
});
61+
});
62+
});
63+
})
64+
});

0 commit comments

Comments
 (0)