From 5706cb8c6d9f21c7d493f871d7252115a3d21e7f Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 9 Aug 2024 17:00:05 +0200 Subject: [PATCH] Clean up more stuff --- app/note/[id]/page.stories.tsx | 22 ++++++++++------------ app/note/edit/[id]/page.stories.tsx | 17 +++++------------ app/note/edit/page.stories.tsx | 20 +++++++++++--------- components/note-ui.stories.tsx | 13 ++++--------- components/search.stories.tsx | 21 +++++++-------------- components/sidebar.stories.tsx | 10 ++++------ package.json | 7 ++----- 7 files changed, 43 insertions(+), 67 deletions(-) diff --git a/app/note/[id]/page.stories.tsx b/app/note/[id]/page.stories.tsx index 34cf1b3..197b436 100644 --- a/app/note/[id]/page.stories.tsx +++ b/app/note/[id]/page.stories.tsx @@ -1,11 +1,7 @@ -/** - * @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' @@ -13,6 +9,7 @@ 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: () => , +} diff --git a/app/note/edit/[id]/page.stories.tsx b/app/note/edit/[id]/page.stories.tsx index fd49dc3..3e97951 100644 --- a/app/note/edit/[id]/page.stories.tsx +++ b/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,9 +83,7 @@ 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', @@ -98,7 +91,7 @@ export const DeleteNoteRemovesFromDBAndSidebar: Story = { await userEvent.click( await canvas.findByRole('menuitem', { name: /delete/i }), - { pointerEventsCheck: 0 } + { pointerEventsCheck: 0 }, ) await expectRedirect('/') diff --git a/app/note/edit/page.stories.tsx b/app/note/edit/page.stories.tsx index 8047a14..1d9fe4b 100644 --- a/app/note/edit/page.stories.tsx +++ b/app/note/edit/page.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 { cookies } from '@storybook/nextjs/headers.mock' import Page from './page' @@ -10,6 +6,7 @@ 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 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: () => , +} diff --git a/components/note-ui.stories.tsx b/components/note-ui.stories.tsx index 069642a..ffa9373 100644 --- a/components/note-ui.stories.tsx +++ b/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 @@ -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', ) diff --git a/components/search.stories.tsx b/components/search.stories.tsx index 1d6fea0..c753da8 100644 --- a/components/search.stories.tsx +++ b/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 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() diff --git a/components/sidebar.stories.tsx b/components/sidebar.stories.tsx index 2d9a54d..143dfe8 100644 --- a/components/sidebar.stories.tsx +++ b/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 () => { diff --git a/package.json b/package.json index 253ce8f..89ff478 100644 --- a/package.json +++ b/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": {