feat(cypress): add Pagination Service E2E tests

- also update to latest Cypress version
ghiscoding · Oct 23, 2019 · 72f6df3 · 72f6df3
1 parent a3ceb7f
commit 72f6df3
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 6 deletions.
diff --git a/src/app/examples/grid-graphql.component.html b/src/app/examples/grid-graphql.component.html
@@ -28,10 +28,10 @@ <h2>{{title}}</h2>
       </span>
       <div class="row col-md-12">
         <label>Programmatically go to first/last page:</label>
-        <button class="btn btn-default btn-xs" (click)="goToFirstPage()">
+        <button class="btn btn-default btn-xs" data-test="goto-first-page" (click)="goToFirstPage()">
           <i class="fa fa-caret-left fa-lg"></i>
         </button>
-        <button class="btn btn-default btn-xs" (click)="goToLastPage()">
+        <button class="btn btn-default btn-xs" data-test="goto-last-page" (click)="goToLastPage()">
           <i class="fa fa-caret-right fa-lg"></i>
         </button>
       </div>

diff --git a/src/app/examples/grid-odata.component.html b/src/app/examples/grid-odata.component.html
@@ -40,10 +40,10 @@ <h2>{{title}}</h2>
   </div>
   <div class="row col-md-12">
     <label>Programmatically go to first/last page:</label>
-    <button class="btn btn-default btn-xs" (click)="goToFirstPage()">
+    <button class="btn btn-default btn-xs" data-test="goto-first-page" (click)="goToFirstPage()">
       <i class="fa fa-caret-left fa-lg"></i>
     </button>
-    <button class="btn btn-default btn-xs" (click)="goToLastPage()">
+    <button class="btn btn-default btn-xs" data-test="goto-last-page" (click)="goToLastPage()">
       <i class="fa fa-caret-right fa-lg"></i>
     </button>
   </div>

diff --git a/test/cypress/integration/example5.spec.js b/test/cypress/integration/example5.spec.js
@@ -54,6 +54,32 @@ describe('Example 5 - OData Grid', () => {
         });
     });
 
+    it('should change Pagination to first page using the external button', () => {
+      cy.get('[data-test=goto-first-page')
+        .click();
+
+      // wait for the query to finish
+      cy.get('[data-test=status]').should('contain', 'done');
+
+      cy.get('[data-test=odata-query-result]')
+        .should(($span) => {
+          expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$orderby=Name asc&$filter=(Gender eq 'male')`);
+        });
+    });
+
+    it('should change Pagination to last page using the external button', () => {
+      cy.get('[data-test=goto-last-page')
+        .click();
+
+      // wait for the query to finish
+      cy.get('[data-test=status]').should('contain', 'done');
+
+      cy.get('[data-test=odata-query-result]')
+        .should(($span) => {
+          expect($span.text()).to.eq(`$inlinecount=allpages&$top=10&$skip=40&$orderby=Name asc&$filter=(Gender eq 'male')`);
+        });
+    });
+
     it('should clear all Filters and expect to go back to first page', () => {
       cy.get('#grid5')
         .find('button.slick-gridmenu-button')

diff --git a/test/cypress/integration/example6.spec.js b/test/cypress/integration/example6.spec.js
@@ -77,6 +77,47 @@ describe('Example 6 - GraphQL Grid', () => {
       });
   });
 
+  it('should change Pagination to first page using the external button', () => {
+    cy.get('[data-test=goto-first-page')
+      .click();
+
+    // wait for the query to finish
+    cy.get('[data-test=status]').should('contain', 'done');
+
+    cy.get('[data-test=graphql-query-result]')
+      .should(($span) => {
+        const text = removeSpaces($span.text()); // remove all white spaces
+        expect(text).to.eq(removeSpaces(`query { users (first:20,offset:0,
+          orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
+          filterBy:[
+            {field:"gender",operator:EQ,value:"male"},
+            {field:"name",operator:Contains,value:"John Doe"},
+            {field:"company",operator:IN,value:"xyz"},
+            {field:"finish",operator:GE,value:"${presetLowestDay}"},
+            {field:"finish",operator:LE,value:"${presetHighestDay}"}
+          ],locale:"en",userId:123) { totalCount, nodes { id,name,gender,company,billing{address{street,zip}},finish } } }`));
+      });
+  });
+
+  it('should change Pagination to last page using the external button', () => {
+    cy.get('[data-test=goto-last-page')
+      .click();
+
+    // wait for the query to finish
+    cy.get('[data-test=status]').should('contain', 'done');
+
+    cy.get('[data-test=graphql-query-result]')
+      .should(($span) => {
+        const text = removeSpaces($span.text()); // remove all white spaces
+        expect(text).to.eq(removeSpaces(`query{users(first:20,offset:80,
+          orderBy:[{field:"name",direction:ASC},{field:"company",direction:DESC}],
+          filterBy:[
+            {field:"gender",operator:EQ,value:"male"},{field:"name",operator:Contains,value:"JohnDoe"},
+            {field:"company",operator:IN,value:"xyz"},{field:"finish",operator:GE,value:"${presetLowestDay}"},{field:"finish",operator:LE,value:"${presetHighestDay}"}
+          ],locale:"en",userId:123){totalCount,nodes{id,name,gender,company,billing{address{street,zip}},finish}}}`));
+      });
+  });
+
   it('should change Pagination to first page with 30 items', () => {
     cy.get('.icon-seek-first').click();
 

diff --git a/test/cypress/integration/example9.spec.js b/test/cypress/integration/example9.spec.js
@@ -192,7 +192,8 @@ describe('Example 9 - Grid Menu', () => {
         .children('.slick-header-menubutton')
         .should('be.hidden')
         .invoke('show')
-        .click();
+        .click()
+        .trigger('click', { force: true });
 
       cy.get('.slick-header-menu')
         .should('be.visible')

diff --git a/test/cypress/package.json b/test/cypress/package.json
@@ -11,7 +11,7 @@
   "author": "Ghislain B.",
   "license": "MIT",
   "devDependencies": {
-    "cypress": "^3.4.1",
+    "cypress": "^3.5.0",
     "mocha": "^5.2.0",
     "mochawesome": "^3.1.2",
     "mochawesome-merge": "^1.0.7",