Use popup-sized viewport on Cypress tests where relevant

The smaller viewport let more authentic tests, and a real-life look-and-feel.

It is used on:
 - New Service popup
 - Audit-info of Instantiation Status
 - Templates modal

Issue-ID: VID-724

Change-Id: I4f9928a3f730085bd66f5920a14b3a44ef5a23ba
Signed-off-by: Ittay Stern <ittay.stern@att.com>

5 files changed, 39 insertions, 13 deletions

diff --git a/vid-webpack-master/cypress/integration/iFrames/auditInfo.modal.e2e.ts b/vid-webpack-master/cypress/integration/iFrames/auditInfo.modal.e2e.ts
index ee147a944..16ed21935 100644
--- a/vid-webpack-master/cypress/integration/iFrames/auditInfo.modal.e2e.ts
+++ b/vid-webpack-master/cypress/integration/iFrames/auditInfo.modal.e2e.ts
@@ -30,13 +30,15 @@ describe('Audit information modal', function () {
       cy.get('.instantiation-status-data tbody tr').each(function (row, index) {
         cy.get('.icon-menu').eq(index).click({force: true}).then(()=>{
           cy.getElementByDataTestsId('context-menu-audit-info').click({force:true}).then(()=>{
+            cy.setViewportToSmallPopup();
             cy.get('#service-model-name').should('contain', row.find('#serviceModelName').text().trim())
               .getElementByDataTestsId('model-item-value-userId').should('contain', row.find('#userId').text().trim())
               .get('#service-instantiation-audit-info-vid').should('be.visible')
               .get('#service-instantiation-audit-info-vid').find('#vidJobStatus').should('be.visible')
               .get('#service-instantiation-audit-info-mso').should('be.visible')
               .get('#service-instantiation-audit-info-mso').find('#msoJobStatus').should('be.visible')
-              .get('#cancelButton').click({force:true});
+              .get('#cancelButton').click({force: true})
+              .setViewportToDefault();
           })
         });
       });
@@ -46,6 +48,7 @@ describe('Audit information modal', function () {
       cy.openIframe('app/ui/#/instantiationStatus');
       cy.get('.icon-menu').eq(0).click({force:true}).then(() => {
         cy.getElementByDataTestsId('context-menu-audit-info').click({force:true}).then(() => {
+          cy.setViewportToSmallPopup();
           cy.get('#service-instantiation-audit-info-mso thead tr th#instanceName').should("not.be.visible")
             .get('#service-instantiation-audit-info-mso tbody tr td.msoInstanceName').should("not.be.visible");
         })
@@ -58,6 +61,7 @@ describe('Audit information modal', function () {
         cy.openIframe('app/ui/#/instantiationStatus');
         cy.get('.icon-menu').eq(7).click({force:true}).then(() => {
           cy.getElementByDataTestsId('context-menu-audit-info').click({force:true}).then(() => {
+            cy.setViewportToSmallPopup();
             cy.get('#service-instantiation-audit-info-mso thead tr th#instanceName').should("be.visible")
               .get('#service-instantiation-audit-info-mso tbody tr').each(function (row, index) {
               assert.equal(row.find('.request-id').text().trim(), res[index]['requestId']);
@@ -74,6 +78,7 @@ describe('Audit information modal', function () {
       cy.openIframe('app/ui/#/instantiationStatus');
       cy.get('.icon-menu').eq(7).click().then(() => {
         cy.getElementByDataTestsId('context-menu-audit-info').click().then(() => {
+          cy.setViewportToSmallPopup();
           cy.get('#glossary_link').should('be.visible');
         });
       })
diff --git a/vid-webpack-master/cypress/integration/iFrames/instantiation.templates.modal.e2e.ts b/vid-webpack-master/cypress/integration/iFrames/instantiation.templates.modal.e2e.ts
index 3786bc5e8..c8f8472ff 100644
--- a/vid-webpack-master/cypress/integration/iFrames/instantiation.templates.modal.e2e.ts
+++ b/vid-webpack-master/cypress/integration/iFrames/instantiation.templates.modal.e2e.ts
@@ -110,10 +110,7 @@ describe('Template', () => {
     cy.route(Cypress.config('baseUrl') + "/instantiationTemplates**", instantiationTemplates);
     cy.route(Cypress.config('baseUrl') + "/getuserID", '16807000');
 
-    cy.openIframe('/app/ui/#/servicePopup?serviceModelId=2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd&isCreate=true');
-
-
-
+    cy.openPopupIframe('/app/ui/#/servicePopup?serviceModelId=2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd&isCreate=true');
 
   });
 
@@ -172,7 +169,7 @@ describe('Template', () => {
     const vidBaseUrl = `http://localhost:8080/vid/serviceModels.htm`;
 
     cy.getElementByDataTestsId('row-5c2cd8e5-27d0-42e3-85a1-85db5eaba459').click();
-    cy.getElementByDataTestsId('LoadTemplateButton').click()
+    cy.getElementByDataTestsId('LoadTemplateButton').click().setViewportToDefault();
 
     cy.location().should((loc) => {
       expect(loc.toString()).to.eq(`${vidBaseUrl}#/servicePlanning/RECREATE?serviceModelId=${serviceModelId}&jobId=${jobId}`);
diff --git a/vid-webpack-master/cypress/integration/iFrames/service.popup.e2e.ts b/vid-webpack-master/cypress/integration/iFrames/service.popup.e2e.ts
index 7d1a1829d..83e6b4dbc 100644
--- a/vid-webpack-master/cypress/integration/iFrames/service.popup.e2e.ts
+++ b/vid-webpack-master/cypress/integration/iFrames/service.popup.e2e.ts
@@ -19,7 +19,7 @@ describe('Service popup', function () {
       cy.readFile('cypress/support/jsonBuilders/mocks/jsons/emptyServiceRedux.json').then((res1) => {
         res1.service.serviceHierarchy["2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd"].service.vidNotions.instantiationType = 'ALaCarte';
         cy.setReduxState(<any>res1);
-        cy.openIframe('/app/ui/#/servicePopup?serviceModelId=2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd&isCreate=true');
+        cy.openPopupIframe('/app/ui/#/servicePopup?serviceModelId=2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd&isCreate=true');
         cy.isElementContainsAttr('form-set', 'disabled');
         cy.get('label').contains('Instance name:').should('not.have.class', 'required')
           .get('label').contains('Subscriber name:').should('have.class', 'required')
@@ -36,14 +36,14 @@ describe('Service popup', function () {
         let isEcompNaming = false;
         res1.service.serviceHierarchy["2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd"].service.serviceEcompNaming = isEcompNaming.toString();
         cy.setReduxState(<any>res1);
-        cy.openIframe('/app/ui/#/servicePopup?serviceModelId=2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd&isCreate=true');
+        cy.openPopupIframe('/app/ui/#/servicePopup?serviceModelId=2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd&isCreate=true');
         cy.isElementContainsAttr('form-set', 'disabled');
         cy.get('label').contains('Instance name:').should('have.class', 'required');
       });
     });
 
     it('should contains basic selects with required astrix', function () {
-      cy.openIframe('/app/ui/#/servicePopup?serviceModelId=2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd&isCreate=true');
+      cy.openPopupIframe('/app/ui/#/servicePopup?serviceModelId=2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd&isCreate=true');
       cy.isElementContainsAttr('form-set', 'disabled');
       cy.get('label').contains('Subscriber name:').should('have.class', 'required')
         .get('label').contains('Service type:').should('have.class', 'required')
@@ -57,7 +57,7 @@ describe('Service popup', function () {
     });
 
     it('should be able fill all selects', function () {
-      cy.openIframe('/app/ui/#/servicePopup?serviceModelId=2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd&isCreate=true');
+      cy.openPopupIframe('/app/ui/#/servicePopup?serviceModelId=2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd&isCreate=true');
 
       cy.selectDropdownOptionByText('subscriberName', 'SILVIA ROBBINS');
       cy.selectDropdownOptionByText('serviceType', 'TYLER SILVIA');
@@ -76,7 +76,7 @@ describe('Service popup', function () {
       cy.readFile('cypress/support/jsonBuilders/mocks/jsons/emptyServiceRedux.json').then((res1) => {
         res1.service.categoryParameters.owningEntityList = [];
         cy.setReduxState(<any>res1);
-        cy.openIframe('/app/ui/#/servicePopup?serviceModelId=2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd&isCreate=true');
+        cy.openPopupIframe('/app/ui/#/servicePopup?serviceModelId=2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd&isCreate=true');
 
         cy.get('.message').contains('No results for this request. Please change criteria.');
         cy.get('form-general-error').contains('Page contains errors. Please see details next to the relevant fields.');
@@ -84,7 +84,7 @@ describe('Service popup', function () {
     });
 
     it('when open service popup should show showPrevious button', () => {
-      cy.openIframe('/app/ui/#/servicePopup?serviceModelId=2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd&isCreate=true');
+      cy.openPopupIframe('/app/ui/#/servicePopup?serviceModelId=2f80c596-27e5-4ca9-b5bb-e03a7fd4c0fd&isCreate=true');
       cy.getElementByDataTestsId('ShowPreviousInstancesButton').contains('Previous Instantiation').click();
 
     })
diff --git a/vid-webpack-master/cypress/support/index.js b/vid-webpack-master/cypress/support/index.js
index ae125c469..5062f5100 100644
--- a/vid-webpack-master/cypress/support/index.js
+++ b/vid-webpack-master/cypress/support/index.js
@@ -31,11 +31,11 @@ import './jsonBuilders/mocks/aai.mock';
 import './jsonBuilders/mocks/vid.mock';
 import './jsonBuilders/mocks/permission.mock';
 
-
 import './steps/general/compareDeepObjects.step';
 import './steps/drawingBoard/drawingBoardModel.steps';
 import './steps/drawingBoard/drawingBoardTree.steps';
 import './steps/genericForm/genericFormAction.steps';
+import './steps/genericForm/popupViewport.step';
 import './steps/drawingBoard/drawingBoardHeader.steps';
 import './steps/drawingBoard/general.steps';
 import './steps/general/clickOutside.step';
diff --git a/vid-webpack-master/cypress/support/steps/genericForm/popupViewport.step.ts b/vid-webpack-master/cypress/support/steps/genericForm/popupViewport.step.ts
new file mode 100644
index 000000000..2fbcf406f
--- /dev/null
+++ b/vid-webpack-master/cypress/support/steps/genericForm/popupViewport.step.ts
@@ -0,0 +1,24 @@
+declare namespace Cypress {
+  interface Chainable {
+    setViewportToDefault: typeof setViewportToDefault,
+    setViewportToSmallPopup: typeof setViewportToSmallPopup,
+    openPopupIframe: typeof openPopupIframe,
+  }
+}
+
+function setViewportToDefault() {
+  cy.viewport(Cypress.config('viewportWidth'), Cypress.config('viewportHeight'));
+}
+
+function setViewportToSmallPopup() {
+  cy.viewport(1103, 691); // the iframe.popup property on common.css
+}
+
+function openPopupIframe(iframeUrl : string): Chainable<Window> {
+  cy.setViewportToSmallPopup();
+  return cy.visit(iframeUrl);
+}
+
+Cypress.Commands.add('setViewportToDefault', setViewportToDefault);
+Cypress.Commands.add('setViewportToSmallPopup', setViewportToSmallPopup);
+Cypress.Commands.add('openPopupIframe', openPopupIframe);