Add tests for empty view

kylecarbs · kylecarbs · commit 169d733ad79c · 2022-05-16T16:28:54.000Z
diff --git a/site/.storybook/preview.js b/site/.storybook/preview.js
@@ -6,10 +6,12 @@ import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
 import { dark } from "../src/theme"
 import "../src/theme/globalFonts"
 
-addDecorator((story) =>
+addDecorator((story) => (
   <ThemeProvider theme={dark}>
-    <CssBaseline />{story()}</ThemeProvider>
-)
+    <CssBaseline />
+    {story()}
+  </ThemeProvider>
+))
 
 const history = createMemoryHistory()
 
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.test.tsx
@@ -0,0 +1,37 @@
+import { screen } from "@testing-library/react"
+import { rest } from "msw"
+import React from "react"
+import { MockWorkspace } from "../../testHelpers/entities"
+import { history, render } from "../../testHelpers/renderHelpers"
+import { server } from "../../testHelpers/server"
+import { WorkspacesPage } from "./WorkspacesPage"
+import { Language } from "./WorkspacesPageView"
+
+describe("WorkspacesPage", () => {
+  beforeEach(() => {
+    history.replace("/workspaces")
+  })
+
+  it("renders an empty workspaces page", async () => {
+    // Given
+    server.use(
+      rest.get("/api/v2/users/me/workspaces", async (req, res, ctx) => {
+        return res(ctx.status(200), ctx.json([]))
+      }),
+    )
+
+    // When
+    render(<WorkspacesPage />)
+
+    // Then
+    await screen.findByText(Language.emptyView)
+  })
+
+  it("renders a filled workspaces page", async () => {
+    // When
+    render(<WorkspacesPage />)
+
+    // Then
+    await screen.findByText(MockWorkspace.name)
+  })
+})
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -9,6 +9,7 @@ export const WorkspacesPage: React.FC = () => {
   return (
     <>
       <WorkspacesPageView
+        loading={workspacesState.hasTag("loading")}
         workspaces={workspacesState.context.workspaces}
         error={workspacesState.context.getWorkspacesError}
       />
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -1,6 +1,6 @@
-import { Link } from "@material-ui/core"
 import Avatar from "@material-ui/core/Avatar"
 import Button from "@material-ui/core/Button"
+import Link from "@material-ui/core/Link"
 import { makeStyles, Theme } from "@material-ui/core/styles"
 import Table from "@material-ui/core/Table"
 import TableBody from "@material-ui/core/TableBody"
@@ -22,10 +22,12 @@ import { firstLetter } from "../../util/firstLetter"
 dayjs.extend(relativeTime)
 
 export const Language = {
-  title: "Workspaces",
+  createButton: "Create Workspace",
+  emptyView: "so you can check out your repositories, edit your source code, and build and test your software.",
 }
 
 export interface WorkspacesPageViewProps {
+  loading?: boolean
   workspaces?: TypesGen.Workspace[]
   error?: unknown
 }
@@ -38,7 +40,7 @@ export const WorkspacesPageView: React.FC<WorkspacesPageViewProps> = (props) =>
     <Stack spacing={4}>
       <Margins>
         <div className={styles.actions}>
-          <Button startIcon={<AddCircleOutline />}>Create Workspace</Button>
+          <Button startIcon={<AddCircleOutline />}>{Language.createButton}</Button>
         </div>
         <Table>
           <TableHead>
@@ -51,15 +53,15 @@ export const WorkspacesPageView: React.FC<WorkspacesPageViewProps> = (props) =>
             </TableRow>
           </TableHead>
           <TableBody>
-            {!props.workspaces && (
+            {!props.loading && !props.workspaces?.length && (
               <TableRow>
                 <TableCell colSpan={999}>
                   <div className={styles.welcome}>
                     <span>
                       <Link component={RouterLink} to="/workspaces/new">
                         Create a workspace
                       </Link>
-                      &nbsp;so you can check out your repositories, edit your source code, and build and test your software.
+                      &nbsp;{Language.emptyView}
                     </span>
                   </div>
                 </TableCell>
diff --git a/site/src/testHelpers/handlers.ts b/site/src/testHelpers/handlers.ts
@@ -31,6 +31,9 @@ export const handlers = [
   rest.post("/api/v2/users/me/workspaces", async (req, res, ctx) => {
     return res(ctx.status(200), ctx.json(M.MockWorkspace))
   }),
+  rest.get("/api/v2/users/me/workspaces", async (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json([M.MockWorkspace]))
+  }),
   rest.get("/api/v2/users/me/organizations", (req, res, ctx) => {
     return res(ctx.status(200), ctx.json([M.MockOrganization]))
   }),
