Thanks to visit codestin.com
Credit goes to github.com

Skip to content

chore(site): Add unit tests, mocks #514

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
merged 12 commits into from
Mar 23, 2022
Merged

chore(site): Add unit tests, mocks #514

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d612209
Extract and unit test redirect functions
presleyp Mar 21, 2022
194c787
Move router to make app more testable
presleyp Mar 21, 2022
5198d39
Make mock entities more consistent
presleyp Mar 21, 2022
e79e3de
Use labels instead of placeholders
presleyp Mar 21, 2022
2c74904
Fill out handlers
presleyp Mar 21, 2022
3e6b156
Lint
presleyp Mar 21, 2022
42cc2fb
Merge branch 'main' into 465/presleyp/routing
presleyp Mar 21, 2022
fd0407f
Reorganize App
presleyp Mar 22, 2022
3633dfc
Make mock entities reference each other
presleyp Mar 22, 2022
507b54a
Add describes in tests
presleyp Mar 22, 2022
0e2315c
Clean up api and mocks
presleyp Mar 22, 2022
a0eca97
Merge branch 'main' into 465/presleyp/routing
presleyp Mar 22, 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
Prev Previous commit
Next Next commit
Reorganize App
  • Loading branch information
@presleyp
presleyp committed Mar 22, 2022
commit fd0407f5c76c122fed19c7ec921c0daf684f6462
76 changes: 76 additions & 0 deletions site/src/AppRouter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import React from "react"
import { Routes, Route } from "react-router-dom"
import { RequireAuth, AuthAndNav } from "./components"
import { IndexPage } from "./pages"
import { NotFoundPage } from "./pages/404"
import { CliAuthenticationPage } from "./pages/cli-auth"
import { HealthzPage } from "./pages/healthz"
import { SignInPage } from "./pages/login"
import { ProjectsPage } from "./pages/projects"
import { ProjectPage } from "./pages/projects/[organization]/[project]"
import { CreateWorkspacePage } from "./pages/projects/[organization]/[project]/create"
import { WorkspacePage } from "./pages/workspaces/[workspace]"

export const AppRouter: React.FC = () => (
<Routes>
<Route path="/">
<Route
index
element={
<RequireAuth>
<IndexPage />
</RequireAuth>
}
/>

<Route path="login" element={<SignInPage />} />
<Route path="healthz" element={<HealthzPage />} />
<Route path="cli-auth" element={<CliAuthenticationPage />} />

<Route path="projects">
<Route
index
element={
<AuthAndNav>
<ProjectsPage />
</AuthAndNav>
}
/>
<Route path=":organization/:project">
<Route
index
element={
<AuthAndNav>
<ProjectPage />
</AuthAndNav>
}
/>
<Route
path="create"
element={
<RequireAuth>
<CreateWorkspacePage />
</RequireAuth>
}
/>
</Route>
</Route>

<Route path="workspaces">
<Route
path=":workspace"
element={
<AuthAndNav>
<WorkspacePage />
</AuthAndNav>
}
/>
</Route>

{/* Using path="*"" means "match anything", so this route
acts like a catch-all for URLs that we don't have explicit
routes for. */}
<Route path="*" element={<NotFoundPage />} />
</Route>
</Routes>
)
8 changes: 1 addition & 7 deletions site/src/Main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from "react"
import ReactDOM from "react-dom"
import { BrowserRouter as Router } from "react-router-dom"

import { App } from "./app"

Expand All @@ -9,12 +8,7 @@ import { App } from "./app"
// like: https://github.com/coder/m/blob/50898bd4803df7639bd181e484c74ac5d84da474/product/coder/site/pages/_app.tsx#L32
const main = () => {
const element = document.getElementById("root")
ReactDOM.render(
<Router>
<App />
</Router>,
element,
)
ReactDOM.render(<App />, element)
}

main()
126 changes: 29 additions & 97 deletions site/src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,107 +3,39 @@ import CssBaseline from "@material-ui/core/CssBaseline"
import ThemeProvider from "@material-ui/styles/ThemeProvider"
import { SWRConfig } from "swr"
import { light } from "./theme"
import { Route, Routes } from "react-router-dom"
import { BrowserRouter as Router } from "react-router-dom"

import { CliAuthenticationPage } from "./pages/cli-auth"
import { NotFoundPage } from "./pages/404"
import { IndexPage } from "./pages/index"
import { SignInPage } from "./pages/login"
import { ProjectsPage } from "./pages/projects"
import { ProjectPage } from "./pages/projects/[organization]/[project]"
import { CreateWorkspacePage } from "./pages/projects/[organization]/[project]/create"
import { WorkspacePage } from "./pages/workspaces/[workspace]"
import { HealthzPage } from "./pages/healthz"
import { AuthAndNav, RequireAuth } from "./components/Page"
import { XServiceProvider } from "./xServices/StateContext"
import { AppRouter } from "./AppRouter"

export const App: React.FC = () => {
return (
<SWRConfig
value={{
// This code came from the SWR documentation:
// https://swr.vercel.app/docs/error-handling#status-code-and-error-object
fetcher: async (url: string) => {
const res = await fetch(url)

// By default, `fetch` won't treat 4xx or 5xx response as errors.
// However, we want SWR to treat these as errors - so if `res.ok` is false,
// we want to throw an error to bubble that up to SWR.
if (!res.ok) {
const err = new Error((await res.json()).error?.message || res.statusText)
throw err
}
return res.json()
},
}}
>
<XServiceProvider>
<ThemeProvider theme={light}>
<CssBaseline />

<Routes>
<Route path="/">
<Route
index
element={
<RequireAuth>
<IndexPage />
</RequireAuth>
}
/>

<Route path="login" element={<SignInPage />} />
<Route path="healthz" element={<HealthzPage />} />
<Route path="cli-auth" element={<CliAuthenticationPage />} />

<Route path="projects">
<Route
index
element={
<AuthAndNav>
<ProjectsPage />
</AuthAndNav>
}
/>
<Route path=":organization/:project">
<Route
index
element={
<AuthAndNav>
<ProjectPage />
</AuthAndNav>
}
/>
<Route
path="create"
element={
<RequireAuth>
<CreateWorkspacePage />
</RequireAuth>
}
/>
</Route>
</Route>

<Route path="workspaces">
<Route
path=":workspace"
element={
<AuthAndNav>
<WorkspacePage />
</AuthAndNav>
}
/>
</Route>

{/* Using path="*"" means "match anything", so this route
acts like a catch-all for URLs that we don't have explicit
routes for. */}
<Route path="*" element={<NotFoundPage />} />
</Route>
</Routes>
</ThemeProvider>
</XServiceProvider>
</SWRConfig>
<Router>
<SWRConfig
value={{
// This code came from the SWR documentation:
// https://swr.vercel.app/docs/error-handling#status-code-and-error-object
fetcher: async (url: string) => {
const res = await fetch(url)

// By default, `fetch` won't treat 4xx or 5xx response as errors.
// However, we want SWR to treat these as errors - so if `res.ok` is false,
// we want to throw an error to bubble that up to SWR.
if (!res.ok) {
const err = new Error((await res.json()).error?.message || res.statusText)
throw err
}
return res.json()
},
}}
>
<XServiceProvider>
<ThemeProvider theme={light}>
<CssBaseline />
<AppRouter />
</ThemeProvider>
</XServiceProvider>
</SWRConfig>
</Router>
)
}