E2e tests with both routing types (#386)

* Introduce cy.expectPathToBe() command * Make tets working with hashRouting * Add isHashRoutingOn() * Remove unused import * create cy.expectSearchToBe()
SAP · Jan 29, 2019 · 3d6428d · 3d6428d
1 parent d8c5f61
commit 3d6428d
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 104 deletions.
diff --git a/core/examples/luigi-sample-angular/cypress.json b/core/examples/luigi-sample-angular/cypress.json
@@ -7,5 +7,6 @@
   "screenshotsFolder": "e2e/screenshots",
   "chromeWebSecurity": false,
   "viewportWidth": 1250,
-  "viewportHeight": 790
+  "viewportHeight": 790,
+  "baseUrl": "http://localhost:4200/"
 }
diff --git a/core/examples/luigi-sample-angular/e2e/support/commands.js b/core/examples/luigi-sample-angular/e2e/support/commands.js
@@ -13,18 +13,15 @@ Cypress.Commands.add('login', (email, password) => {
 
   cy.get('#login-button').click();
   cy.get('.fd-shellbar').contains('Overview');
-  cy.location().should(loc => {
-    expect(loc.pathname).to.eq('/overview');
-  });
+  cy.expectPathToBe('/overview');
 });
 
 Cypress.Commands.add('goToFeaturesPage', iframe => {
   cy.wrap(iframe)
     .contains('linkManager()')
     .click();
-  cy.location().should(loc => {
-    expect(loc.pathname).to.eq('/projects/pr2');
-  });
+  cy.expectPathToBe('/projects/pr2');
+
   cy.wrap(iframe).should('contain', 'LuigiClient uxManager methods:');
   cy.wrap(iframe).should('contain', 'LuigiClient linkManager methods:');
 });
@@ -34,3 +31,38 @@ Cypress.Commands.add('goToOverviewPage', () => {
     .contains('Overview')
     .click();
 });
+
+export const isHashRoutingOn = () => {
+  const appWindow = cy.state('window');
+  const { useHashRouting } =
+    appWindow && appWindow.Luigi && appWindow.Luigi.config
+      ? appWindow.Luigi.config.routing
+      : false;
+  return useHashRouting;
+};
+
+Cypress.Commands.add('expectPathToBe', pathWithoutHash =>
+  cy.location().should(location => {
+    const useHashRouting = isHashRoutingOn();
+    const actualPath = useHashRouting ? location.hash : location.pathname;
+    const pathToCheck = useHashRouting
+      ? '#' + pathWithoutHash
+      : pathWithoutHash;
+    expect(actualPath).to.eq(pathToCheck);
+  })
+);
+
+Cypress.Commands.add('expectSearchToBe', (searchString, a) => {
+  // notice that location.hash DOES keep url params ('?a=b') while location.pathname does NOT
+  cy.location().should(locationContext => {
+    const useHashRouting = isHashRoutingOn();
+    const actualPath = useHashRouting
+      ? locationContext.hash
+      : locationContext.pathname;
+    if (useHashRouting) {
+      expect('?' + actualPath.split('?')[1]).to.eq(searchString);
+    } else {
+      expect(locationContext.search).to.eq(searchString);
+    }
+  });
+});
diff --git a/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js b/core/examples/luigi-sample-angular/e2e/tests/context-switcher.spec.js
@@ -15,9 +15,7 @@ describe('Context switcher', () => {
       .contains('New Environment (bottom)')
       .click();
 
-    cy.location().should(loc => {
-      expect(loc.pathname).to.eq('/create-environment');
-    });
+    cy.expectPathToBe('/create-environment');
 
     // default label
     cy.get('.fd-product-menu')
@@ -29,9 +27,7 @@ describe('Context switcher', () => {
       .contains('Environment 1')
       .click();
 
-    cy.location().should(loc => {
-      expect(loc.pathname).to.eq('/environments/env1');
-    });
+    cy.expectPathToBe('/environments/env1');
 
     // check label
     cy.get('.fd-product-menu .fd-popover__control button').should(

diff --git a/core/examples/luigi-sample-angular/e2e/tests/login-flow.spec.js b/core/examples/luigi-sample-angular/e2e/tests/login-flow.spec.js
@@ -14,9 +14,7 @@ describe('Login Flow', () => {
     cy.get('.sap-icon--customer').click();
     cy.contains('Logout').click();
     cy.get('body').should('contain', 'Logout successful');
-    cy.location().should(loc => {
-      expect(loc.pathname).to.eq('/logout.html');
-    });
+    cy.expectPathToBe('/logout.html');
 
     //login again
     cy.contains('Login again').click();

diff --git a/core/examples/luigi-sample-angular/e2e/tests/luigi-client-features.spec.js b/core/examples/luigi-sample-angular/e2e/tests/luigi-client-features.spec.js
@@ -1,6 +1,7 @@
+import { isHashRoutingOn } from '../support/commands';
 describe('Luigi client features', () => {
   beforeEach(() => {
-    cy.visit('http://localhost:4200');
+    cy.visit('/');
     cy.login('tets', 'tets');
 
     //wait for the iFrame to be loaded
@@ -16,78 +17,65 @@ describe('Luigi client features', () => {
       cy.wrap($iframeBody)
         .contains('absolute: to overview')
         .click();
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq('/overview');
-      });
+      cy.expectPathToBe('/overview');
+
       cy.goToFeaturesPage($iframeBody);
 
       //navigate using relative path
       cy.wrap($iframeBody)
         .contains('relative: to stakeholders')
         .click();
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq('/projects/pr2/users/groups/stakeholders');
-      });
+      cy.expectPathToBe('/projects/pr2/users/groups/stakeholders');
+
       cy.goToOverviewPage();
       cy.goToFeaturesPage($iframeBody);
 
       //navigate using closest context
       cy.wrap($iframeBody)
         .contains('closest parent: to stakeholders')
         .click();
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq('/projects/pr2/users/groups/stakeholders');
-      });
+      cy.expectPathToBe('/projects/pr2/users/groups/stakeholders');
+
       cy.goToOverviewPage();
       cy.goToFeaturesPage($iframeBody);
 
       //navigate using context
       cy.wrap($iframeBody)
         .contains('parent by name: project to settings')
         .click();
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq('/projects/pr2/settings');
-      });
+      cy.expectPathToBe('/projects/pr2/settings');
+
       cy.wrap($iframeBody).should('contain', 'Settings');
       cy.wrap($iframeBody)
         .contains('Click here')
         .click();
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq('/projects/pr2');
-      });
+      cy.expectPathToBe('/projects/pr2');
 
       //navigate with params
       cy.wrap($iframeBody)
         .contains('project to settings with params (foo=bar)')
         .click();
       cy.wrap($iframeBody).should('contain', 'Called with params:');
       cy.wrap($iframeBody).should('contain', '"foo": "bar"');
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq('/projects/pr2/settings');
-        expect(loc.search).to.eq('?~foo=bar&');
-      });
+
+      cy.expectSearchToBe('?~foo=bar&');
+
       cy.wrap($iframeBody)
         .contains('Click here')
         .click();
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq('/projects/pr2');
-      });
+      cy.expectPathToBe('/projects/pr2');
 
       //don't navigate
       cy.wrap($iframeBody)
         .contains('parent by name: with nonexisting context')
         .click();
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq('/projects/pr2');
-      });
+      cy.expectPathToBe('/projects/pr2');
 
       //navigate with preserve view functionality
       cy.wrap($iframeBody)
         .contains('with preserved view: project to global settings and back')
         .click();
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq('/settings');
-      });
+      cy.expectPathToBe('/settings');
 
       //wait for the second iFrame to be loaded
       cy.wait(500);
