Apply image_layer tests to mobile view (#643)

* Apply image_layer tests to mobile * prettier * Handle multiple flatpickr instances * prettier * Fix issue where sometimes date is not updated * Fix date/time input blur bug * Increase timeout
Helioviewer-Project · Nov 14, 2024 · 445a4c8 · 445a4c8
1 parent e8a4a87
commit 445a4c8
Show file tree

Hide file tree

Showing 13 changed files with 260 additions and 166 deletions.
diff --git a/resources/js/HelioviewerWebClient.js b/resources/js/HelioviewerWebClient.js
@@ -656,7 +656,6 @@ var HelioviewerWebClient = HelioviewerClient.extend(
 
         //Fix Scroll
         $('#hv-drawer-data').on( 'scroll', function(){
-            $('.periodpicker_timepicker_dialog').removeClass('visible');
             $('#vso-start-time, #vso-end-time, #sdo-start-time, #sdo-end-time').blur() ;
 
             $('#vso-start-date')[0]._flatpickr.close();
@@ -665,9 +664,11 @@ var HelioviewerWebClient = HelioviewerClient.extend(
             $('#sdo-end-date')[0]._flatpickr.close();
         });
         $('#hv-drawer-left').on( 'scroll', function(){
-            $('.periodpicker_timepicker_dialog').removeClass('visible');
             $('#time').blur() ;
-            $('#date')[0]._flatpickr.close();
+            const date_flatpickr = $('#date')[0]._flatpickr;
+            if (date_flatpickr.isOpen) {
+                date_flatpickr.close();
+            }
         });
 
 
@@ -1227,8 +1228,8 @@ var HelioviewerWebClient = HelioviewerClient.extend(
                  + '</a>';
 
             Helioviewer.messageConsole.success(body, {
-                sticky: true, 
-                header: 'Just now' 
+                sticky: true,
+                header: 'Just now'
             });
         });
 
@@ -1256,8 +1257,8 @@ var HelioviewerWebClient = HelioviewerClient.extend(
                  + '</a>';
 
             Helioviewer.messageConsole.success(body, {
-                sticky: true, 
-                header: 'Just now' 
+                sticky: true,
+                header: 'Just now'
             });
 
         });

diff --git a/resources/js/UI/TileLayerAccordion.js b/resources/js/UI/TileLayerAccordion.js
@@ -344,6 +344,7 @@ var TileLayerAccordion = Layer.extend(
             allowInput: true,
             dateFormat: 'Y/m/d',
             position: 'below',
+            disableMobile: true,
             onChange:function(selected, datestr, instance){
                 let $input = $(instance.input);
                 onDiffDate($input.val()+' '+$('#'+id+' .difftime').val());
@@ -363,6 +364,7 @@ var TileLayerAccordion = Layer.extend(
             time_24hr: true,
             minuteIncrement: 1,
             secondIncrement: 1,
+            disableMobile: true,
             onClose: function (selected, datestr, instance) {
                 if(time != ''){
                     let $input = $(instance.input);

diff --git a/resources/js/UI/TimeControls.js b/resources/js/UI/TimeControls.js
@@ -271,6 +271,9 @@ var TimeControls = Class.extend(
             dateFormat: 'Y/m/d',
             disableMobile: true,
             // onChange: $.proxy(this._onTextFieldChange, this),
+            onClose: (a, b, flatpickr) => {
+                this._onTextFieldChange();
+            },
             onChange: (a, b, flatpickr) => {
                 delayed_flatpickr_update(flatpickr);
             },
@@ -299,7 +302,10 @@ var TimeControls = Class.extend(
             secondIncrement: 1,
             disableMobile: true,
             position: "above",
-            onChange: $.proxy(this._onTextFieldChange, this)
+            onChange: $.proxy(this._onTextFieldChange, this),
+            onClose: (a, b, flatpickr) => {
+                this._onTextFieldChange();
+            },
         });
         this._timeInput.keydown(createCloseFunction(this._timeInput));
     },

diff --git a/resources/lib/responsive/responsive_hv.js b/resources/lib/responsive/responsive_hv.js
@@ -45,11 +45,6 @@ $(function() {
 	// Discard Safari since it also matches Chrome
 	if ((chromeAgent) && (safariAgent)) safariAgent = false;
 
-	// position the time picker differently in Safari
-	if(safariAgent) {
-		$('.periodpicker_timepicker_dialog.visible').css('bottom','72px');
-	}
-
 	// force-close right drawers (add drawers as necessary)
 	function closeallHVwindows() {
 		$('#hv-drawer-left').css('display','none');
@@ -578,7 +573,6 @@ $(document.body).on('click','.toggle_empty',function(){
 
 	// on orientation change [portait / landscape]
 	$(window).on('orientationchange resize', function () {
-		$(".periodpicker_timepicker_dialog").removeClass("visible");
 		$("#time").blur();
 	});
 

diff --git a/tests/desktop/multi/unmatched_image_warning.spec.ts b/tests/desktop/multi/unmatched_image_warning.spec.ts
@@ -38,7 +38,7 @@ test("[Normal] Helioviewer shows a warning when the image displayed is at least
   await page.getByLabel("Observation date", { exact: true }).press("Enter");
   // Wait for page to load
   await page.waitForFunction(() => document.getElementById("loading")?.style.display == "none", null, {
-    timeout: 60000
+    timeout: 90000
   });
   // Expect the warning to appear with the expected text
   await expect(page.getByText("The AIA 304 layer is 6 hours")).toBeVisible();
@@ -50,7 +50,7 @@ test("[Normal] Helioviewer shows a warning when the image displayed is at least
   await page.getByLabel("Observation time").press("Enter");
   // Wait for page to load
   await page.waitForFunction(() => document.getElementById("loading")?.style.display == "none", null, {
-    timeout: 60000
+    timeout: 90000
   });
   // Expect the warning to disappear with the expected text
   await expect(page.getByText("The AIA 304 layer is 6 hours")).not.toBeVisible();
@@ -69,7 +69,7 @@ test("[Minimal] Helioviewer shows a warning when the image displayed is at least
   await page.getByRole("textbox", { name: "Time" }).press("Enter");
   // Wait for page to load
   await page.waitForFunction(() => document.getElementById("loading")?.style.display == "none", null, {
-    timeout: 60000
+    timeout: 90000
   });
   // Expect the warning to appear
   await expect(page.getByText("The AIA 171 layer is 6 hours")).toBeVisible();
@@ -82,7 +82,7 @@ test("[Minimal] Helioviewer shows a warning when the image displayed is at least
   await page.getByRole("textbox", { name: "Time" }).press("Enter");
   // Wait for page to load
   await page.waitForFunction(() => document.getElementById("loading")?.style.display == "none", null, {
-    timeout: 60000
+    timeout: 90000
   });
   // Expect the warning to disappear
   await expect(page.getByText("The AIA 171 layer is 6 hours")).not.toBeVisible();

diff --git a/tests/desktop/normal/features_and_events/event_type_node.spec.ts b/tests/desktop/normal/features_and_events/event_type_node.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { test } from "@playwright/test";
 import { Helioviewer } from "../../../page_objects/helioviewer";
 import { mockEvents } from "../../../utils/events";
 
@@ -8,7 +8,7 @@ import { mockEvents } from "../../../utils/events";
  * then asserts all of the childnodes of event_tree , should be checked,
  * also asserts all of the other nodes, should be unchecked
  */
-test("Checked event type should check all of its child frms and event_instances", async ({ page, browser }, info) => {
+test("Checked event type should check all of its child frms and event_instances", async ({ page }, info) => {
   // mocked event data
   const events = {
     CCMC: {