Add component test

VietND96 · VietND96 · commit 0a5b6061d919 · 2025-05-23T17:31:11.000+07:00
Signed-off-by: Viet Nguyen Duc &lt;nguyenducviet4496@gmail.com&gt;
diff --git a/javascript/grid-ui/src/tests/components/ColumnSelector.test.tsx b/javascript/grid-ui/src/tests/components/ColumnSelector.test.tsx
@@ -0,0 +1,259 @@
+//
+//
+
+import * as React from 'react'
+import ColumnSelector from '../../components/RunningSessions/ColumnSelector'
+import { act, screen, within } from '@testing-library/react'
+import { render } from '../utils/render-utils'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+
+const localStorageMock = (() => {
+  let store: Record<string, string> = {}
+  return {
+    getItem: jest.fn((key: string) => store[key] || null),
+    setItem: jest.fn((key: string, value: string) => {
+      store[key] = value
+    }),
+    clear: jest.fn(() => {
+      store = {}
+    })
+  }
+})()
+
+Object.defineProperty(window, 'localStorage', {
+  value: localStorageMock
+})
+
+const mockSessions = [
+  {
+    id: 'session1',
+    capabilities: JSON.stringify({
+      browserName: 'chrome',
+      browserVersion: '88.0',
+      platformName: 'windows',
+      acceptInsecureCerts: true
+    })
+  },
+  {
+    id: 'session2',
+    capabilities: JSON.stringify({
+      browserName: 'firefox',
+      browserVersion: '78.0',
+      platformName: 'linux',
+      acceptSslCerts: false
+    })
+  }
+]
+
+beforeEach(() => {
+  localStorageMock.clear()
+  jest.clearAllMocks()
+})
+
+it('renders column selector button', () => {
+  const onColumnSelectionChange = jest.fn()
+  render(
+    <ColumnSelector
+      sessions={mockSessions}
+      selectedColumns={[]}
+      onColumnSelectionChange={onColumnSelectionChange}
+    />
+  )
+  
+  const button = screen.getByRole('button', { name: /select columns/i })
+  expect(button).toBeInTheDocument()
+  
+  expect(screen.getByTestId('ViewColumnIcon')).toBeInTheDocument()
+})
+
+it('opens dialog when button is clicked', async () => {
+  const onColumnSelectionChange = jest.fn()
+  render(
+    <ColumnSelector
+      sessions={mockSessions}
+      selectedColumns={[]}
+      onColumnSelectionChange={onColumnSelectionChange}
+    />
+  )
+  
+  const user = userEvent.setup()
+  await user.click(screen.getByRole('button', { name: /select columns/i }))
+  
+  expect(screen.getByText('Select Columns to Display')).toBeInTheDocument()
+  expect(screen.getByText('Select capability fields to display as additional columns:')).toBeInTheDocument()
+})
+
+it('displays available columns from session capabilities', async () => {
+  const onColumnSelectionChange = jest.fn()
+  render(
+    <ColumnSelector
+      sessions={mockSessions}
+      selectedColumns={[]}
+      onColumnSelectionChange={onColumnSelectionChange}
+    />
+  )
+  
+  const user = userEvent.setup()
+  await user.click(screen.getByRole('button', { name: /select columns/i }))
+  
+  expect(screen.getByLabelText('browserName')).toBeInTheDocument()
+  expect(screen.getByLabelText('browserVersion')).toBeInTheDocument()
+  expect(screen.getByLabelText('platformName')).toBeInTheDocument()
+  expect(screen.getByLabelText('acceptInsecureCerts')).toBeInTheDocument()
+  expect(screen.getByLabelText('acceptSslCerts')).toBeInTheDocument()
+})
+
+it('shows selected columns as checked', async () => {
+  const onColumnSelectionChange = jest.fn()
+  const selectedColumns = ['browserName', 'platformName']
+  
+  render(
+    <ColumnSelector
+      sessions={mockSessions}
+      selectedColumns={selectedColumns}
+      onColumnSelectionChange={onColumnSelectionChange}
+    />
+  )
+  
+  const user = userEvent.setup()
+  await user.click(screen.getByRole('button', { name: /select columns/i }))
+  
+  expect(screen.getByLabelText('browserName')).toBeChecked()
+  expect(screen.getByLabelText('platformName')).toBeChecked()
+  
+  expect(screen.getByLabelText('browserVersion')).not.toBeChecked()
+  expect(screen.getByLabelText('acceptInsecureCerts')).not.toBeChecked()
+})
+
+it('toggles column selection when checkbox is clicked', async () => {
+  const onColumnSelectionChange = jest.fn()
+  const selectedColumns = ['browserName']
+  
+  render(
+    <ColumnSelector
+      sessions={mockSessions}
+      selectedColumns={selectedColumns}
+      onColumnSelectionChange={onColumnSelectionChange}
+    />
+  )
+  
+  const user = userEvent.setup()
+  await user.click(screen.getByRole('button', { name: /select columns/i }))
+  
+  await user.click(screen.getByLabelText('platformName'))
+  await user.click(screen.getByLabelText('browserName'))
+  
+  await user.click(screen.getByRole('button', { name: /apply/i }))
+  
+  expect(onColumnSelectionChange).toHaveBeenCalledWith(['platformName'])
+})
+
+it('selects all columns when "Select All" is clicked', async () => {
+  const onColumnSelectionChange = jest.fn()
+  
+  render(
+    <ColumnSelector
+      sessions={mockSessions}
+      selectedColumns={[]}
+      onColumnSelectionChange={onColumnSelectionChange}
+    />
+  )
+  
+  const user = userEvent.setup()
+  await user.click(screen.getByRole('button', { name: /select columns/i }))
+  
+  await user.click(screen.getByLabelText(/select all/i))
+  
+  await user.click(screen.getByRole('button', { name: /apply/i }))
+  
+  expect(onColumnSelectionChange).toHaveBeenCalled()
+  const allColumns = ['browserName', 'browserVersion', 'platformName', 'acceptInsecureCerts', 'acceptSslCerts']
+  expect(onColumnSelectionChange.mock.calls[0][0].sort()).toEqual(allColumns.sort())
+})
+
+it('unselects all columns when "Select All" is unchecked', async () => {
+  const onColumnSelectionChange = jest.fn()
+  const allColumns = ['browserName', 'browserVersion', 'platformName', 'acceptInsecureCerts', 'acceptSslCerts']
+  
+  render(
+    <ColumnSelector
+      sessions={mockSessions}
+      selectedColumns={allColumns}
+      onColumnSelectionChange={onColumnSelectionChange}
+    />
+  )
+  
+  const user = userEvent.setup()
+  await user.click(screen.getByRole('button', { name: /select columns/i }))
+  
+  await user.click(screen.getByLabelText(/select all/i))
+  
+  await user.click(screen.getByRole('button', { name: /apply/i }))
+  
+  expect(onColumnSelectionChange).toHaveBeenCalledWith([])
+})
+
+it('closes dialog without changes when Cancel is clicked', async () => {
+  const onColumnSelectionChange = jest.fn()
+  const selectedColumns = ['browserName']
+  
+  render(
+    <ColumnSelector
+      sessions={mockSessions}
+      selectedColumns={selectedColumns}
+      onColumnSelectionChange={onColumnSelectionChange}
+    />
+  )
+  
+  const user = userEvent.setup()
+  await user.click(screen.getByRole('button', { name: /select columns/i }))
+  
+  await user.click(screen.getByLabelText('platformName'))
+  
+  await user.click(screen.getByRole('button', { name: /cancel/i }))
+  
+  expect(onColumnSelectionChange).not.toHaveBeenCalled()
+})
+
+it('saves capability keys to localStorage', async () => {
+  render(
+    <ColumnSelector
+      sessions={mockSessions}
+      selectedColumns={[]}
+      onColumnSelectionChange={jest.fn()}
+    />
+  )
+  
+  expect(localStorageMock.setItem).toHaveBeenCalledWith(
+    'selenium-grid-all-capability-keys',
+    expect.any(String)
+  )
+  
+  const savedKeys = JSON.parse(localStorageMock.setItem.mock.calls[0][1])
+  expect(savedKeys).toContain('browserName')
+  expect(savedKeys).toContain('browserVersion')
+  expect(savedKeys).toContain('platformName')
+  expect(savedKeys).toContain('acceptInsecureCerts')
+  expect(savedKeys).toContain('acceptSslCerts')
+})
+
+it('loads capability keys from localStorage', async () => {
+  const savedKeys = ['browserName', 'customCapability', 'platformName']
+  localStorageMock.getItem.mockReturnValueOnce(JSON.stringify(savedKeys))
+  
+  render(
+    <ColumnSelector
+      sessions={[]}
+      selectedColumns={[]}
+      onColumnSelectionChange={jest.fn()}
+    />
+  )
+  
+  const user = userEvent.setup()
+  await user.click(screen.getByRole('button', { name: /select columns/i }))
+  
+  expect(screen.getByLabelText('browserName')).toBeInTheDocument()
+  expect(screen.getByLabelText('customCapability')).toBeInTheDocument()
+  expect(screen.getByLabelText('platformName')).toBeInTheDocument()
+})
