Skip to content

Commit 0d8edc9

Browse files
diemoldiemol
committed
[grid] Bumping several versions in the UI
- Apollo Client - React to v18 - TestingLibrary
1 parent 210bcf5 commit 0d8edc9

10 files changed

Lines changed: 3150 additions & 1959 deletions

File tree

‎javascript/grid-ui/.env‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
SKIP_PREFLIGHT_CHECK=true
1+
SKIP_PREFLIGHT_CHECK=true

‎javascript/grid-ui/package-lock.json‎

Lines changed: 1511 additions & 910 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎javascript/grid-ui/package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@
44
"private": true,
55
"type": "module",
66
"dependencies": {
7-
"@apollo/client": "^3.6.1",
7+
"@apollo/client": "^3.6.2",
88
"@emotion/react": "^11.9.0",
99
"@emotion/styled": "^11.8.1",
1010
"@mui/icons-material": "^5.6.2",
1111
"@mui/material": "^5.6.4",
1212
"@novnc/novnc": "^1.2.0",
13-
"@types/react": "^17.0.43",
14-
"@types/react-dom": "^17.0.14",
13+
"@types/react": "^18.0.8",
14+
"@types/react-dom": "^18.0.3",
1515
"@types/react-modal": "^3.12.0",
1616
"@types/react-router-dom": "^5.3.3",
1717
"graphql": "^16.4.0",
1818
"graphql.macro": "^1.4.2",
1919
"pretty-ms": "^7.0.1",
20-
"react": "^17.0.1",
21-
"react-dom": "^17.0.1",
22-
"react-modal": "^3.14.3",
20+
"react": "^18.1.0",
21+
"react-dom": "^18.1.0",
22+
"react-modal": "^3.15.1",
2323
"react-router-dom": "^6.3.0",
2424
"source-map-explorer": "^2.5.2"
2525
},
@@ -48,8 +48,8 @@
4848
"devDependencies": {
4949
"@babel/preset-react": "^7.16.7",
5050
"@testing-library/jest-dom": "^5.16.3",
51-
"@testing-library/react": "^12.1.4",
52-
"@testing-library/user-event": "^13.5.0",
51+
"@testing-library/react": "^13.1.1",
52+
"@testing-library/user-event": "^14.1.1",
5353
"react-scripts": "5.0.1",
5454
"ts-standard": "^11.0.0",
5555
"typescript": "^3.9.10"

‎javascript/grid-ui/src/index.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,28 @@
11
import { CssBaseline } from '@mui/material'
22
import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles'
33
import React from 'react'
4-
import ReactDOM from 'react-dom'
4+
import ReactDOM from 'react-dom/client'
55
import { HashRouter as Router } from 'react-router-dom'
66
import App from './App'
77
import * as serviceWorker from './serviceWorker'
88
import theme from './theme/theme'
99
import './index.css'
1010

11-
ReactDOM.render(
11+
const root = ReactDOM.createRoot(
12+
document.getElementById('root') as HTMLElement
13+
)
14+
15+
root.render(
1216
<React.StrictMode>
1317
<StyledEngineProvider injectFirst>
1418
<ThemeProvider theme={theme}>
15-
<CssBaseline />
19+
<CssBaseline/>
1620
<Router>
17-
<App />
21+
<App/>
1822
</Router>
1923
</ThemeProvider>
2024
</StyledEngineProvider>
21-
</React.StrictMode>,
22-
document.getElementById('root')
25+
</React.StrictMode>
2326
)
2427

2528
// If you want your app to work offline and load faster, you can change

‎javascript/grid-ui/src/tests/components/Loading.test.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@
1616
// under the License.
1717

1818
import * as React from 'react'
19-
import * as ReactDOM from 'react-dom'
19+
import * as ReactDOM from 'react-dom/client'
2020
import Loading from '../../components/Loading/Loading'
2121

2222
it('renders without crashing', () => {
23-
const div = document.createElement('div')
24-
ReactDOM.render(<Loading />, div)
23+
const div = ReactDOM.createRoot(
24+
document.createElement('root') as HTMLElement
25+
)
26+
div.render(<Loading/>)
2527
})

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,10 @@ it('renders basic node information', () => {
5858
`Max. Concurrency: ${node.maxSession}`)).toBeInTheDocument()
5959
})
6060

