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 <[email protected]>

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"
   }
 }

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/);
+
+});

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