chore(vue): add more E2E tests

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);
         }
       }
     ];

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);
+  });
 });