1
// Licensed to the Software Freedom Conservancy (SFC) under one
2
// or more contributor license agreements.  See the NOTICE file
3
// distributed with this work for additional information
4
// regarding copyright ownership.  The SFC licenses this file
5
// to you under the Apache License, Version 2.0 (the
6
// "License"); you may not use this file except in compliance
7
// with the License.  You may obtain a copy of the License at
8
//
9
//   http://www.apache.org/licenses/LICENSE-2.0
10
//
11
// Unless required by applicable law or agreed to in writing,
12
// software distributed under the License is distributed on an
13
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
14
// KIND, either express or implied.  See the License for the
15
// specific language governing permissions and limitations
16
// under the License.
17

18
import * as React from 'react'
19
import ColumnSelector from '../../components/RunningSessions/ColumnSelector'
20
import { act, screen, within } from '@testing-library/react'
21
import { render } from '../utils/render-utils'
22
import userEvent from '@testing-library/user-event'
23
import '@testing-library/jest-dom'
24

25
const localStorageMock = (() => {
26
  let store: Record<string, string> = {}
27
  return {
28
    getItem: jest.fn((key: string) => store[key] || null),
29
    setItem: jest.fn((key: string, value: string) => {
30
      store[key] = value
31
    }),
32
    clear: jest.fn(() => {
33
      store = {}
34
    })
35
  }
36
})()
37

38
Object.defineProperty(window, 'localStorage', {
39
  value: localStorageMock
40
})
41

42
const mockSessions = [
43
  {
44
    id: 'session1',
45
    capabilities: JSON.stringify({
46
      browserName: 'chrome',
47
      browserVersion: '88.0',
48
      platformName: 'windows',
49
      acceptInsecureCerts: true
50
    })
51
  },
52
  {
53
    id: 'session2',
54
    capabilities: JSON.stringify({
55
      browserName: 'firefox',
56
      browserVersion: '78.0',
57
      platformName: 'linux',
58
      acceptSslCerts: false
59
    })
60
  }
61
]
62

63
beforeEach(() => {
64
  localStorageMock.clear()
65
  jest.clearAllMocks()
66
})
67

68
it('renders column selector button', () => {
69
  const onColumnSelectionChange = jest.fn()
70
  render(
71
    <ColumnSelector
72
      sessions={mockSessions}
73
      selectedColumns={[]}
74
      onColumnSelectionChange={onColumnSelectionChange}
75
    />
76
  )
77

78
  const button = screen.getByRole('button', { name: /select columns/i })
79
  expect(button).toBeInTheDocument()
80

81
  expect(screen.getByTestId('ViewColumnIcon')).toBeInTheDocument()
82
})
83

84
it('opens dialog when button is clicked', async () => {
85
  const onColumnSelectionChange = jest.fn()
86
  render(
87
    <ColumnSelector
88
      sessions={mockSessions}
89
      selectedColumns={[]}
90
      onColumnSelectionChange={onColumnSelectionChange}
91
    />
92
  )
93

94
  const user = userEvent.setup()
95
  await user.click(screen.getByRole('button', { name: /select columns/i }))
96

97
  expect(screen.getByText('Select Columns to Display')).toBeInTheDocument()
98
  expect(screen.getByText('Select capability fields to display as additional columns:')).toBeInTheDocument()
99
})
100

101
it('displays available columns from session capabilities', async () => {
102
  const onColumnSelectionChange = jest.fn()
103
  render(
104
    <ColumnSelector
105
      sessions={mockSessions}
106
      selectedColumns={[]}
107
      onColumnSelectionChange={onColumnSelectionChange}
108
    />
109
  )
110

111
  const user = userEvent.setup()
112
  await user.click(screen.getByRole('button', { name: /select columns/i }))
113

114
  expect(screen.getByLabelText('browserName')).toBeInTheDocument()
115
  expect(screen.getByLabelText('browserVersion')).toBeInTheDocument()
116
  expect(screen.getByLabelText('platformName')).toBeInTheDocument()
117
  expect(screen.getByLabelText('acceptInsecureCerts')).toBeInTheDocument()
118
  expect(screen.getByLabelText('acceptSslCerts')).toBeInTheDocument()
119
})
120

121
it('shows selected columns as checked', async () => {
122
  const onColumnSelectionChange = jest.fn()
123
  const selectedColumns = ['browserName', 'platformName']
124

125
  render(
126
    <ColumnSelector
127
      sessions={mockSessions}
128
      selectedColumns={selectedColumns}
129
      onColumnSelectionChange={onColumnSelectionChange}
130
    />
131
  )
132

133
  const user = userEvent.setup()
134
  await user.click(screen.getByRole('button', { name: /select columns/i }))
135

136
  expect(screen.getByLabelText('browserName')).toBeChecked()
137
  expect(screen.getByLabelText('platformName')).toBeChecked()
138

139
  expect(screen.getByLabelText('browserVersion')).not.toBeChecked()
140
  expect(screen.getByLabelText('acceptInsecureCerts')).not.toBeChecked()
141
})
142

