test: [TEST E2E] Drag and drop thumbnail into viewport (#904)

* TEST E2E: Drag and drop thumbnail into viewport
* TEST E2E: Drag and drop thumbnail into viewport
* fix: add pollyfill to script-tag template
* Add wait's to command
* Try to store artifacts
* ci: updated artifact location
* Changing Patient to MisterMR
* Refactors based on PR comments
* Adding new sub-folders to separate the testing scripts according to context/features
* Adding test cases for Side Panels Measurements and Series
* Removing duplicated file OHIFStudyViewer.spec.js

.circleci/config.yml

@@ -234,13 +234,16 @@ workflows:
             - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
                 add wait-on' # Use yarn latest
           yarn: true
-          store_artifacts: true
+          store_artifacts: false
           working_directory: platform/viewer
           build: yarn run build
           start: yarn run test:e2e:dist
           wait-on: 'http://localhost:3000'
           cache-key: 'yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}'
           no-workspace: true # Don't persist workspace
+          post-steps:
+            - store_artifacts:
+                path: platform/viewer/cypress/screenshots
           requires:
             - UNIT_TESTS
       # E2E: script-tag
@@ -250,13 +253,16 @@ workflows:
             - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
                 add wait-on' # Use yarn latest
           yarn: true
-          store_artifacts: true
+          store_artifacts: false
           working_directory: platform/viewer
           build: yarn run build:package
           start: yarn run test:e2e:dist
           wait-on: 'http://localhost:3000'
           cache-key: 'yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}'
           no-workspace: true # Don't persist workspace
+          post-steps:
+            - store_artifacts:
+                path: platform/viewer/cypress/screenshots
           requires:
             - UNIT_TESTS
 
@@ -286,6 +292,8 @@ workflows:
           cache-key: 'yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}'
           no-workspace: true # Don't persist workspace
           post-steps:
+            - store_artifacts:
+                path: platform/viewer/cypress/screenshots
             - store_test_results:
                 path: cypress/results
           requires:
@@ -297,7 +305,7 @@ workflows:
             - run: 'rm -rf ~/.yarn && npm i -g yarn && yarn -v && yarn global
                 add wait-on' # Use yarn latest
           yarn: true
-          store_artifacts: true
+          store_artifacts: false
           working_directory: platform/viewer
           build: yarn run build:package
           start: yarn run test:e2e:dist
@@ -305,6 +313,8 @@ workflows:
           cache-key: 'yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}'
           no-workspace: true # Don't persist workspace
           post-steps:
+            - store_artifacts:
+                path: platform/viewer/cypress/screenshots
             - store_test_results:
                 path: cypress/results
           requires:

platform/viewer/cypress.json

@@ -1,5 +1,6 @@
 {
   "baseUrl": "http://localhost:3000",
-  "video": true,
+  "video": false,
+  "chromeWebSecurity": false,
   "projectId": "4oe38f"
 }

platform/viewer/cypress/helpers/DragSimulator.js

@@ -0,0 +1,78 @@
+const dataTransfer = new DataTransfer();
+
+export const DragSimulator = {
+      MAX_TRIES: 1,
+      DELAY_INTERVAL_MS: 10,
+      counter: 0,
+      rectsEqual(r1, r2) {
+        return (
+          r1.top === r2.top &&
+          r1.right === r2.right &&
+          r1.bottom === r2.bottom &&
+          r1.left === r2.left
+        );
+      },
+      get dropped() {
+        const currentSourcePosition = this.source.getBoundingClientRect();
+        return !this.rectsEqual(
+          this.initialSourcePosition,
+          currentSourcePosition
+        );
+      },
+      get hasTriesLeft() {
+        return this.counter < this.MAX_TRIES;
+      },
+      dragstart() {
+        cy.log('**DRAG START**');
+        cy.wrap(this.source)
+          .trigger('mousedown', { which: 1, button: 0 })
+          .trigger('dragstart', { dataTransfer })
+          .trigger('drag', {});
+      },
+      drop() {
+        cy.log('**DROP**');
+        return cy
+          .wrap(this.target)
+          .trigger('mousemove', 'center')
+          .trigger('dragover', { dataTransfer, force: true })
+          .trigger('drop', { dataTransfer, force: true })
+          .trigger('dragend', { dataTransfer })
+          .trigger('mouseup', { which: 1, button: 0 });
+      },
+      dragover() {
+        cy.log('**DRAGOVER**');
+        if (!this.dropped && this.hasTriesLeft) {
+          this.counter += 1;
+          return cy
+            .wrap(this.target)
+            .trigger('mousemove', 'center')
+            .trigger('dragover', {
+              dataTransfer,
+              position: this.position,
+            })
+            .wait(this.DELAY_INTERVAL_MS)
+            .then(() => this.dragover());
+        }
+        return this.drop().then(() => true);
+      },
+      init(source, target, position) {
+        this.source = source;
+        this.target = target;
+        this.position = position;
+        this.counter = 0;
+
+        this.dragstart();
+
+        return cy.wait(this.DELAY_INTERVAL_MS).then(() => {
+          this.initialSourcePosition = this.source.getBoundingClientRect();
+          return this.dragover();
+        });
+      },
+      simulate(sourceWrapper, targetSelector, position = 'center') {
+        return cy
+          .get(targetSelector)
+          .then(targetWrapper =>
+            this.init(sourceWrapper.get(0), targetWrapper.get(0), position)
+          );
+      },
+    };

platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js

@@ -0,0 +1,48 @@
+describe('OHIF Study Viewer Page', () => {
+  
+  before(() => {
+      cy.openStudy("MISTER^MR");
+    });
+  
+    it('checks if series thumbnails are being displayed', ()=> {
+      cy.get('.ThumbnailEntryContainer')
+      .its('length')
+      .should('be.gt', 1);
+    });
+
+    it('drags and drop a series thumbnail into viewport', () => {
+      cy.get('.ThumbnailEntryContainer:nth-child(2)') //element to be dragged
+        .drag('.cornerstone-canvas'); //dropzone element
+      
+      const overlaySeriesInformation = 'div.ViewportOverlay > div.bottom-left.overlay-element > div';
+      const expectedText = 'Ser: 2Img: 1 1/13512 x 512Loc: -17.60 mm Thick: 3.00 mm';
+        
+      cy.get(overlaySeriesInformation)
+        .should('have.text', expectedText);
+    });
+
+    it('checks if Series left panel can be hidden/displayed', ()=> {
+      const seriesButton = '.pull-left > .RoundedButtonGroup > .roundedButtonWrapper > .roundedButton';
+      const leftPanel = 'section.sidepanel.from-left';
+
+      cy.get(seriesButton).click(); 
+      cy.get(leftPanel).should('not.be.enabled')
+
+      cy.get(seriesButton).click();
+      cy.get(leftPanel).should('be.visible');
+    });
+
+    it('checks if Measurements right panel can be hidden/displayed', ()=> {
+      const measurementsButton = '.pull-right > .RoundedButtonGroup > .roundedButtonWrapper > .roundedButton';
+      const rightPanel = 'section.sidepanel.from-right';
+
+      cy.get(measurementsButton).click();
+      cy.get(rightPanel).should('be.visible');
+      
+      
+      cy.get(measurementsButton).click();
+      cy.get(rightPanel).should('not.be.enabled');
+    });
+
+  });
+  

platform/viewer/cypress/support/commands.js

@@ -1,3 +1,5 @@
+import { DragSimulator } from "../helpers/DragSimulator.js";
+
 // ***********************************************
 // This example commands.js shows you how to
 // create various custom commands and overwrite
@@ -23,3 +25,17 @@
 //
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+Cypress.Commands.add('openStudy', (patientName) => {
+    cy.visit('/');
+    cy.get('#patientName')
+      .type(patientName);
+    cy.get('.studylistStudy > .patientName')
+      .contains(patientName)
+      .click();
+  }
+);
+
+Cypress.Commands.add('drag', {prevSubject: 'element',},
+  (...args) => DragSimulator.simulate(...args)
+);

platform/viewer/public/html-templates/script-tag.html

@@ -17,6 +17,8 @@
     <meta name="HandheldFriendly" content="True" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
 
+    <script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default%2CObject.values%2CArray.prototype.flat%2CObject.entries%2CSymbol%2CArray.prototype.includes%2CString.prototype.repeat%2CArray.prototype.find"></script>
+
     <!-- WEB FONTS -->
     <link
       href="https://fonts.googleapis.com/css?family=Sanchez"