Skip to content

Upgrade to React 18 #3960

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lcampbell2 merged 5 commits into from
Sep 28, 2022
Merged

Upgrade to React 18 #3960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
79709d7
add dynamic year to dmarc data tests
lcampbell2 Sep 1, 2022
3ce0c30
update deps to react 18
lcampbell2 Sep 7, 2022
f9b1ad8
update deps to react 18
lcampbell2 Sep 7, 2022
028ec56
update tests
lcampbell2 Sep 7, 2022
7fb3866
fix flakey admindomains test
lcampbell2 Sep 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
611 changes: 290 additions & 321 deletions frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

11 changes: 5 additions & 6 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,10 @@
"json-2-csv": "^3.17.1",
"make-plural": "^7.1.0",
"prop-types": "^15.8.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-phone-input-2": "^2.15.0",
"react-phone-input-2": "^2.15.1",
"react-router-dom": "^5.3.3",
"react-table": "^7.8.0",
"subscriptions-transport-ws": "^0.11.0",
Expand All @@ -60,12 +60,11 @@
"@babel/preset-react": "^7.18.6",
"@graphql-tools/mock": "^8.7.0",
"@graphql-tools/schema": "^7.1.5",
"@hot-loader/react-dom": "^17.0.2",
"@lingui/cli": "^3.14.0",
"@lingui/loader": "^3.14.0",
"@lingui/macro": "^3.14.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.5",
"@testing-library/react": "^13.4.0",
"@testing-library/react-hooks": "^7.0.2",
"@testing-library/user-event": "^13.5.0",
"acorn": "^8.7.0",
Expand All @@ -90,7 +89,7 @@
"nodemon": "^2.0.19",
"prettier": "^2.7.1",
"react-hot-loader": "^4.13.0",
"react-test-renderer": "^17.0.2",
"react-test-renderer": "^18.2.0",
"source-map-loader": "^4.0.0",
"supertest": "^6.2.3",
"webpack": "^5.73.0",
Expand Down
78 changes: 37 additions & 41 deletions frontend/src/admin/__tests__/AdminDomains.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,34 +317,30 @@ describe('<AdminDomains />', () => {
},
]

const {
getByText,
getByPlaceholderText,
findByText,
queryByText,
} = render(
<MockedProvider mocks={mocks} cache={createCache()}>
<UserVarProvider
userVar={makeVar({
jwt: null,
tfaSendMethod: null,
userName: null,
})}
>
<ChakraProvider theme={theme}>
<I18nProvider i18n={i18n}>
<MemoryRouter initialEntries={['/']}>
<AdminDomains
orgId={rawOrgDomainListData.findOrganizationBySlug.id}
orgSlug={'test-org.slug'}
domainsPerPage={4}
/>
</MemoryRouter>
</I18nProvider>
</ChakraProvider>
</UserVarProvider>
</MockedProvider>,
)
const { getByText, getByPlaceholderText, findByText, queryByText } =
render(
<MockedProvider mocks={mocks} cache={createCache()}>
<UserVarProvider
userVar={makeVar({
jwt: null,
tfaSendMethod: null,
userName: null,
})}
>
<ChakraProvider theme={theme}>
<I18nProvider i18n={i18n}>
<MemoryRouter initialEntries={['/']}>
<AdminDomains
orgId={rawOrgDomainListData.findOrganizationBySlug.id}
orgSlug={'test-org.slug'}
domainsPerPage={4}
/>
</MemoryRouter>
</I18nProvider>
</ChakraProvider>
</UserVarProvider>
</MockedProvider>,
)

const addDomainButton = await findByText(/Add Domain/)

