From 8a565b8633a1e72dc5a7fbd62089367b0adb000a Mon Sep 17 00:00:00 2001 From: JimmFly Date: Thu, 6 Jul 2023 14:17:19 +0800 Subject: [PATCH] fix: date-picker hidden in update collection (#3045) --- .../page-list/view/collection-list.css.ts | 2 +- tests/libs/filter.ts | 208 ++++++++++++++++++ tests/parallels/all-page.spec.ts | 204 ++--------------- .../local-first-collections-items.spec.ts | 22 ++ 4 files changed, 246 insertions(+), 190 deletions(-) create mode 100644 tests/libs/filter.ts diff --git a/packages/component/src/components/page-list/view/collection-list.css.ts b/packages/component/src/components/page-list/view/collection-list.css.ts index f76851a683..35e2841523 100644 --- a/packages/component/src/components/page-list/view/collection-list.css.ts +++ b/packages/component/src/components/page-list/view/collection-list.css.ts @@ -166,7 +166,7 @@ export const excludeTip = style({ }); export const scrollContainer = style({ - overflow: 'hidden', + maxHeight: '70vh', flex: 1, display: 'flex', flexDirection: 'column', diff --git a/tests/libs/filter.ts b/tests/libs/filter.ts new file mode 100644 index 0000000000..2344bfd4ce --- /dev/null +++ b/tests/libs/filter.ts @@ -0,0 +1,208 @@ +import type { Page } from '@playwright/test'; +import { expect } from '@playwright/test'; + +import { getBlockSuiteEditorTitle, newPage } from './page-logic'; + +const monthNames = [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jul', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec', +]; + +export const createFirstFilter = async (page: Page, name: string) => { + await page + .locator('[data-testid="editor-header-items"]') + .locator('button', { hasText: 'Filter' }) + .click(); + await page + .locator('[data-testid="variable-select-item"]', { hasText: name }) + .click(); +}; + +export const checkFilterName = async (page: Page, name: string) => { + const filterName = await page + .locator('[data-testid="filter-name"]') + .textContent(); + expect(filterName).toBe(name); +}; + +const dateFormat = (date: Date) => { + const month = monthNames[date.getMonth()]; + const day = date.getDate().toString().padStart(2, '0'); + return `${month} ${day}`; +}; + +export const checkPagesCount = async (page: Page, count: number) => { + expect((await page.locator('[data-testid="title"]').all()).length).toBe( + count + ); +}; + +export const checkDatePicker = async (page: Page, date: Date) => { + expect( + await page + .locator('[data-testid="filter-arg"]') + .locator('input') + .inputValue() + ).toBe(dateFormat(date)); +}; + +export const clickDatePicker = async (page: Page) => { + await page.locator('[data-testid="filter-arg"]').locator('input').click(); +}; + +const clickMonthPicker = async (page: Page) => { + await page.locator('[data-testid="month-picker-button"]').click(); +}; + +export const fillDatePicker = async (page: Page, date: Date) => { + await page + .locator('[data-testid="filter-arg"]') + .locator('input') + .fill(dateFormat(date)); +}; + +const checkIsLastMonth = (date: Date): boolean => { + const targetMonth = date.getMonth(); + const currentMonth = new Date().getMonth(); + const lastMonth = currentMonth === 0 ? 11 : currentMonth - 1; + return targetMonth === lastMonth; +}; + +const checkIsNextMonth = (date: Date): boolean => { + const targetMonth = date.getMonth(); + const currentMonth = new Date().getMonth(); + const nextMonth = currentMonth === 11 ? 0 : currentMonth + 1; + return targetMonth === nextMonth; +}; + +export const selectDateFromDatePicker = async (page: Page, date: Date) => { + const datePickerPopup = page.locator('.react-datepicker-popper'); + const day = date.getDate().toString(); + const month = date.toLocaleString('en-US', { month: 'long' }); + const weekday = date.toLocaleString('en-US', { weekday: 'long' }); + const year = date.getFullYear().toString(); + // Open the date picker popup + await clickDatePicker(page); + const selectDate = async (): Promise => { + if (checkIsLastMonth(date)) { + const lastMonthButton = page.locator( + '[data-testid="date-picker-prev-button"]' + ); + await lastMonthButton.click(); + } else if (checkIsNextMonth(date)) { + const nextMonthButton = page.locator( + '[data-testid="date-picker-next-button"]' + ); + await nextMonthButton.click(); + } + const map = ['th', 'st', 'nd', 'rd']; + // Click on the day cell + const dateCell = page.locator( + `[aria-disabled="false"][aria-label="Choose ${weekday}, ${month} ${day}${ + map[Number.parseInt(day) % 10] ?? 'th' + }, ${year}"]` + ); + await dateCell.click(); + }; + await selectDate(); + + // Wait for the date picker popup to close + await datePickerPopup.waitFor({ state: 'hidden' }); +}; + +const checkIsLastYear = (date: Date): boolean => { + const targetYear = date.getFullYear(); + const currentYear = new Date().getFullYear(); + const lastYear = currentYear - 1; + return targetYear === lastYear; +}; + +const checkIsNextYear = (date: Date): boolean => { + const targetYear = date.getFullYear(); + const currentYear = new Date().getFullYear(); + const nextYear = currentYear + 1; + return targetYear === nextYear; +}; + +export const selectMonthFromMonthPicker = async (page: Page, date: Date) => { + const month = date.toLocaleString('en-US', { month: 'long' }); + const year = date.getFullYear().toString(); + // Open the month picker popup + await clickMonthPicker(page); + const selectMonth = async (): Promise => { + if (checkIsLastYear(date)) { + const lastYearButton = page.locator( + '[data-testid="month-picker-prev-button"]' + ); + await lastYearButton.click(); + } else if (checkIsNextYear(date)) { + const nextYearButton = page.locator( + '[data-testid="month-picker-next-button"]' + ); + await nextYearButton.click(); + } + // Click on the day cell + const monthCell = page.locator(`[aria-label="Choose ${month} ${year}"]`); + await monthCell.click(); + }; + await selectMonth(); +}; + +export const checkDatePickerMonth = async (page: Page, date: Date) => { + expect( + await page.locator('[data-testid="date-picker-current-month"]').innerText() + ).toBe(date.toLocaleString('en-US', { month: 'long' })); +}; + +const createTag = async (page: Page, name: string) => { + await page.keyboard.type(name); + await page.keyboard.press('ArrowUp'); + await page.keyboard.press('Enter'); +}; + +export const createPageWithTag = async ( + page: Page, + options: { + title: string; + tags: string[]; + } +) => { + await page.getByTestId('all-pages').click(); + await newPage(page); + await getBlockSuiteEditorTitle(page).click(); + await getBlockSuiteEditorTitle(page).fill('test page'); + await page.locator('affine-page-meta-data').click(); + await page.locator('.add-tag').click(); + for (const name of options.tags) { + await createTag(page, name); + } + await page.keyboard.press('Escape'); +}; + +export const changeFilter = async (page: Page, to: string | RegExp) => { + await page.getByTestId('filter-name').click(); + await page + .getByTestId('filter-name-select') + .locator('button', { hasText: to }) + .click(); +}; + +export async function selectTag(page: Page, name: string | RegExp) { + await page.getByTestId('filter-arg').click(); + await page + .getByTestId('multi-select') + .getByTestId('select-option') + .getByText(name) + .click(); + await page.getByTestId('filter-arg').click(); +} diff --git a/tests/parallels/all-page.spec.ts b/tests/parallels/all-page.spec.ts index afcce74f00..6a7265b41e 100644 --- a/tests/parallels/all-page.spec.ts +++ b/tests/parallels/all-page.spec.ts @@ -2,11 +2,24 @@ import { test } from '@affine-test/kit/playwright'; import type { Page } from '@playwright/test'; import { expect } from '@playwright/test'; +import { + changeFilter, + checkDatePicker, + checkDatePickerMonth, + checkFilterName, + checkPagesCount, + clickDatePicker, + createFirstFilter, + createPageWithTag, + fillDatePicker, + selectDateFromDatePicker, + selectMonthFromMonthPicker, + selectTag, +} from '../libs/filter'; import { openHomePage } from '../libs/load-page'; import { closeDownloadTip, getBlockSuiteEditorTitle, - newPage, waitEditorLoad, } from '../libs/page-logic'; import { clickSideBarAllPageButton } from '../libs/sidebar'; @@ -58,22 +71,6 @@ test('all page can create new edgeless page', async ({ page }) => { await expect(page.locator('affine-edgeless-page')).toBeVisible(); }); -const createFirstFilter = async (page: Page, name: string) => { - await page - .locator('[data-testid="editor-header-items"]') - .locator('button', { hasText: 'Filter' }) - .click(); - await page - .locator('[data-testid="variable-select-item"]', { hasText: name }) - .click(); -}; - -const checkFilterName = async (page: Page, name: string) => { - await expect( - await page.locator('[data-testid="filter-name"]').textContent() - ).toBe(name); -}; - test('allow creation of filters by favorite', async ({ page }) => { await openHomePage(page); await waitEditorLoad(page); @@ -89,51 +86,6 @@ test('allow creation of filters by favorite', async ({ page }) => { ).toBe('false'); }); -const monthNames = [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', -]; - -const dateFormat = (date: Date) => { - const month = monthNames[date.getMonth()]; - const day = date.getDate().toString().padStart(2, '0'); - return `${month} ${day}`; -}; -const checkPagesCount = async (page: Page, count: number) => { - await expect((await page.locator('[data-testid="title"]').all()).length).toBe( - count - ); -}; -const checkDatePicker = async (page: Page, date: Date) => { - expect( - await page - .locator('[data-testid="filter-arg"]') - .locator('input') - .inputValue() - ).toBe(dateFormat(date)); -}; -const clickDatePicker = async (page: Page) => { - await page.locator('[data-testid="filter-arg"]').locator('input').click(); -}; -const clickMonthPicker = async (page: Page) => { - await page.locator('[data-testid="month-picker-button"]').click(); -}; -const fillDatePicker = async (page: Page, date: Date) => { - await page - .locator('[data-testid="filter-arg"]') - .locator('input') - .fill(dateFormat(date)); -}; test('allow creation of filters by created time', async ({ page }) => { await openHomePage(page); await waitEditorLoad(page); @@ -163,53 +115,6 @@ test('allow creation of filters by created time', async ({ page }) => { await checkPagesCount(page, 1); }); -const checkIsLastMonth = (date: Date): boolean => { - const targetMonth = date.getMonth(); - const currentMonth = new Date().getMonth(); - const lastMonth = currentMonth === 0 ? 11 : currentMonth - 1; - return targetMonth === lastMonth; -}; -const checkIsNextMonth = (date: Date): boolean => { - const targetMonth = date.getMonth(); - const currentMonth = new Date().getMonth(); - const nextMonth = currentMonth === 11 ? 0 : currentMonth + 1; - return targetMonth === nextMonth; -}; -const selectDateFromDatePicker = async (page: Page, date: Date) => { - const datePickerPopup = page.locator('.react-datepicker-popper'); - const day = date.getDate().toString(); - const month = date.toLocaleString('en-US', { month: 'long' }); - const weekday = date.toLocaleString('en-US', { weekday: 'long' }); - const year = date.getFullYear().toString(); - // Open the date picker popup - await clickDatePicker(page); - const selectDate = async (): Promise => { - if (checkIsLastMonth(date)) { - const lastMonthButton = page.locator( - '[data-testid="date-picker-prev-button"]' - ); - await lastMonthButton.click(); - } else if (checkIsNextMonth(date)) { - const nextMonthButton = page.locator( - '[data-testid="date-picker-next-button"]' - ); - await nextMonthButton.click(); - } - const map = ['th', 'st', 'nd', 'rd']; - // Click on the day cell - const dateCell = page.locator( - `[aria-disabled="false"][aria-label="Choose ${weekday}, ${month} ${day}${ - map[Number.parseInt(day) % 10] ?? 'th' - }, ${year}"]` - ); - await dateCell.click(); - }; - await selectDate(); - - // Wait for the date picker popup to close - await datePickerPopup.waitFor({ state: 'hidden' }); -}; - test('creation of filters by created time, then click date picker to modify the date', async ({ page, }) => { @@ -240,46 +145,7 @@ test('creation of filters by created time, then click date picker to modify the await checkDatePicker(page, tomorrow); await checkPagesCount(page, 1); }); -const checkIsLastYear = (date: Date): boolean => { - const targetYear = date.getFullYear(); - const currentYear = new Date().getFullYear(); - const lastYear = currentYear - 1; - return targetYear === lastYear; -}; -const checkIsNextYear = (date: Date): boolean => { - const targetYear = date.getFullYear(); - const currentYear = new Date().getFullYear(); - const nextYear = currentYear + 1; - return targetYear === nextYear; -}; -const selectMonthFromMonthPicker = async (page: Page, date: Date) => { - const month = date.toLocaleString('en-US', { month: 'long' }); - const year = date.getFullYear().toString(); - // Open the month picker popup - await clickMonthPicker(page); - const selectMonth = async (): Promise => { - if (checkIsLastYear(date)) { - const lastYearButton = page.locator( - '[data-testid="month-picker-prev-button"]' - ); - await lastYearButton.click(); - } else if (checkIsNextYear(date)) { - const nextYearButton = page.locator( - '[data-testid="month-picker-next-button"]' - ); - await nextYearButton.click(); - } - // Click on the day cell - const monthCell = page.locator(`[aria-label="Choose ${month} ${year}"]`); - await monthCell.click(); - }; - await selectMonth(); -}; -const checkDatePickerMonth = async (page: Page, date: Date) => { - expect( - await page.locator('[data-testid="date-picker-current-month"]').innerText() - ).toBe(date.toLocaleString('en-US', { month: 'long' })); -}; + test('use monthpicker to modify the month of datepicker', async ({ page }) => { await openHomePage(page); await waitEditorLoad(page); @@ -304,46 +170,6 @@ test('use monthpicker to modify the month of datepicker', async ({ page }) => { await selectMonthFromMonthPicker(page, nextMonth); await checkDatePickerMonth(page, nextMonth); }); -const createTag = async (page: Page, name: string) => { - await page.keyboard.type(name); - await page.keyboard.press('ArrowUp'); - await page.keyboard.press('Enter'); -}; -const createPageWithTag = async ( - page: Page, - options: { - title: string; - tags: string[]; - } -) => { - await page.getByTestId('all-pages').click(); - await newPage(page); - await getBlockSuiteEditorTitle(page).click(); - await getBlockSuiteEditorTitle(page).fill('test page'); - await page.locator('affine-page-meta-data').click(); - await page.locator('.add-tag').click(); - for (const name of options.tags) { - await createTag(page, name); - } - await page.keyboard.press('Escape'); -}; -const changeFilter = async (page: Page, to: string | RegExp) => { - await page.getByTestId('filter-name').click(); - await page - .getByTestId('filter-name-select') - .locator('button', { hasText: to }) - .click(); -}; - -async function selectTag(page: Page, name: string | RegExp) { - await page.getByTestId('filter-arg').click(); - await page - .getByTestId('multi-select') - .getByTestId('select-option') - .getByText(name) - .click(); - await page.getByTestId('filter-arg').click(); -} test('allow creation of filters by tags', async ({ page }) => { await openHomePage(page); diff --git a/tests/parallels/local-first-collections-items.spec.ts b/tests/parallels/local-first-collections-items.spec.ts index f1306e6b8a..c70278d637 100644 --- a/tests/parallels/local-first-collections-items.spec.ts +++ b/tests/parallels/local-first-collections-items.spec.ts @@ -2,6 +2,7 @@ import { test } from '@affine-test/kit/playwright'; import type { Page } from '@playwright/test'; import { expect } from '@playwright/test'; +import { checkDatePicker, selectDateFromDatePicker } from '../libs/filter'; import { openHomePage } from '../libs/load-page'; import { closeDownloadTip, @@ -105,6 +106,27 @@ test('edit collection', async ({ page }) => { await page.waitForTimeout(100); expect(await first.textContent()).toBe('123'); }); +test('edit collection and change filter date', async ({ page }) => { + await createAndPinCollection(page); + const collections = page.getByTestId('collections'); + const items = collections.getByTestId('collection-item'); + expect(await items.count()).toBe(1); + const first = items.first(); + await first.getByTestId('collection-options').click(); + const editCollection = page + .getByTestId('collection-option') + .getByText('Edit Filter'); + await editCollection.click(); + const title = page.getByTestId('input-collection-title'); + await title.fill('123'); + const today = new Date(); + await page.locator('[data-testid="filter-arg"]').locator('input').click(); + await selectDateFromDatePicker(page, today); + await checkDatePicker(page, today); + await page.getByTestId('save-collection').click(); + await page.waitForTimeout(100); + expect(await first.textContent()).toBe('123'); +}); test('create temporary filter by click tag', async ({ page }) => { await openHomePage(page);