Cypress: first step of the sanity test (#727)

Co-authored-by: gadotroee <55343099+gadotroee@users.noreply.github.com>
Co-authored-by: Roee Gadot <roee.gadot@up9.com>

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({

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>}