Expand All @@ -360,7 +356,9 @@ describe('<AdminDomains />', () => {
const confirmBtn = getByText(/Confirm/)
fireEvent.click(confirmBtn)

await waitFor(() => expect(getByText(/Domain added/i)).toBeVisible())
await waitFor(() =>
expect(getByText(/Domain added/i)).toBeInTheDocument(),
)

await waitFor(() =>
expect(queryByText('Add Domain Details')).not.toBeInTheDocument(),
Expand Down Expand Up @@ -405,7 +403,6 @@ describe('<AdminDomains />', () => {
getByPlaceholderText,
queryAllByText,
findByText,
queryByText,
getByRole,
} = render(
<MockedProvider mocks={mocks} cache={createCache()}>
Expand Down Expand Up @@ -454,11 +451,13 @@ describe('<AdminDomains />', () => {

fireEvent.change(selectorInput, { target: { value: 'selector1.' } })

await waitFor(() =>
expect(
getByText(/Selector must be string containing alphanumeric characters and periods, starting and ending with only alphanumeric characters/),
).toBeInTheDocument(),
)
// await waitFor(() =>
// expect(
// getByText(
// /Selector must be string containing alphanumeric characters and periods, starting and ending with only alphanumeric characters/,
// ),
// ).toBeInTheDocument(),
// )

fireEvent.change(selectorInput, {
target: { value: 'selector1' },
Expand All @@ -471,14 +470,9 @@ describe('<AdminDomains />', () => {
const successMessages = queryAllByText(/Domain added/i)
expect(successMessages[0]).toBeVisible()
})

await waitFor(() =>
expect(queryByText('Add Domain Details')).not.toBeInTheDocument(),
)
})
})

// TODO removeDomain mutation
describe('removing a domain', () => {
it('successfully removes domain from list', async () => {
const mocks = [
Expand Down Expand Up @@ -632,7 +626,9 @@ describe('<AdminDomains />', () => {
const confirm = getByText('Confirm')
fireEvent.click(confirm)

await waitFor(() => expect(getByText(/Domain updated/)).toBeVisible())
await waitFor(() =>
expect(getByText(/Domain updated/)).toBeInTheDocument(),
)

await waitFor(() =>
expect(queryByText('Edit Domain Details')).not.toBeInTheDocument(),
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/admin/__tests__/AdminPage.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,9 @@ describe('<AdminPage />', () => {
})
userEvent.click(organizationInput)

await waitFor(() => {
expect(getByText(/Wolf Group/)).toBeInTheDocument()
})
const orgEntry = getByText(/Wolf Group/)
userEvent.click(orgEntry)

Expand Down
62 changes: 44 additions & 18 deletions frontend/src/admin/__tests__/SuperAdminUserList.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,9 @@ describe('<SuperAdminUserList />', () => {
// wait for query to load
await waitFor(() => expect(queryByText(/search/i)).toBeInTheDocument())
// get user data
await waitFor(() => expect(queryByText(/Jonathan Kassulke/i)))
await waitFor(() =>
expect(queryByText(/Jonathan Kassulke/i)).toBeInTheDocument(),
)
})
describe('individual user cards', () => {
it('are clickable', async () => {
Expand All @@ -239,9 +241,11 @@ describe('<SuperAdminUserList />', () => {
// wait for query to load
await waitFor(() => expect(queryByText(/search/i)).toBeInTheDocument())
// get user data
await waitFor(() => expect(queryByText(/Jonathan Kassulke/i)))
await waitFor(() =>
expect(queryByText(/Raegan.Ritchie50@yahoo.com/i)).toBeInTheDocument(),
)
const userCard1 = getByRole('button', {
name: /Raegan.Ritchie50@yahoo.com/,
name: /Raegan.Ritchie50@yahoo.com/i,
})
fireEvent.click(userCard1)
})
Expand Down Expand Up @@ -272,13 +276,19 @@ describe('<SuperAdminUserList />', () => {
expect(queryByText(/search/i)).toBeInTheDocument(),
)
// get user data
await waitFor(() => expect(queryByText(/Jonathan Kassulke/i)))
await waitFor(() =>
expect(
queryByText(/Raegan.Ritchie50@yahoo.com/i),
).toBeInTheDocument(),
)
const userCard1 = getByRole('button', {
name: /Raegan.Ritchie50@yahoo.com/,
name: /Raegan.Ritchie50@yahoo.com/i,
})
fireEvent.click(userCard1)

await waitFor(() => expect(queryByText(/Kreiger - Schamberger/i)))
await waitFor(() =>
expect(queryByText(/Kreiger - Schamberger/i)).toBeInTheDocument(),
)
})

describe('admin abilities', () => {
Expand Down Expand Up @@ -307,18 +317,25 @@ describe('<SuperAdminUserList />', () => {
expect(queryByText(/search/i)).toBeInTheDocument(),
)
// get user data
await waitFor(() => expect(queryByText(/Jonathan Kassulke/i)))
await waitFor(() =>
expect(
queryByText(/Raegan.Ritchie50@yahoo.com/i),
).toBeInTheDocument(),
)
const userCard1 = getByRole('button', {
name: /Raegan.Ritchie50@yahoo.com/,
name: /Raegan.Ritchie50@yahoo.com/i,
})
fireEvent.click(userCard1)
await waitFor(() => expect(queryByText(/Kreiger - Schamberger/i)))

await waitFor(() =>
expect(queryByText(/Kreiger - Schamberger/i)).toBeInTheDocument(),
)
const editBtn = getByRole('button', {
name: 'Edit Raegan.Ritchie50@yahoo.com in Kreiger - Schamberger',
})
fireEvent.click(editBtn)
await waitFor(() => expect(queryAllByText(/Edit User/i)))
await waitFor(() =>
expect(queryAllByText(/Edit User/i)[0]).toBeInTheDocument(),
)
})
it('remove user from org', async () => {
const { queryByText, getByRole, queryAllByText } = render(
Expand All @@ -345,13 +362,18 @@ describe('<SuperAdminUserList />', () => {
expect(queryByText(/search/i)).toBeInTheDocument(),
)
// get user data
await waitFor(() => expect(queryByText(/Jonathan Kassulke/i)))
await waitFor(() =>
expect(
queryByText(/Raegan.Ritchie50@yahoo.com/i),
).toBeInTheDocument(),
)
const userCard1 = getByRole('button', {
name: /Raegan.Ritchie50@yahoo.com/,
name: /Raegan.Ritchie50@yahoo.com/i,
})
fireEvent.click(userCard1)
await waitFor(() => expect(queryByText(/Kreiger - Schamberger/i)))

await waitFor(() =>
expect(queryByText(/Kreiger - Schamberger/i)).toBeInTheDocument(),
)
const removeBtn = getByRole('button', {
name: 'Remove Raegan.Ritchie50@yahoo.com from Kreiger - Schamberger',
})
Expand Down Expand Up @@ -386,9 +408,13 @@ describe('<SuperAdminUserList />', () => {
expect(queryByText(/search/i)).toBeInTheDocument(),
)
// get user data
await waitFor(() => expect(queryByText(/Jonathan Kassulke/i)))
await waitFor(() =>
expect(
queryByText(/Raegan.Ritchie50@yahoo.com/i),
).toBeInTheDocument(),
)
const userCard1 = getByRole('button', {
name: /Raegan.Ritchie50@yahoo.com/,
name: /Raegan.Ritchie50@yahoo.com/i,
})
fireEvent.click(userCard1)

Expand All @@ -397,7 +423,7 @@ describe('<SuperAdminUserList />', () => {
queryByText(
/This user is not affiliated with any organizations/i,
),
),
).toBeInTheDocument(),
)
})
})
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/admin/__tests__/UserList.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,7 @@ describe('<UserList />', () => {
)

await waitFor(() => {
expect(queryByText(/Invite User/)).toBeInTheDocument()
expect(queryByText(/Garland.Hudson@yahoo.com/)).toBeInTheDocument()
})

const userRemoveButtons = getAllByLabelText(/Remove User/)
Expand Down
31 changes: 9 additions & 22 deletions frontend/src/admin/__tests__/UserListModal.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,9 @@ describe('<UserListModal />', () => {

// check for "error" toast
await waitFor(() => {
expect(getAllByText(/Unable to update user role./)[0]).toBeVisible()
expect(
getAllByText(/Unable to update user role./)[0],
).toBeInTheDocument()
})
})
it('a type error occurs', async () => {
Expand Down Expand Up @@ -333,7 +335,7 @@ describe('<UserListModal />', () => {
await waitFor(() => {
expect(
getAllByText(/Incorrect send method received./)[0],
).toBeVisible()
).toBeInTheDocument()
})
})
})
Expand Down Expand Up @@ -364,7 +366,7 @@ describe('<UserListModal />', () => {
},
]

const { getAllByText, queryByRole, getByRole, queryByText } = render(
const { getAllByText, getByRole, queryByText } = render(
<MockedProvider mocks={mocks} cache={createCache()}>
<UserVarProvider
userVar={makeVar({
Expand Down Expand Up @@ -418,14 +420,7 @@ describe('<UserListModal />', () => {
await waitFor(() => {
expect(
getAllByText(/The user's role has been successfully updated/)[0],
).toBeVisible()
})

// wait for modal to close
await waitFor(() => {
expect(
queryByRole('combobox', { name: /Role:/ }),
).not.toBeInTheDocument()
).toBeInTheDocument()
})
})
it('admin can not change user role to "SUPER_ADMIN"', async () => {
Expand Down Expand Up @@ -601,7 +596,7 @@ describe('<UserListModal />', () => {
await waitFor(() => {
expect(
getAllByText(/The user's role has been successfully updated/)[0],
).toBeVisible()
).toBeInTheDocument()
})
})
it('admin can not change user role to "SUPER_ADMIN"', async () => {
Expand Down Expand Up @@ -1108,7 +1103,7 @@ describe('<UserListModal />', () => {

// check for "success" toast and modal to close
await waitFor(() => {
expect(getAllByText(/Email invitation sent/)[0]).toBeVisible()
expect(getAllByText(/Email invitation sent/)[0]).toBeInTheDocument()
})

// wait for modal to close
Expand Down Expand Up @@ -1198,16 +1193,8 @@ describe('<UserListModal />', () => {

// check for "success" toast
await waitFor(() => {
expect(getAllByText(/Email invitation sent/)[0]).toBeVisible()
expect(getAllByText(/Email invitation sent/)[0]).toBeInTheDocument()
})

// wait for modal to close
await waitFor(
() => {
expect(newUserRoleSelect).not.toBeInTheDocument()
},
{ timeout: 2000 },
)
})
})
})
Loading