feat: align upcoming with list layout

2026-09-19 19:43:32 +08:00
parent 915d690397
commit 0cf1c49094
6 changed files with 124 additions and 28 deletions
@@ -0,0 +1,89 @@
+import type { APIRequestContext, Page } from '@playwright/test'
+import { expect, test } from './fixtures'
+
+async function csrf(request: APIRequestContext) {
+  const state = await request.storageState()
+  return state.cookies.find(cookie => cookie.name === 'dodo_csrf')?.value ?? ''
+}
+
+async function mutate(request: APIRequestContext, baseURL: string, path: string, options: Parameters<APIRequestContext['fetch']>[1]) {
+  return request.fetch(path, { ...options, headers: { ...options?.headers, 'x-csrf-token': await csrf(request), origin: baseURL } })
+}
+
+async function openSidebarView(page: Page, name: string) {
+  const sidebar = page.locator('.sidebar')
+  const target = sidebar.getByRole('button', { name, exact: true })
+  if (await page.locator('.shell').evaluate(element => element.classList.contains('sidebar-collapsed'))) {
+    await page.getByRole('button', { name: '展开菜单' }).click()
+  } else if (await page.evaluate(() => window.innerWidth <= 930)) {
+    await page.locator('main .topbar > button').first().click()
+  } else if (!await target.isVisible()) {
+    await page.getByRole('button', { name: /展开菜单|收起菜单/ }).click()
+  }
+  await target.click()
+}
+
+function futureDueAt(days: number) {
+  const date = new Date()
+  date.setDate(date.getDate() + days)
+  date.setHours(12, 0, 0, 0)
+  return date.toISOString()
+}
+
+test('Upcoming shares the task-list hierarchy while keeping its date scope and no manual reorder', async ({ page, request, baseURL }) => {
+  const bootstrapResponse = await request.get('/api/v1/bootstrap')
+  expect(bootstrapResponse.ok()).toBeTruthy()
+  const inbox = (await bootstrapResponse.json()).lists.find((item: { is_inbox: boolean }) => item.is_inbox)
+  expect(inbox).toBeTruthy()
+
+  for (const [title, days] of [['未来一天任务', 1], ['未来三天任务', 3]] as const) {
+    const response = await mutate(request, baseURL!, '/api/v1/tasks', {
+      method: 'POST',
+      data: { title, list_id: inbox.id, due_at: futureDueAt(days), due_has_time: false },
+    })
+    expect(response.ok(), await response.text()).toBeTruthy()
+  }
+
+  await page.goto('/')
+  await openSidebarView(page, '最近 7 天')
+
+  await expect(page.locator('main')).toHaveClass(/list-main/)
+  await expect(page.locator('.topbar-title')).toHaveCount(0)
+  const header = page.locator('.list-page-context')
+  await expect(header.getByRole('heading', { name: '最近 7 天' })).toBeVisible()
+  await expect(header).toContainText(/还有 \d+ 项待完成/)
+  await expect(header.getByRole('switch', { name: '显示已完成' })).toBeVisible()
+  await expect(page.locator('.list-section-heading')).toContainText('任务')
+  await expect(page.getByRole('button', { name: '调整顺序' })).toHaveCount(0)
+  await expect(page.locator('.task-row')).toHaveCount(2)
+  await expect(page.locator('.task-row')).toContainText(['未来一天任务', '未来三天任务'])
+
+  const geometry = await page.evaluate(() => {
+    const rect = (selector: string) => {
+      const value = document.querySelector<HTMLElement>(selector)!.getBoundingClientRect()
+      return { left: value.left, right: value.right, width: value.width, top: value.top, bottom: value.bottom }
+    }
+    return {
+      viewportWidth: innerWidth,
+      overflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
+      header: rect('.list-page-context'),
+      search: rect('.list-search-reveal'),
+      section: rect('.list-section-heading'),
+      list: rect('.task-list'),
+    }
+  })
+  expect(geometry.overflow).toBe(0)
+  expect(geometry.header.left).toBeCloseTo(geometry.search.left, 0)
+  expect(geometry.search.left).toBeCloseTo(geometry.section.left, 0)
+  expect(geometry.section.left).toBeCloseTo(geometry.list.left, 0)
+  expect(geometry.header.width).toBeCloseTo(geometry.list.width, 0)
+  if (geometry.viewportWidth <= 720) {
+    expect(geometry.header.left).toBeCloseTo(29, 0)
+    expect(geometry.list.right).toBeCloseTo(geometry.viewportWidth - 29, 0)
+  }
+
+  const fab = page.getByRole('button', { name: '添加任务' })
+  await expect(fab).toBeVisible()
+  await fab.click()
+  await expect(page.getByRole('dialog', { name: '添加任务' })).toBeVisible()
+})