tests: Download Image File Modal (#1219)

* E2E Tests: Download Image File Modal * CI fix * Fixes for PR comments * Small change just to check CI behavior * Fix for CI failure: comparing classes instead of image src * Fixed Download button test and blocked Download Dialog event * Deleting file ConnectedViewportDownloadForm.js This file was not supposed to be created by this PR. It was already deleted by another user on Master branch. * Removing wrong import line * Fixes based on PR comments * Fixes based on PR comments * test: remove assignment to window
2019-12-11 13:46:10 -03:00 · 2019-12-11 13:46:10 -03:00 · f4570c96c2
commit f4570c96c2
parent 1fe951a71e
6 changed files with 165 additions and 10 deletions
--- a/platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.js
+++ b/platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.js
@ -196,11 +196,12 @@ const ViewportDownloadForm = ({
        )}
      </div>

-      <div className="file-info-container">
+      <div className="file-info-container" data-cy="file-info-container">
        <div className="col">
          <div className="width">
            <TextInput
              type="number"
+              data-cy="image-width"
              min={minimumSize}
              max={maximumSize}
              value={width}
@ -211,6 +212,7 @@ const ViewportDownloadForm = ({
          <div className="height">
            <TextInput
              type="number"
+              data-cy="image-height"
              min={minimumSize}
              max={maximumSize}
              value={height}
@ -224,6 +226,7 @@ const ViewportDownloadForm = ({
          <div className="file-name">
            <TextInput
              type="text"
+              data-cy="file-name"
              value={filename}
              onChange={event => setFilename(event.target.value)}
              label={t('File name')}
@ -233,6 +236,7 @@ const ViewportDownloadForm = ({
          <div className="file-type">
            <Select
              value={fileType}
+              data-cy="file-type"
              onChange={event => setFileType(event.target.value)}
              options={FILE_TYPE_OPTIONS}
              label={t('File type')}
@ -245,6 +249,7 @@ const ViewportDownloadForm = ({
            <label htmlFor="show-annotations" className="form-check-label">
              <input
                id="show-annotations"
+                data-cy="show-annotations"
                type="checkbox"
                className="form-check-input"
                checked={showAnnotations}
@ -278,23 +283,33 @@ const ViewportDownloadForm = ({
        ></canvas>
      </div>

-      <div className="preview">
+      <div className="preview" data-cy="image-preview">
        <h4> {t('Image Preview')}</h4>
        <img
          className="viewport-preview"
          src={viewportPreview.src}
          alt="Viewport Preview"
+          data-cy="viewport-preview-img"
        />
      </div>

      <div className="actions">
        <div className="action-cancel">
-          <button type="button" className="btn btn-danger" onClick={onClose}>
+          <button
+            type="button"
+            data-cy="cancel-btn"
+            className="btn btn-danger"
+            onClick={onClose}
+          >
            {t('Cancel')}
          </button>
        </div>
        <div className="action-save">
-          <button onClick={downloadImage} className="btn btn-primary">
+          <button
+            onClick={downloadImage}
+            className="btn btn-primary"
+            data-cy="download-btn"
+          >
            {t('Download')}
          </button>
        </div>
--- a/platform/ui/src/components/ohifModal/OHIFModal.js
+++ b/platform/ui/src/components/ohifModal/OHIFModal.js
@ -29,7 +29,7 @@ const OHIFModal = ({
  const renderHeader = () => {
    return (
      title && (
-        <div className="OHIFModal__header">
+        <div className="OHIFModal__header" data-cy="modal-header">
          <h4>{title}</h4>
          {closeButton && (
            <button data-cy="close-button" onClick={onClose}>
@ -44,6 +44,7 @@ const OHIFModal = ({
  return (
    <Modal
      className={classNames('OHIFModal', className)}
+      data-cy="modal"
      shouldCloseOnEsc={shouldCloseOnEsc}
      isOpen={isOpen}
      title={title}
@ -51,7 +52,9 @@ const OHIFModal = ({
    >
      <>
        {renderHeader()}
-        <div className="OHIFModal__content">{children}</div>
+        <div className="OHIFModal__content" data-cy="modal-content">
+          {children}
+        </div>
      </>
    </Modal>
  );
--- a/platform/viewer/cypress/integration/common/OHIFCornerstoneHotkeys.spec.js
+++ b/platform/viewer/cypress/integration/common/OHIFCornerstoneHotkeys.spec.js
@ -81,10 +81,8 @@ describe('OHIF Cornerstone Hotkeys', () => {
  });

  it('uses hotkeys "RightArrow" and "LeftArrow" to navigate between multiple viewports', () => {
-    //Click on Layout button
-    cy.get('@layoutBtn').click();
-    //Select 3 viewports
-    cy.get('tbody > :nth-child(1) > :nth-child(3)').click();
+    //Select viewport layout (3,1)
+    cy.setLayout(3, 1);
    cy.waitViewportImageLoading();

    // Press multiples hotkeys on viewport #1
--- a/platform/viewer/cypress/integration/common/OHIFDownloadSnapshotFile.spec.js
+++ b/platform/viewer/cypress/integration/common/OHIFDownloadSnapshotFile.spec.js
@ -0,0 +1,126 @@
+describe('OHIF Download Snapshot File', () => {
+  before(() => {
+    cy.openStudy('MISTER^MR');
+    cy.waitDicomImage();
+    cy.expectMinimumThumbnails(5);
+  });
+
+  beforeEach(() => {
+    cy.openDownloadImageModal();
+  });
+
+  afterEach(() => {
+    // Close modal
+    cy.get('[data-cy="close-button"]')
+      .scrollIntoView()
+      .click();
+  });
+
+  it('checks displayed information for Tablet experience', function() {
+    // Set Tablet resolution
+    cy.viewport(1000, 660);
+    // Visual comparison
+    cy.screenshot('Download Image Modal - Tablet experience');
+    cy.percyCanvasSnapshot('Download Image Modal - Tablet experience');
+  });
+
+  it('checks displayed information for Desktop experience', function() {
+    // Set Desktop resolution
+    cy.viewport(1750, 720);
+    // Visual comparison
+    cy.screenshot('Download Image Modal - Desktop experience');
+    cy.percyCanvasSnapshot('Download Image Modal - Desktop experience');
+    //Check if all elements are displayed
+    cy.get('[data-cy=modal-header]')
+      .as('downloadImageModal')
+      .should('contain.text', 'Download High Quality Image');
+    // Check input fields
+    cy.get('[data-cy=file-type]')
+      .select('png')
+      .should('have.value', 'png')
+      .select('jpg')
+      .should('have.value', 'jpg');
+    // Check image preview
+    cy.get('[data-cy="image-preview"]').should('contain.text', 'Image Preview');
+    cy.get('[data-cy="viewport-preview-img"]')
+      .should('have.attr', 'src')
+      .and('include', 'data:image');
+    // Check buttons
+    cy.get('[data-cy="cancel-btn"]')
+      .scrollIntoView()
+      .should('be.visible');
+    cy.get('[data-cy="download-btn"]')
+      .scrollIntoView()
+      .should('be.visible');
+  });
+
+  it('cancel changes on download modal', function() {
+    //Change Image Width, Filename and File Type
+    cy.get('[data-cy="image-width"]')
+      .clear()
+      .type('300');
+    cy.get('[data-cy="image-height"]') //Image Height should be the same as width
+      .should('have.value', '300');
+    cy.get('[data-cy="file-name"]')
+      .clear()
+      .type('new-filename');
+    cy.get('[data-cy=file-type]').select('png');
+    //Click on Cancel button
+    cy.get('[data-cy="cancel-btn"]')
+      .scrollIntoView()
+      .click();
+    //Check modal is closed
+    cy.get('[data-cy="modal"]').should('not.exist');
+    //Open Modal
+    cy.openDownloadImageModal();
+    //Verify default values was restored
+    cy.get('[data-cy="image-width"]').should('have.value', '512');
+    cy.get('[data-cy="file-name"]').should('have.value', 'image');
+    cy.get('[data-cy=file-type]').should('have.value', 'jpg');
+  });
+
+  // TO-DO once issue is fixed: https://github.com/OHIF/Viewers/issues/1217
+  // it('checks error messages for empty fields', function() {
+  //   //Clear fields Image Width and Filename
+  //   cy.get('[data-cy="image-width"]')
+  //     .clear();
+  //   cy.get('[data-cy="file-name"]').clear();
+
+  //   //Click on Download button
+  //   cy.get('[data-cy="download-btn"]')
+  //     .scrollIntoView()
+  //     .click();
+  //   //Check error message
+  // });
+
+  it('checks if "Show Annotations" checkbox will display annotations', function() {
+    // Close modal that is initially opened
+    cy.get('[data-cy="close-button"]').click();
+
+    // Add measurements in the viewport
+    cy.addLengthMeasurement();
+    cy.addAngleMeasurement();
+
+    // Open Modal
+    cy.openDownloadImageModal();
+    // Select "Show Annotations" option
+    cy.get('[data-cy="show-annotations"]').check();
+    // Check image preview
+    cy.get('[data-cy="image-preview"]').scrollIntoView();
+    // Visual comparison
+    cy.screenshot('Download Image Modal - Show Annotations checked');
+    cy.percyCanvasSnapshot('Download Image Modal - Show Annotations checked');
+    //Compare classes that exists on Image Preview with Annotations and Without Annotation
+    cy.get('[data-cy="modal-content"]')
+      .find('canvas')
+      .should('have.class', 'magnifyTool'); //Class "MagnifyTool" exists with annotations displayed on Image preview
+    // Uncheck "Show Annotations" option
+    cy.get('[data-cy="show-annotations"]')
+      .uncheck()
+      .wait(300);
+    // Check that class "MagnifyTool" should not exist
+    cy.get('[data-cy="modal-content"]')
+      .find('canvas')
+      .should('not.have.class', 'magnifyTool');
+  });
+});
--- a/platform/viewer/cypress/support/aliases.js
+++ b/platform/viewer/cypress/support/aliases.js
@ -11,6 +11,7 @@ export function initCornerstoneToolsAliases() {
  cy.get('.ToolbarRow > :nth-child(10)').as('cineBtn');
  cy.get('.expandableToolMenu').as('moreBtn');
  cy.get('.btn-group > .toolbar-button').as('layoutBtn');
+  cy.get('.viewport-element').as('viewport');
 }

 //Creating aliases for Common page elements
--- a/platform/viewer/cypress/support/commands.js
+++ b/platform/viewer/cypress/support/commands.js
@ -469,6 +469,18 @@ Cypress.Commands.add(
  }
 );

+Cypress.Commands.add('openDownloadImageModal', () => {
+  // Click on More button
+  cy.get('.expandableToolMenu')
+    .as('moreBtn')
+    .click();
+
+  // Click on Download button
+  cy.get('.tooltip-inner > :nth-child(13)')
+    .as('downloadBtn')
+    .click();
+});
+
 Cypress.Commands.add('setLanguage', (language, save = true) => {
  cy.openPreferences();