Clean up more stuff

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

@@ -1,18 +1,15 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { type Meta, type StoryObj } from '@storybook/react'
 import { cookies } from '@storybook/nextjs/headers.mock'
 import { http } from 'msw'
-import { expect, userEvent, waitFor, within } from '@storybook/test'
+import { expect, userEvent } from '@storybook/test'
 import Page from './page'
 import { db, initializeDB } from '#lib/db.mock'
 import { createUserCookie, userCookieKey } from '#lib/session'
 import { PageDecorator } from '#.storybook/decorators'
 import { login } from '#app/actions.mock'
 import * as auth from '#app/auth/route'
 import { expectRedirect } from '#lib/test-utils'
+import NoteSkeleton from '#app/note/[id]/loading'
 
 const meta = {
   component: Page,
@@ -77,12 +74,10 @@ export const LoginShouldGetOAuthTokenAndSetCookie: Story = {
       ],
     },
   },
-  beforeEach() {},
   play: async ({ mount }) => {
     // Point the login implementation to the endpoint github would have redirected too.
     login.mockImplementation(async () => {
-      const absoluteUrl = new URL('/auth?code=storybookjs', 'http://localhost')
-      return await auth.GET(new Request(absoluteUrl.toString()))
+      return await auth.GET(new Request('/auth?code=storybookjs'))
     })
     const canvas = await mount()
     await expect(cookies().get(userCookieKey)?.value).toBeUndefined()
@@ -95,11 +90,10 @@ export const LoginShouldGetOAuthTokenAndSetCookie: Story = {
 }
 
 export const LogoutShouldDeleteCookie: Story = {
-  async beforeEach() {
+  async beforeEach() {},
+  play: async ({ mount }) => {
     cookies().set(userCookieKey, await createUserCookie('storybookjs'))
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
+    const canvas = await mount()
     await expect(cookies().get(userCookieKey)?.value).toContain('storybookjs')
     await userEvent.click(await canvas.findByRole('button', { name: 'logout' }))
     await expectRedirect('/')
@@ -122,3 +116,7 @@ export const EmptyState: Story = {
     initializeDB({}) // init an empty DB
   },
 }
+
+export const Loading: Story = {
+  render: () => <NoteSkeleton />,
+}

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

@@ -1,8 +1,4 @@
-/**
- * @vitest-environment jsdom
- */
-
-import { expect, userEvent, waitFor, within } from '@storybook/test'
+import { expect, userEvent } from '@storybook/test'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { cookies } from '@storybook/nextjs/headers.mock'
 import Page from './page'
@@ -54,8 +50,7 @@ export const UnknownId: Story = {
 }
 
 export const SavingExistingNoteShouldUpdateDBAndRedirect: Story = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement)
+  play: async ({ canvasElement, canvas }) => {
     const titleInput = await canvas.findByLabelText(
       'Enter a title for your note',
     )
@@ -73,7 +68,7 @@ export const SavingExistingNoteShouldUpdateDBAndRedirect: Story = {
     await userEvent.click(
       await canvas.findByRole('menuitem', { name: /done/i }),
       // WORKAROUND: FALSE_POSITIVE_POINTER_EVENTS
-      { pointerEventsCheck: 0 }
+      { pointerEventsCheck: 0 },
     )
 
     await expectRedirect('/note/2')
@@ -88,17 +83,15 @@ export const SavingExistingNoteShouldUpdateDBAndRedirect: Story = {
 }
 
 export const DeleteNoteRemovesFromDBAndSidebar: Story = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement)
-
+  play: async ({ canvas }) => {
     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 }),
-      { pointerEventsCheck: 0 }
+      { pointerEventsCheck: 0 },
     )
 
     await expectRedirect('/')

app/note/edit/page.stories.tsx

@@ -1,15 +1,12 @@
-/**
- * @vitest-environment jsdom
- */
-
-import { expect, userEvent, within } from '@storybook/test'
+import { expect, userEvent } from '@storybook/test'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { cookies } from '@storybook/nextjs/headers.mock'
 import Page from './page'
 import { db } from '#lib/db'
 import { createUserCookie, userCookieKey } from '#lib/session'
 import { PageDecorator } from '#.storybook/decorators'
 import { expectRedirect } from '#lib/test-utils'
+import EditSkeleton from '#app/note/edit/loading'
 
 const meta = {
   component: Page,
@@ -48,8 +45,7 @@ type Story = StoryObj<typeof meta>
 export const EditNewNote: Story = {}
 
 export const SaveNewNote: Story = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement)
+  play: async ({ canvas }) => {
     const titleInput = await canvas.findByLabelText(
       'Enter a title for your note',
     )
@@ -58,14 +54,16 @@ export const SaveNewNote: Story = {
     )
     await userEvent.clear(titleInput)
     // WORKAROUND: FALSE_POSITIVE_POINTER_EVENTS
-    await userEvent.type(titleInput, 'New Note Title', { pointerEventsCheck: 0 })
+    await userEvent.type(titleInput, 'New Note Title', {
+      pointerEventsCheck: 0,
+    })
     // WORKAROUND: FALSE_POSITIVE_POINTER_EVENTS
     await userEvent.type(bodyInput, 'New Note Body', { pointerEventsCheck: 0 })
 
     await userEvent.click(
       await canvas.findByRole('menuitem', { name: /done/i }),
       // WORKAROUND: FALSE_POSITIVE_POINTER_EVENTS
-      { pointerEventsCheck: 0 }
+      { pointerEventsCheck: 0 },
     )
 
     await expectRedirect('/note/3')
@@ -78,3 +76,7 @@ export const SaveNewNote: Story = {
     )
   },
 }
