From b72582a9d3322f34cdc561a3dafdc93596679dfa Mon Sep 17 00:00:00 2001
From: Viet Nguyen Duc <nguyenducviet4496@gmail.com>
Date: Fri, 23 May 2025 23:36:20 +0700
Subject: [PATCH] [ci] Clear warning from Grid UI component tests

---
 .../grid-ui/src/screens/Overview/Overview.tsx |  8 +-
 .../src/tests/components/Node.test.tsx        | 38 +++++-----
 .../src/tests/components/Overview.test.tsx    | 73 ++++++++++++++++++-
 3 files changed, 92 insertions(+), 27 deletions(-)

diff --git a/javascript/grid-ui/src/screens/Overview/Overview.tsx b/javascript/grid-ui/src/screens/Overview/Overview.tsx
index bdd62600206e3..8a877fe8b845d 100644
--- a/javascript/grid-ui/src/screens/Overview/Overview.tsx
+++ b/javascript/grid-ui/src/screens/Overview/Overview.tsx
@@ -48,7 +48,7 @@ function Overview (): JSX.Element {
     pollInterval: GridConfig.status.xhrPollingIntervalMillis,
     fetchPolicy: 'network-only'
   })
-  
+
   const { data: sessionsData } = useQuery(GRID_SESSIONS_QUERY, {
     pollInterval: GridConfig.status.xhrPollingIntervalMillis,
     fetchPolicy: 'network-only'
@@ -190,7 +190,7 @@ function Overview (): JSX.Element {
             <Select value={sortOption} onChange={handleSortChange}
                     label="Sort By" style={{ minWidth: '170px' }}>
               {Object.keys(sortProperties).map((key) => (
-                <MenuItem value={key}>
+                <MenuItem key={key} value={key}>
                   {sortPropertiesLabel[key]}
                 </MenuItem>
               ))}
@@ -223,8 +223,8 @@ function Overview (): JSX.Element {
                 flexDirection: 'column'
               }}
             >
-              <Node 
-                node={node} 
+              <Node
+                node={node}
                 sessions={sessionsData?.sessionsInfo?.sessions?.filter(
                   session => session.nodeId === node.id
                 ) || []}
diff --git a/javascript/grid-ui/src/tests/components/Node.test.tsx b/javascript/grid-ui/src/tests/components/Node.test.tsx
index a114626f3692a..59aa10ac56831 100644
--- a/javascript/grid-ui/src/tests/components/Node.test.tsx
+++ b/javascript/grid-ui/src/tests/components/Node.test.tsx
@@ -67,7 +67,7 @@ const sessionWithVnc = {
   capabilities: JSON.stringify({
     'browserName': 'chrome',
     'browserVersion': '88.0',
-    'se:vnc': 'ws://192.168.1.7:5900/websockify'
+    'se:vnc': 'ws://172.17.0.2:4444/session/4d31d065-6cb9-4545-ac8d-d70ed5f5168b/se/vnc'
   }),
   nodeId: node.id
 }
@@ -116,10 +116,10 @@ describe('Node component', () => {
 
   it('opens live view dialog when camera icon is clicked', async () => {
     render(<Node node={node} sessions={[sessionWithVnc]} origin="http://localhost:4444" />)
-    
+
     const user = userEvent.setup()
     await user.click(screen.getByTestId('VideocamIcon'))
-    
+
     expect(screen.getByText('Node Session Live View')).toBeInTheDocument()
     const dialogTitle = screen.getByText('Node Session Live View')
     const dialog = dialogTitle.closest('.MuiDialog-root')
@@ -132,42 +132,40 @@ describe('Node component', () => {
 
   it('closes live view dialog when close button is clicked', async () => {
     render(<Node node={node} sessions={[sessionWithVnc]} origin="http://localhost:4444" />)
-    
+
     const user = userEvent.setup()
     await user.click(screen.getByTestId('VideocamIcon'))
-    
+
     expect(screen.getByText('Node Session Live View')).toBeInTheDocument()
-    
+
     await user.click(screen.getByRole('button', { name: /close/i }))
-    
+
     expect(screen.queryByText('Node Session Live View')).not.toBeInTheDocument()
   })
 
   it('correctly transforms VNC URL for WebSocket connection', async () => {
     const origin = 'https://grid.example.com'
     render(<Node node={node} sessions={[sessionWithVnc]} origin={origin} />)
-    
+
     const user = userEvent.setup()
     await user.click(screen.getByTestId('VideocamIcon'))
-    
+
     const liveView = screen.getByTestId('mock-live-view')
     const url = liveView.getAttribute('data-url')
-    
-    expect(url).toContain('wss:')
-    expect(url).toContain('grid.example.com')
-    expect(url).toContain('/websockify')
+
+    expect(url).toBe('wss://grid.example.com/session/4d31d065-6cb9-4545-ac8d-d70ed5f5168b/se/vnc')
   })
 
   it('handles HTTP to WS protocol conversion correctly', async () => {
     const httpOrigin = 'http://grid.example.com'
     render(<Node node={node} sessions={[sessionWithVnc]} origin={httpOrigin} />)
-    
+
     const user = userEvent.setup()
     await user.click(screen.getByTestId('VideocamIcon'))
-    
+
     const liveView = screen.getByTestId('mock-live-view')
     const url = liveView.getAttribute('data-url')
-    
+
     expect(url).toContain('ws:')
     expect(url).not.toContain('wss:')
   })
@@ -182,15 +180,15 @@ describe('Node component', () => {
       }),
       nodeId: node.id
     }
-    
+
     render(<Node node={node} sessions={[invalidVncSession]} origin="http://localhost:4444" />)
-    
+
     const user = userEvent.setup()
     await user.click(screen.getByTestId('VideocamIcon'))
-    
+
     const liveView = screen.getByTestId('mock-live-view')
     const url = liveView.getAttribute('data-url')
-    
+
     expect(url).toBe('')
   })
 })
diff --git a/javascript/grid-ui/src/tests/components/Overview.test.tsx b/javascript/grid-ui/src/tests/components/Overview.test.tsx
index 393e06e81692c..13f6f2810e047 100644
--- a/javascript/grid-ui/src/tests/components/Overview.test.tsx
+++ b/javascript/grid-ui/src/tests/components/Overview.test.tsx
@@ -102,7 +102,16 @@ const mockSessionsData = {
           browserVersion: '88.0',
           platformName: 'linux',
           'se:vnc': 'ws://192.168.1.10:5900/websockify'
-        })
+        }),
+        startTime: '2023-01-01T00:00:00Z',
+        uri: 'http://192.168.1.10:4444/session/session1',
+        nodeUri: 'http://192.168.1.10:4444',
+        sessionDurationMillis: 60000,
+        slot: {
+          id: 'slot1',
+          stereotype: '{"browserName":"chrome"}',
+          lastStarted: '2023-01-01T00:00:00Z'
+        }
       },
       {
         id: 'session2',
@@ -111,9 +120,19 @@ const mockSessionsData = {
           browserName: 'firefox',
           browserVersion: '78.0',
           platformName: 'windows'
-        })
+        }),
+        startTime: '2023-01-01T00:00:00Z',
+        uri: 'http://192.168.1.11:4444/session/session2',
+        nodeUri: 'http://192.168.1.11:4444',
+        sessionDurationMillis: 60000,
+        slot: {
+          id: 'slot2',
+          stereotype: '{"browserName":"firefox"}',
+          lastStarted: '2023-01-01T00:00:00Z'
+        }
       }
