diff --git a/frontend/e2e/mobile-ui.spec.ts b/frontend/e2e/mobile-ui.spec.ts index bf2134b..65eb465 100644 --- a/frontend/e2e/mobile-ui.spec.ts +++ b/frontend/e2e/mobile-ui.spec.ts @@ -201,21 +201,39 @@ test('all bottom destinations expose one active page and desktop layout stays un }) test('calendar week focus keeps seven usable day controls without page overflow', async ({ page }) => { - await page.route('**/api/v1/calendar-subscriptions', route => route.fulfill({ json: [{ id:'calendar-source', name:'工作', url:'https://example.com/work.ics', color:'#f15a29', enabled:true, refreshed_at:null, last_error:null, stale:false }] })) + const calendarSources = ['天气','法定节假日','老黄历','节日节气','星座','影视上新','股市指数','街舞赛事','F1'].map((name, index) => ({ id:`calendar-source-${index}`, name, url:`https://example.com/${index}.ics`, color:'#f15a29', enabled:true, refreshed_at:null, last_error:null, stale:false })) + await page.route('**/api/v1/calendar-subscriptions', route => route.fulfill({ json: calendarSources })) await page.route('**/api/v1/calendar-events?*', route => route.fulfill({ json: { events: [], sources: [] } })) await page.goto('/') const mobile = (await page.viewportSize())!.width <= 930 if (mobile) await bottomTab(page, '日历订阅').click() else await page.locator('.primary-nav').getByRole('button', { name: '日历订阅', exact: true }).click() const strip = page.getByRole('group', { name: '选择日期' }) + const filters = page.locator('.calendar-filters') await expect(strip).toBeVisible() + await expect(filters).toBeVisible() await expect(strip.locator('.calendar-week-day')).toHaveCount(7) - const metrics = await strip.evaluate(element => ({ - documentOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth, - stripOverflow: element.scrollWidth > element.clientWidth, - buttons: [...element.querySelectorAll('.calendar-week-day')].map(button => ({ width: button.getBoundingClientRect().width, height: button.getBoundingClientRect().height })), - })) + const metrics = await strip.evaluate(element => { + const filters = document.querySelector('.calendar-filters')! + const calendar = document.querySelector('.calendar-view')! + const main = calendar.closest('main') as HTMLElement + return { + documentOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth, + bodyOverflow: document.body.scrollWidth - document.body.clientWidth, + mainOverflow: main.scrollWidth - main.clientWidth, + calendarOverflow: calendar.scrollWidth - calendar.clientWidth, + filters: { clientWidth: filters.clientWidth, scrollWidth: filters.scrollWidth, overflowX: getComputedStyle(filters).overflowX }, + stripOverflow: element.scrollWidth > element.clientWidth, + buttons: [...element.querySelectorAll('.calendar-week-day')].map(button => ({ width: button.getBoundingClientRect().width, height: button.getBoundingClientRect().height })), + } + }) expect(metrics.documentOverflow).toBe(0) + expect(metrics.bodyOverflow).toBe(0) + expect(metrics.mainOverflow).toBe(0) + expect(metrics.calendarOverflow).toBe(0) + if ((await page.viewportSize())!.width <= 930) expect(metrics.filters.clientWidth).toBeLessThan(metrics.filters.scrollWidth) + else expect(metrics.filters.clientWidth).toBeGreaterThanOrEqual(metrics.filters.scrollWidth) + expect(metrics.filters.overflowX).toBe('auto') expect(metrics.buttons.every(button => button.width >= 44 && button.height >= 44)).toBeTruthy() const selectedColors = await strip.locator('.calendar-week-day.is-selected').evaluate(element => { const style = getComputedStyle(element) diff --git a/frontend/src/CalendarIntegration.test.ts b/frontend/src/CalendarIntegration.test.ts index 71882bb..2e5f9e8 100644 --- a/frontend/src/CalendarIntegration.test.ts +++ b/frontend/src/CalendarIntegration.test.ts @@ -5,4 +5,5 @@ describe('calendar shell integration',()=>{ it('puts calendar beside the other first-level tools on desktop and mobile',()=>{const nav=app.slice(app.indexOf('',app.indexOf('