add can,disble and attributes cypress tests

Power-Components · Sep 8, 2024 · d1ef55e · d1ef55e
1 parent 17595e8
commit d1ef55e
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 18 deletions.
diff --git a/src/Button.php b/src/Button.php
@@ -38,8 +38,6 @@ final class Button implements Wireable
 
     public array $iconAttributes = [];
 
-    public ?\Closure $hideWhen = null;
-
     public bool | \Closure $can = true;
 
     public function __construct(public string $action)

diff --git a/src/Providers/Macros.php b/src/Providers/Macros.php
@@ -165,10 +165,12 @@ public static function actions(): void
             return $this;
         });
 
-        Button::macro('disable', function () {
-            $this->attributes([
-                'disabled' => 'disabled',
-            ]);
+        Button::macro('disable', function (bool $disable = true) {
+            if ($disable) {
+                $this->attributes([
+                    'disabled' => 'disabled',
+                ]);
+            }
 
             return $this;
         });
@@ -198,12 +200,6 @@ public static function actions(): void
             return $this;
         });
 
-        Button::macro('hideWhen', function (\Closure $closure) {
-            $this->hideWhen = $closure;
-
-            return $this;
-        });
-
         Button::macro('can', function (bool|\Closure $closure) {
             $this->can = $closure;
 

diff --git a/...cypress/cypress/e2e/actions/buttons.cy.js → ...ress/cypress/e2e/actions/attributes.cy.js b/...cypress/cypress/e2e/actions/buttons.cy.js → ...ress/cypress/e2e/actions/attributes.cy.js
@@ -1,12 +1,14 @@
-describe('can render actions buttons with icons', () => {
+describe('render javascript actions attributes', () => {
     beforeEach(() => {
-        cy.visit('/actions-buttons');
+        cy.visit('/actions-attributes');
     });
 
     it('can render view button and click for row 1', () => {
         cy.get('.power-grid-table tbody tr').eq(0)
             .should('contain.html', 'pgRenderActions({ rowId: 1, parentId: null })')
             .should('contain.html', 'wire:click="$dispatch(\'clickToEdit\'')
+            .should('contain.html', 'data-cy="btn-view-1"')
+            .should('contain.html', 'class="text-slate-500 items-center flex gap-2 hover:text-slate-700 hover:bg-slate-100 p-1 px-2 rounded"')
             // Eye icon
             .should('contain.html', '<svg class="w-5 text-red-600 !text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">\n' +
                 '    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>\n' +
@@ -45,9 +47,11 @@ describe('can render actions buttons with icons', () => {
     it('can render "Edit" button and click for row 1', () => {
         cy.get('.power-grid-table tbody tr').eq(0)
             .should('contain.html', 'pgRenderActions({ rowId: 1, parentId: null })')
+            .should('contain.html', 'data-cy="btn-edit-1"')
+            .should('contain.html', 'class="text-slate-500 items-center flex gap-2 hover:text-slate-700 hover:bg-slate-100 p-1 px-2 rounded"')
             .should('contain.html', 'wire:click="$dispatch(\'clickToEdit\'')
             // Pencil icon
-            .should('contain.html', '<svg class="w-5 text-red-600 !text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">\n' +
+            .should('contain.html', '<svg class="w-5 text-red-600 !text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">\n' +
                 '    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>\n' +
                 '</svg>')
             .should('contain.text', 'Edit')
@@ -116,11 +120,13 @@ describe('can render actions buttons with icons', () => {
     })
 
     it('can render "Edit" button and click for row 2', () => {
-        cy.get('.power-grid-table tbody tr').eq(0)
-            .should('contain.html', 'pgRenderActions({ rowId: 1, parentId: null })')
+        cy.get('.power-grid-table tbody tr').eq(1)
+            .should('contain.html', 'pgRenderActions({ rowId: 2, parentId: null })')
+            .should('contain.html', 'data-cy="btn-edit-2"')
+            .should('contain.html', 'class="text-slate-500 items-center flex gap-2 hover:text-slate-700 hover:bg-slate-100 p-1 px-2 rounded"')
             .should('contain.html', 'wire:click="$dispatch(\'clickToEdit\'')
             // Pencil icon
-            .should('contain.html', '<svg class="w-5 text-red-600 !text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">\n' +
+            .should('contain.html', '<svg class="w-5 text-red-600 !text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">\n' +
                 '    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>\n' +
                 '</svg>')
             .should('contain.text', 'Edit')

diff --git a/tests/cypress/cypress/e2e/actions/can.cy.js b/tests/cypress/cypress/e2e/actions/can.cy.js
@@ -0,0 +1,27 @@
+describe('can render actions buttons with icons', () => {
+    beforeEach(() => {
+        cy.visit('/actions-can');
+    });
+
+    it('shoul be able to render "can" properly', () => {
+        cy.get('.power-grid-table tbody tr').eq(0)
+            .should('contain.text', '*Cannot*')
+            .should('not.contain.text', '*Can*')
+
+        cy.get('.power-grid-table tbody tr').eq(1)
+            .should('contain.text', '*Can*')
+            .should('not.contain.text', '*Cannot*')
+
+        cy.get('.power-grid-table tbody tr').eq(2)
+            .should('contain.text', '*Cannot*')
+            .should('not.contain.text', '*Can*')
+
+        cy.get('.power-grid-table tbody tr').eq(3)
+            .should('contain.text', '*Cannot*')
+            .should('not.contain.text', '*Can*')
+
+        cy.get('.power-grid-table tbody tr').eq(4)
+            .should('contain.text', '*Cannot*')
+            .should('not.contain.text', '*Can*')
+    });
+})
diff --git a/tests/cypress/cypress/e2e/actions/disable.cy.js b/tests/cypress/cypress/e2e/actions/disable.cy.js
@@ -0,0 +1,14 @@
+describe('can render actions buttons with icons', () => {
+    beforeEach(() => {
+        cy.visit('/actions-disable');
+    });
+
+    it('shoul be able to render "can" properly', () => {
+        cy.get('.power-grid-table tbody tr').eq(0)
+            .should('contain.text', 'Disable')
+            .should('not.have.attr', 'disabled')
+
+        cy.get('.power-grid-table tbody tr').eq(1)
+            .should('contain.html', '<button disabled="disabled" class="text-slate-500 items-center flex gap-2 hover:text-slate-700 hover:bg-slate-100 p-1 px-2 rounded" data-cy="btn-disable-2">Disable</button>')
+    });
+})