Add story and tests for login state in BlogLayout

web/src/layouts/BlogLayout/BlogLayout.stories.js

@@ -1,6 +1,12 @@
 import BlogLayout from './BlogLayout'
 
-export const generated = () => {
+export const loggedIn = () => {
+  mockCurrentUser({ email: 'rob@redwoodjs.com' })
+
+  return <BlogLayout />
+}
+
+export const loggedOut = () => {
   return <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', () => {
+  it('displays a Log In link when not logged in', async () => {
-    expect(() => {
+    loggedOut()
-      render(<BlogLayout />)
+    render(<BlogLayout />)
-    }).not.toThrow()
+
+    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())
   })
 })