@@ -104,9 +92,7 @@ describe('Luigi client features', () => {
           cy.wrap($preserveViewiFrameBody)
             .find('button')
             .click();
-          cy.location().should(loc => {
-            expect(loc.pathname).to.eq('/projects/pr2');
-          });
+          cy.expectPathToBe('/projects/pr2');
         });
 
       // check if path exists
@@ -158,9 +144,8 @@ describe('Luigi client features', () => {
       cy.wrap($iframeBody)
         .contains('Partly wrong link')
         .click();
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq('/projects/pr2/miscellaneous2');
-      });
+      cy.expectPathToBe('/projects/pr2/miscellaneous2');
+
       cy.get('.fd-alert').contains(
         'Could not map the exact target node for the requested route projects/pr2/miscellaneous2/maskopatol'
       );
@@ -178,9 +163,8 @@ describe('Luigi client features', () => {
       cy.wrap($iframeBody)
         .contains('Totally wrong link')
         .click();
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq('/overview');
-      });
+      cy.expectPathToBe('/overview');
+
       cy.get('.fd-alert').contains(
         'Could not find the requested route maskopatol/has/a/child'
       );
@@ -264,17 +248,13 @@ describe('Luigi client features', () => {
 
         cy.get('[data-cy=confirmation-modal]').should('be.visible');
 
-        cy.location().should(loc => {
-          expect(loc.pathname).to.eq('/overview'); //the location is unchanged
-        });
+        cy.expectPathToBe('/overview'); //the location is unchanged
 
         cy.get('[data-cy=modal-no]').click();
 
         cy.get('[data-cy=confirmation-modal]').should('not.be.visible');
 
-        cy.location().should(loc => {
-          expect(loc.pathname).to.eq('/overview'); //the location is still unchanged after "No" clicked
-        });
+        cy.expectPathToBe('/overview'); //the location is still unchanged after "No" clicked
       });
     });
     it("Unsaved changes - should proceed when 'Yes' was pressed in modal", () => {
@@ -291,17 +271,13 @@ describe('Luigi client features', () => {
 
         cy.get('[data-cy=confirmation-modal]').should('be.visible');
 
-        cy.location().should(loc => {
-          expect(loc.pathname).to.eq('/overview'); //the location is unchanged
-        });
+        cy.expectPathToBe('/overview'); //the location is unchanged
 
         cy.get('[data-cy=modal-yes]').click();
 
         cy.get('[data-cy=confirmation-modal]').should('not.be.visible');
 
-        cy.location().should(loc => {
-          expect(loc.pathname).to.eq('/projects'); //the location is changed after "Yes" clicked
-        });
+        cy.expectPathToBe('/projects'); //the location is changed after "Yes" clicked
       });
     });
   });

