cypress body test fix (#741)

Co-authored-by: Igor Gov <igor.govorov1@gmail.com>

.github/workflows/static_code_analysis.yml

@@ -15,6 +15,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+      - uses: actions/setup-go@v2
+        with:
+            go-version: '^1.16'
 
       - name: Install dependencies
         run: |

acceptanceTests/cypress/integration/tests/UiTest.js

@@ -25,6 +25,37 @@ it('filtering guide check', function () {
     cy.get('#modal-modal-title').should('not.exist');
 });
 
+it('right side sanity test', function () {
+    cy.get('#entryDetailedTitleBodySize').then(sizeTopLine => {
+        const sizeOnTopLine = sizeTopLine.text().replace(' B', '');
+        cy.contains('Response').click();
+        cy.contains('Body Size (bytes)').parent().next().then(size => {
+            const bodySizeByDetails = size.text();
+            expect(sizeOnTopLine).to.equal(bodySizeByDetails, 'The body size in the top line should match the details in the response');
+
+            if (parseInt(bodySizeByDetails) < 0) {
+                throw new Error(`The body size cannot be negative. got the size: ${bodySizeByDetails}`)
+            }
+
+            cy.get('#entryDetailedTitleElapsedTime').then(timeInMs => {
+                const time = timeInMs.text();
+                if (time < '0ms') {
+                    throw new Error(`The time in the top line cannot be negative ${time}`);
+                }
+
+                cy.get('#rightSideContainer [title="Status Code"]').then(status => {
+                    const statusCode = status.text();
+                    cy.contains('Status').parent().next().then(statusInDetails => {
+                        const statusCodeInDetails = statusInDetails.text();
+
+                        expect(statusCode).to.equal(statusCodeInDetails, 'The status code in the top line should match the status code in details');
+                    });
+                });
+            });
+        });
+    });
+});
+
 checkIllegalFilter('invalid filter');
 
 checkFilter({
@@ -219,26 +250,50 @@ function rightOnHoverCheck(path, expectedText) {
 }
 
 function checkRightSide() {
-    const encodedBody = 'eyJhcmdzIjp7fSwiaGVhZGVycyI6eyJBY2NlcHQtRW5jb2RpbmciOiJnemlwIiwiSG9zdCI6IjEyNy4wLjAuMTo1MDY2OCIsIlVzZXItQWdlbnQiOiJbUkVEQUNURURdIiwiWC1Gb3J3YXJkZWQtVXJpIjoiL2FwaS92MS9uYW1lc3BhY2VzL21penUtdGVzdHMvc2VydmljZXMvaHR0cGJpbi9wcm94eS9nZXQifSwib3JpZ2luIjoiMTI3LjAuMC4xLCAxOTIuMTY4LjQ5LjEiLCJ1cmwiOiJodHRwOi8vMTI3LjAuMC4xOjUwNjY4L2dldCJ9';
-    const decodedBody = atob(encodedBody);
+    const jsonClass = '.hljs';
 
     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);
+    cy.get(`${jsonClass}`).then(value => {
+        const encodedBody = value.text();
+        cy.log(encodedBody);
 
-            clickCheckbox('Line numbers');
-            checkPrettyOrNothing(jsonItemsNum, decodedBody);
+        const decodedBody = atob(encodedBody);
+        const responseBody = JSON.parse(decodedBody);
 
-            clickCheckbox('Pretty');
-            checkPrettyOrNothing(jsonItemsNum, decodedBody);
+        const expectdJsonBody = {
+            args: RegExp({}),
+            url: RegExp("http://.*/get"),
+            headers: {
+                "User-Agent": RegExp('[REDACTED]'),
+                "Accept-Encoding": RegExp('gzip'),
+                "X-Forwarded-Uri": RegExp("/api/v1/namespaces/.*/services/.*/proxy/get")
+            }
+        }
 
-            clickCheckbox('Line numbers');
-            checkOnlyLineNumberes(jsonItemsNum, decodedBody);
+        expect(responseBody.args).to.match(expectdJsonBody.args);
+        expect(responseBody.url).to.match(expectdJsonBody.url);
+        expect(responseBody.headers["User-Agent"]).to.match(expectdJsonBody.headers["User-Agent"]);
+        expect(responseBody.headers["Accept-Encoding"]).to.match(expectdJsonBody.headers["Accept-Encoding"]);
+        expect(responseBody.headers["X-Forwarded-Uri"]).to.match(expectdJsonBody.headers["X-Forwarded-Uri"]);
+
+        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);
+            });
         });
     });
 }

ui/src/components/EntryDetailed.tsx

@@ -47,6 +47,7 @@ const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime}) => {
             >
                 <div
                     style={{opacity: 0.5}}
+                    id="entryDetailedTitleBodySize"
                 >
                     {formatSize(bodySize)}
                 </div>
@@ -58,6 +59,7 @@ const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime}) => {
             >
                 <div
                     style={{opacity: 0.5}}
+                    id="entryDetailedTitleElapsedTime"
                 >
                     {Math.round(elapsedTime)}ms
                 </div>

ui/src/components/Pages/TrafficPage/TrafficPage.tsx

@@ -329,7 +329,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus}) => {
             />
           </div>
         </div>
-        <div className={classes.details}>
+        <div className={classes.details} id="rightSideContainer">
           {focusedEntryId && <EntryDetailed />}
         </div>
       </div>}