fix: add story tests for proposal details and input interactions

Author: Starefossen

src/components/cfp/CompactProposalList.stories.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/lib/proposal/types'
 import { Flags, Speaker } from '@/lib/speaker/types'
 import { convertStringToPortableTextBlocks } from '@/lib/proposal'
+import { expect, within } from 'storybook/test'
 
 const mockSpeakers: Speaker[] = [
   {
@@ -258,6 +259,112 @@ export const WithVideo: Story = {
   },
 }
 
+export const RendersAllStatusBadges: Story = {
+  args: {
+    proposals: mixedStatusProposals,
+    canEdit: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByText('Confirmed')).toBeInTheDocument()
+    expect(canvas.getByText('Accepted')).toBeInTheDocument()
+    expect(canvas.getByText('Submitted')).toBeInTheDocument()
+    expect(canvas.getByText('Waitlisted')).toBeInTheDocument()
+    // When an approved talk exists, rejected shows "Not selected"
+    expect(canvas.getByText('Not selected')).toBeInTheDocument()
+  },
+}
+
+export const SortsByStatusPriority: Story = {
+  args: {
+    proposals: [
+      createMockProposal('talk-1', 'Rejected Talk', Status.rejected),
+      createMockProposal('talk-2', 'Confirmed Talk', Status.confirmed),
+      createMockProposal('talk-3', 'Submitted Talk', Status.submitted),
+    ],
+    canEdit: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const links = canvas.getAllByRole('link', {
+      name: /Talk$/,
+    })
+    // Confirmed should be first, Submitted second, Rejected last
+    expect(links[0]).toHaveTextContent('Confirmed Talk')
+    expect(links[1]).toHaveTextContent('Submitted Talk')
+    expect(links[2]).toHaveTextContent('Rejected Talk')
+  },
+}
+
+export const EditableShowsEditLinks: Story = {
+  args: {
+    proposals: [createMockProposal('talk-1', 'My Talk', Status.submitted)],
+    canEdit: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const editLink = canvas.getByTitle('Edit proposal')
+    expect(editLink).toBeInTheDocument()
+    expect(editLink).toHaveAttribute(
+      'href',
+      expect.stringContaining('/cfp/proposal?id=talk-1'),
+    )
+  },
+}
+
+export const ReadOnlyHidesEditLinks: Story = {
+  args: {
+    proposals: [createMockProposal('talk-1', 'My Talk', Status.submitted)],
+    canEdit: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.queryByTitle('Edit proposal')).not.toBeInTheDocument()
+  },
+}
+
+export const RejectedShowsNotSelectedWithApprovedTalk: Story = {
+  args: {
+    proposals: [
+      createMockProposal('talk-1', 'Accepted Talk', Status.confirmed),
+      createMockProposal('talk-2', 'Other Proposal', Status.rejected),
+    ],
+    canEdit: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // When speaker has an approved talk, rejected shows "Not selected"
+    expect(canvas.getByText('Not selected')).toBeInTheDocument()
+    expect(canvas.queryByText('Rejected')).not.toBeInTheDocument()
+  },
+}
+
+export const WithdrawnStatusRendered: Story = {
+  args: {
+    proposals: [
+      createMockProposal('talk-1', 'Withdrawn Talk', Status.withdrawn),
+      createMockProposal('talk-2', 'Active Talk', Status.submitted),
+    ],
+    canEdit: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByText('Withdrawn')).toBeInTheDocument()
+    expect(canvas.getByText('Submitted')).toBeInTheDocument()
+  },
+}
+
+export const ShowsProposalCount: Story = {
+  args: {
+    proposals: allSubmittedProposals,
+    canEdit: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByText('Proposals (3)')).toBeInTheDocument()
+  },
+}
+
 export const ConferenceEnded: Story = {
   args: {
     proposals: [

src/components/proposal/ProposalDetailsForm.stories.tsx

@@ -10,6 +10,7 @@ import {
 import { Conference } from '@/lib/conference/types'
 import { Topic } from '@/lib/topic/types'
 import { fn } from 'storybook/test'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
 import { convertStringToPortableTextBlocks } from '@/lib/proposal'
 
 const mockTopics: Topic[] = [
@@ -173,3 +174,115 @@ export const WorkshopFormat: Story = {
     allowedFormats: [Format.workshop_120],
   },
 }
+
+export const TitleInputCallsSetProposal: Story = {
+  args: {
+    proposal: emptyProposal,
+    setProposal: fn(),
+    conference: mockConference,
+    allowedFormats: [Format.lightning_10, Format.presentation_25],
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement)
+    const titleInput = canvas.getByLabelText('Title')
+    await userEvent.type(titleInput, 'My New Talk')
+    await waitFor(() => {
+      expect(args.setProposal).toHaveBeenCalledWith(
+        expect.objectContaining({ title: 'My New Talk' }),
+      )
+    })
+  },
+}
+
+export const FormatDropdownChange: Story = {
+  args: {
+    proposal: emptyProposal,
+    setProposal: fn(),
+    conference: mockConference,
+    allowedFormats: [
+      Format.lightning_10,
+      Format.presentation_25,
+      Format.presentation_45,
+    ],
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement)
+    const formatSelect = canvas.getByLabelText('Presentation Format')
+    await userEvent.selectOptions(formatSelect, Format.presentation_45)
+    await waitFor(() => {
+      expect(args.setProposal).toHaveBeenCalledWith(
+        expect.objectContaining({ format: Format.presentation_45 }),
+      )
+    })
+  },
+}
+
+export const TosCheckboxToggle: Story = {
+  args: {
+    proposal: emptyProposal,
+    setProposal: fn(),
+    conference: mockConference,
+    allowedFormats: [Format.lightning_10],
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement)
+    const tosCheckbox = canvas.getByLabelText('I agree to the Code of Conduct')
+    expect(tosCheckbox).not.toBeChecked()
+    await userEvent.click(tosCheckbox)
+    await waitFor(() => {
+      expect(args.setProposal).toHaveBeenCalledWith(
+        expect.objectContaining({ tos: true }),
+      )
+    })
+  },
+}
+
+export const ReadOnlyShowsContent: Story = {
+  args: {
+    proposal: filledProposal,
+    setProposal: fn(),
+    conference: mockConference,
+    allowedFormats: [Format.presentation_45],
+    readOnly: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    // Read-only mode renders text, not inputs
+    expect(
+      canvas.getByText('Building Scalable Kubernetes Applications'),
+    ).toBeInTheDocument()
+    expect(canvas.getByText('English')).toBeInTheDocument()
+    expect(canvas.getByText('Intermediate')).toBeInTheDocument()
+    // Should not have editable inputs
+    expect(canvas.queryByLabelText('Title')).not.toBeInTheDocument()
+  },
+}
+
+export const WorkshopShowsPrerequisites: Story = {
+  args: {
+    proposal: {
+      ...emptyProposal,
+      format: Format.workshop_120,
+    },
+    setProposal: fn(),
+    conference: mockConference,
+    allowedFormats: [Format.workshop_120],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.getByLabelText('Prerequisites')).toBeInTheDocument()
+  },
+}
+
+export const NonWorkshopHidesPrerequisites: Story = {
+  args: {
+    proposal: emptyProposal,
+    setProposal: fn(),
+    conference: mockConference,
+    allowedFormats: [Format.lightning_10],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    expect(canvas.queryByLabelText('Prerequisites')).not.toBeInTheDocument()
+  },
+}