feat(tests): add Cypress E2E tests to cover hidden columns, closes #250

- row selection internally have their column definition set to have the "excludeFromColumnPicker" and "excludeFromGridMenu" set to true. We need to make sure that they are hidden from these pickers and that also the hiding/showing columns are not affected by this
- also fix Grid Menu (example 9) Cypress flaky test

src/app/examples/grid-menu.component.html

@@ -1,27 +1,20 @@
 <div class="container-fluid">
   <h2>{{title}}</h2>
-  <div class="subtitle"
-       [innerHTML]="subTitle"></div>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
 
-  <button class="btn btn-default btn-sm"
-          (click)="toggleGridMenu($event)"
-          data-test="external-gridmenu">
+  <button class="btn btn-default btn-sm" (click)="toggleGridMenu($event)" data-test="external-gridmenu">
     <i class="fa fa-bars"></i>
     Grid Menu
   </button>
-  <button class="btn btn-default btn-sm"
-          (click)="switchLanguage()"
-          data-test="language">
+  <button class="btn btn-default btn-sm" (click)="switchLanguage()" data-test="language">
     <i class="fa fa-language"></i>
     Switch Language
   </button>
+  <b>Locale:</b> <span style="font-style: italic" data-test="selected-locale">{{selectedLanguage + '.json'}}</span>
 
   <div class="col-sm-12">
