Skip to content
Prev Previous commit
Next Next commit
try a simpler approach
  • Loading branch information
aslilac committed Aug 22, 2023
commit 82f08a40dba870cf1e14c6e1761c644c6cdab7fc
28 changes: 9 additions & 19 deletions site/src/pages/SetupPage/SetupPage.test.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import { fireEvent, screen, waitFor } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import { rest } from "msw"
import {
renderWithAuth,
waitForLoaderToBeRemoved,
} from "testHelpers/renderHelpers"
import { render, waitForLoaderToBeRemoved } from "testHelpers/renderHelpers"
import { server } from "testHelpers/server"
import { SetupPage } from "./SetupPage"
import { Language as PageViewLanguage } from "./SetupPageView"
Expand All @@ -19,13 +16,9 @@ const fillForm = async ({
email?: string
password?: string
} = {}) => {
const usernameField = await screen.findByLabelText(
PageViewLanguage.usernameLabel,
)
const emailField = await screen.findByLabelText(PageViewLanguage.emailLabel)
const passwordField = await screen.findByLabelText(
PageViewLanguage.passwordLabel,
)
const usernameField = screen.getByLabelText(PageViewLanguage.usernameLabel)
const emailField = screen.getByLabelText(PageViewLanguage.emailLabel)
const passwordField = screen.getByLabelText(PageViewLanguage.passwordLabel)
await userEvent.type(usernameField, username)
await userEvent.type(emailField, email)
await userEvent.type(passwordField, password)
Expand All @@ -52,8 +45,7 @@ describe("Setup Page", () => {
})

it("shows validation error message", async () => {
renderWithAuth(<SetupPage />, { route: "/setup", path: "/setup" })
await waitForLoaderToBeRemoved()
render(<SetupPage />)
await fillForm({ email: "test" })
const errorMessage = await screen.findByText(PageViewLanguage.emailInvalid)
expect(errorMessage).toBeDefined()
Expand All @@ -78,8 +70,7 @@ describe("Setup Page", () => {
}),
)

renderWithAuth(<SetupPage />, { route: "/setup", path: "/setup" })
await waitForLoaderToBeRemoved()
render(<SetupPage />)
await fillForm()
const errorMessage = await screen.findByText(fieldErrorMessage)
expect(errorMessage).toBeDefined()
Expand All @@ -93,7 +84,7 @@ describe("Setup Page", () => {
}),
)

renderWithAuth(<SetupPage />, { route: "/setup", path: "/setup" })
render(<SetupPage />)
await waitForLoaderToBeRemoved()
await waitFor(() => expect(window.location).toBeAt("/login"))
})
Expand All @@ -109,10 +100,9 @@ describe("Setup Page", () => {
}),
)

renderWithAuth(<SetupPage />, { route: "/setup", path: "/setup" })
await waitForLoaderToBeRemoved()

render(<SetupPage />)
await fillForm()
await waitForLoaderToBeRemoved()
await waitFor(() => expect(window.location).toBeAt("/workspaces"))
})
})
31 changes: 15 additions & 16 deletions site/src/pages/SetupPage/SetupPage.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { useMachine } from "@xstate/react"
import { useAuth } from "components/AuthProvider/AuthProvider"
import { FC, useEffect } from "react"
import { FC } from "react"
import { Helmet } from "react-helmet-async"
import { pageTitle } from "utils/page"
import { setupMachine } from "xServices/setup/setupXService"
import { SetupPageView } from "./SetupPageView"
import { useNavigate } from "react-router-dom"
import { Navigate } from "react-router-dom"

export const SetupPage: FC = () => {
const [authState, authSend] = useAuth()
Expand All @@ -24,22 +24,21 @@ export const SetupPage: FC = () => {
},
})
const { error } = setupState.context
const navigate = useNavigate()

useEffect(() => {
// If the user is logged in, navigate to the app
if (authState.matches("signedIn")) {
navigate("/", { state: { isRedirect: true } })
}
const userIsSignedIn = authState.matches("signedIn")
const setupIsComplete =
!authState.matches("loadingInitialAuthData") &&
!authState.matches("configuringTheFirstUser")

// If we've already completed setup, navigate to the login page
if (
!authState.matches("loadingInitialAuthData") &&
!authState.matches("configuringTheFirstUser")
) {
navigate("/login", { state: { isRedirect: true } })
}
}, [authState, navigate])
// If the user is logged in, navigate to the app
if (userIsSignedIn) {
return <Navigate to="/" state={{ isRedirect: true }} />
}

// If we've already completed setup, navigate to the login page
if (setupIsComplete) {
return <Navigate to="/login" state={{ isRedirect: true }} />
}

return (
<>
Expand Down