From 4212fb6ba638b55a9671a427503d50afeabe373a Mon Sep 17 00:00:00 2001
From: ghiscoding <gbeaulac@gmail.com>
Date: Tue, 10 Dec 2024 21:57:41 -0500
Subject: [PATCH] chore(vue): add more E2E tests

---
 src/app/examples/grid-formatter.component.ts |  4 ++--
 test/cypress/e2e/example02.cy.ts             | 22 ++++++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/app/examples/grid-formatter.component.ts b/src/app/examples/grid-formatter.component.ts
index 48c001bf9..16586b2ab 100644
--- a/src/app/examples/grid-formatter.component.ts
+++ b/src/app/examples/grid-formatter.component.ts
@@ -69,8 +69,8 @@ export class GridFormatterComponent implements OnInit {
       {
         id: 'completed', name: 'Completed', field: 'completed', type: FieldType.number, sortable: true, minWidth: 100,
         formatter: customEnableButtonFormatter,
-        onCellClick: (e, args) => {
-          this.toggleCompletedProperty(args && args.dataContext);
+        onCellClick: (_e, args) => {
+          this.toggleCompletedProperty(args?.dataContext);
         }
       }
     ];
diff --git a/test/cypress/e2e/example02.cy.ts b/test/cypress/e2e/example02.cy.ts
index fa0c04f5f..7d0db8321 100644
--- a/test/cypress/e2e/example02.cy.ts
+++ b/test/cypress/e2e/example02.cy.ts
@@ -1,6 +1,8 @@
 import { removeExtraSpaces } from '../plugins/utilities';
 
 describe('Example 2 - Grid with Formatters', () => {
+  const GRID_ROW_HEIGHT = 35;
+
   it('should display Example title', () => {
     cy.visit(`${Cypress.config('baseUrl')}/formatter`);
     cy.get('h2').should('contain', 'Example 2: Grid with Formatters');
@@ -22,4 +24,24 @@ describe('Example 2 - Grid with Formatters', () => {
         expect(text).to.eq('500 items');
       });
   });
+
+  it('should expect "Effort Driven" 1st cell to include fire icon', () => {
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-fire.red').should('have.length', 1);
+  });
+
+  it('should expect "Effort Driven" 2nd cell to include a snowflake icon', () => {
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(7)`).find('.mdi.mdi-snowflake').should('have.length', 1);
+  });
+
+  it('should click on a "Completed" cell and expect it to toggle to checked', () => {
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).find('.mdi.mdi-circle').should('have.length', 1);
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).click();
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).find('.mdi.mdi-circle').should('have.length', 0);
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 0}px;"] > .slick-cell:nth(8)`).find('.mdi.mdi-check-circle').should('have.length', 1);
+
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).find('.mdi.mdi-circle').should('have.length', 1);
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).click();
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).find('.mdi.mdi-circle').should('have.length', 0);
+    cy.get(`[style="top: ${GRID_ROW_HEIGHT * 1}px;"] > .slick-cell:nth(8)`).find('.mdi.mdi-check-circle').should('have.length', 1);
+  });
 });