Use .test syntax in RSC demo

Author: kasperpeulen

.storybook/main.ts

@@ -14,6 +14,7 @@ export default defineMain({
   },
   features: {
     experimentalRSC: true,
+    experimentalTestSyntax: true,
   },
   staticDirs: ['../public'],
   async viteFinal(config) {

app/note/[id]/page.stories.tsx

@@ -40,54 +40,47 @@ export const LoggedIn = meta.story({
   },
 })
 
+LoggedIn.test('log out should delete cookie', async ({ canvas, userEvent }) => {
+  await expect((await cookies()).get(userCookieKey)?.value).toContain('storybookjs')
+  await userEvent.click(await canvas.findByRole('button', { name: 'logout' }))
+  await expectToHaveBeenNavigatedTo({ pathname: '/' })
+  await expect((await cookies()).get(userCookieKey)).toBeUndefined()
+})
+
 export const NotLoggedIn = meta.story()
 
-export const LoginShouldGetOAuthTokenAndSetCookie = meta.story({
-  parameters: {
-    msw: {
-      // Mock out OAUTH
-      handlers: [
-        http.post('https://github.com/login/oauth/access_token', async ({ request }) => {
-          let json = (await request.json()) as any
-          return Response.json({ access_token: json.code })
-        }),
-        http.get('https://api.github.com/user', async ({ request }) =>
-          Response.json({
-            login: request.headers.get('Authorization')?.replace('token ', ''),
+NotLoggedIn.test(
+  'login should get oauth token and set cookie',
+  {
+    parameters: {
+      msw: {
+        // Mock out OAUTH
+        handlers: [
+          http.post('https://github.com/login/oauth/access_token', async ({ request }) => {
+            let json = (await request.json()) as any
+            return Response.json({ access_token: json.code })
           }),
-        ),
-      ],
+          http.get('https://api.github.com/user', async ({ request }) =>
+            Response.json({
+              login: request.headers.get('Authorization')?.replace('token ', ''),
+            }),
+          ),
+        ],
+      },
+    },
+    async beforeEach() {
+      mocked(login).mockImplementation(async () => {
+        return await auth.GET(new Request('/auth?code=storybookjs'))
+      })
     },
   },
-  play: async ({ mount, userEvent }) => {
-    // Point the login implementation to the endpoint github would have redirected too.
-    mocked(login).mockImplementation(async () => {
-      return await auth.GET(new Request('/auth?code=storybookjs'))
-    })
-    const canvas = await mount()
+  async ({ canvas, userEvent }) => {
     await expect((await cookies()).get(userCookieKey)?.value).toBeUndefined()
     await userEvent.click(await canvas.findByRole('menuitem', { name: /login to add/i }))
     await expectToHaveBeenNavigatedTo({ pathname: '/' })
     await expect((await cookies()).get(userCookieKey)?.value).toContain('storybookjs')
   },
-})
-
-export const LogoutShouldDeleteCookie = meta.story({
-  play: async ({ mount, userEvent }) => {
-    ;(await cookies()).set(userCookieKey, await createUserCookie('storybookjs'))
-    const canvas = await mount()
-    await expect((await cookies()).get(userCookieKey)?.value).toContain('storybookjs')
-    await userEvent.click(await canvas.findByRole('button', { name: 'logout' }))
-    await expectToHaveBeenNavigatedTo({ pathname: '/' })
-    await expect((await cookies()).get(userCookieKey)).toBeUndefined()
-  },
-})
-
-// export const SearchInputShouldFilterNotes = meta.story({
-//   parameters: {
-//     nextjs: { navigation: { query: { q: 'RSC' } } },
-//   },
-// })
+)
 
 export const EmptyState = meta.story({
   async beforeEach() {
@@ -98,3 +91,9 @@ export const EmptyState = meta.story({
 export const Loading = meta.story({
   render: () => <NoteSkeleton />,
 })
+
+// export const SearchInputShouldFilterNotes = meta.story({
+//   parameters: {
+//     nextjs: { navigation: { query: { q: 'RSC' } } },
+//   },
+// })

app/note/edit/[id]/page.stories.tsx

@@ -33,12 +33,9 @@ const meta = preview.meta({
 
 export const EditNote = meta.story()
 
-export const UnknownId = meta.story({
-  args: { params: { id: '999' } },
-})
-
-export const SavingExistingNoteShouldUpdateDBAndRedirect = meta.story({
-  play: async ({ userEvent, canvas }) => {
+EditNote.test(
+  'saving existing note should update db and redirect',
+  async ({ canvas, userEvent }) => {
     const titleInput = await canvas.findByLabelText('Enter a title for your note')
     const bodyInput = await canvas.findByLabelText('Enter the body for your note')
 
@@ -56,20 +53,22 @@ export const SavingExistingNoteShouldUpdateDBAndRedirect = meta.story({
       }),
     )
   },
-})
+)
 
-export const DeleteNoteRemovesFromDBAndSidebar = meta.story({
-  play: async ({ canvas, userEvent }) => {
-    await expect(
-      await db.note.findMany({ where: { id: 2 } }),
-      'Note with id 2 does exist',
-    ).toHaveLength(1)
+EditNote.test('delete note removes from db and sidebar', async ({ canvas, userEvent }) => {
+  await expect(
+    await db.note.findMany({ where: { id: 2 } }),
+    'Note with id 2 does exist',
+  ).toHaveLength(1)
 
-    await userEvent.click(await canvas.findByRole('menuitem', { name: /delete/i }))
-    await expectToHaveBeenNavigatedTo({ pathname: '/' })
-    await expect(
-      await db.note.findMany({ where: { id: 2 } }),
-      'Note with id 2 does not exist anymore',
-    ).toHaveLength(0)
-  },
+  await userEvent.click(await canvas.findByRole('menuitem', { name: /delete/i }))
+  await expectToHaveBeenNavigatedTo({ pathname: '/' })
+  await expect(
+    await db.note.findMany({ where: { id: 2 } }),
+    'Note with id 2 does not exist anymore',
+  ).toHaveLength(0)
+})
+
+export const UnknownId = meta.story({
+  args: { params: { id: '999' } },
 })

app/note/edit/page.stories.tsx

@@ -33,24 +33,22 @@ const meta = preview.meta({
 
 export const EditNewNote = meta.story()
 
-export const SaveNewNote = meta.story({
-  play: async ({ canvas, userEvent }) => {
-    const titleInput = await canvas.findByLabelText('Enter a title for your note')
-    const bodyInput = await canvas.findByLabelText('Enter the body for your note')
-    await userEvent.clear(titleInput)
-    await userEvent.type(titleInput, 'New Note Title', {})
-    await userEvent.type(bodyInput, 'New Note Body')
-    await userEvent.click(await canvas.findByRole('menuitem', { name: /done/i }))
+EditNewNote.test('save should create new note and redirect', async ({ canvas, userEvent }) => {
+  const titleInput = await canvas.findByLabelText('Enter a title for your note')
+  const bodyInput = await canvas.findByLabelText('Enter the body for your note')
+  await userEvent.clear(titleInput)
+  await userEvent.type(titleInput, 'New Note Title', {})
+  await userEvent.type(bodyInput, 'New Note Body')
+  await userEvent.click(await canvas.findByRole('menuitem', { name: /done/i }))
 
-    await expectToHaveBeenNavigatedTo({ pathname: '/note/3' })
+  await expectToHaveBeenNavigatedTo({ pathname: '/note/3' })
 
-    await expect(await db.note.findUnique({ where: { id: 3 } })).toEqual(
-      expect.objectContaining({
-        title: 'New Note Title',
-        body: 'New Note Body',
-      }),
-    )
-  },
+  await expect(await db.note.findUnique({ where: { id: 3 } })).toEqual(
+    expect.objectContaining({
+      title: 'New Note Title',
+      body: 'New Note Body',
+    }),
+  )
 })
 
 export const Loading = meta.story({