From a18b292a9d77efa26a68e51bca68daaa18217b8f Mon Sep 17 00:00:00 2001 From: Mirna Silva Date: Mon, 16 Sep 2019 22:26:14 -0300 Subject: [PATCH] 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 | 16 +++- platform/viewer/cypress.json | 3 +- .../viewer/cypress/helpers/DragSimulator.js | 78 +++++++++++++++++++ .../{ => common}/OHIFStandaloneViewer.spec.js | 0 .../common/OHIFStudyViewer.spec.js | 48 ++++++++++++ .../{ => common}/ViewerRouting.spec.js | 0 platform/viewer/cypress/support/commands.js | 16 ++++ .../public/html-templates/script-tag.html | 2 + 8 files changed, 159 insertions(+), 4 deletions(-) create mode 100644 platform/viewer/cypress/helpers/DragSimulator.js rename platform/viewer/cypress/integration/{ => common}/OHIFStandaloneViewer.spec.js (100%) create mode 100644 platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js rename platform/viewer/cypress/integration/{ => common}/ViewerRouting.spec.js (100%) diff --git a/.circleci/config.yml b/.circleci/config.yml index 5825d8d83..20551b005 100644 --- a/.circleci/config.yml +++ b/.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: diff --git a/platform/viewer/cypress.json b/platform/viewer/cypress.json index fcca1f583..9e798681d 100644 --- a/platform/viewer/cypress.json +++ b/platform/viewer/cypress.json @@ -1,5 +1,6 @@ { "baseUrl": "http://localhost:3000", - "video": true, + "video": false, + "chromeWebSecurity": false, "projectId": "4oe38f" } diff --git a/platform/viewer/cypress/helpers/DragSimulator.js b/platform/viewer/cypress/helpers/DragSimulator.js new file mode 100644 index 000000000..fb5f68ae4 --- /dev/null +++ b/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) + ); + }, + }; \ No newline at end of file diff --git a/platform/viewer/cypress/integration/OHIFStandaloneViewer.spec.js b/platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js similarity index 100% rename from platform/viewer/cypress/integration/OHIFStandaloneViewer.spec.js rename to platform/viewer/cypress/integration/common/OHIFStandaloneViewer.spec.js diff --git a/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js b/platform/viewer/cypress/integration/common/OHIFStudyViewer.spec.js new file mode 100644 index 000000000..4e4e65c73 --- /dev/null +++ b/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'); + }); + + }); + \ No newline at end of file diff --git a/platform/viewer/cypress/integration/ViewerRouting.spec.js b/platform/viewer/cypress/integration/common/ViewerRouting.spec.js similarity index 100% rename from platform/viewer/cypress/integration/ViewerRouting.spec.js rename to platform/viewer/cypress/integration/common/ViewerRouting.spec.js diff --git a/platform/viewer/cypress/support/commands.js b/platform/viewer/cypress/support/commands.js index c1f5a772e..1d0951113 100644 --- a/platform/viewer/cypress/support/commands.js +++ b/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) +); diff --git a/platform/viewer/public/html-templates/script-tag.html b/platform/viewer/public/html-templates/script-tag.html index 7c4867a4e..1d084d5ad 100644 --- a/platform/viewer/public/html-templates/script-tag.html +++ b/platform/viewer/public/html-templates/script-tag.html @@ -17,6 +17,8 @@ + +