Add toggle columns cypress tests (#1770)

Power-Components · Nov 15, 2024 · ac29ea8 · ac29ea8
1 parent 8d0c2a2
commit ac29ea8
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 13 deletions.
diff --git a/resources/views/components/cols.blade.php b/resources/views/components/cols.blade.php
@@ -34,18 +34,24 @@
         ? data_get($this->setUp, "responsive.sortOrder.{$field}", null)
         : null;
 @endphp
-<th
-        x-data="{ sortable: @js(data_get($column, 'sortable')) }"
-        @if ($sortOrder) sort_order="{{ $sortOrder }}" @endif
-        class="{{ theme_style($theme, 'table.header.th') . ' ' . data_get($column, 'headerClass') }}"
-        @if ($isFixedOnResponsive) fixed @endif
-        @if (data_get($column, 'enableSort')) x-multisort-shift-click="{{ $this->getId() }}"
-        wire:click="sortBy('{{ $field }}')" @endif
-        style="{{ data_get($column, 'hidden') === true ? 'display:none;' : '' }} width: max-content !important; @if (data_get($column, 'enableSort')) cursor:pointer; @endif {{ data_get($column, 'headerStyle') }}"
+<th x-data="{ sortable: @js(data_get($column, 'sortable')) }"
+    data-column="{{ data_get($column, 'isAction') ? 'actions' : $field }}"
+    @if ($sortOrder) sort_order="{{ $sortOrder }}" @endif
+    @if ($isFixedOnResponsive) fixed @endif
+    @if (data_get($column, 'enableSort')) x-multisort-shift-click="{{ $this->getId() }}"
+    wire:click="sortBy('{{ $field }}')" @endif
+    @class([
+        theme_style($theme, 'table.header.th') => true,
+        data_get($column, 'headerClass') => true,
+    ])
+    @style([
+        'display:none' => data_get($column, 'hidden') === true,
+        'cursor:pointer' => data_get($column, 'enableSort'),
+        data_get($column, 'headerStyle') => filled(data_get($column, 'headerStyle')),
+        'width: max-content !important',
+    ])
 >
-    <div
-            class="{{ theme_style($theme, 'cols.div') }}"
-    >
+    <div class="{{ theme_style($theme, 'cols.div') }}">
         <span data-value>{!! data_get($column, 'title') !!}</span>
 
         @if (data_get($column, 'enableSort'))

diff --git a/resources/views/components/frameworks/bootstrap5/header/toggle-columns.blade.php b/resources/views/components/frameworks/bootstrap5/header/toggle-columns.blade.php
@@ -2,6 +2,7 @@
     @if (data_get($setUp, 'header.toggleColumns'))
         <div class="btn-group">
             <button
+                data-cy="toggle-columns-{{ $tableName }}"
                 class="btn btn-secondary dropdown-toggle"
                 type="button"
                 data-bs-toggle="dropdown"
@@ -12,8 +13,9 @@ class="btn btn-secondary dropdown-toggle"
             <ul class="dropdown-menu">
                 @foreach ($this->visibleColumns as $column)
                     <li
+                        wire:key="toggle-column-{{ data_get($column, 'isAction') ? 'actions' : data_get($column, 'field') }}"
+                        data-cy="toggle-field-{{ data_get($column, 'isAction') ? 'actions' : data_get($column, 'field') }}"
                         wire:click="$dispatch('pg:toggleColumn-{{ $tableName }}', { field: '{{ data_get($column, 'field') }}'})"
-                        wire:key="toggle-column-{{ data_get($column, 'field') }}"
                     >
                         <a
                             class="dropdown-item"

diff --git a/resources/views/components/frameworks/tailwind/header/toggle-columns.blade.php b/resources/views/components/frameworks/tailwind/header/toggle-columns.blade.php
@@ -5,6 +5,7 @@ class="mr-2 mt-2 sm:mt-0"
         @click.outside="open = false"
     >
         <button
+            data-cy="toggle-columns-{{ $tableName }}"
             @click.prevent="open = ! open"
             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"
         >
@@ -33,8 +34,9 @@ class="absolute z-10 mt-2 w-56 rounded-md dark:bg-pg-primary-700 bg-white shadow
             >
                 @foreach ($this->visibleColumns as $column)
                     <div
+                        wire:key="toggle-column-{{ data_get($column, 'isAction') ? 'actions' : data_get($column, 'field') }}"
+                        data-cy="toggle-field-{{ data_get($column, 'isAction') ? 'actions' : data_get($column, 'field') }}"
                         wire:click="$dispatch('pg:toggleColumn-{{ $tableName }}', { field: '{{ data_get($column, 'field') }}'})"
-                        wire:key="toggle-column-{{ data_get($column, 'field') }}"
                         @class([
                             'font-semibold bg-pg-primary-100 dark:bg-pg-primary-800 ' => data_get($column, 'hidden'),
                             'py-1' => $loop->first || $loop->last,

diff --git a/resources/views/components/row.blade.php b/resources/views/components/row.blade.php
@@ -61,6 +61,7 @@
             data_get($column, 'bodyStyle'),
         ])
         wire:key="row-{{ substr($rowId, 0, 6) }}-{{ $field }}-{{ $childIndex ?? 0 }}"
+        data-column="{{ data_get($column, 'isAction') ? 'actions' : $field }}"
     >
         @if (count(data_get($column, 'customContent')) > 0)
             @include(data_get($column, 'customContent.view'), data_get($column, 'customContent.params'))

diff --git a/tests/cypress/cypress/e2e/setup/show-toggle-columns.cy.js b/tests/cypress/cypress/e2e/setup/show-toggle-columns.cy.js
@@ -0,0 +1,64 @@
+describe('Toggle columns functionality', () => {
+    [
+        '/setup-toggle-columns?powerGridTheme=tailwind',
+        '/setup-toggle-columns?powerGridTheme=bootstrap'
+    ].forEach((route) => {
+        beforeEach(() => {
+            cy.visit(route);
+        });
+
+        const toggleButton = '[data-cy="toggle-columns-setup-toggle-columns"]';
+        const toggleFields = {
+            id: '[data-cy="toggle-field-id"]',
+            name: '[data-cy="toggle-field-name"]',
+            email: '[data-cy="toggle-field-email"]',
+            created: '[data-cy="toggle-field-created_at_formatted"]',
+            actions: '[data-cy="toggle-field-actions"]'
+        };
+
+        const tableColumns = {
+            id: {
+                header: 'th[data-column="id"]',
+                cells: 'td[data-column="id"]'
+            },
+            name: {
+                header: 'th[data-column="name"]',
+                cells: 'td[data-column="name"]'
+            },
+            email: {
+                header: 'th[data-column="email"]',
+                cells: 'td[data-column="email"]'
+            },
+            created: {
+                header: 'th[data-column="created_at_formatted"]',
+                cells: 'td[data-column="created_at_formatted"]'
+            },
+            actions: {
+                header: 'th[data-column="actions"]',
+                cells: 'td[data-column="actions"]'
+            }
+        };
+
+        Object.entries(toggleFields).forEach(([field, toggleSelector]) => {
+            it(`should toggle the visibility of the ${field} column`, () => {
+                cy.get(toggleButton).click();
+
+                cy.get(toggleSelector).click();
+
+                cy.get(tableColumns[field].header).should('have.css', 'display', 'none');
+
+                cy.get(tableColumns[field].cells).each(($cell) => {
+                    cy.wrap($cell).should('have.css', 'display', 'none');
+                });
+
+                cy.get(toggleSelector).click({force: true});
+
+                cy.get(tableColumns[field].header).should('not.have.css', 'display', 'none');
+
+                cy.get(tableColumns[field].cells).each(($cell) => {
+                    cy.wrap($cell).should('not.have.css', 'display', 'none');
+                });
+            });
+        });
+    })
+});