Add component test

Signed-off-by: Viet Nguyen Duc <[email protected]>

Author: VietND96

javascript/grid-ui/src/tests/components/Node.test.tsx

@@ -20,8 +20,21 @@ import Node from '../../components/Node/Node'
 import NodeInfo from '../../models/node-info'
 import OsInfo from '../../models/os-info'
 import StereotypeInfo from '../../models/stereotype-info'
-import { render, screen } from '@testing-library/react'
+import { render, screen, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+
+jest.mock('../../components/LiveView/LiveView', () => {
+  return {
+    __esModule: true,
+    default: React.forwardRef((props: { url: string, scaleViewport?: boolean, onClose?: () => void }, ref) => {
+      React.useImperativeHandle(ref, () => ({
+        disconnect: jest.fn()
+      }))
+      return <div data-testid="mock-live-view" data-url={props.url}>LiveView Mock</div>
+    })
+  }
+})
 
 const osInfo: OsInfo = {
   name: 'Mac OS X',
@@ -49,24 +62,135 @@ const node: NodeInfo = {
   slotStereotypes: [slotStereotype]
 }
 
-it('renders basic node information', () => {
-  render(<Node node={node} />)
-  expect(screen.getByText(node.uri)).toBeInTheDocument()
-  expect(
-    screen.getByText(`Sessions: ${node.sessionCount}`)).toBeInTheDocument()
-  expect(screen.getByText(
-    `Max. Concurrency: ${node.maxSession}`)).toBeInTheDocument()
-})
+const sessionWithVnc = {
+  id: 'session-with-vnc',
+  capabilities: JSON.stringify({
+    'browserName': 'chrome',
+    'browserVersion': '88.0',
+    'se:vnc': 'ws://192.168.1.7:5900/websockify'
+  }),
+  nodeId: node.id
+}
+
+const sessionWithoutVnc = {
+  id: 'session-without-vnc',
+  capabilities: JSON.stringify({
+    'browserName': 'chrome',
+    'browserVersion': '88.0'
+  }),
+  nodeId: node.id
+}
+
+describe('Node component', () => {
+  it('renders basic node information', () => {
+    render(<Node node={node} />)
+    expect(screen.getByText(node.uri)).toBeInTheDocument()
+    expect(
+      screen.getByText(`Sessions: ${node.sessionCount}`)).toBeInTheDocument()
+    expect(screen.getByText(
+      `Max. Concurrency: ${node.maxSession}`)).toBeInTheDocument()
+  })
+
+  it('renders detailed node information', async () => {
+    render(<Node node={node}/>)
+    const user = userEvent.setup()
+    await user.click(screen.getByRole('button'))
+    expect(screen.getByText(`Node Id: ${node.id}`)).toBeInTheDocument()
+    expect(
+      screen.getByText(`Total slots: ${node.slotCount}`)).toBeInTheDocument()
+    expect(screen.getByText(`OS Arch: ${node.osInfo.arch}`)).toBeInTheDocument()
+    expect(screen.getByText(`OS Name: ${node.osInfo.name}`)).toBeInTheDocument()
+    expect(
+      screen.getByText(`OS Version: ${node.osInfo.version}`)).toBeInTheDocument()
+  })
+
+  it('does not render live view icon when no VNC session is available', () => {
+    render(<Node node={node} sessions={[sessionWithoutVnc]} origin="http://localhost:4444" />)
+    expect(screen.queryByTestId('VideocamIcon')).not.toBeInTheDocument()
+  })
+
+  it('renders live view icon when VNC session is available', () => {
+    render(<Node node={node} sessions={[sessionWithVnc]} origin="http://localhost:4444" />)
+    expect(screen.getByTestId('VideocamIcon')).toBeInTheDocument()
+  })
+
+  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')
+    expect(dialog).not.toBeNull()
+    if (dialog) {
+      expect(within(dialog as HTMLElement).getAllByText(node.uri).length).toBeGreaterThan(0)
+    }
+    expect(screen.getByTestId('mock-live-view')).toBeInTheDocument()
+  })
+
+  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')
+  })
+
+  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:')
+  })
 
-it('renders detailed node information', async () => {
-  render(<Node node={node}/>)
-  const user = userEvent.setup()
-  await user.click(screen.getByRole('button'))
-  expect(screen.getByText(`Node Id: ${node.id}`)).toBeInTheDocument()
-  expect(
-    screen.getByText(`Total slots: ${node.slotCount}`)).toBeInTheDocument()
-  expect(screen.getByText(`OS Arch: ${node.osInfo.arch}`)).toBeInTheDocument()
-  expect(screen.getByText(`OS Name: ${node.osInfo.name}`)).toBeInTheDocument()
-  expect(
-    screen.getByText(`OS Version: ${node.osInfo.version}`)).toBeInTheDocument()
+  it('handles invalid VNC URLs gracefully', async () => {
+    const invalidVncSession = {
+      id: 'session-invalid-vnc',
+      capabilities: JSON.stringify({
+        'browserName': 'chrome',
+        'browserVersion': '88.0',
+        'se:vnc': 'invalid-url'
+      }),
+      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('')
+  })
 })