Cypress: Right side body test (#722)

acceptanceTests/cypress.json

@@ -4,7 +4,7 @@
   "viewportHeight": 1080,
   "video": false,
   "screenshotOnRunFailure": false,
-  "defaultCommandTimeout": 5000,
+  "defaultCommandTimeout": 6000,
   "testFiles": [
     "tests/GuiPort.js",
     "tests/MultipleNamespaces.js",

acceptanceTests/cypress/integration/tests/UiTest.js

@@ -196,6 +196,7 @@ function deeperChcek(leftSidePath, rightSidePath, filterName, leftSideExpectedTe
         cy.get(`#list #entry-${entryNum}`).click();
         rightTextCheck(rightSidePath, rightSideExpectedText);
         rightOnHoverCheck(rightSidePath, filterName);
+        checkRightSide();
     });
 }
 
@@ -216,3 +217,65 @@ function rightOnHoverCheck(path, expectedText) {
     cy.get(`.TrafficPage-Container > :nth-child(2) ${path}`).trigger('mouseover');
     cy.get(`.TrafficPage-Container > :nth-child(2) .Queryable-Tooltip`).should('have.text', expectedText);
 }
+
+function checkRightSide() {
+    const encodedBody = 'eyJhcmdzIjp7fSwiaGVhZGVycyI6eyJBY2NlcHQtRW5jb2RpbmciOiJnemlwIiwiSG9zdCI6IjEyNy4wLjAuMTo1MDY2OCIsIlVzZXItQWdlbnQiOiJbUkVEQUNURURdIiwiWC1Gb3J3YXJkZWQtVXJpIjoiL2FwaS92MS9uYW1lc3BhY2VzL21penUtdGVzdHMvc2VydmljZXMvaHR0cGJpbi9wcm94eS9nZXQifSwib3JpZ2luIjoiMTI3LjAuMC4xLCAxOTIuMTY4LjQ5LjEiLCJ1cmwiOiJodHRwOi8vMTI3LjAuMC4xOjUwNjY4L2dldCJ9';
+    const decodedBody = atob(encodedBody);
+
+    cy.contains('Response').click();
+    clickCheckbox('Decode Base64');
+    cy.get('.hljs').should('have.text', encodedBody);
+    clickCheckbox('Decode Base64');
+
+    cy.get('.hljs > ').its('length').should('be.gt', 1).then(linesNum => {
+        cy.get('.hljs > >').its('length').should('be.gt', linesNum).then(jsonItemsNum => {
+            checkPrettyAndLineNums(jsonItemsNum, decodedBody);
+
+            clickCheckbox('Line numbers');
+            checkPrettyOrNothing(jsonItemsNum, decodedBody);
+
+            clickCheckbox('Pretty');
+            checkPrettyOrNothing(jsonItemsNum, decodedBody);
+
+            clickCheckbox('Line numbers');
+            checkOnlyLineNumberes(jsonItemsNum, decodedBody);
+        });
+    });
+}
+
+function clickCheckbox(type) {
+    cy.contains(`${type}`).prev().children().click();
+}
+
+function checkPrettyAndLineNums(jsonItemsLen, decodedBody) {
+    decodedBody = decodedBody.replaceAll(' ', '');
+    cy.get('.hljs >').then(elements => {
+        const lines = Object.values(elements);
+        lines.forEach((line, index) => {
+            if (line.getAttribute) {
+                const cleanLine = getCleanLine(line);
+                const currentLineFromDecodedText = decodedBody.substring(0, cleanLine.length);
+
+                expect(cleanLine).to.equal(currentLineFromDecodedText, `expected the text in line number ${index + 1} to match the text that generated by the base64 decoding`)
+
+                decodedBody = decodedBody.substring(cleanLine.length);
+            }
+        });
+    });
+}
+
+function getCleanLine(lineElement) {
+    return (lineElement.innerText.substring(0, lineElement.innerText.length - 1)).replaceAll(' ', '');
+}
+
+function checkPrettyOrNothing(jsonItems, decodedBody) {
+    cy.get('.hljs > ').should('have.length', jsonItems).then(text => {
+        const json = text.text();
+        expect(json).to.equal(decodedBody);
+    });
+}
+
+function checkOnlyLineNumberes(jsonItems, decodedText) {
+    cy.get('.hljs >').should('have.length', 1).and('have.text', decodedText);
+    cy.get('.hljs > >').should('have.length', jsonItems)
+}