chore: rollback changes to hopefully pass Cypress tests

Author: ghiscoding

src/app/examples/grid-composite-editor.component.html

@@ -1,6 +1,7 @@
 <div id="demo-container" class="container-fluid">
   <h2>
-    Example 30: Composite Editor Modal
+    {{ title }}
+
     <span class="float-end">
       <a
         style="font-size: 18px"
@@ -14,7 +15,7 @@ <h2>
       class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
       type="button"
       data-test="toggle-subtitle"
-      (click)="toggleSubTitle()"
+      (click)="hideSubTitle = !hideSubTitle"
     >
       <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
     </button>
@@ -23,14 +24,7 @@ <h2>
       <span>Toggle Dark Mode</span>
     </button>
   </h2>
-  <div class="subtitle">
-    Composite Editor allows you to Create, Clone, Edit, Mass Update & Mass Selection Changes inside a nice Modal Window.
-    <br />The modal is simply populated by looping through your column definition list and also uses a lot of the same logic as
-    inline editing (see
-    <a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/composite-editor-modal" target="_blank"
-      >Composite Editor - Wiki</a
-    >.)
-  </div>
+  <div class="subtitle" [hidden]="hideSubTitle" [innerHTML]="subTitle"></div>
 
   <div class="mb-2">
     <div class="btn-group btn-group-sm" role="group" aria-label="Basic Editing Commands">

src/app/examples/grid-composite-editor.component.ts

@@ -89,6 +89,10 @@ const myCustomTitleValidator = (value: any, args: any) => {
 })
 export class GridCompositeEditorComponent implements OnDestroy, OnInit {
   private _darkMode = false;
+  title = 'Example 30: Composite Editor Modal';
+  subTitle = `Composite Editor allows you to Create, Clone, Edit, Mass Update & Mass Selection Changes inside a nice Modal Window.
+  <br>The modal is simply populated by looping through your column definition list and also uses a lot of the same logic as inline editing (see <a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/composite-editor-modal" target="_blank">Composite Editor - Wiki</a>.)`;
+
   angularGrid!: AngularGridInstance;
   compositeEditorInstance!: SlickCompositeEditorComponent;
   gridOptions!: GridOption;
@@ -1068,11 +1072,4 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit {
           <span class="autocomplete-bottom-right">Type: <b>${item.itemTypeName === 'I' ? 'Item' : item.itemTypeName === 'C' ? 'PdCat' : 'Cat'}</b></span>
         </div>`;
   }
-
-  toggleSubTitle() {
-    this.hideSubTitle = !this.hideSubTitle;
-    const action = this.hideSubTitle ? 'add' : 'remove';
-    document.querySelector('.subtitle')?.classList[action]('hidden');
-    this.angularGrid.resizerService.resizeGrid(2);
-  }
 }

src/app/examples/grid-graphql-nopage.component.html

@@ -14,13 +14,13 @@ <h2>
       class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
       type="button"
       data-test="toggle-subtitle"
-      (click)="toggleSubTitle()"
+      (click)="hideSubTitle = !hideSubTitle"
     >
       <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
     </button>
   </h2>
   <div class="subtitle row">
-    <div class="col-12" [innerHTML]="subTitle"></div>
+    <div class="col-12" [hidden]="hideSubTitle" [innerHTML]="subTitle"></div>
   </div>
 
   <div class="row">

src/app/examples/grid-graphql-nopage.component.ts

@@ -288,11 +288,4 @@ export class GridGraphqlWithoutPaginationComponent implements OnInit {
     const languageQuery = `query { languages { code, name, native  }}`;
     return this.http.post<GraphqlResult<{ code: string; name: string; native: string }>>(COUNTRIES_API, { query: languageQuery });
   }
-
-  toggleSubTitle() {
-    this.hideSubTitle = !this.hideSubTitle;
-    const action = this.hideSubTitle ? 'add' : 'remove';
-    document.querySelector('.subtitle')?.classList[action]('hidden');
-    this.angularGrid.resizerService.resizeGrid(2);
-  }
 }

test/cypress/e2e/example27.cy.ts

@@ -120,7 +120,7 @@ describe('Example 27 - GraphQL Basic API without Pagination', () => {
   });
 
   it('should Clear all Filters and expect all rows to be back', () => {
-    cy.get('#grid27').find('button.slick-grid-menu-button').click({ force: true });
+    cy.get('#grid27').find('button.slick-grid-menu-button').click();
 
     cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item').first().find('span').contains('Clear all Filters').click();
 

test/cypress/e2e/example30.cy.ts

@@ -47,7 +47,7 @@ describe('Example 30  Composite Editor Modal', () => {
 
   it('should display 2 different tooltips when hovering icons on "Title" column', () => {
     cy.get('.slick-column-name').as('title-column');
-    cy.get('@title-column').find('.mdi-alert-outline').trigger('mouseover', { force: true });
+    cy.get('@title-column').find('.mdi-alert-outline').trigger('mouseover');
 
     cy.get('.slick-custom-tooltip').should('be.visible');
     cy.get('.slick-custom-tooltip .tooltip-body').contains('Task must always be followed by a number');