-    <angular-slickgrid gridId="grid9"
-                       (onAngularGridCreated)="angularGridReady($event)"
-                       [columnDefinitions]="columnDefinitions"
-                       [gridOptions]="gridOptions"
-                       [dataset]="dataset">
+    <angular-slickgrid gridId="grid9" (onAngularGridCreated)="angularGridReady($event)"
+      [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions" [dataset]="dataset">
     </angular-slickgrid>
   </div>
 </div>

src/app/examples/grid-menu.component.ts

@@ -29,7 +29,10 @@ export class GridMenuComponent implements OnInit {
   visibleColumns: Column[];
 
   constructor(private translate: TranslateService) {
-    this.selectedLanguage = this.translate.getDefaultLang();
+    // always start with English for Cypress E2E tests
+    const defaultLang = 'en';
+    this.translate.setDefaultLang(defaultLang);
+    this.selectedLanguage = defaultLang;
   }
 
   ngOnInit(): void {
@@ -157,8 +160,8 @@ export class GridMenuComponent implements OnInit {
   }
 
   switchLanguage() {
-    this.selectedLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en';
-    this.translate.use(this.selectedLanguage);
+    const nextLocale = (this.selectedLanguage === 'en') ? 'fr' : 'en';
+    this.translate.use(nextLocale).subscribe(() => this.selectedLanguage = nextLocale);
   }
 
   toggleGridMenu(e) {

src/app/examples/grid-rowselection.component.ts

@@ -133,6 +133,12 @@ export class GridRowSelectionComponent implements OnInit {
         // True (Single Selection), False (Multiple Selections)
         selectActiveRow: true
       },
+      columnPicker: {
+        hideForceFitButton: true
+      },
+      gridMenu: {
+        hideForceFitButton: true
+      }
     };
 
     this.gridOptions2 = {

test/cypress/integration/example10.spec.js

@@ -56,4 +56,89 @@ describe('Example 10 - Multiple Grids with Row Selection', () => {
       .filter('.slick-cell-checkboxsel.selected.true')
       .should('have.length', 0);
   });
+
+  it('should make sure that first column is hidden from the Grid Menu (1st column definition has "excludeFromGridMenu" set) on 1st grid', () => {
+    cy.get('#grid1')
+      .find('button.slick-gridmenu-button')
+      .trigger('click')
+      .click();
+
+    cy.get('.slick-gridmenu')
+      .find('.slick-gridmenu-list')
+      .children()
+      .each(($child, index) => {
+        if (index === 0) {
+          expect($child[0].className).to.eq('hidden');
+          expect($child[0].offsetHeight).to.eq(0);
+          expect($child[0].offsetWidth).to.eq(0);
+        }
+        expect($child.text()).to.eq(titles[index]);
+      });
+  });
+
+  it('should hide Title from the Grid Menu and expect 1 less column in the 1st grid', () => {
+    const newTitleList = ['', 'Duration (days)', '% Complete', 'Start', 'Finish', 'Effort Driven'];
+
+    cy.get('#grid1')
+      .get('.slick-gridmenu:visible')
+      .find('.slick-gridmenu-list')
+      .children('li:nth-child(2)')
+      .children('label')
+      .should('contain', 'Title')
+      .click();
+
+    cy.get('#grid1')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => {
+        expect($child.text()).to.eq(newTitleList[index]);
+      });
+
+    cy.get('#grid1')
+      .get('.slick-gridmenu:visible')
+      .find('span.close')
+      .trigger('click')
+      .click();
+  });
+
+  it('should show the Title column again from the Column Picker in the 1st grid', () => {
+    cy.get('#grid1')
+      .find('.slick-header-column')
+      .first()
+      .trigger('mouseover')
+      .trigger('contextmenu')
+      .invoke('show');
+
+    cy.get('.slick-columnpicker')
+      .find('.slick-columnpicker-list')
+      .children()
+      .each(($child, index) => {
+        if (index === 0) {
+          expect($child[0].className).to.eq('hidden');
+          expect($child[0].offsetHeight).to.eq(0);
+          expect($child[0].offsetWidth).to.eq(0);
+        }
+        expect($child.text()).to.eq(titles[index]);
+      });
+
+    cy.get('.slick-columnpicker')
+      .find('.slick-columnpicker-list')
+      .children('li:nth-child(2)')
+      .children('label')
+      .should('contain', 'Title')
+      .click();
+
+    cy.get('#grid1')
+      .find('.slick-header-columns')
+      .children()
+      .each(($child, index) => {
+        expect($child.text()).to.eq(titles[index]);
+      });
+
+    cy.get('#grid1')
+      .get('.slick-columnpicker:visible')
+      .find('span.close')
+      .trigger('click')
+      .click();
+  });
 });

test/cypress/integration/example9.spec.js

@@ -3,7 +3,6 @@ describe('Example 9 - Grid Menu', () => {
   const fullFrenchTitles = ['Titre', 'Durée', '% Complete', 'Début', 'Fin', 'Terminé'];
 
   describe('use English locale', () => {
-
     it('should display Example 9 title', () => {
       cy.visit(`${Cypress.config('baseExampleUrl')}/gridmenu`);
       cy.get('h2').should('contain', 'Example 9: Grid Menu Control');
@@ -17,6 +16,8 @@ describe('Example 9 - Grid Menu', () => {
     });
 
     it('should hover over the Title column and click on "Hide Column" command and remove 1st column from grid', () => {
+      const smallerTitleList = fullEnglishTitles.slice(1);
+
       cy.get('#grid9')
         .find('.slick-header-column')
         .first()
@@ -33,7 +34,6 @@ describe('Example 9 - Grid Menu', () => {
         .should('contain', 'Hide Column')
         .click();
 
-      const smallerTitleList = fullEnglishTitles.slice(1);
       cy.get('#grid9')
         .find('.slick-header-columns')
         .children()
@@ -67,6 +67,8 @@ describe('Example 9 - Grid Menu', () => {
     });
 
     it('should hover over the Title column and click on "Hide Column" command and remove 1st column from grid', () => {
+      const smallerTitleList = fullEnglishTitles.slice(1);
+
       cy.get('#grid9')
         .find('.slick-header-column')
         .first()
@@ -83,7 +85,6 @@ describe('Example 9 - Grid Menu', () => {
         .should('contain', 'Hide Column')
         .click();
 
-      const smallerTitleList = fullEnglishTitles.slice(1);
       cy.get('#grid9')
         .find('.slick-header-columns')
         .children()
@@ -113,6 +114,12 @@ describe('Example 9 - Grid Menu', () => {
         .find('.slick-header-columns')
         .children()
         .each(($child, index) => expect($child.text()).to.eq(fullEnglishTitles[index]));
+
+      cy.get('#grid9')
+        .get('.slick-gridmenu:visible')
+        .find('span.close')
+        .trigger('click')
+        .click();
     });
   });
 
@@ -121,13 +128,18 @@ describe('Example 9 - Grid Menu', () => {
       cy.get('[data-test=language]')
         .click();
 
+      cy.get('[data-test=selected-locale]')
+        .should('contain', 'fr.json');
+
       cy.get('#grid9')
         .find('.slick-header-columns')
         .children()
         .each(($child, index) => expect($child.text()).to.eq(fullFrenchTitles[index]));
     });
 
     it('should hover over the Title column and click on "Cacher la colonne" command and remove 1st column from grid', () => {
+      const smallerTitleList = fullFrenchTitles.slice(1);
+
       cy.get('#grid9')
         .find('.slick-header-column')
         .first()
@@ -144,7 +156,6 @@ describe('Example 9 - Grid Menu', () => {
         .should('contain', 'Cacher la colonne')
         .click();
 
-      const smallerTitleList = fullFrenchTitles.slice(1);
       cy.get('#grid9')
         .find('.slick-header-columns')
         .children()
@@ -172,6 +183,8 @@ describe('Example 9 - Grid Menu', () => {
     });
 
     it('should hover over the Title column and click on "Hide Column" command and remove 1st column from grid', () => {
+      const smallerTitleList = fullFrenchTitles.slice(1);
+
       cy.get('#grid9')
         .find('.slick-header-column')
         .first()
@@ -188,7 +201,6 @@ describe('Example 9 - Grid Menu', () => {
         .should('contain', 'Cacher la colonne')
         .click();
 
-      const smallerTitleList = fullFrenchTitles.slice(1);
       cy.get('#grid9')
         .find('.slick-header-columns')
         .children()
@@ -212,6 +224,12 @@ describe('Example 9 - Grid Menu', () => {
         .find('.slick-header-columns')
         .children()
         .each(($child, index) => expect($child.text()).to.eq(fullFrenchTitles[index]));
+
+      cy.get('#grid9')
+        .get('.slick-gridmenu:visible')
+        .find('span.close')
+        .trigger('click')
+        .click();
     });
   });
 });