From 8df41ae15a2952ba092e6812eee9a097f69a6ed9 Mon Sep 17 00:00:00 2001
From: Kasim Necdet Percinel <kasim.n.percinel@nasa.gov>
Date: Thu, 18 Jul 2024 15:31:55 -0400
Subject: [PATCH] Fix/download file name from screenshot  (#585)

* use forked version of react-modal-image

* implement regression tests

* remove test.only

---------

Co-authored-by: Daniel Garcia Briseno <94071409+dgarciabriseno@users.noreply.github.com>
---
 package-lock.json                             |  9 ++--
 package.json                                  |  4 +-
 ...nshot_should_have_correct_filename.spec.ts | 44 +++++++++++++++++++
 tests/page_objects/screenshot.ts              | 10 +++++
 4 files changed, 60 insertions(+), 7 deletions(-)
 create mode 100644 tests/desktop/normal/regression/download_from_screenshot_should_have_correct_filename.spec.ts

diff --git a/package-lock.json b/package-lock.json
index 035904a31..92ca50e92 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,8 @@
   "packages": {
     "": {
       "dependencies": {
-        "jhvrequest": "^0.0.9"
+        "jhvrequest": "^0.0.9",
+        "react-modal-image": "github:mudhoney/react-modal-image#master"
       },
       "devDependencies": {
         "@babel/cli": "^7.23.4",
@@ -20,7 +21,6 @@
         "prettier": "^3.1.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-modal-image": "^2.6.0",
         "webpack": "^5.89.0",
         "webpack-cli": "^5.1.4",
         "xmldom": "^0.6.0",
@@ -6994,9 +6994,8 @@
     },
     "node_modules/react-modal-image": {
       "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/react-modal-image/-/react-modal-image-2.6.0.tgz",
-      "integrity": "sha512-NNc1xPKzFAn0VsNMdJ8NXt6c54aL/z0fcoYmw9qn4SBUONdGl+8LOQ0sTfo0wtdzcjLiby/ncloHcAL+UI+wIA==",
-      "dev": true
+      "resolved": "git+ssh://git@github.com/mudhoney/react-modal-image.git#426ce13c9ee6419d8eac605c89d2a0de51ef7718",
+      "license": "MIT"
     },
     "node_modules/readdirp": {
       "version": "3.6.0",
diff --git a/package.json b/package.json
index 475d1d5cf..abb935607 100644
--- a/package.json
+++ b/package.json
@@ -16,13 +16,13 @@
     "prettier": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-modal-image": "^2.6.0",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "xmldom": "^0.6.0",
     "xmlhttprequest": "^1.8.0"
   },
   "dependencies": {
-    "jhvrequest": "^0.0.9"
+    "jhvrequest": "^0.0.9",
+    "react-modal-image": "github:mudhoney/react-modal-image#master"
   }
 }
diff --git a/tests/desktop/normal/regression/download_from_screenshot_should_have_correct_filename.spec.ts b/tests/desktop/normal/regression/download_from_screenshot_should_have_correct_filename.spec.ts
new file mode 100644
index 000000000..f3e559bf9
--- /dev/null
+++ b/tests/desktop/normal/regression/download_from_screenshot_should_have_correct_filename.spec.ts
@@ -0,0 +1,44 @@
+import { test, expect } from '@playwright/test';
+import { Helioviewer } from '../../../page_objects/helioviewer';
+import * as fs from 'fs';
+
+/**
+ * This test will make Helioviewer load the default AIA 304 image,
+ * will make a screenshot out of it, and view the screenshot and check the filename we download 
+ * and it should have the correct filename
+ */
+test('Download from screenshot fullscreen view, should correctly set filename', async ({ page, browserName }) => {
+
+  test.fixme(browserName === 'webkit', "We couldn't be able to trigger download event for webkit, skipping this test now");
+
+  let hv = new Helioviewer(page);
+
+  // load helioviewer
+  // Action 1 : BROWSE TO HELIOVIEWER
+  await hv.Load();
+  await hv.CloseAllNotifications();
+
+  // Action 2: OPEN SCREENSHOT DRAWER
+  await hv.screenshot.toggleScreenshotDrawer();
+
+  // ACTION 3: MAKE A SCREENSHOT AND WAIT FOR THE SUCCESS MESSAGE
+  await hv.screenshot.createFullScreenshot();
+  await hv.screenshot.waitForScreenshotCompleteNotifitication(); 
+
+  // assert there should be one screenshot in drawer
+  await hv.screenshot.assertScreenshotCountFromDrawer(1);
+
+  // ACTION 4: OPEN THE SCREENSHOT TO VIEW IT 
+  await hv.screenshot.viewScreenshotFromScreenshotHistory(1);
+  await hv.WaitForImageLoad();
+
+  // now download screenshot from screenshot view via download button 
+  const screenshotFileFromScreenshotView = await hv.screenshot.downloadScreenshotFromViewScreenshotFeature();
+
+  // ACTION 5: CLICK TO DOWNLOAD THE SCREENSHOT
+  const download = await hv.screenshot.fetchScreenshotFromViewScreenshotFeature();
+
+  // Expect the filename matches with our screenshot filenames
+  await expect(download.suggestedFilename()).toMatch(/\d{4}_\d{2}_\d{2}_\d{2}_\d{2}_\d{2}_AIA_304\.png/);
+
+});
diff --git a/tests/page_objects/screenshot.ts b/tests/page_objects/screenshot.ts
index 81cf43f2c..575cd2cbc 100644
--- a/tests/page_objects/screenshot.ts
+++ b/tests/page_objects/screenshot.ts
@@ -76,6 +76,16 @@ class Screenshot {
       return Buffer.concat(chunks).toString('base64');
     }
 
+    /**
+     * Downloads screenshot from screenshot view ( when you press screenshot history links ) 
+     * @return string base64 version of the downloaded screenshot
+     */
+    async fetchScreenshotFromViewScreenshotFeature() {
+      const downloadPromise = this.page.waitForEvent('download');
+      await this.page.locator('.__react_modal_image__icon_menu > a:nth-of-type(1)').click();
+      return await downloadPromise;
+    }
+
     /**
      * Downloads screenshot from screenshot view ( when you press screenshot history links ) 
      * @return string base64 version of the downloaded screenshot