-    ]
+    ],
+    sessionQueueRequests: []
   }
 }
 
@@ -126,6 +145,22 @@ const mocks = [
       data: mockNodesData
     }
   },
+  {
+    request: {
+      query: GRID_SESSIONS_QUERY
+    },
+    result: {
+      data: mockSessionsData
+    }
+  },
+  {
+    request: {
+      query: GRID_SESSIONS_QUERY
+    },
+    result: {
+      data: mockSessionsData
+    }
+  },
   {
     request: {
       query: GRID_SESSIONS_QUERY
@@ -295,6 +330,22 @@ describe('Overview component', () => {
           query: NODES_QUERY
         },
         error: new Error('Network error')
+      },
+      {
+        request: {
+          query: GRID_SESSIONS_QUERY
+        },
+        result: {
+          data: mockSessionsData
+        }
+      },
+      {
+        request: {
+          query: GRID_SESSIONS_QUERY
+        },
+        result: {
+          data: mockSessionsData
+        }
       }
     ]
 
@@ -319,6 +370,22 @@ describe('Overview component', () => {
         result: {
           data: { nodesInfo: { nodes: [] } }
         }
+      },
+      {
+        request: {
+          query: GRID_SESSIONS_QUERY
+        },
+        result: {
+          data: mockSessionsData
+        }
+      },
+      {
+        request: {
+          query: GRID_SESSIONS_QUERY
+        },
+        result: {
+          data: mockSessionsData
+        }
       }
     ]