diff --git a/core/examples/luigi-sample-angular/e2e/tests/navigation.spec.js b/core/examples/luigi-sample-angular/e2e/tests/navigation.spec.js
@@ -1,6 +1,6 @@
 describe('Navigation', () => {
   beforeEach(() => {
-    cy.visit('http://localhost:4200');
+    cy.visit('/');
     cy.login('tets@email.com', 'tets');
   });
 
@@ -18,31 +18,35 @@ describe('Navigation', () => {
       .click();
 
     //project one page
-    cy.location().should(loc => {
-      expect(loc.pathname).to.eq('/projects/pr1');
-    });
+    cy.expectPathToBe('/projects/pr1');
+
     cy.get('.fd-app__sidebar').should('not.contain', 'Project One');
     cy.get('.fd-app__sidebar').should('contain', 'Miscellaneous2');
     cy.get('.fd-app__sidebar')
       .contains('Default Child node Example')
       .click();
 
     //default child node example
-    cy.location().should(loc => {
-      expect(loc.pathname).to.eq('/projects/pr1/dps/dps2');
-    });
+    cy.expectPathToBe('/projects/pr1/dps/dps2');
+
     cy.get('.fd-app__sidebar').should('contain', 'First Child');
     cy.get('.fd-app__sidebar').should('contain', 'Second Child');
   });
 
   it('Icon instead of label in TopNav', () => {
-    cy.visit('http://localhost:4200/');
+    cy.visit('/');
     cy.get('button[title="Settings"]>.fd-top-nav__icon').should('exist');
     cy.get('button[title="Settings"]').should('contain', '');
   });
 
   it('Icon with label in LeftNav', () => {
-    cy.visit('http://localhost:4200/projects/pr1');
+    cy.get('.fd-shellbar')
+      .contains('Projects')
+      .click();
+    cy.get('.fd-app__sidebar .fd-side-nav__item')
+      .contains('Project One')
+      .click();
+
     cy.get('.fd-side-nav__subitem')
       .contains('Project Settings')
       .find('.fd-side-nav__icon')
@@ -95,9 +99,7 @@ describe('Navigation', () => {
           .click();
       });
 
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq('/projects/pr1/avengers/thor');
-      });
+      cy.expectPathToBe('/projects/pr1/avengers/thor');
 
       cy.get('.fd-app__sidebar').should('contain', 'Keep Selected Example');
     });
@@ -130,41 +132,43 @@ describe('Navigation', () => {
         .contains('Go to absolute path')
         .click();
 
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq('/settings');
-      });
+      cy.expectPathToBe('/settings');
 
       //go to relative path from the parent node
       goToAnotherNodeFeature();
       cy.get('.fd-app__sidebar .fd-side-nav__item')
         .contains('Go to relative path')
         .click();
 
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq('/projects/pr2/dps/dps1');
-      });
+      cy.expectPathToBe('/projects/pr2/dps/dps1');
 
       //go to relative path from node that is a sibiling
       goToAnotherNodeFeature();
       cy.get('.fd-app__sidebar .fd-side-nav__item')
         .contains('Keep Selected Example')
         .click();
 
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq('/projects/pr2/avengers');
-      });
+      cy.expectPathToBe('/projects/pr2/avengers');
 
       cy.get('.fd-app__sidebar .fd-side-nav__item')
         .contains('Go to relative path')
         .click();
 
-      cy.location().should(loc => {
-        expect(loc.pathname).to.eq('/projects/pr2/dps/dps1');
-      });
+      cy.expectPathToBe('/projects/pr2/dps/dps1');
     });
 
     it('Left navigation hidden', () => {
-      cy.visit('http://localhost:4200/projects/pr1/hideSideNav');
+      cy.get('.fd-shellbar')
+        .contains('Projects')
+        .click();
+      cy.get('.fd-app__sidebar .fd-side-nav__item')
+        .contains('Project One')
+        .click();
+
+      cy.get('.fd-app__sidebar')
+        .contains('Hide left navigation')
+        .click();
+
       cy.get('.no-side-nav').should('exist');
       cy.get('.fd-app__sidebar').should('not.be.visible');
     });