Add story and tests for login state in BlogLayout

web/src/layouts/BlogLayout/BlogLayout.test.js

@@ -1,11 +1,34 @@
-import { render } from '@redwoodjs/testing'
+import { render, screen, waitFor } from '@redwoodjs/testing'
 
 import BlogLayout from './BlogLayout'
 
+const EMAIL = 'rob@redwoodjs.com'
+const loggedIn = () => {
+  mockCurrentUser({ email: EMAIL })
+}
+const loggedOut = () => {
+  mockCurrentUser(null)
+}
+
 describe('BlogLayout', () => {
-  it('renders successfully', () => {
-    expect(() => {
-      render(<BlogLayout />)
-    }).not.toThrow()
+  it('displays a Log In link when not logged in', async () => {
+    loggedOut()
+    render(<BlogLayout />)
+
+    await waitFor(() => expect(screen.getByText('Log In')).toBeInTheDocument())
+  })
+
+  it('displays a Log Out link when logged in', async () => {
+    loggedIn()
+    render(<BlogLayout />)
+
+    await waitFor(() => expect(screen.getByText('Log Out')).toBeInTheDocument())
+  })
+
+  it("displays a logged in user's email address", async () => {
+    loggedIn()
+    render(<BlogLayout />)
+
+    await waitFor(() => expect(screen.getByText(EMAIL)).toBeInTheDocument())
   })
 })