Skip to content

Commit

Permalink
refactor(app, components, shared-data, protocol-designer, react-api-c…
Browse files Browse the repository at this point in the history
…lient): update to react 18 (#14114)

Update all react projects to react 18 and manage its sub dependencies

Co-authored-by: Shlok Amin <[email protected]>
  • Loading branch information
2 people authored and ncdiehl11 committed Dec 19, 2023
1 parent 3a16568 commit 8cb10c0
Show file tree
Hide file tree
Showing 463 changed files with 5,641 additions and 38,721 deletions.
10 changes: 9 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ module.exports = {

extends: ['standard-with-typescript', 'plugin:react/recommended', 'prettier'],

plugins: ['react', 'react-hooks', 'json', 'jest'],
plugins: ['react', 'react-hooks', 'json', 'jest', 'testing-library'],

rules: {
camelcase: 'off',
Expand Down Expand Up @@ -95,6 +95,14 @@ module.exports = {
'jest/no-conditional-expect': 'warn',
},
},
{
files: ['**/__tests__/**test.tsx'],
env: { jest: true },
extends: ['plugin:testing-library/react'],
rules: {
'testing-library/prefer-screen-queries': 'warn',
},
},
{
files: ['**/*.stories.tsx'],
rules: {
Expand Down
14 changes: 6 additions & 8 deletions app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,14 @@
"@ebay/nice-modal-react": "1.2.13",
"@fontsource/dejavu-sans": "5.0.3",
"@fontsource/public-sans": "5.0.3",
"@hot-loader/react-dom": "17.0.1",
"@opentrons/api-client": "link:../api-client",
"@opentrons/components": "link:../components",
"@opentrons/react-api-client": "link:../react-api-client",
"@opentrons/shared-data": "link:../shared-data",
"@thi.ng/paths": "1.6.5",
"@types/uuid": "^3.4.7",
"classnames": "2.2.5",
"connected-react-router": "6.8.0",
"connected-react-router": "6.9.3",
"core-js": "3.2.1",
"date-fns": "2.25.0",
"events": "3.0.0",
Expand All @@ -43,14 +42,13 @@
"mixpanel-browser": "2.22.1",
"netmask": "2.0.2",
"path-to-regexp": "3.0.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-error-boundary": "^4.0.10",
"react-hot-loader": "4.13.0",
"react-i18next": "^11.7.3",
"react-i18next": "13.5.0",
"react-intersection-observer": "^8.33.1",
"react-redux": "7.2.1",
"react-router-dom": "5.1.1",
"react-redux": "8.1.2",
"react-router-dom": "5.3.4",
"react-select": "5.4.0",
"react-simple-keyboard": "^3.4.187",
"react-viewport-list": "6.3.0",
Expand Down
13 changes: 7 additions & 6 deletions app/src/App/__tests__/OnDeviceDisplayAppFallback.test.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react'
import { when } from 'jest-when'
import { fireEvent, screen } from '@testing-library/react'
import { renderWithProviders } from '@opentrons/components'

import { i18n } from '../../i18n'
Expand Down Expand Up @@ -41,17 +42,17 @@ describe('OnDeviceDisplayAppFallback', () => {
})

it('should render text and button', () => {
const [{ getByText }] = render(props)
getByText('An unknown error has occurred')
getByText(
render(props)
screen.getByText('An unknown error has occurred')
screen.getByText(
'You need to restart the touchscreen. Then download the robot logs from the Opentrons App and send them to [email protected] for assistance.'
)
getByText('Restart touchscreen')
screen.getByText('Restart touchscreen')
})

it('should call a mock function when tapping reload button', () => {
const [{ getByText }] = render(props)
getByText('Restart touchscreen').click()
render(props)
fireEvent.click(screen.getByText('Restart touchscreen'))
expect(mockTrackEvent).toHaveBeenCalledWith({
name: ANALYTICS_ODD_APP_ERROR,
properties: { errorMessage: 'mock error' },
Expand Down
4 changes: 2 additions & 2 deletions app/src/App/__tests__/hooks.test.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react'
import { renderHook } from '@testing-library/react-hooks'
import { renderHook } from '@testing-library/react'
import { createStore } from 'redux'
import { I18nextProvider } from 'react-i18next'
import { Provider } from 'react-redux'
Expand All @@ -12,7 +12,7 @@ import type { Store } from 'redux'
import type { State } from '../../redux/types'

describe('useSoftwareUpdatePoll', () => {
let wrapper: React.FunctionComponent<{}>
let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
let store: Store<State>
beforeEach(() => {
jest.useFakeTimers()
Expand Down
5 changes: 1 addition & 4 deletions app/src/App/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react'
import { useSelector } from 'react-redux'
import { hot } from 'react-hot-loader/root'

import { Flex, POSITION_FIXED, DIRECTION_ROW } from '@opentrons/components'

Expand All @@ -12,7 +11,7 @@ import { TopPortalRoot } from './portal'

const stopEvent = (event: React.MouseEvent): void => event.preventDefault()

export const AppComponent = (): JSX.Element | null => {
export const App = (): JSX.Element | null => {
const hasConfigLoaded = useSelector(getConfig) != null
const isOnDevice = useSelector(getIsOnDevice)

Expand All @@ -34,5 +33,3 @@ export const AppComponent = (): JSX.Element | null => {
</>
) : null
}

export const App = hot(AppComponent)
9 changes: 5 additions & 4 deletions app/src/atoms/MenuList/__tests__/MenuList.test.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react'
import { fireEvent, screen } from '@testing-library/react'
import { renderWithProviders } from '@opentrons/components'
import { MenuList } from '..'

Expand All @@ -17,17 +18,17 @@ describe('MenuList', () => {
})

it('renders a child not on device', () => {
const { getByText } = render(props)
getByText('mockBtn')
render(props)
screen.getByText('mockBtn')
})
it('renders isOnDevice child, clicking background overlay calls onClick', () => {
props = {
...props,
isOnDevice: true,
onClick: jest.fn(),
}
const { getByLabelText } = render(props)
getByLabelText('BackgroundOverlay_ModalShell').click()
render(props)
fireEvent.click(screen.getByLabelText('BackgroundOverlay_ModalShell'))
expect(props.onClick).toHaveBeenCalled()
})
})
2 changes: 1 addition & 1 deletion app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import 'jest-styled-components'
import * as React from 'react'
import { fireEvent } from '@testing-library/react'
import 'jest-styled-components'
import { COLORS, renderWithProviders } from '@opentrons/components'
import { OverflowBtn } from '../OverflowBtn'

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react'
import { fireEvent } from '@testing-library/react'
import { renderHook } from '@testing-library/react-hooks'
import { fireEvent, renderHook } from '@testing-library/react'
import { renderWithProviders } from '@opentrons/components'
import { CustomKeyboard } from '..'

Expand All @@ -9,17 +8,12 @@ const render = (props: React.ComponentProps<typeof CustomKeyboard>) => {
}

describe('CustomKeyboard', () => {
let props: React.ComponentProps<typeof CustomKeyboard>

beforeEach(() => {
it('should render the custom keyboards lower case', () => {
const { result } = renderHook(() => React.useRef(null))
props = {
const props = {
onChange: jest.fn(),
keyboardRef: result.current,
}
})

it('should render the custom keyboards lower case', () => {
const { getAllByRole } = render(props)
const buttons = getAllByRole('button')
const expectedButtonNames = [
Expand Down Expand Up @@ -59,6 +53,11 @@ describe('CustomKeyboard', () => {
})
})
it('should render the custom keyboards upper case, when clicking shift key', () => {
const { result } = renderHook(() => React.useRef(null))
const props = {
onChange: jest.fn(),
keyboardRef: result.current,
}
const { getByRole, getAllByRole } = render(props)
const shiftKey = getByRole('button', { name: 'SHIFT' })
fireEvent.click(shiftKey)
Expand Down Expand Up @@ -102,6 +101,11 @@ describe('CustomKeyboard', () => {
})

it('should render the custom keyboards numbers, when clicking number key', () => {
const { result } = renderHook(() => React.useRef(null))
const props = {
onChange: jest.fn(),
keyboardRef: result.current,
}
const { getByRole, getAllByRole } = render(props)
const numberKey = getByRole('button', { name: '123' })
fireEvent.click(numberKey)
Expand All @@ -127,6 +131,11 @@ describe('CustomKeyboard', () => {
})

it('should render the custom keyboards lower case, when clicking number key then abc key', () => {
const { result } = renderHook(() => React.useRef(null))
const props = {
onChange: jest.fn(),
keyboardRef: result.current,
}
const { getByRole } = render(props)
const numberKey = getByRole('button', { name: '123' })
getByRole('button', { name: 'a' })
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react'
import { fireEvent } from '@testing-library/react'
import { renderHook } from '@testing-library/react-hooks'
import { fireEvent, renderHook } from '@testing-library/react'
import { renderWithProviders } from '@opentrons/components'
import { NormalKeyboard } from '..'

Expand All @@ -9,16 +8,12 @@ const render = (props: React.ComponentProps<typeof NormalKeyboard>) => {
}

describe('SoftwareKeyboard', () => {
let props: React.ComponentProps<typeof NormalKeyboard>

beforeEach(() => {
it('should render the software keyboards', () => {
const { result } = renderHook(() => React.useRef(null))
props = {
const props = {
onChange: jest.fn(),
keyboardRef: result.current,
}
})
it('should render the software keyboards', () => {
const { getAllByRole } = render(props)
const buttons = getAllByRole('button')

Expand Down Expand Up @@ -62,6 +57,11 @@ describe('SoftwareKeyboard', () => {
})

it('should render the software keyboards when hitting shift key', () => {
const { result } = renderHook(() => React.useRef(null))
const props = {
onChange: jest.fn(),
keyboardRef: result.current,
}
const { getAllByRole, getByRole } = render(props)
const shiftKey = getByRole('button', { name: 'SHIFT' })
fireEvent.click(shiftKey)
Expand Down Expand Up @@ -106,6 +106,11 @@ describe('SoftwareKeyboard', () => {
})

it('should render the software keyboards when hitting 123 key', () => {
const { result } = renderHook(() => React.useRef(null))
const props = {
onChange: jest.fn(),
keyboardRef: result.current,
}
const { getAllByRole, getByRole } = render(props)
const numberKey = getByRole('button', { name: '123' })
fireEvent.click(numberKey)
Expand Down Expand Up @@ -149,6 +154,11 @@ describe('SoftwareKeyboard', () => {
})

it('should render the software keyboards when hitting #+= key', () => {
const { result } = renderHook(() => React.useRef(null))
const props = {
onChange: jest.fn(),
keyboardRef: result.current,
}
const { getAllByRole, getByRole } = render(props)
const numberKey = getByRole('button', { name: '123' })
fireEvent.click(numberKey)
Expand Down Expand Up @@ -194,6 +204,11 @@ describe('SoftwareKeyboard', () => {
})

it('should call mock function when clicking a key', () => {
const { result } = renderHook(() => React.useRef(null))
const props = {
onChange: jest.fn(),
keyboardRef: result.current,
}
const { getByRole } = render(props)
const aKey = getByRole('button', { name: 'a' })
fireEvent.click(aKey)
Expand Down
16 changes: 8 additions & 8 deletions app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react'
import { fireEvent } from '@testing-library/react'
import { renderHook } from '@testing-library/react-hooks'
import { fireEvent, renderHook } from '@testing-library/react'
import { renderWithProviders } from '@opentrons/components'
import { Numpad } from '..'

Expand All @@ -9,16 +8,12 @@ const render = (props: React.ComponentProps<typeof Numpad>) => {
}

describe('Numpad', () => {
let props: React.ComponentProps<typeof Numpad>

beforeEach(() => {
it('should render the numpad keys', () => {
const { result } = renderHook(() => React.useRef(null))
props = {
const props = {
onChange: jest.fn(),
keyboardRef: result.current,
}
})
it('should render the numpad keys', () => {
const { getAllByRole } = render(props)
const buttons = getAllByRole('button')
const expectedButtonNames = [
Expand All @@ -43,6 +38,11 @@ describe('Numpad', () => {
})

it('should call mock function when clicking num key', () => {
const { result } = renderHook(() => React.useRef(null))
const props = {
onChange: jest.fn(),
keyboardRef: result.current,
}
const { getByRole } = render(props)
const numKey = getByRole('button', { name: '1' })
fireEvent.click(numKey)
Expand Down
3 changes: 1 addition & 2 deletions app/src/atoms/buttons/LargeButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,6 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
<Btn
display={DISPLAY_FLEX}
css={LARGE_BUTTON_STYLE}
aria-label={`LargeButton_${buttonType}`}
flexDirection={DIRECTION_COLUMN}
justifyContent={JUSTIFY_SPACE_BETWEEN}
disabled={disabled}
Expand All @@ -120,7 +119,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element {
</StyledText>
<Icon
name={iconName}
aria-label={`LargeButton_${iconName}`}
aria-label={`${iconName} icon`}
color={
disabled
? COLORS.darkBlack60
Expand Down
3 changes: 1 addition & 2 deletions app/src/atoms/buttons/MediumButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,6 @@ export function MediumButton(props: MediumButtonProps): JSX.Element {
display={DISPLAY_FLEX}
disabled={disabled}
css={MEDIUM_BUTTON_STYLE}
aria-label={`MediumButton_${buttonType}`}
alignItems={ALIGN_CENTER}
justifyContent={JUSTIFY_CENTER}
flexDirection={DIRECTION_ROW}
Expand All @@ -160,7 +159,7 @@ export function MediumButton(props: MediumButtonProps): JSX.Element {
{iconName !== undefined && (
<Icon
name={iconName ?? 'play'}
aria-label={`MediumButton_${iconName ?? 'play'}`}
aria-label={`${iconName ?? 'play'} icon`}
color={
disabled
? COLORS.darkBlack60
Expand Down
Loading

0 comments on commit 8cb10c0

Please sign in to comment.