Bugfixes and regression tests for #647 #649 #650 (#651)

* fix youtube tests flakiness

* add function for moving earth scale indicator

* regression test for #647

* default baseDiffTime should be UTC

* helper function to identify ISO8601 date strings, also do not do conversions if they are already in ISO8601

* fix newly added layers to UTC and use correct ISO8601 date strings

* regression tests for issue_649

* new function for layers, to get base difference date as a Date object

* add regression tests for issue_650

* add clearStorage get var to be able to clean local storage for development

* fix image name path

* snapshots for issue 647

* prettier and tscheck things

index.php

@@ -20,6 +20,16 @@
 		$debug = true;
 	}
 
+    if (isset($_GET['clearStorage'])) {
+?>
+        <script type="text/javascript">
+            document.addEventListener('DOMContentLoaded', function() {
+                localStorage.clear();
+            });
+        </script>
+<?php
+    }
+
 	$debugTime = 0;
 	if($debug){
 		$debugTime = time();

resources/js/Tiling/Manager/HelioviewerTileLayerManager.js

@@ -79,6 +79,7 @@ var HelioviewerTileLayerManager = TileLayerManager.extend(
             currentLayers.push(layer.image.getLayerName());
         });
 
+
         // Remove existing layers from queue
         if (!!currentLayers.length) {
             // STEREO A
@@ -104,10 +105,11 @@ var HelioviewerTileLayerManager = TileLayerManager.extend(
         // Pull off the next layer on the queue
         while (!queueChoiceIsValid) {
             next = queue[i] || defaultLayer;
-            var date = new Date(+new Date());
-            var dateDiffObj = new Date($('#date').val() +' '+$('#time').val());
+            var dateDiffObj = new Date($('#date').val() +' '+$('#time').val()+' UTC');
             var dateDiff = new Date(dateDiffObj - 60*60*1000);
-            params = parseLayerString(next + ',1,100,0,60,1,'+dateDiff.toDateString()+'T'+dateDiff.toTimeString());
+
+            let generatedLayerString = next + ',1,100,0,60,1,'+dateDiff.toISOString();
+            params = parseLayerString(generatedLayerString);
 
             if (this.checkDataSource(params.uiLabels)) {
                 queueChoiceIsValid = true;

resources/js/Utility/HelperFunctions.js

@@ -691,12 +691,27 @@ function carringtons_to_timestamps(carringtons){
 	return timestamps;
 }
 
+/*
+ * @description Function for testing if a given string is ISO8601 datetime string
+ * @param {string} dateTimeStr , datetime string to check
+ * @return {boolean} true if string is ISO8601 datetime string
+ */
+function isISODateTimeString(dateTimeStr) {
+    const isoDateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{1,3})?Z$/;
+    return isoDateRegex.test(dateTimeStr);
+}
+
+
 
 
 // Formatting of timestamps to remove excessive .000z
 function formatLyrDateString(tmpLayerDateStr) {
 
-   let frmtTmpDateStr= tmpLayerDateStr.replace(' ', 'T').replace(/\//g, '-').replace(/.000Z/g, '') + '.000Z';
+   if (isISODateTimeString(tmpLayerDateStr)) {
+       return tmpLayerDateStr;
+   }
+
+   let frmtTmpDateStr = tmpLayerDateStr.replace(' ', 'T').replace(/\//g, '-').replace(/.000Z/g, '') + '.000Z';
 
    return frmtTmpDateStr;
 

resources/js/Utility/SettingsLoader.js

@@ -252,7 +252,7 @@ var SettingsLoader = (
                     "difference" : 0,//0 - normal, 1 - running difference, 2 - base difference
                     "diffCount"  : 60,
                     "diffTime"   : 1,// 0-seconds, 1-minutes, 2-hours, 3-days, 4-weeks, 5-month, 6-years
-                    "baseDiffTime" : dateDiff.toDateString()+' '+dateDiff.toTimeString(),
+                    "baseDiffTime" : dateDiff.toUTCDateString()+' '+dateDiff.toUTCTimeString(),
                     "uiLabels"   : [ {'label':'Observatory',
                                     'name' :'SDO'},
                                    {'label':'Instrument',

tests/desktop/normal/regression/issue_647.spec.ts

@@ -0,0 +1,56 @@
+import { test, expect } from "@playwright/test";
+import { Helioviewer } from "../../../page_objects/helioviewer";
+import * as fs from "fs";
+
+/**
+ * This test is a regression test for proving issue 647 is fixed for the given helioviewer
+ * @see https://github.com/Helioviewer-Project/helioviewer.org/issues/647
+ */
+test("Issue 647, Movie making,  'Earth Scale Indicator' is off location if the requested movie needs tobe in resolution other than 'Original' ", async ({
+  page,
+  browser
+}, info) => {
+  const hv = new Helioviewer(page, info);
+
+  // 1. LOAD HV
+  await hv.Load();
+  await hv.CloseAllNotifications();
+  await hv.OpenSidebar();
+
+  // 2. USE NEWEST SOHO
+  const layer = await hv.getImageLayer(0);
+  await layer.set("Observatory:", "SOHO");
+  await hv.UseNewestImage();
+  await hv.WaitForLoadingComplete();
+  await hv.CloseAllNotifications();
+  await hv.CloseSidebar();
+
+  // 3. MOVE EARTH SCALE INDICATOR TO SOMEWHERE
+  await hv.moveEarthScaleIndicator(200, 200);
+
+  // 4. OPEN MOVIE DRAWER
+  await hv.movie.toggleMovieDrawer();
+
+  // 5. SET IMAGE TO RESOLUTION
+  await hv.movie.selectFullScreenMovie();
+
+  // 6. GET ADVANCED MOVIE CONTROLS
+  await hv.movie.getAdvancedControls();
+
+  // 7. SELECT SIZE OTHER THAN ORIGINAL
+  await page.getByLabel("Size").selectOption({ label: "1440p (2560 x 1440, Quad HD)" });
+
+  // 8. START MAKING
+  await page.getByLabel("Submit").click();
+
+  // 9. WAIT FOR MOVIE TO END
+  await expect(page.getByText("Your LASCO C2 movie is ready! Click here to watch or download it.")).toBeVisible({
+    timeout: 100000
+  });
+
+  // 10. CLICK MOVIE TO OPEN WATCH DIALOG
+  await page.getByText("Your LASCO C2 movie is ready! Click here to watch or download it.").click();
+
+  // 11. SCREENSHOT SHOULD MATCH
+  await expect(page.locator(".movie-player-dialog")).toHaveScreenshot("movie_player_screenshot.png");
+});

tests/desktop/normal/regression/issue_649.spec.ts

@@ -0,0 +1,28 @@
+import { test } from "@playwright/test";
+import { Helioviewer } from "../../../page_objects/helioviewer";
+
+/**
+ * This test is a regression test for proving issue 649 is fixed for the given helioviewer
+ * @see https://github.com/Helioviewer-Project/helioviewer.org/issues/649
+ */
+test("Issue 649, New Layer for fresh state break url sharing ", async ({ page, browser }, info) => {
+  let hv = new Helioviewer(page, info);
+
+  // load helioviewer
+  // Action 1 : BROWSE TO HELIOVIEWER
+  await hv.Load();
+  await hv.WaitForLoadingComplete();
+  await hv.CloseAllNotifications();
+
+  // Action 2 : Open left sources panel
+  await hv.ClickDataSourcesTab();
+
+  // Action 3: Add new layer
+  await hv.AddImageLayer();
+  await hv.WaitForLoadingComplete();
+  await hv.CloseAllNotifications();
+
+  // Action 4: Check if we can do share url
+  await hv.urlshare.triggerShareURL();
+  await hv.urlshare.sharedURLIsVisibleAndDone();
+});

tests/desktop/normal/regression/issue_650.spec.ts

@@ -0,0 +1,38 @@
+import { test, expect } from "@playwright/test";
+import { Helioviewer } from "../../../page_objects/helioviewer";
+
+/**
+ * This test is a regression test for proving issue 650 is fixed for the given helioviewer
+ * @see https://github.com/Helioviewer-Project/helioviewer.org/issues/650
+ */
+test("Issue 650, Default base difference should be one hour earlier of observation date", async ({
+  page,
+  browser
+}, info) => {
+  let hv = new Helioviewer(page, info);
+
+  // load helioviewer
+  // Action 1 : BROWSE TO HELIOVIEWER
+  await hv.Load();
+  await hv.WaitForLoadingComplete();
+  await hv.CloseAllNotifications();
+
+  // Action 2 : Open left sources panel
+  await hv.OpenSidebar();
+
+  // Action 3: Add new layer
+  let layer = await hv.getImageLayer(0);
+  await layer.set("Difference", "Base difference");
+
+  // Action 4: Get the default base difference date from layer 0
+  let baseDifferenceDateForLayer = await layer.getBaseDifferenceDateObject();
+
+  // Action 5: Get the observation date
+  let observationDate = await hv.GetLoadedDate();
+
+  // Action 6: Get one hour earlier of observation date
+  let oneHourEarlierOfObservationDate: number = observationDate.getTime() - 1000 * 60 * 60;
+
+  // Action 7: Layer's base difference date should be one our earlier of observation date
+  await expect(baseDifferenceDateForLayer.getTime()).toBe(oneHourEarlierOfObservationDate);
+});

tests/desktop/normal/youtube/youtube.spec.ts

@@ -77,6 +77,11 @@ test("Recently shared youtube videos should be rendered correctly with correct l
   // Assert all mocked videos are visibile with correct links and title
   for (const mov of mockedMoviesData) {
     let title = `${mov.hoursAgo} hours ago`;
+
+    if (mov.hoursAgo == 1) {
+      title = "1 hour ago";
+    }
+
     let daysAgo = Math.floor(mov.hoursAgo / 24);
 
     if (mov.hoursAgo >= 24) {

tests/page_objects/helioviewer.ts

@@ -528,6 +528,19 @@ class Helioviewer implements DesktopInterface {
   async toggleYoutubeVideosDrawer(): Promise<void> {
     await this.page.locator("#youtube-button").click();
   }
+
+  /**
+   * Moves earth scale indicator to given x,y coordinates
+   * @param {number} x Horizontal coordinate
+   * @param {number} y Vertical coordinate
+   * @returns {Promise<void>}
+   */
+  async moveEarthScaleIndicator(x: number, y: number): Promise<void> {
+    await this.page.locator("#earth-container").hover();
+    await this.page.mouse.down();
+    await this.page.mouse.move(x, y);
+    await this.page.mouse.up();
+  }
 }
 
 export { Helioviewer };

tests/page_objects/image_layer.ts

@@ -135,6 +135,16 @@ class ImageLayer {
     return await this.layer_controls.getByLabel("Time", { exact: true }).inputValue();
   }
 
+  /**
+   * @description Get the layer's base difference date as a Date object with correct timezone UTC.
+   * @return {Date} date , base difference date
+   */
+  async getBaseDifferenceDateObject(): Promise<Date> {
+    let differenceDate = await this.getBaseDifferenceDate();
+    let differenceTime = await this.getBaseDifferenceTime();
+    return new Date(differenceDate + " " + differenceTime + " UTC");
+  }
+
   /**
    * Returns the given image tile (img tag)
    */

tests/page_objects/movie.ts

@@ -14,39 +14,47 @@ class Movie {
 
   /**
    * Clicks the button for toggling movie drawer
-   * @return void
+   * @returns {Promise<void>}
    */
-  async toggleMovieDrawer() {
+  async toggleMovieDrawer(): Promise<void> {
     await this.page.locator("#movies-button").click();
     await this.page.mouse.move(200, 200);
     await this.page.mouse.up();
   }
 
+  /**
+   * See advanced controls for movie making
+   * @returns {Promise<void>}
+   */
+  async getAdvancedControls(): Promise<void> {
+    await this.page.getByRole("link", { name: "Advanced Settings" }).click();
+  }
+
   /**
    * Create screenshot with pressing fullscreen button
-   * @return void
+   * @returns {Promise<void>}
    */
-  async selectFullScreenMovie() {
+  async selectFullScreenMovie(): Promise<void> {
     await this.page.locator("#movie-manager-full-viewport").getByText("Full Viewport").click();
     await this.page.mouse.move(200, 200);
     await this.page.mouse.up();
   }
 
   /**
    * Create screenshot with pressing fullscreen button
-   * @return void
+   * @returns {Promise<void>}
    */
-  async selectPartialScreenMovie() {
+  async selectPartialScreenMovie(): Promise<void> {
     await this.page.locator("#movie-manager-select-area").getByText("Select Area").click();
     await this.page.mouse.move(200, 200);
     await this.page.mouse.up();
   }
 
   /**
    * Execute actions to create fullscreen movie
-   * @return void
+   * @returns {Promise<void>}
    */
-  async makeFullScreenmovie() {
+  async makeFullScreenmovie(): Promise<void> {
     await this.toggleMovieDrawer();
     await this.selectFullScreenMovie();
     await this.page.getByLabel("Submit").click();