+
+export const Loading: Story = {
+  render: () => <EditSkeleton />,
+}

components/note-ui.stories.tsx

@@ -1,8 +1,4 @@
-/**
- * @vitest-environment jsdom
- */
-
-import { expect, userEvent, within } from '@storybook/test'
+import { expect, userEvent } from '@storybook/test'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { deleteNote, saveNote } from '#app/actions.mock'
 import NoteUI from '#components/note-ui'
@@ -13,8 +9,8 @@ const meta = {
   component: NoteUI,
   async beforeEach() {
     getUserFromSession.mockReturnValue('storybookjs')
-    saveNote.mockImplementation(async () => { })
-    deleteNote.mockImplementation(async () => { })
+    saveNote.mockImplementation(async () => {})
+    deleteNote.mockImplementation(async () => {})
   },
 } satisfies Meta<typeof NoteUI>
 
@@ -37,8 +33,7 @@ export const SaveAndDeleteShouldTriggerActions: Story = {
     isEditing: true,
     note: notes[0]!,
   },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement)
+  play: async ({ canvas, step }) => {
     const titleInput = await canvas.findByLabelText(
       'Enter a title for your note',
     )

components/search.stories.tsx

@@ -1,11 +1,7 @@
-/**
- * @vitest-environment jsdom
- */
-
 import { getRouter } from '@storybook/nextjs/navigation.mock'
 import { type Meta, type StoryObj } from '@storybook/react'
 import Search from './search'
-import { expect, fireEvent, userEvent, within } from '@storybook/test'
+import { expect, fireEvent } from '@storybook/test'
 
 const meta = {
   component: Search,
@@ -16,10 +12,9 @@ export default meta
 type Story = StoryObj<typeof meta>
 export const Default: Story = {}
 
-export const WithInput: Story = {
+export const WithInput = {
   name: 'With input ▶️',
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement)
+  play: async ({ canvas, step }) => {
     const input = canvas.getByRole('textbox')
 
     await step('Search', async () => {
@@ -29,15 +24,13 @@ export const WithInput: Story = {
       )
     })
   },
-}
+} satisfies Story
 
 export const InputCleared: Story = {
   name: 'Input cleared ▶️',
-  play: async (playContext) => {
-    await WithInput.play!(playContext)
-
-    const { canvasElement, step } = playContext
-    const canvas = within(canvasElement)
+  play: async ({ context, canvas, step }) => {
+    // eslint-disable-next-line storybook/context-in-play-function
+    await WithInput.play(context)
     const input = canvas.getByRole('textbox')
 
     getRouter().replace.mockClear()

components/sidebar.stories.tsx

@@ -1,8 +1,8 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import Sidebar from './sidebar'
 import { createNotes } from '#mocks/notes'
-import { expect, fireEvent, userEvent, within, waitFor } from '@storybook/test'
+import { expect, userEvent, waitFor } from '@storybook/test'
 
 const meta = {
   component: Sidebar,
@@ -23,8 +23,7 @@ export const Empty: Story = {
 }
 
 export const NotesExpanded: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
+  play: async ({ canvas }) => {
     const expanders = canvas.getAllByAltText(/expand/i)
 
     expanders.forEach(async (expander) => {
@@ -70,8 +69,7 @@ export const ToggleSidebarOnMobile: Story = {
   // because the components dimensions are not calculatable in the
   // virtual DOM. This is a limitation of the virtual DOM
   tags: ['!test'],
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement)
+  play: async ({ canvas, step }) => {
     const searchInput = canvas.getByRole('menubar')
 
     await step('Sidebar is initially visible', async () => {

package.json

@@ -36,12 +36,9 @@
     "prisma:setup": "dotenv -e .env.local prisma migrate dev && pnpm run generate-dmmf",
     "prisma:seed": "dotenv -e .env.local prisma db seed",
     "prisma:studio": "dotenv -e .env.local prisma studio",
-    "storybook:webpack": "storybook dev -p 6006",
-    "storybook": "storybook dev -p 6006 -c .storybook-vite",
+    "storybook": "storybook dev -p 6006",
+    "storybook:vite": "storybook dev -p 6006 -c .storybook-vite",
     "build-storybook": "storybook build",
-    "test-storybook": "test-storybook",
-    "test-storybook:coverage": "test-storybook --coverage && DEBUG='istanbuljs' nyc report --reporter=text --reporter=lcov -t ./coverage/storybook --report-dir ./coverage/storybook",
-    "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm run build-storybook --quiet && http-server storybook-static --port 6006 --silent\" \"wait-on http://127.0.0.1:6006/ && pnpm run test-storybook\"",
     "generate-dmmf": "tsx prisma/generate-dmmf.ts"
   },
   "prisma": {