Merge branch '21461-excessive-scrollbars-fix'. Closes #21461

[arvados.git] / services / workbench2 / cypress / e2e / process.cy.js

diff --git a/services/workbench2/cypress/integration/process.spec.js b/services/workbench2/cypress/e2e/process.cy.js
similarity index 93%
rename from services/workbench2/cypress/integration/process.spec.js
rename to services/workbench2/cypress/e2e/process.cy.js
index f647560a5fcc7bcee66b1b3007d9aecf47c49823..ca13e9f9e0b380313e849b5ee9560aa9526554ba 100644 (file)
--- a/services/workbench2/cypress/integration/process.spec.js
+++ b/services/workbench2/cypress/e2e/process.cy.js
@@ -25,11 +25,6 @@ describe("Process tests", function () {
             });
     });
 
-    beforeEach(function () {
-        cy.clearCookies();
-        cy.clearLocalStorage();
-    });
-
     function setupDockerImage(image_name) {
         // Create a collection that will be used as a docker image for the tests.
         cy.createCollection(adminUser.token, {
@@ -337,6 +332,7 @@ describe("Process tests", function () {
             createContainerRequest(activeUser, crUncommitted, "arvados/jobs", ["echo", "hello world"], false, "Uncommitted").then(function (
                 containerRequest
             ) {
+                cy.loginAs(activeUser);
                 // Navigate to process and verify run / cancel button
                 cy.goToPath(`/processes/${containerRequest.uuid}`);
                 cy.waitForDom();
@@ -579,23 +575,23 @@ describe("Process tests", function () {
 
                 cy.getAll("@node-info", "@stdout", "@stderr").then(() => {
                     // Verify sorted main logs
-                    cy.get("[data-cy=process-logs] pre", { timeout: 7000 }).eq(0).should("contain", "2023-07-18T20:14:48.128642814Z first");
-                    cy.get("[data-cy=process-logs] pre").eq(1).should("contain", "2023-07-18T20:14:48.528642814Z second");
-                    cy.get("[data-cy=process-logs] pre").eq(2).should("contain", "2023-07-18T20:14:49.128642814Z third");
+                    cy.get("[data-cy=process-logs] span > p", { timeout: 7000 }).eq(0).should("contain", "2023-07-18T20:14:48.128642814Z first");
+                    cy.get("[data-cy=process-logs] span > p").eq(1).should("contain", "2023-07-18T20:14:48.528642814Z second");
+                    cy.get("[data-cy=process-logs] span > p").eq(2).should("contain", "2023-07-18T20:14:49.128642814Z third");
 
                     // Switch to All logs
                     cy.get("[data-cy=process-logs-filter]").click();
                     cy.get("body").contains("li", "All logs").click();
                     // Verify non-sorted lines were preserved
-                    cy.get("[data-cy=process-logs] pre").eq(0).should("contain", "3: nodeinfo 1");
-                    cy.get("[data-cy=process-logs] pre").eq(1).should("contain", "2: nodeinfo 2");
-                    cy.get("[data-cy=process-logs] pre").eq(2).should("contain", "1: nodeinfo 3");
-                    cy.get("[data-cy=process-logs] pre").eq(3).should("contain", "2: nodeinfo 4");
-                    cy.get("[data-cy=process-logs] pre").eq(4).should("contain", "3: nodeinfo 5");
+                    cy.get("[data-cy=process-logs] span > p").eq(0).should("contain", "3: nodeinfo 1");
+                    cy.get("[data-cy=process-logs] span > p").eq(1).should("contain", "2: nodeinfo 2");
+                    cy.get("[data-cy=process-logs] span > p").eq(2).should("contain", "1: nodeinfo 3");
+                    cy.get("[data-cy=process-logs] span > p").eq(3).should("contain", "2: nodeinfo 4");
+                    cy.get("[data-cy=process-logs] span > p").eq(4).should("contain", "3: nodeinfo 5");
                     // Verify sorted logs
-                    cy.get("[data-cy=process-logs] pre").eq(5).should("contain", "2023-07-18T20:14:48.128642814Z first");
-                    cy.get("[data-cy=process-logs] pre").eq(6).should("contain", "2023-07-18T20:14:48.528642814Z second");
-                    cy.get("[data-cy=process-logs] pre").eq(7).should("contain", "2023-07-18T20:14:49.128642814Z third");
+                    cy.get("[data-cy=process-logs] span > p").eq(5).should("contain", "2023-07-18T20:14:48.128642814Z first");
+                    cy.get("[data-cy=process-logs] span > p").eq(6).should("contain", "2023-07-18T20:14:48.528642814Z second");
+                    cy.get("[data-cy=process-logs] span > p").eq(7).should("contain", "2023-07-18T20:14:49.128642814Z third");
                 });
             });
         });
@@ -633,16 +629,16 @@ describe("Process tests", function () {
                     cy.get("[data-cy=process-logs-filter]").click();
                     cy.get("body").contains("li", "All logs").click();
                     // Verify sorted logs
-                    cy.get("[data-cy=process-logs] pre").eq(0).should("contain", "2023-07-18T20:14:46.000000000Z A out 1");
-                    cy.get("[data-cy=process-logs] pre").eq(1).should("contain", "2023-07-18T20:14:47.000000000Z Z err 1");
-                    cy.get("[data-cy=process-logs] pre").eq(2).should("contain", "2023-07-18T20:14:48.128642814Z B err 2");
-                    cy.get("[data-cy=process-logs] pre").eq(3).should("contain", "2023-07-18T20:14:48.128642814Z C err 3");
-                    cy.get("[data-cy=process-logs] pre").eq(4).should("contain", "2023-07-18T20:14:48.128642814Z Y err 4");
-                    cy.get("[data-cy=process-logs] pre").eq(5).should("contain", "2023-07-18T20:14:48.128642814Z Z err 5");
-                    cy.get("[data-cy=process-logs] pre").eq(6).should("contain", "2023-07-18T20:14:48.128642814Z A err 6");
-                    cy.get("[data-cy=process-logs] pre").eq(7).should("contain", "2023-07-18T20:14:48.128642814Z A out 2");
-                    cy.get("[data-cy=process-logs] pre").eq(8).should("contain", "2023-07-18T20:14:48.128642814Z X out 3");
-                    cy.get("[data-cy=process-logs] pre").eq(9).should("contain", "2023-07-18T20:14:48.128642814Z A out 4");
+                    cy.get("[data-cy=process-logs] span > p").eq(0).should("contain", "2023-07-18T20:14:46.000000000Z A out 1");
+                    cy.get("[data-cy=process-logs] span > p").eq(1).should("contain", "2023-07-18T20:14:47.000000000Z Z err 1");
+                    cy.get("[data-cy=process-logs] span > p").eq(2).should("contain", "2023-07-18T20:14:48.128642814Z B err 2");
+                    cy.get("[data-cy=process-logs] span > p").eq(3).should("contain", "2023-07-18T20:14:48.128642814Z C err 3");
+                    cy.get("[data-cy=process-logs] span > p").eq(4).should("contain", "2023-07-18T20:14:48.128642814Z Y err 4");
+                    cy.get("[data-cy=process-logs] span > p").eq(5).should("contain", "2023-07-18T20:14:48.128642814Z Z err 5");
+                    cy.get("[data-cy=process-logs] span > p").eq(6).should("contain", "2023-07-18T20:14:48.128642814Z A err 6");
+                    cy.get("[data-cy=process-logs] span > p").eq(7).should("contain", "2023-07-18T20:14:48.128642814Z A out 2");
+                    cy.get("[data-cy=process-logs] span > p").eq(8).should("contain", "2023-07-18T20:14:48.128642814Z X out 3");
+                    cy.get("[data-cy=process-logs] span > p").eq(9).should("contain", "2023-07-18T20:14:48.128642814Z A out 4");
                 });
             });
         });
@@ -666,15 +662,60 @@ describe("Process tests", function () {
 
                 cy.getAll("@stdout").then(() => {
                     // Verify first 64KB and snipline
-                    cy.get("[data-cy=process-logs] pre", { timeout: 7000 })
+                    cy.get("[data-cy=process-logs] span > p", { timeout: 7000 })
                         .eq(0)
                         .should("contain", "X".repeat(63999) + "_\n" + SNIPLINE);
                     // Verify last 64KB
-                    cy.get("[data-cy=process-logs] pre")
+                    cy.get("[data-cy=process-logs] span > p")
                         .eq(1)
                         .should("contain", "_" + "X".repeat(63999));
                     // Verify none of the Os got through
-                    cy.get("[data-cy=process-logs] pre").should("not.contain", "O");
+                    cy.get("[data-cy=process-logs] span > p").should("not.contain", "O");
+                });
+            });
+        });
+
+        it("correctly break long lines when no obvious line separation exists", function () {
+            function randomString(length) {
+                const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+                let res = '';
+                for (let i = 0; i < length; i++) {
+                    res += chars.charAt(Math.floor(Math.random() * chars.length));
+                }
+                return res;
+            }
+
+            const logLinesQty = 10;
+            const logLines = [];
+            for (let i = 0; i < logLinesQty; i++) {
+                const length = Math.floor(Math.random() * 500) + 500;
+                logLines.push(randomString(length));
+            }
+
+            createContainerRequest(activeUser, "test_container_request", "arvados/jobs", ["echo", "hello world"], false, "Committed").then(function (
+                containerRequest
+            ) {
+                cy.appendLog(adminUser.token, containerRequest.uuid, "stdout.txt", logLines).as("stdoutLogs");
+
+                cy.getAll("@stdoutLogs").then(function () {
+                    cy.loginAs(activeUser);
+                    cy.goToPath(`/processes/${containerRequest.uuid}`);
+                    // Select 'stdout' log filter
+                    cy.get("[data-cy=process-logs-filter]").click();
+                    cy.get("body").contains("li", "stdout").click();
+                    cy.get("[data-cy=process-logs] span > p")
+                        .should('have.length', logLinesQty)
+                        .each($p => {
+                            expect($p.text().length).to.be.greaterThan(499);
+
+                            // This looks like an ugly hack, but I was not able
+                            // to get [client|scroll]Width attributes through
+                            // the usual Cypress methods.
+                            const parentClientWidth = $p[0].parentElement.clientWidth;
+                            const parentScrollWidth = $p[0].parentElement.scrollWidth
+                            // Scrollbar should not be visible
+                            expect(parentClientWidth).to.be.eq(parentScrollWidth);
+                        });
                 });
             });
         });