Skip to content

Commit

Permalink
build(deps): upgrade to react 18 (#700)
Browse files Browse the repository at this point in the history 
* build(deps): update jest-watch-typeahead from v0.6.5 to v2.2.2

* build(deps): update jest-websocket-mock to v2.5.0

* build(deps): update to react 18

* fix(test): fix other tests after update to react 18

* fix(ts): fix typescript errors after update to react 18

* fix: use createRoot in index.tsx

* build(deps): update react-router-dom to v6.20.0

* refactor: WebsocketContext from jsx to tsx

* refactor: ShareButton from jsx to tsx

* refactor: i18n files from js to ts

* chore(build): disallow javascript

* chore: adhere to new i18next release rules

* ui: add success page to wallet import flow

* chore: enable react-router v7 futures

* chore(build): prevent build warning by installing babel plugin

* test(websocket): enable websocket indicator test in App.test.tsx

* ui(import): add link to main wallet view to import success page

* build(deps): update react-bootstrap to v2.9.1
  • Loading branch information
@theborakompanioni
theborakompanioni authored Dec 6, 2023
1 parent e48d1b3 commit d566936
Show file tree
Hide file tree
Showing 35 changed files with 18,277 additions and 19,583 deletions.
36,605 changes: 17,623 additions & 18,982 deletions package-lock.json
View file

Large diffs are not rendered by default.

41 changes: 21 additions & 20 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,39 +11,40 @@
},
"homepage": ".",
"devDependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^29.0.3",
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^14.1.2",
"@testing-library/user-event": "^14.5.1",
"@types/jest": "^29.5.10",
"@types/node": "^17.0.35",
"@types/qrcode": "^1.5.2",
"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",
"conventional-changelog": "^3.1.25",
"@types/qrcode": "^1.5.3",
"@types/react": "^18.2.39",
"@types/react-dom": "^18.2.17",
"conventional-changelog": "^5.1.0",
"http-proxy-middleware": "^2.0.6",
"husky": "^8.0.1",
"husky": "^8.0.3",
"jest-watch-typeahead": "^2.2.2",
"jest-websocket-mock": "^2.5.0",
"lint-staged": "^13.0.3",
"prettier": "^3.0.3",
"lint-staged": "^14.0.1",
"prettier": "^3.1.0",
"react-scripts": "^5.0.1",
"typescript": "^4.8.4"
},
"dependencies": {
"@emotion/react": "^11.11.1",
"@table-library/react-table-library": "^4.0.23",
"@table-library/react-table-library": "^4.1.7",
"bootstrap": "^5.3.2",
"classnames": "^2.3.2",
"formik": "^2.4.5",
"i18next": "^22.0.4",
"i18next-browser-languagedetector": "^7.0.1",
"qrcode": "^1.5.1",
"react": "^17.0.2",
"react-bootstrap": "^2.9.0",
"react-dom": "^17.0.2",
"react-i18next": "^12.0.0",
"i18next": "^23.7.7",
"i18next-browser-languagedetector": "^7.2.0",
"qrcode": "^1.5.3",
"react": "^18.2.0",
"react-bootstrap": "^2.9.1",
"react-dom": "^18.2.0",
"react-i18next": "^13.5.0",
"react-router-bootstrap": "^0.26.2",
"react-router-dom": "^6.6.1"
"react-router-dom": "^6.20.0"
},
"scripts": {
"dev:start": "REACT_APP_JAM_DEV_MODE=true npm start",
Expand Down
50 changes: 27 additions & 23 deletions src/components/App.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ describe('<App />', () => {
;(apiMock.getSession as jest.Mock).mockResolvedValue(neverResolvingPromise)
})

it('should display Onboarding screen initially', () => {
render(<App />)
it('should display Onboarding screen initially', async () => {
await act(async () => render(<App />))

// Onboarding screen
expect(screen.getByText('onboarding.splashscreen_button_get_started')).toBeInTheDocument()
Expand All @@ -27,58 +27,62 @@ describe('<App />', () => {
// Wallets screen shown after Intro is skipped
expect(screen.queryByText('wallets.title')).not.toBeInTheDocument()

act(() => {
const skipIntro = screen.getByText('onboarding.splashscreen_button_skip_intro')
user.click(skipIntro)
})
const skipIntro = screen.getByText('onboarding.splashscreen_button_skip_intro')
await user.click(skipIntro)

expect(screen.getByText('wallets.title')).toBeInTheDocument()
})

it('should display Wallets screen directly when Onboarding screen has been shown', () => {
it('should display Wallets screen directly when Onboarding screen has been shown', async () => {
global.__DEV__.addToAppSettings({ showOnboarding: false })

act(() => {
render(<App />)
})
await act(async () => render(<App />))

// Wallets screen
expect(screen.getByText('wallets.title')).toBeInTheDocument()
expect(screen.getByText('wallets.button_new_wallet')).toBeInTheDocument()
})

it('should display a modal with beta warning information', () => {
it('should display a modal with beta warning information', async () => {
global.__DEV__.addToAppSettings({ showOnboarding: false })

act(() => {
render(<App />)
})
await act(async () => render(<App />))

expect(screen.getByText('Read this before using.')).toBeInTheDocument()
expect(screen.queryByText(/While JoinMarket is tried and tested, Jam is not./)).not.toBeInTheDocument()

act(() => {
const readThis = screen.getByText('Read this before using.')
user.click(readThis)
})
const readThis = screen.getByText('Read this before using.')
await user.click(readThis)

expect(screen.getByText('footer.warning_alert_text')).toBeInTheDocument()
expect(screen.getByText('footer.warning_alert_button_ok')).toBeInTheDocument()
})

it('should display a websocket connection indicator', async () => {
it('should display websocket connection indicator as CONNECTED', async () => {
global.__DEV__.addToAppSettings({ showOnboarding: false })

act(() => {
await act(async () => {
render(<App />)
})

expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-secondary')).toBe(true)
expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-success')).toBe(false)

await global.__DEV__.JM_WEBSOCKET_SERVER_MOCK.connected

expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-success')).toBe(true)
expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-secondary')).toBe(false)
})

it('should display websocket connection indicator AS DISCONNECTED', async () => {
global.__DEV__.addToAppSettings({ showOnboarding: false })

await act(async () => {
render(<App />)
})

await act(async () => {
global.__DEV__.JM_WEBSOCKET_SERVER_MOCK.close()
})

expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-success')).toBe(false)
expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-secondary')).toBe(true)
})
})
4 changes: 4 additions & 0 deletions src/components/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,10 @@ export default function App() {
),
{
basename: window.JM.PUBLIC_PATH,
future: {
v7_fetcherPersist: true,
v7_normalizeFormMethod: true,
},
},
)

Expand Down
33 changes: 10 additions & 23 deletions src/components/Balance.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { render } from '@testing-library/react'
import user from '@testing-library/user-event'
import { act } from 'react-dom/test-utils'
import { screen } from '../testUtils'
import { BTC, SATS } from '../utils'
import Balance from './Balance'
Expand Down Expand Up @@ -144,67 +143,55 @@ describe('<Balance />', () => {
expect(screen.queryByTestId('sats-symbol')).not.toBeInTheDocument()
})

it('should toggle visibility of initially hidden balance on click by default', () => {
it('should toggle visibility of initially hidden balance on click by default', async () => {
render(<Balance valueString={`21`} convertToUnit={SATS} showBalance={false} />)
expect(screen.queryByTestId(`sats-amount`)).not.toBeInTheDocument()
expect(screen.getByText(`*****`)).toBeInTheDocument()

act(() => {
user.click(screen.getByText(`*****`))
})
await user.click(screen.getByText(`*****`))

expect(screen.getByTestId(`sats-amount`)).toBeInTheDocument()
expect(screen.queryByText(`*****`)).not.toBeInTheDocument()

act(() => {
user.click(screen.getByTestId(`sats-amount`))
})
await user.click(screen.getByTestId(`sats-amount`))

expect(screen.queryByTestId(`sats-amount`)).not.toBeInTheDocument()
expect(screen.getByText(`*****`)).toBeInTheDocument()
})

it('should NOT toggle visibility of initially hidden balance on click when disabled via flag', () => {
it('should NOT toggle visibility of initially hidden balance on click when disabled via flag', async () => {
render(<Balance valueString={`21`} convertToUnit={SATS} showBalance={false} enableVisibilityToggle={false} />)
expect(screen.queryByTestId(`sats-amount`)).not.toBeInTheDocument()
expect(screen.getByText(`*****`)).toBeInTheDocument()

act(() => {
user.click(screen.getByText(`*****`))
})
await user.click(screen.getByText(`*****`))

expect(screen.queryByTestId(`sats-amount`)).not.toBeInTheDocument()
expect(screen.getByText(`*****`)).toBeInTheDocument()
})

it('should NOT toggle visibility of initially visible balance on click by default', () => {
it('should NOT toggle visibility of initially visible balance on click by default', async () => {
render(<Balance valueString={`21`} convertToUnit={SATS} showBalance={true} />)
expect(screen.getByTestId(`sats-amount`)).toBeInTheDocument()
expect(screen.queryByText(`*****`)).not.toBeInTheDocument()

act(() => {
user.click(screen.getByTestId(`sats-amount`))
})
await user.click(screen.getByTestId(`sats-amount`))

expect(screen.getByTestId(`sats-amount`)).toBeInTheDocument()
expect(screen.queryByText(`*****`)).not.toBeInTheDocument()
})

it('should toggle visibility of initially visible balance on click when enabled via flag', () => {
it('should toggle visibility of initially visible balance on click when enabled via flag', async () => {
render(<Balance valueString={`21`} convertToUnit={SATS} showBalance={true} enableVisibilityToggle={true} />)
expect(screen.getByTestId(`sats-amount`)).toBeInTheDocument()
expect(screen.queryByText(`*****`)).not.toBeInTheDocument()

act(() => {
user.click(screen.getByTestId(`sats-amount`))
})
await user.click(screen.getByTestId(`sats-amount`))

expect(screen.queryByTestId(`sats-amount`)).not.toBeInTheDocument()
expect(screen.getByText(`*****`)).toBeInTheDocument()

act(() => {
user.click(screen.getByText(`*****`))
})
await user.click(screen.getByText(`*****`))

expect(screen.getByTestId(`sats-amount`)).toBeInTheDocument()
expect(screen.queryByText(`*****`)).not.toBeInTheDocument()
Expand Down
Loading

0 comments on commit d566936

Please sign in to comment.