Expand Navbar test to render user icon

bryphe-coder · bryphe-coder · commit f1c3ed05ae1f · 2022-01-22T02:49:58.000Z
diff --git a/site/components/Navbar/index.test.tsx b/site/components/Navbar/index.test.tsx
@@ -1,15 +1,32 @@
 import React from "react"
 import { screen } from "@testing-library/react"
 
-import { render } from "../../test_helpers"
+import { render, MockUser } from "../../test_helpers"
 import { Navbar } from "./index"
 
 describe("Navbar", () => {
+  const noop = () => { return; }
   it("renders content", async () => {
     // When
-    render(<Navbar />)
+    render(<Navbar onSignOut={noop} />)
 
     // Then
     await screen.findAllByText("Coder", { exact: false })
   })
+
+  it("renders profile picture for user", async () => {
+    // Given
+    const mockUser = {
+      ...MockUser,
+      username: "bryan"
+    }
+
+    // When
+    render(<Navbar user={mockUser} onSignOut={noop} />)
+
+    // Then
+    // There should be a 'B' avatar!
+    const element = await screen.findByText("B")
+    expect(element).toBeDefined()
+  })
 })
diff --git a/site/contexts/UserContext.test.tsx b/site/contexts/UserContext.test.tsx
@@ -5,6 +5,7 @@ import { SWRConfig } from "swr"
 import { render, screen, waitFor } from "@testing-library/react"
 
 import { User, UserProvider, useUser } from "./UserContext"
+import { MockUser } from "../test_helpers"
 
 namespace Helpers {
   // Helper component that renders out the state of the `useUser` hook.
@@ -45,18 +46,11 @@ namespace Helpers {
       </SWRConfig>
     )
   }
-
-  export const mockUser: User = {
-    id: "test-user-id",
-    username: "TestUser",
-    email: "test@coder.com",
-    created_at: "",
-  }
 }
 
 describe("UserContext", () => {
   const failingRequest = () => Promise.reject("Failed to load user")
-  const successfulRequest = () => Promise.resolve(Helpers.mockUser)
+  const successfulRequest = () => Promise.resolve(MockUser)
 
   // Reset the router to '/' before every test
   beforeEach(() => {
diff --git a/site/test_helpers/index.tsx b/site/test_helpers/index.tsx
@@ -11,3 +11,5 @@ export const WrapperComponent: React.FC = ({ children }) => {
 export const render = (component: React.ReactElement): RenderResult => {
   return wrappedRender(<WrapperComponent>{component}</WrapperComponent>)
 }
+
+export * from "./user"
diff --git a/site/test_helpers/user.ts b/site/test_helpers/user.ts
@@ -0,0 +1,8 @@
+import { User } from "../contexts/UserContext"
+
+export const MockUser: User = {
+  id: "test-user-id",
+  username: "TestUser",
+  email: "test@coder.com",
+  created_at: "",
+}

Original file line number	Diff line number	Diff line change
`@@ -11,3 +11,5 @@ export const WrapperComponent: React.FC = ({ children }) => {`
`11`	`11`	`export const render = (component: React.ReactElement): RenderResult => {`
`12`	`12`	`return wrappedRender(<WrapperComponent>{component}</WrapperComponent>)`
`13`	`13`	`}`
	`14`	`+`
	`15`	`+export * from "./user"`