sancho41/condado-newsletter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): move task creation to dedicated page with scrollable layout

Browse Source 
Replace the EntityDetailPage modal flow with a route-based CreateTaskPage for better accessibility and long-form usability.

Add route /entities/:entityId/tasks/new and update tests for both entity detail navigation and create-task page behavior.
This commit is contained in:
Gabriel Sancho
2026-03-27 00:00:13 -03:00
parent 2262d3ea33
commit 73d4261aa2
5 changed files with 553 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
frontend/src/__tests__/pages/CreateTaskPage.test.tsx Normal file
View File

@@ -0,0 +1,165 @@
import { render, screen, waitFor, fireEvent } from '@testing-library/react'
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { MemoryRouter, Route, Routes } from 'react-router-dom'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import CreateTaskPage from '@/pages/CreateTaskPage'
import * as entitiesApi from '@/api/entitiesApi'
import * as tasksApi from '@/api/tasksApi'
const mockNavigate = vi.fn()
vi.mock('react-router-dom', async () => {
const actual = await vi.importActual('react-router-dom')
return { ...actual, useNavigate: () => mockNavigate }
})
vi.mock('@/api/entitiesApi')
vi.mock('@/api/tasksApi')
const wrapper = ({ children }: { children: React.ReactNode }) => (
<QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
<MemoryRouter initialEntries={['/entities/entity-1/tasks/new']}>
<Routes>
<Route path="/entities/:entityId/tasks/new" element={children} />
</Routes>
</MemoryRouter>
</QueryClientProvider>
)
const mockEntity = {
id: 'entity-1',
name: 'Entity A',
email: 'a@a.com',
jobTitle: 'Ops',
personality: 'Formal',
scheduleCron: '0 9 * * 1',
contextWindowDays: 3,
active: true,
createdAt: '',
}
describe('CreateTaskPage', () => {
beforeEach(() => {
vi.mocked(tasksApi.getEmailLookbackLabel).mockReturnValue('Last week')
vi.mocked(entitiesApi.getEntity).mockResolvedValue(mockEntity)
mockNavigate.mockClear()
})
it('should_renderFormFields_when_pageLoads', async () => {
render(<CreateTaskPage />, { wrapper })
await screen.findByRole('link', { name: /back to entity a/i })
expect(screen.getByLabelText(/task name/i)).toBeInTheDocument()
expect(screen.getByLabelText(/task prompt/i)).toBeInTheDocument()
expect(screen.getByLabelText(/^Email Period$/i)).toBeInTheDocument()
expect(screen.getByLabelText(/^Minute$/i)).toBeInTheDocument()
expect(screen.getByLabelText(/^Hour$/i)).toBeInTheDocument()
expect(screen.getByLabelText(/^Day of Month$/i)).toBeInTheDocument()
expect(screen.getByLabelText(/^Month$/i)).toBeInTheDocument()
expect(screen.getByLabelText(/^Day of Week$/i)).toBeInTheDocument()
})
it('should_generatePreviewAndCreateTask_when_formSubmitted', async () => {
vi.mocked(tasksApi.generateTaskPreview).mockResolvedValue('SUBJECT: Preview\nBODY:\nFormal nonsense')
vi.mocked(tasksApi.createTask).mockResolvedValue({
id: 'task-2',
entityId: 'entity-1',
name: 'Morning Blast',
prompt: 'Talk about coffee',
scheduleCron: '0 8 * * 1-5',
emailLookback: 'last_week',
createdAt: '2026-03-26T10:00:00Z',
})
render(<CreateTaskPage />, { wrapper })
await screen.findByRole('link', { name: /back to entity a/i })
const minuteField = screen.getByLabelText(/^Minute$/i)
const hourField = screen.getByLabelText(/^Hour$/i)
const dayOfMonthField = screen.getByLabelText(/^Day of Month$/i)
const monthField = screen.getByLabelText(/^Month$/i)
const dayOfWeekField = screen.getByLabelText(/^Day of Week$/i)
expect(minuteField.tagName).toBe('INPUT')
expect(hourField.tagName).toBe('INPUT')
expect(dayOfMonthField.tagName).toBe('INPUT')
expect(monthField.tagName).toBe('INPUT')
expect(dayOfWeekField.tagName).toBe('INPUT')
expect(screen.getByRole('button', { name: /Daily/i })).toBeInTheDocument()
expect(screen.getByRole('button', { name: /Weekdays/i })).toBeInTheDocument()
expect(screen.getByRole('button', { name: /Weekly/i })).toBeInTheDocument()
expect(screen.getByRole('button', { name: /Monthly/i })).toBeInTheDocument()
fireEvent.change(screen.getByLabelText(/task name/i), { target: { value: 'Morning Blast' } })
fireEvent.change(screen.getByLabelText(/task prompt/i), { target: { value: 'Talk about coffee' } })
fireEvent.click(screen.getByRole('button', { name: /Weekdays/i }))
fireEvent.change(screen.getByLabelText(/^Hour$/i), { target: { value: '8' } })
fireEvent.click(screen.getByRole('button', { name: /generate test message/i }))
await waitFor(() => {
expect(tasksApi.generateTaskPreview).toHaveBeenCalled()
expect(vi.mocked(tasksApi.generateTaskPreview).mock.calls[0][0]).toEqual(
expect.objectContaining({
entityId: 'entity-1',
name: 'Morning Blast',
prompt: 'Talk about coffee',
scheduleCron: '0 8 * * 1-5',
emailLookback: 'last_week',
})
)
expect(screen.getByText(/Formal nonsense/i)).toBeInTheDocument()
})
fireEvent.click(screen.getByRole('button', { name: /create task/i }))
await waitFor(() => {
expect(tasksApi.createTask).toHaveBeenCalled()
expect(vi.mocked(tasksApi.createTask).mock.calls[0][0]).toEqual(
expect.objectContaining({
entityId: 'entity-1',
name: 'Morning Blast',
prompt: 'Talk about coffee',
scheduleCron: '0 8 * * 1-5',
emailLookback: 'last_week',
})
)
expect(mockNavigate).toHaveBeenCalledWith('/entities/entity-1')
})
})
it('should_applyDailySuggestion_when_suggestionClicked', async () => {
render(<CreateTaskPage />, { wrapper })
await screen.findByRole('link', { name: /back to entity a/i })
fireEvent.click(screen.getByRole('button', { name: /Daily/i }))
expect(screen.getByLabelText(/^Minute$/i)).toHaveValue('0')
expect(screen.getByLabelText(/^Hour$/i)).toHaveValue('9')
expect(screen.getByLabelText(/^Day of Month$/i)).toHaveValue('*')
expect(screen.getByLabelText(/^Month$/i)).toHaveValue('*')
expect(screen.getByLabelText(/^Day of Week$/i)).toHaveValue('*')
})
it('should_renderEmailPeriodBeforeTaskSchedule_when_pageLoads', async () => {
render(<CreateTaskPage />, { wrapper })
await screen.findByRole('link', { name: /back to entity a/i })
const emailPeriodLabel = screen.getByText(/^Email Period$/i)
const taskScheduleLabel = screen.getByText(/^Task Schedule$/i)
const order = emailPeriodLabel.compareDocumentPosition(taskScheduleLabel)
expect(order & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
})
it('should_navigateToEntityPage_when_cancelClicked', async () => {
render(<CreateTaskPage />, { wrapper })
await screen.findByRole('link', { name: /back to entity a/i })
fireEvent.click(screen.getByRole('button', { name: /cancel/i }))
expect(mockNavigate).toHaveBeenCalledWith('/entities/entity-1')
})
})

69
frontend/src/__tests__/pages/EntityDetailPage.test.tsx
View File

@@ -53,72 +53,9 @@ describe('EntityDetailPage', () => {
expect(screen.getByText(/Weekly Check-in/i)).toBeInTheDocument()
expect(screen.getByText(/Last week/i)).toBeInTheDocument()
expect(screen.queryByText(/Default scheduler:/i)).not.toBeInTheDocument()
})
})
it('should_generatePreviewAndCreateTask_when_formSubmitted', async () => {
vi.mocked(tasksApi.getEmailLookbackLabel).mockReturnValue('Last week')
vi.mocked(entitiesApi.getEntity).mockResolvedValue({
id: 'entity-1',
name: 'Entity A',
email: 'a@a.com',
jobTitle: 'Ops',
personality: 'Formal',
scheduleCron: '0 9 * * 1',
contextWindowDays: 3,
active: true,
createdAt: '',
})
vi.mocked(tasksApi.getTasksByEntity).mockResolvedValue([])
vi.mocked(tasksApi.generateTaskPreview).mockResolvedValue('SUBJECT: Preview\nBODY:\nFormal nonsense')
vi.mocked(tasksApi.createTask).mockResolvedValue({
id: 'task-2',
entityId: 'entity-1',
name: 'Morning Blast',
prompt: 'Talk about coffee',
scheduleCron: '0 8 * * 1-5',
emailLookback: 'last_week',
createdAt: '2026-03-26T10:00:00Z',
})
render(<EntityDetailPage />, { wrapper })
await screen.findByRole('button', { name: /new task/i })
fireEvent.click(screen.getByRole('button', { name: /new task/i }))
fireEvent.change(screen.getByLabelText(/task name/i), { target: { value: 'Morning Blast' } })
fireEvent.change(screen.getByLabelText(/task prompt/i), { target: { value: 'Talk about coffee' } })
fireEvent.change(screen.getByLabelText(/task schedule/i), { target: { value: '0 8 * * 1-5' } })
fireEvent.click(screen.getByRole('button', { name: /generate test message/i }))
await waitFor(() => {
expect(tasksApi.generateTaskPreview).toHaveBeenCalled()
expect(vi.mocked(tasksApi.generateTaskPreview).mock.calls[0][0]).toEqual(
expect.objectContaining({
entityId: 'entity-1',
name: 'Morning Blast',
prompt: 'Talk about coffee',
scheduleCron: '0 8 * * 1-5',
emailLookback: 'last_week',
})
)
expect(screen.getByText(/Formal nonsense/i)).toBeInTheDocument()
})
fireEvent.click(screen.getByRole('button', { name: /create task/i }))
await waitFor(() => {
expect(tasksApi.createTask).toHaveBeenCalled()
expect(vi.mocked(tasksApi.createTask).mock.calls[0][0]).toEqual(
expect.objectContaining({
entityId: 'entity-1',
name: 'Morning Blast',
prompt: 'Talk about coffee',
scheduleCron: '0 8 * * 1-5',
emailLookback: 'last_week',
})
expect(screen.getByRole('link', { name: /new task/i })).toHaveAttribute(
'href',
'/entities/entity-1/tasks/new'
)
})
})