From 37efeadc6c381820bc8a071b24cfec289f970ca6 Mon Sep 17 00:00:00 2001
From: "robert.richardson" <robert.richardson@suse.com>
Date: Wed, 23 Oct 2024 15:39:07 +0200
Subject: [PATCH] Add loading indicator to the test liveview

This PR removes the empty box which was visible in the webui before liveview content is received by the responsible canvas element.
It also adds a loading animation indicating that the liveview is being loaded.
Test cases are also added to confirm the elements are displayed and hidden as expected.

Related Issue: https://progress.opensuse.org/issues/134840
---
 assets/javascripts/running.js      |  5 ++-
 t/ui/18-tests-details.t            | 65 ++++++++++++++++++++++++++----
 templates/webapi/test/live.html.ep |  7 ++++
 3 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/assets/javascripts/running.js b/assets/javascripts/running.js
index 65f9cc6efbc2..72bc350008cb 100644
--- a/assets/javascripts/running.js
+++ b/assets/javascripts/running.js
@@ -321,13 +321,16 @@ var last_event;
 function loadCanvas(canvas, dataURL) {
   var context = canvas.getContext('2d');
 
-  // load image from data url
+  // load image from data URL
   var scrn = new Image();
   scrn.onload = function () {
     canvas.width = this.width;
     canvas.height = this.height;
     context.clearRect(0, 0, this.width, this.width);
     context.drawImage(this, 0, 0);
+
+    // hide loading animation after the first image is loaded
+    document.getElementById('liveview-loading').style.display = 'none';
   };
   scrn.src = dataURL;
 }
diff --git a/t/ui/18-tests-details.t b/t/ui/18-tests-details.t
index b16c6062fc99..b8c1ea4891d6 100644
--- a/t/ui/18-tests-details.t
+++ b/t/ui/18-tests-details.t
@@ -4,6 +4,7 @@
 # SPDX-License-Identifier: GPL-2.0-or-later
 
 use Test::Most;
+use Mojo::Base -strict, -signatures;
 
 use DateTime;
 use FindBin;
@@ -75,14 +76,26 @@ my $baseurl = $driver->get_current_url;
 sub current_tab { $driver->find_element('.nav.nav-tabs .active')->get_text }
 
 # returns the contents of the candidates combo box as hash (key: tag, value: array of needle names)
-sub find_candidate_needles {
+sub find_candidate_needles ($trigger_function) {
+    $trigger_function->();
     # ensure the candidates menu is visible
     my $candidates_menu = wait_for_element(selector => '#candidatesMenu', is_displayed => 1) or return {};
+
     # save implicit waiting time as long as we are only looking for elements
     # that should be visible already
     disable_timeout;
-    return {} unless $candidates_menu->is_enabled;
-    $candidates_menu->click;
+    eval {
+        return {} unless $candidates_menu->is_enabled;
+        $candidates_menu->click;
+    };
+    if (my $error = $@) {
+        BAIL_OUT($error) unless $error =~ m/stale/;
+        $driver->capture_screenshot('stale_candidates_menu.png');
+        $trigger_function->();
+        $candidates_menu = wait_for_element(selector => '#candidatesMenu', is_displayed => 1) or return {};
+        return {} unless $candidates_menu->is_enabled;
+        $candidates_menu->click;
+    }
 
     # read the tags/needles from the HTML structure
     my @section_elements = $driver->find_elements('#needlediff_selector ul table');
@@ -150,8 +163,10 @@ subtest 'show job modules execution time' => sub {
 };
 
 subtest 'displaying image result with candidates' => sub {
-    $driver->find_element('[href="#step/bootloader/1"]')->click();
-    my $needles = find_candidate_needles;
+    my $trigger_function = sub {
+        $driver->find_element('[href="#step/bootloader/1"]')->click();
+    };
+    my $needles = find_candidate_needles($trigger_function);
     is_deeply($needles, {'inst-bootmenu' => []}, 'correct tags displayed') or diag explain $needles;
 };
 
@@ -311,6 +326,40 @@ subtest 'running job' => sub {
     # waiting for the periodic call anyways
     $driver->execute_script('window.enableStatusUpdates = false');
 
+    subtest 'liveview loading animation is displayed' => sub {
+        $driver->find_element_by_link_text('Details')->click();
+        like current_tab, qr/details/i, 'switched to details tab';
+        $driver->find_element_by_link_text('Live View')->click();
+        like current_tab, qr/live/i, 'switched back to live tab';
+        my $loading_element = $driver->find_element('#liveview-loading');
+        ok $loading_element, 'liveview-loading element exists after tab switch';
+        ok $loading_element->is_displayed(), 'liveview-loading is visible after tab switch';
+    };
+    subtest 'liveview loading animation hides after live view starts' => sub {
+        my $loading_element = $driver->find_element('#liveview-loading');
+        ok $loading_element->is_displayed(), 'liveview-loading is initially visible';
+        # simulate the live view starting
+        $driver->execute_script(
+            q{
+            var canvas = document.getElementById('livestream');
+            var dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=';
+            loadCanvas(canvas, dataURL);
+        }
+        );
+        wait_until sub {
+            !$loading_element->is_displayed();
+        }, 'liveview-loading is hidden after live view starts', 5;
+        my $canvas = $driver->find_element('#livestream');
+        ok $canvas->is_displayed(), 'livestream canvas is displayed';
+        $driver->find_element_by_link_text('Details')->click();
+        like current_tab, qr/details/i, 'switched to details tab';
+        $driver->find_element_by_link_text('Live View')->click();
+        like current_tab, qr/live/i, 'switched back to live tab';
+        $loading_element = $driver->find_element('#liveview-loading');
+        ok $loading_element, 'liveview-loading element exists after tab switch';
+        ok !$loading_element->is_displayed(), 'liveview-loading is still hidden after tab switch';
+    };
+
     subtest 'info panel contents' => sub {
         like(
             $driver->find_element('#assigned-worker')->get_text,
@@ -608,8 +657,10 @@ sub test_with_error {
 
     # check whether candidates are displayed as expected
     my $random_number = int(rand(100000));
-    $driver->get("/tests/99946?prevent_caching=$random_number#step/yast2_lan/1");
-    is_deeply(find_candidate_needles, $expect, $test_name // 'candidates displayed as expected');
+    my $trigger_function = sub {
+        $driver->get("/tests/99946?prevent_caching=$random_number#step/yast2_lan/1");
+    };
+    is_deeply(find_candidate_needles($trigger_function), $expect, $test_name // 'candidates displayed as expected');
 }
 
 subtest 'test candidate list' => sub {
diff --git a/templates/webapi/test/live.html.ep b/templates/webapi/test/live.html.ep
index e126c890cb32..8edc70f242ee 100644
--- a/templates/webapi/test/live.html.ep
+++ b/templates/webapi/test/live.html.ep
@@ -193,6 +193,13 @@
 </div>
 
 <div id="canholder">
+  <div id="liveview-loading">
+    <div class="d-flex justify-content-center">
+      <i class="fa fa-circle-o-notch fa-spin fa-4x" role="status">
+        <span class="sr-only">Loading…</span>
+      </i>
+    </div>
+  </div>
   <canvas id="livestream" data-url="/liveviewhandler/tests/<%= $testid %>/streaming">
   </canvas>
 </div>