Add test cases for the liveview-loading animation

Related Issue: https://progress.opensuse.org/issues/134840

t/ui/18-tests-details.t

@@ -291,6 +291,7 @@ sub update_status {
 }
 
 subtest 'running job' => sub {
+
     # assume there's a running job module
     my $job_modules = $schema->resultset('JobModules');
     $job_modules->search({job_id => 99963, name => 'glibc_i686'})->update({result => RUNNING});
@@ -311,6 +312,63 @@ subtest 'running job' => sub {
     # waiting for the periodic call anyways
     $driver->execute_script('window.enableStatusUpdates = false');
 
+    subtest 'liveview loading animation is displayed' => sub {
+        # ensure we are on the Liveview tab
+        like(current_tab, qr/live/i, 'live tab active by default');
+
+        # switch to another tab (e.g., Details)
+        $driver->find_element_by_link_text('Details')->click();
+        like(current_tab, qr/details/i, 'switched to details tab');
+
+        # switch back to Live View tab
+        $driver->find_element_by_link_text('Live View')->click();
+        like(current_tab, qr/live/i, 'switched back to live tab');
+
+        # check that the liveview-loading div exists after tab switch
+        my $loading_element = $driver->find_element('#liveview-loading', 'css');
+        ok($loading_element, 'liveview-loading element exists after tab switch');
+
+        # check that the liveview-loading div is visible 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 {
+        # ensure the liveview-loading element is initially visible
+        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 the loading animation is hidden
+        wait_until sub {
+            my $loading_element = $driver->find_element('#liveview-loading');
+            !$loading_element->is_displayed();
+        }, 'liveview-loading is hidden after live view starts', 5;
+        # verify that the canvas is now displayed
+        my $canvas = $driver->find_element('#livestream');
+        ok($canvas->is_displayed(), 'livestream canvas is displayed');
+
+        # switch to another tab (e.g., Details)
+        $driver->find_element_by_link_text('Details')->click();
+        like(current_tab, qr/details/i, 'switched to details tab');
+
+        # switch back to Live View tab
+        $driver->find_element_by_link_text('Live View')->click();
+        like(current_tab, qr/live/i, 'switched back to live tab');
+
+        # check that the liveview-loading div exists after tab switch
+        $loading_element = $driver->find_element('#liveview-loading', 'css');
+        ok($loading_element, 'liveview-loading element exists after tab switch');
+
+        # check that the liveview-loading div is still hidden 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,