61-
it('renders detailed node information', () => {
62-
render(<Node node={node} />)
63-
const leftClick = { button: 0 }
64-
userEvent.click(screen.getByRole('button'), leftClick)
61+
it('renders detailed node information', async () => {
62+
render(<Node node={node}/>)
63+
const user = userEvent.setup()
64+
await user.click(screen.getByRole('button'))
6565
expect(screen.getByText(`Node Id: ${node.id}`)).toBeInTheDocument()
6666
expect(
6767
screen.getByText(`Total slots: ${node.slotCount}`)).toBeInTheDocument()

‎javascript/grid-ui/src/tests/components/RunningSessions.test.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,13 +63,12 @@ it('renders basic session information', () => {
6363
expect(screen.getByText(session.nodeUri)).toBeInTheDocument()
6464
})
6565

66-
it('renders detailed session information', () => {
67-
render(<RunningSessions sessions={sessions} origin={origin} />)
66+
it('renders detailed session information', async () => {
67+
render(<RunningSessions sessions={sessions} origin={origin}/>)
6868
const session = sessions[0]
6969
const sessionRow = screen.getByText(session.id).closest('tr')
70-
const leftClick = { button: 0 }
71-
/** @ts-expect-error: sessionRow can be null */
72-
userEvent.click(within(sessionRow).getByRole('button'), leftClick)
70+
const user = userEvent.setup()
71+
await user.click(within(sessionRow as HTMLElement).getByRole('button'))
7372
const dialogPane = screen.getByText('Capabilities:').closest('div')
7473
expect(dialogPane).toHaveTextContent('Capabilities:' + session.capabilities)
7574
})

‎javascript/grid-ui/src/tests/components/TopBar.test.tsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,42 +20,44 @@ import TopBar from '../../components/TopBar/TopBar'
2020
import { render, screen } from '@testing-library/react'
2121
import userEvent from '@testing-library/user-event'
2222

23-
const leftClick = { button: 0 }
23+
const user = userEvent.setup()
2424

2525
it('renders basic information', () => {
2626
const subheaderText = 'Hello, world!'
2727
const handleClick = jest.fn()
28-
render(<TopBar subheader={subheaderText} drawerOpen toggleDrawer={handleClick} />)
28+
render(<TopBar subheader={subheaderText} drawerOpen
29+
toggleDrawer={handleClick}/>)
2930
expect(screen.getByText('Selenium Grid')).toBeInTheDocument()
3031
expect(screen.getByRole('img')).toHaveAttribute('alt', 'Selenium Grid Logo')
3132
expect(screen.getByText(subheaderText)).toBeInTheDocument()
3233
})
3334

34-
it('can toggle drawer if error flag is not set and the drawer is open', () => {
35-
const handleClick = jest.fn()
36-
render(<TopBar subheader='4.0.0' drawerOpen toggleDrawer={handleClick} />)
37-
const button = screen.getByRole('button')
38-
expect(button.getAttribute('aria-label')).toBe('close drawer')
39-
userEvent.click(button, leftClick)
40-
expect(handleClick).toHaveBeenCalledTimes(1)
41-
})
35+
it('can toggle drawer if error flag is not set and the drawer is open',
36+
async () => {
37+
const handleClick = jest.fn()
38+
render(<TopBar subheader="4.0.0" drawerOpen toggleDrawer={handleClick}/>)
39+
const button = screen.getByRole('button')
40+
expect(button.getAttribute('aria-label')).toBe('close drawer')
41+
await user.click(button)
42+
expect(handleClick).toHaveBeenCalledTimes(1)
43+
})
4244

4345
it('can toggle drawer if error flag is not set and the drawer is closed',
44-
() => {
46+
async () => {
4547
const handleClick = jest.fn()
46-
render(<TopBar subheader='4.0.0' toggleDrawer={handleClick} />)
48+
render(<TopBar subheader="4.0.0" toggleDrawer={handleClick}/>)
4749
const button = screen.getByRole('button')
4850
expect(button.getAttribute('aria-label')).toBe('open drawer')
49-
userEvent.click(button, leftClick)
51+
await user.click(button)
5052
expect(handleClick).toHaveBeenCalledTimes(1)
5153
})
5254

53-
it('should not toggle drawer if error flag is set', () => {
55+
it('should not toggle drawer if error flag is set', async () => {
5456
const handleClick = jest.fn()
55-
render(<TopBar subheader='4.0.0' error toggleDrawer={handleClick} />)
57+
render(<TopBar subheader="4.0.0" error toggleDrawer={handleClick}/>)
5658
expect(screen.queryByRole('button')).not.toBeInTheDocument()
5759
const link = screen.getByRole('link')
5860
expect(link.getAttribute('href')).toBe('#help')
59-
userEvent.click(link, leftClick)
61+
await user.click(link)
6062
expect(handleClick).toHaveBeenCalledTimes(0)
6163
})

0 commit comments

Comments
 (0)