fix(app-platform): upgrade platform tools to use vite and react 18

README.md

@@ -1,3 +1,4 @@
+![React 18](https://img.shields.io/badge/react-18-blue)
 [![codecov](https://codecov.io/gh/dhis2/login-app/graph/badge.svg?token=3RL8FV6K0L)](https://codecov.io/gh/dhis2/login-app)
 
 This project was bootstrapped with [DHIS2 Application Platform](https://github.com/dhis2/app-platform).

d2.config.js

@@ -7,7 +7,7 @@ const config = {
     coreApp: true,
     minDHIS2Version: '2.41',
     entryPoints: {
-        app: './src/app.js',
+        app: './src/app.jsx',
     },
 }
 

package.json

@@ -15,13 +15,14 @@
         "lint:staged": "d2-style check --staged"
     },
     "devDependencies": {
-        "@dhis2/cli-app-scripts": "^11.7.2",
+        "@cfaester/enzyme-adapter-react-18": "^0.8.0",
+        "@dhis2/cli-app-scripts": "^12.0.0-alpha.19",
         "@dhis2/cli-style": "^10.7.4",
-        "@testing-library/jest-dom": "^6.4.6",
-        "@testing-library/react-hooks": "^8.0.1",
+        "@dhis2/ui": "^9.11.8",
+        "@testing-library/jest-dom": "^6.6.2",
         "@testing-library/user-event": "^14.5.2",
         "enzyme": "^3.11.0",
-        "enzyme-adapter-react-16": "^1.15.8",
+        "identity-obj-proxy": "^3.0.0",
         "jest-extended": "^4.0.2"
     },
     "jest": {
@@ -41,9 +42,11 @@
         }
     },
     "dependencies": {
+        "@testing-library/react": "^16.0.1",
         "classnames": "^2.3.2",
         "dompurify": "^3.1.5",
         "html-react-parser": "^5.1.10",
+        "package.json": "^2.0.1",
         "post-robot": "^10.0.46",
         "react-google-recaptcha": "^3.1.0",
         "react-router-dom": "^6.24.0"

src/app.js → src/app.jsx

@@ -11,8 +11,8 @@ import {
     LanguageSelect,
     Logo,
     PoweredByDHIS2,
-} from './components/customizable-elements.js'
-import { Popup } from './components/pop-up.js'
+} from './components/customizable-elements.jsx'
+import { Popup } from './components/pop-up.jsx'
 import { sanitizeMainHTML } from './helpers/handleHTML.js'
 import {
     LoginPage,

src/app.test.js → src/app.test.jsx

@@ -1,11 +1,11 @@
 import { screen } from '@testing-library/react'
 import React from 'react'
-import { AppContent } from './app.js'
+import { AppContent } from './app.jsx'
 import { useLoginConfig } from './providers/use-login-config.js'
 import { renderWithRouter } from './test-utils/index.js'
 
-jest.mock('./components/customizable-elements.js', () => ({
-    ...jest.requireActual('./components/customizable-elements.js'),
+jest.mock('./components/customizable-elements.jsx', () => ({
+    ...jest.requireActual('./components/customizable-elements.jsx'),
     LanguageSelect: () => <div>MOCK_LANGUAGE_SELECT</div>,
     ApplicationTitle: () => <div>MOCK_APPLICATION_TITLE</div>,
     ApplicationDescription: () => <div>MOCK_APPLICATION_DESCRIPTION</div>,

src/components/__tests__/back-to-login-button.test.js → src/components/__tests__/back-to-login-button.test.jsx

@@ -2,7 +2,7 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { MemoryRouter, Route, Routes } from 'react-router-dom'
-import { BackToLoginButton } from '../back-to-login-button.js'
+import { BackToLoginButton } from '../back-to-login-button.jsx'
 
 const MainPage = () => <div>MAIN PAGE</div>
 const OtherPage = ({ children }) => <>{children}</>

src/components/__tests__/customizable-elements.test.js → src/components/__tests__/customizable-elements.test.jsx

@@ -1,6 +1,6 @@
 import i18n from '@dhis2/d2-i18n'
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { useLoginConfig } from '../../providers/use-login-config.js'
 import {
@@ -10,7 +10,7 @@
     ApplicationTitle,
     LanguageSelect,
     PoweredByDHIS2,
-} from '../customizable-elements.js'
+} from '../customizable-elements.jsx'
 
 const mockRefreshOnTranslation = jest.fn()
 

src/components/__tests__/login-links.test.js → src/components/__tests__/login-links.test.jsx

@@ -1,8 +1,8 @@
 import { screen } from '@testing-library/react'
 import React from 'react'
 import { useLoginConfig } from '../../providers/use-login-config.js'
-import { renderWithRouter } from '../../test-utils/render-with-router.js'
-import { LoginLinks } from '../login-links.js'
+import { renderWithRouter } from '../../test-utils/render-with-router.jsx'
+import { LoginLinks } from '../login-links.jsx'
 
 jest.mock('../../providers/use-login-config.js', () => ({
     useLoginConfig: jest.fn(),

src/components/account-creation-form.js → src/components/account-creation-form.jsx

@@ -16,11 +16,11 @@
 } from '@dhis2/ui-forms'
 import PropTypes from 'prop-types'
 import React, { useEffect } from 'react'
 import ReCAPTCHA from 'react-google-recaptcha'
 import { Link } from 'react-router-dom'
-import { BackToLoginButton } from '../components/back-to-login-button.js'
-import { FormNotice } from '../components/form-notice.js'
-import { FormSubtitle } from '../components/form-subtitle.js'
+import { BackToLoginButton } from '../components/back-to-login-button.jsx'
+import { FormNotice } from '../components/form-notice.jsx'
+import { FormSubtitle } from '../components/form-subtitle.jsx'
 import {
     getIsRequired,
     removeHTMLTags,

src/components/customizable-elements.js → src/components/customizable-elements.jsx

@@ -4,7 +4,7 @@ import { SingleSelectField, SingleSelectOption } from '@dhis2/ui'
 import React from 'react'
 import { convertHTML } from '../helpers/index.js'
 import { useLoginConfig } from '../providers/index.js'
-import { DHIS2Logo } from './dhis2-logo.js'
+import { DHIS2Logo } from './dhis2-logo.jsx'
 
 export const ApplicationTitle = () => {
     const { applicationTitle } = useLoginConfig()

src/components/index.js

@@ -1,9 +1,9 @@
 export {
     CREATE_FORM_TYPES,
     CreateAccountForm,
-} from './account-creation-form.js'
-export { ApplicationNotification } from './application-notification.js'
-export { BackToLoginButton } from './back-to-login-button.js'
+} from './account-creation-form.jsx'
+export { ApplicationNotification } from './application-notification.jsx'
+export { BackToLoginButton } from './back-to-login-button.jsx'
 export {
     ApplicationTitle,
     ApplicationDescription,
@@ -12,15 +12,15 @@ export {
     ApplicationLeftFooter,
     PoweredByDHIS2,
     LanguageSelect,
-} from './customizable-elements.js'
-export { FormContainer } from './form-container.js'
-export { FormNotice } from './form-notice.js'
-export { FormSubtitle } from './form-subtitle.js'
-export { Loader } from './loader.js'
-export { LoginLinks } from './login-links.js'
+} from './customizable-elements.jsx'
+export { FormContainer } from './form-container.jsx'
+export { FormNotice } from './form-notice.jsx'
+export { FormSubtitle } from './form-subtitle.jsx'
+export { Loader } from './loader.jsx'
+export { LoginLinks } from './login-links.jsx'
 export {
     NotAllowedNotice,
     NotAllowedNoticeCreateAccount,
-} from './not-allowed-notice.js'
-export { Popup } from './pop-up.js'
-export { OIDCLoginOptions } from './oidc-login-options.js'
+} from './not-allowed-notice.jsx'
+export { Popup } from './pop-up.jsx'
+export { OIDCLoginOptions } from './oidc-login-options.jsx'

src/components/not-allowed-notice.js → src/components/not-allowed-notice.jsx

@@ -1,9 +1,9 @@
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 import React from 'react'
-import { BackToLoginButton } from './back-to-login-button.js'
-import { FormContainer } from './form-container.js'
-import { FormNotice } from './form-notice.js'
+import { BackToLoginButton } from './back-to-login-button.jsx'
+import { FormContainer } from './form-container.jsx'
+import { FormNotice } from './form-notice.jsx'
 
 export const NotAllowedNotice = ({ lngs }) => (
     <FormContainer>

src/hooks/__tests__/useGetErrorIfNotAllowed.test.js

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import { useLoginConfig } from '../../providers/use-login-config.js'
 import { useGetErrorIfNotAllowed } from '../useGetErrorIfNotAllowed.js'
 

src/hooks/__tests__/useLogin.test.js

@@ -1,5 +1,5 @@
 import { useDataMutation } from '@dhis2/app-runtime'
-import { act, renderHook } from '@testing-library/react-hooks'
+import { act, renderHook } from '@testing-library/react'
 import { redirectTo } from '../../helpers/redirectHelpers.js'
 import { useLogin } from '../useLogin.js'
 

src/pages/__tests__/login.integration.test.js → src/pages/__tests__/login.integration.test.jsx

@@ -1,23 +1,20 @@
 import { CustomDataProvider } from '@dhis2/app-runtime'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { MemoryRouter } from 'react-router-dom'
-import LoginPage from '../login.js'
+import LoginPage from '../login.jsx'
 
 const getCustomData = (statusMessage) => ({
     'auth/login': { loginStatus: statusMessage },
 })
 
-const login = async ({ user }) => {
-    fireEvent.change(screen.getByLabelText('Username'), {
-        target: { value: '[email protected]' },
-    })
-    fireEvent.change(screen.getByLabelText('Password'), {
-        target: { value: 'SolanOgLudvig' },
-    })
-    await user.click(screen.getByRole('button', { name: /log in/i }))
+const login = async () => {
+    await userEvent.type(screen.getByLabelText('Username'), '[email protected]')
+    await userEvent.type(screen.getByLabelText('Password'), 'SolanOgLudvig')
+
+    await userEvent.click(screen.getByRole('button', { name: /log in/i }))
 }
 
 const Wrapper = ({ statusMessage, children }) => (
@@ -40,13 +37,12 @@
     })
 
     it('shows password expired messages if status is PASSWORD_EXPIRED', async () => {
-        const user = userEvent.setup()
         render(
             <Wrapper statusMessage={'PASSWORD_EXPIRED'}>
                 <LoginPage />
             </Wrapper>
         )
-        await login({ user })
+        await login()
 
         expect(screen.getByText('Password expired')).toBeInTheDocument()
         expect(
@@ -55,13 +51,12 @@
     })
 
     it('shows account not accessible message if status is ACCOUNT_DISABLED', async () => {
-        const user = userEvent.setup()
         render(
             <Wrapper statusMessage={'ACCOUNT_DISABLED'}>
                 <LoginPage />
             </Wrapper>
         )
-        await login({ user })
+        await login()
 
         expect(screen.getByText('Account not accessible')).toBeInTheDocument()
         expect(
@@ -70,13 +65,12 @@
     })
 
     it('shows account not accessible message if status is ACCOUNT_LOCKED', async () => {
-        const user = userEvent.setup()
         render(
             <Wrapper statusMessage={'ACCOUNT_LOCKED'}>
                 <LoginPage />
             </Wrapper>
         )
-        await login({ user })
+        await login()
 
         expect(screen.getByText('Account not accessible')).toBeInTheDocument()
         expect(
@@ -85,13 +79,12 @@
     })
 
     it('shows account not accessible message if status is ACCOUNT_EXPIRED', async () => {
-        const user = userEvent.setup()
         render(
             <Wrapper statusMessage={'ACCOUNT_EXPIRED'}>
                 <LoginPage />
             </Wrapper>
         )
-        await login({ user })
+        await login()
 
         expect(screen.getByText('Account not accessible')).toBeInTheDocument()
         expect(

src/pages/__tests__/login.test.js → src/pages/__tests__/login.test.jsx

@@ -1,11 +1,11 @@
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { MemoryRouter } from 'react-router-dom'
 import { checkIsLoginFormValid } from '../../helpers/validators.js'
 import { useLogin } from '../../hooks/useLogin.js'
 import { useLoginConfig } from '../../providers/use-login-config.js'
-import { LoginFormContainer } from '../login.js'
+import { LoginFormContainer } from '../login.jsx'
 
 jest.mock('../../helpers/validators.js', () => ({
     getIsRequired: () => () => null,
@@ -42,30 +42,30 @@
         jest.clearAllMocks()
     })
 
-    it('validates the form upon submission', () => {
+    it('validates the form upon submission', async () => {
         render(<LoginFormContainer />)
 
-        fireEvent.click(
+        await userEvent.click(
             screen.getByRole('button', {
                 name: /log in/i,
             })
         )
         expect(checkIsLoginFormValid).toHaveBeenCalled()
     })
 
-    it('performs login on submission (if form valid) ', () => {
+    it('performs login on submission (if form valid) ', async () => {
         checkIsLoginFormValid.mockImplementation(() => true)
         render(<LoginFormContainer />)
 
-        fireEvent.click(screen.getByRole('button'))
+        await userEvent.click(screen.getByRole('button'))
         expect(mockLogin).toHaveBeenCalled()
     })
 
-    it('does not perform login on submission (if form is not valid) ', () => {
+    it('does not perform login on submission (if form is not valid) ', async () => {
         checkIsLoginFormValid.mockImplementation(() => false)
         render(<LoginFormContainer />)
 
-        fireEvent.click(screen.getByRole('button'))
+        await userEvent.click(screen.getByRole('button'))
         expect(mockLogin).not.toHaveBeenCalled()
     })
 
@@ -99,12 +99,8 @@
         render(<LoginFormContainer />)
 
         // populate form with username + password (this would need to be done )
-        fireEvent.change(screen.getByLabelText('Username'), {
-            target: { value: 'Tintin' },
-        })
-        fireEvent.change(screen.getByLabelText('Password'), {
-            target: { value: 'Milou' },
-        })
+        await userEvent.type(screen.getByLabelText('Username'), 'Tintin')
+        await userEvent.type(screen.getByLabelText('Password'), 'Milou')
 
         await user.type(screen.getByLabelText('Authentication code'), '123456')
         await user.click(
@@ -121,7 +117,7 @@
         })
     })
 
-    it('cancels twofa when cancel is clicked', () => {
+    it('cancels twofa when cancel is clicked', async () => {
         const mockCancelTwoFA = jest.fn()
         useLogin.mockReturnValue({
             login: () => {},
@@ -130,7 +126,7 @@
         })
         render(<LoginFormContainer />)
 
-        fireEvent.click(
+        await userEvent.click(
             screen.getByRole('button', {
                 name: /cancel/i,
             })
@@ -148,12 +144,8 @@
         })
         render(<LoginFormContainer />)
         // populate form with username + password (this would need to be done )
-        fireEvent.change(screen.getByLabelText('Username'), {
-            target: { value: 'Bastian' },
-        })
-        fireEvent.change(screen.getByLabelText('Password'), {
-            target: { value: 'Kardemomme' },
-        })
+        await userEvent.type(screen.getByLabelText('Username'), 'Bastian')
+        await userEvent.type(screen.getByLabelText('Password'), 'Kardemomme')
         await user.click(screen.getByRole('button', { name: /log in/i }))
         await user.type(screen.getByLabelText('Authentication code'), '123456')
         await user.click(screen.getByRole('button', { name: /cancel/i }))

src/pages/__tests__/password-reset-request.test.js → src/pages/__tests__/password-reset-request.test.jsx

@@ -1,16 +1,16 @@
 import { useDataMutation } from '@dhis2/app-runtime'
 import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { useLoginConfig } from '../../providers/use-login-config.js'
-import { renderWithRouter } from '../../test-utils/render-with-router.js'
-import PasswordResetRequestPage from '../password-reset-request.js'
+import { renderWithRouter } from '../../test-utils/render-with-router.jsx'
+import PasswordResetRequestPage from '../password-reset-request.jsx'
 
-jest.mock('../../components/not-allowed-notice.js', () => ({
+jest.mock('../../components/not-allowed-notice.jsx', () => ({
     NotAllowedNotice: () => <div>NOT ALLOWED</div>,
 }))
 
-jest.mock('../../components/back-to-login-button.js', () => ({
+jest.mock('../../components/back-to-login-button.jsx', () => ({
     BackToLoginButton: () => <div>BACK_TO_LOGIN</div>,
 }))