From f7c200b8219b790dd4d58d3bf9a9de0fe5960eea Mon Sep 17 00:00:00 2001
From: Adam Kol <93466081+AdamKol-up9@users.noreply.github.com>
Date: Tue, 1 Feb 2022 12:43:45 +0200
Subject: [PATCH] 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>
---
 .../cypress/integration/tests/UiTest.js       | 31 +++++++++++++++++++
 ui/src/components/EntryDetailed.tsx           |  2 ++
 .../Pages/TrafficPage/TrafficPage.tsx         |  2 +-
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/acceptanceTests/cypress/integration/tests/UiTest.js b/acceptanceTests/cypress/integration/tests/UiTest.js
index b34ddf663..345945149 100644
--- a/acceptanceTests/cypress/integration/tests/UiTest.js
+++ b/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({
diff --git a/ui/src/components/EntryDetailed.tsx b/ui/src/components/EntryDetailed.tsx
index 3fe69be3c..ac9106a8c 100644
--- a/ui/src/components/EntryDetailed.tsx
+++ b/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>
diff --git a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx b/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
index 9ccb729c1..fbc6f47d9 100644
--- a/ui/src/components/Pages/TrafficPage/TrafficPage.tsx
+++ b/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>}