Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-24 09:52:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add date picker (#2644)

Browse Source 
Co-authored-by: himself65 <himself65@outlook.com>
This commit is contained in:
JimmFly
2023-06-08 17:55:16 +08:00
committed by GitHub
parent bedf838fe5
commit 29d8f61c90
15 changed files with 706 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
tests/parallels/all-page.spec.ts
View File

@@ -89,10 +89,25 @@ 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) => {
return `${date.getFullYear()}-${(date.getMonth() + 1)
.toString()
.padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
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(
@@ -107,6 +122,12 @@ const checkDatePicker = async (page: Page, date: Date) => {
.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"]')
@@ -141,3 +162,142 @@ test('allow creation of filters by created time', async ({ page }) => {
await checkDatePicker(page, tomorrow);
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<void> => {
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();
}
// Click on the day cell
const dateCell = page.locator(
`[aria-disabled="false"][aria-label="Choose ${weekday}, ${month} ${day}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,
}) => {
await openHomePage(page);
await waitEditorLoad(page);
await clickSideBarAllPageButton(page);
await closeDownloadTip(page);
await createFirstFilter(page, 'Created');
await checkFilterName(page, 'after');
// init date
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
await checkDatePicker(page, yesterday);
await checkPagesCount(page, 1);
// change date
const today = new Date();
await selectDateFromDatePicker(page, today);
await checkPagesCount(page, 0);
// change filter
await page.locator('[data-testid="filter-name"]').click();
await page
.locator('[data-testid="filter-name-select"]')
.locator('button', { hasText: 'before' })
.click();
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
await selectDateFromDatePicker(page, tomorrow);
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<void> => {
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);
await clickSideBarAllPageButton(page);
await closeDownloadTip(page);
await createFirstFilter(page, 'Created');
await checkFilterName(page, 'after');
// init date
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
await checkDatePicker(page, yesterday);
// change month
await clickDatePicker(page);
const lastMonth = new Date();
lastMonth.setMonth(lastMonth.getMonth() - 1);
await selectMonthFromMonthPicker(page, lastMonth);
await checkDatePickerMonth(page, lastMonth);
// change month
await clickDatePicker(page);
const nextMonth = new Date();
nextMonth.setMonth(nextMonth.getMonth() + 1);
await selectMonthFromMonthPicker(page, nextMonth);
await checkDatePickerMonth(page, nextMonth);
});