diff --git a/tests/cypress/cypress/e2e/actions/buttons.cy.js b/tests/cypress/cypress/e2e/actions/buttons.cy.js
new file mode 100644
index 000000000..4ae7b3fe9
--- /dev/null
+++ b/tests/cypress/cypress/e2e/actions/buttons.cy.js
@@ -0,0 +1,139 @@
+describe('can render actions buttons with icons', () => {
+ beforeEach(() => {
+ cy.visit('/actions-buttons');
+ });
+
+ 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\'')
+ // Eye icon
+ .should('contain.html', '')
+ .should('contain.text', 'View')
+
+ cy.intercept('POST', '/livewire/update', (req) => {
+ expect(req.body.components[0].calls[0]).to.deep.equal({
+ path: "",
+ method: "__dispatch",
+ params: [
+ "clickToEdit",
+ {
+ action: "view",
+ name: "Luan"
+ }
+ ]
+ });
+
+ console.log(req.body)
+
+ }).as('requestIntercept');
+
+ cy.get('[data-cy=btn-view-1]').click()
+
+ cy.wait('@requestIntercept').its('response.body').should((response) => {
+ expect(response.components[0].effects.xjs[0]).to.deep.equal('console.log("Editing #view - Luan")');
+ });
+ });
+
+ 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', 'wire:click="$dispatch(\'clickToEdit\'')
+ // Pencil icon
+ .should('contain.html', '')
+ .should('contain.text', 'Edit')
+
+ cy.intercept('POST', '/livewire/update', (req) => {
+ expect(req.body.components[0].calls[0]).to.deep.equal({
+ path: "",
+ method: "__dispatch",
+ params: [
+ "clickToEdit",
+ {
+ action: "edit",
+ name: "Luan"
+ }
+ ]
+ });
+
+ console.log(req.body)
+
+ }).as('requestIntercept');
+
+ cy.get('[data-cy=btn-edit-1]').click()
+
+ cy.wait('@requestIntercept').its('response.body').should((response) => {
+ expect(response.components[0].effects.xjs[0]).to.deep.equal('console.log("Editing #edit - Luan")');
+ });
+ });
+
+ it('can render view button and click for row 2', () => {
+ cy.get('.power-grid-table tbody tr').eq(1)
+ .should('contain.html', 'pgRenderActions({ rowId: 2, parentId: null })')
+ .should('contain.html', 'wire:click="$dispatch(\'clickToEdit\'')
+ // Eye icon
+ .should('contain.html', '')
+
+ cy.intercept('POST', '/livewire/update', (req) => {
+ expect(req.body.components[0].calls[0]).to.deep.equal({
+ path: "",
+ method: "__dispatch",
+ params: [
+ "clickToEdit",
+ {
+ action: "view",
+ name: "Daniel"
+ }
+ ]
+ });
+ }).as('requestIntercept');
+
+ cy.get('[data-cy=btn-view-2').click()
+
+ cy.wait('@requestIntercept').its('response.body').should((response) => {
+ expect(response.components[0].effects.xjs[0]).to.deep.equal('console.log("Editing #view - Daniel")');
+ });
+ })
+
+ 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 })')
+ .should('contain.html', 'wire:click="$dispatch(\'clickToEdit\'')
+ // Pencil icon
+ .should('contain.html', '')
+ .should('contain.text', 'Edit')
+
+ cy.intercept('POST', '/livewire/update', (req) => {
+ expect(req.body.components[0].calls[0]).to.deep.equal({
+ path: "",
+ method: "__dispatch",
+ params: [
+ "clickToEdit",
+ {
+ action: "edit",
+ name: "Daniel"
+ }
+ ]
+ });
+
+ console.log(req.body)
+
+ }).as('requestIntercept');
+
+ cy.get('[data-cy=btn-edit-2]').click()
+
+ cy.wait('@requestIntercept').its('response.body').should((response) => {
+ expect(response.components[0].effects.xjs[0]).to.deep.equal('console.log("Editing #edit - Daniel")');
+ });
+ });
+})