chore(vue): add more E2E tests (#1297)

ghiscoding · Dec 11, 2024 · b59bf34 · b59bf34
1 parent ae1661e
commit b59bf34
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 45 deletions.
diff --git a/packages/demo/src/examples/slickgrid/example26.html b/packages/demo/src/examples/slickgrid/example26.html
@@ -10,54 +10,56 @@ <h2>
 </h2>
 <div class="subtitle" innerhtml.bind="subTitle"></div>
 
-<div class="col-sm-6">
-  <label>autoEdit setting</label>
-  <br />
-  <span id="radioAutoEdit">
-    <div class="row">
-      <div class="col">
-        <label class="radio-inline control-label" for="radioTrue">
-          <input type="radio" name="inlineRadioOptions" id="radioTrue" checked value.bind="isAutoEdit"
-                  click.trigger="setAutoEdit(true)"> ON
-          (single-click)
-        </label>
-        <label class="radio-inline control-label" for="radioFalse">
-          <input type="radio" name="inlineRadioOptions" id="radioFalse" value.bind="isAutoEdit"
-                  click.trigger="setAutoEdit(false)"> OFF
-          (double-click)
-        </label>
+<div class="row">
+  <div class="col-sm-6">
+    <label>autoEdit setting</label>
+    <br />
+    <span id="radioAutoEdit">
+      <div class="row">
+        <div class="col">
+          <label class="radio-inline control-label" for="radioTrue">
+            <input type="radio" name="inlineRadioOptions" id="radioTrue" checked value.bind="isAutoEdit"
+                    click.trigger="setAutoEdit(true)"> ON
+            (single-click)
+          </label>
+          <label class="radio-inline control-label" for="radioFalse">
+            <input type="radio" name="inlineRadioOptions" id="radioFalse" value.bind="isAutoEdit"
+                    click.trigger="setAutoEdit(false)"> OFF
+            (double-click)
+          </label>
+        </div>
       </div>
-    </div>
-    <div class="row">
+      <div class="row">
+        <div class="col">
+          <button class="btn btn-outline-secondary btn-sm btn-icon" click.trigger="undo()">
+            <i class="mdi mdi-undo"></i>
+            Undo last edit(s)
+          </button>
+          <label class="checkbox-inline control-label" for="autoCommitEdit">
+            <input type="checkbox" id="autoCommitEdit" data-test="auto-edit-checkbox" value.bind="gridOptions.autoCommitEdit"
+                    click.trigger="changeAutoCommit()">
+            Auto Commit Edit
+          </label>
+        </div>
+      </div>
+    </span>
+    <div class="row" style="margin-top: 5px">
       <div class="col">
-        <button class="btn btn-outline-secondary btn-sm btn-icon" click.trigger="undo()">
-          <i class="mdi mdi-undo"></i>
-          Undo last edit(s)
-        </button>
-        <label class="checkbox-inline control-label" for="autoCommitEdit">
-          <input type="checkbox" id="autoCommitEdit" value.bind="gridOptions.autoCommitEdit"
-                  click.trigger="changeAutoCommit()">
-          Auto Commit Edit
-        </label>
+        <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="clear-filters" click.trigger="aureliaGrid.filterService.clearFilters()">Clear
+          Filters</button>
+        <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="clear-sorting" click.trigger="aureliaGrid.sortService.clearSorting()">Clear
+          Sorting</button>
       </div>
     </div>
-  </span>
-  <div class="row" style="margin-top: 5px">
-    <div class="col">
-      <button class="btn btn-outline-secondary btn-sm btn-icon" click.trigger="aureliaGrid.filterService.clearFilters()">Clear
-        Filters</button>
-      <button class="btn btn-outline-secondary btn-sm btn-icon" click.trigger="aureliaGrid.sortService.clearSorting()">Clear
-        Sorting</button>
-    </div>
   </div>
-</div>
 
-<div class="col-sm-6">
-  <div class="alert alert-info" show.bind="updatedObject">
-    <strong>Updated Item:</strong> ${updatedObject | stringify}
-  </div>
-  <div class="alert alert-warning" show.bind="alertWarning">
-    ${alertWarning}
+  <div class="col-sm-6">
+    <div class="alert alert-info" show.bind="updatedObject">
+      <strong>Updated Item:</strong> ${updatedObject | stringify}
+    </div>
+    <div class="alert alert-warning" show.bind="alertWarning">
+      ${alertWarning}
+    </div>
   </div>
 </div>
 

diff --git 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')}/example2`);
     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);
+  });
 });
diff --git a/test/cypress/e2e/example26.cy.ts b/test/cypress/e2e/example26.cy.ts
@@ -24,16 +24,19 @@ describe('Example 26 - Use of Aurelia Custom Elements', () => {
     cy.get('.slick-cell select.form-control')
       .select('John');
 
+    cy.get('[data-test="auto-edit-checkbox"]')
+      .check();
+
     cy.get('.slick-row:nth(1)')
       .children('.slick-cell:nth(1)')
       .click();
 
     cy.get('.slick-cell select.form-control')
-      .select('Pierre');
+      .select('Paul');
   });
 
-  it('should have 2 first rows with "Assignee" of "John" (0) then "Pierre" (1)', () => {
-    const tasks = [['Task 0', 'John', 'John'], ['Task 1', 'Pierre', 'Pierre']];
+  it('should have 2 first rows with "Assignee" of "John" (0) then "Paul" (1)', () => {
+    const tasks = [['Task 0', 'John', 'John'], ['Task 1', 'Paul', 'Paul']];
 
     cy.get('#grid26')
       .find('.slick-row')
@@ -50,4 +53,34 @@ describe('Example 26 - Use of Aurelia Custom Elements', () => {
         }
       });
   });
+
+  it('should filter Assignee and expect only 1 row with Paul', () => {
+    cy.get('#grid26')
+      .find('.slick-headerrow-column:nth(1)')
+      .find('select.form-control')
+      .select('Paul');
+
+    cy.get('#grid26')
+      .find('.slick-row')
+      .children('.slick-cell:nth(1)')
+      .should('contain', 'Paul');
+
+    cy.get('#grid26')
+      .find('.slick-row')
+      .should('have.length', 1);
+  });
+
+  it('should be able to clear the filter and expect more than 1 row in the grid', () => {
+    cy.get('[data-test="clear-filters"]')
+      .click();
+
+    cy.get('#grid26')
+      .find('.slick-row')
+      .children('.slick-cell:nth(1)')
+      .should('not.contain', 'Paul');
+
+    cy.get('#grid26')
+      .find('.slick-row')
+      .should('have.length.greaterThan', 1);
+  });
 });