143
it('toggles column selection when checkbox is clicked', async () => {
144
  const onColumnSelectionChange = jest.fn()
145
  const selectedColumns = ['browserName']
146

147
  render(
148
    <ColumnSelector
149
      sessions={mockSessions}
150
      selectedColumns={selectedColumns}
151
      onColumnSelectionChange={onColumnSelectionChange}
152
    />
153
  )
154

155
  const user = userEvent.setup()
156
  await user.click(screen.getByRole('button', { name: /select columns/i }))
157

158
  await user.click(screen.getByLabelText('platformName'))
159
  await user.click(screen.getByLabelText('browserName'))
160

161
  await user.click(screen.getByRole('button', { name: /apply/i }))
162

163
  expect(onColumnSelectionChange).toHaveBeenCalledWith(['platformName'])
164
})
165

166
it('selects all columns when "Select All" is clicked', async () => {
167
  const onColumnSelectionChange = jest.fn()
168

169
  render(
170
    <ColumnSelector
171
      sessions={mockSessions}
172
      selectedColumns={[]}
173
      onColumnSelectionChange={onColumnSelectionChange}
174
    />
175
  )
176

177
  const user = userEvent.setup()
178
  await user.click(screen.getByRole('button', { name: /select columns/i }))
179

180
  await user.click(screen.getByLabelText(/select all/i))
181

182
  await user.click(screen.getByRole('button', { name: /apply/i }))
183

184
  expect(onColumnSelectionChange).toHaveBeenCalled()
185
  const allColumns = ['browserName', 'browserVersion', 'platformName', 'acceptInsecureCerts', 'acceptSslCerts']
186
  expect(onColumnSelectionChange.mock.calls[0][0].sort()).toEqual(allColumns.sort())
187
})
188

189
it('unselects all columns when "Select All" is unchecked', async () => {
190
  const onColumnSelectionChange = jest.fn()
191
  const allColumns = ['browserName', 'browserVersion', 'platformName', 'acceptInsecureCerts', 'acceptSslCerts']
192

193
  render(
194
    <ColumnSelector
195
      sessions={mockSessions}
196
      selectedColumns={allColumns}
197
      onColumnSelectionChange={onColumnSelectionChange}
198
    />
199
  )
200

201
  const user = userEvent.setup()
202
  await user.click(screen.getByRole('button', { name: /select columns/i }))
203

204
  await user.click(screen.getByLabelText(/select all/i))
205

206
  await user.click(screen.getByRole('button', { name: /apply/i }))
207

208
  expect(onColumnSelectionChange).toHaveBeenCalledWith([])
209
})
210

211
it('closes dialog without changes when Cancel is clicked', async () => {
212
  const onColumnSelectionChange = jest.fn()
213
  const selectedColumns = ['browserName']
214

215
  render(
216
    <ColumnSelector
217
      sessions={mockSessions}
218
      selectedColumns={selectedColumns}
219
      onColumnSelectionChange={onColumnSelectionChange}
220
    />
221
  )
222

223
  const user = userEvent.setup()
224
  await user.click(screen.getByRole('button', { name: /select columns/i }))
225

226
  await user.click(screen.getByLabelText('platformName'))
227

228
  await user.click(screen.getByRole('button', { name: /cancel/i }))
229

230
  expect(onColumnSelectionChange).not.toHaveBeenCalled()
231
})
232

233
it('saves capability keys to localStorage', async () => {
234
  render(
235
    <ColumnSelector
236
      sessions={mockSessions}
237
      selectedColumns={[]}
238
      onColumnSelectionChange={jest.fn()}
239
    />
240
  )
241

242
  expect(localStorageMock.setItem).toHaveBeenCalledWith(
243
    'selenium-grid-all-capability-keys',
244
    expect.any(String)
245
  )
246

247
  const savedKeys = JSON.parse(localStorageMock.setItem.mock.calls[0][1])
248
  expect(savedKeys).toContain('browserName')
249
  expect(savedKeys).toContain('browserVersion')
250
  expect(savedKeys).toContain('platformName')
251
  expect(savedKeys).toContain('acceptInsecureCerts')
252
  expect(savedKeys).toContain('acceptSslCerts')
253
})
254

255
it('loads capability keys from localStorage', async () => {
256
  const savedKeys = ['browserName', 'customCapability', 'platformName']
257
  localStorageMock.getItem.mockReturnValueOnce(JSON.stringify(savedKeys))
258

259
  render(
260
    <ColumnSelector
261
      sessions={[]}
262
      selectedColumns={[]}
263
      onColumnSelectionChange={jest.fn()}
264
    />
265
  )
266

267
  const user = userEvent.setup()
268
  await user.click(screen.getByRole('button', { name: /select columns/i }))
269

270
  expect(screen.getByLabelText('browserName')).toBeInTheDocument()
271
  expect(screen.getByLabelText('customCapability')).toBeInTheDocument()
272
  expect(screen.getByLabelText('platformName')).toBeInTheDocument()
273
})
274

275