feat(tests): add Cypress E2E tests to Bootstrap Tabs Example (#698)

* feat(tests): add Cypress E2E tests to Bootstrap Tabs Example

* tests: add Cypress E2E testing for Example 13 Custom Backend Pagination

README.md

@@ -75,7 +75,7 @@ You should also add `Angular-Slickgrid` as an allowed CommonJS dependency to you
 ```
 
 ### Fully Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
-Angular-Slickgrid reached **100%** Unit Test Coverage, we are talking about +10,000 lines of code (+2,700 unit tests) that are now fully tested with [Jest](https://jestjs.io/). There are also +350 Cypress E2E tests to cover most UI functionalities on nearly all Examples of Angular-Slickgrid.
+Angular-Slickgrid reached **100%** Unit Test Coverage, we are talking about +10,000 lines of code (+2,800 unit tests) that are now fully tested with [Jest](https://jestjs.io/). On the UI side, all Angular-Slickgrid Examples are tested with [Cypress](https://www.cypress.io/), there are over 400+ Cypress E2E tests.
 
 ## Installation
 Refer to the **[Wiki - HOWTO Step by Step](https://github.com/ghiscoding/angular-slickgrid/wiki/HOWTO---Step-by-Step)** and/or clone the [Angular-Slickgrid Demos](https://github.com/ghiscoding/angular-slickgrid-demos) repository. Please don't open any issue unless you have followed these steps (from the Wiki), and if any of the steps are incorrect or confusing, then please let me know.

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

@@ -4,21 +4,21 @@ <h2>{{title}}</h2>
 
   <div>
     <tabset>
-      <tab heading="Javascript" id="javascript">
+      <tab heading="Javascript" id="javascript" data-test="javascript-tab">
         <h4>Grid 1 - Load Local Data</h4>
         <angular-slickgrid gridId="grid1"
-          [columnDefinitions]="columnDefinitions1"
-          [gridOptions]="gridOptions1"
-          [dataset]="dataset1">
+                           [columnDefinitions]="columnDefinitions1"
+                           [gridOptions]="gridOptions1"
+                           [dataset]="dataset1">
         </angular-slickgrid>
       </tab>
-      <tab heading="Http-Client" (selectTab)="resizeGrid2()">
+      <tab heading="Http-Client" data-test="http-tab" (selectTab)="resizeGrid2()">
         <h4>Grid 2 - Load a JSON dataset through Http-Client</h4>
         <angular-slickgrid gridId="grid2"
-          [columnDefinitions]="columnDefinitions2"
-          [gridOptions]="gridOptions2"
-          [dataset]="dataset2"
-          (onAngularGridCreated)="angularGrid2Ready($event)">
+                           [columnDefinitions]="columnDefinitions2"
+                           [gridOptions]="gridOptions2"
+                           [dataset]="dataset2"
+                           (onAngularGridCreated)="angularGrid2Ready($event)">
         </angular-slickgrid>
       </tab>
     </tabset>

src/app/examples/swt-common-grid-test.component.html

@@ -1,13 +1,16 @@
-<div class="container" style="margin-top: 10px">
-	<div class="col-sm-8">
-		<div class="alert alert-info">
-			<strong>Custom Pagination URL:</strong>
-			<div [innerHTML]="currentUrl"></div>
-		</div>
-	</div>
-	<swt-common-grid-pagination #commonGridPag1></swt-common-grid-pagination>
-	<swt-common-grid #commonGrid1
-			(onFilterChanged)="filterChanged($event)"
-			(onPaginationChanged)="paginationChanged($event)"
-			(onSortChanged)="sortChanged($event)"></swt-common-grid>
+<div class="container-fluid" style="margin-top: 10px">
+  <h2 [innerHTML]="title"></h2>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
+
+  <div class="col-sm-8">
+    <div class="alert alert-info">
+      <strong>Custom Pagination URL:</strong>
+      <div data-test="query-string" [innerHTML]="currentUrl"></div>
+    </div>
+  </div>
+  <swt-common-grid-pagination #commonGridPag1></swt-common-grid-pagination>
+  <swt-common-grid #commonGrid1
+                   (onFilterChanged)="filterChanged($event)"
+                   (onPaginationChanged)="paginationChanged($event)"
+                   (onSortChanged)="sortChanged($event)"></swt-common-grid>
 </div>