toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-11-10 13:56:35 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: date-picker hidden in update collection (#3045)

Browse Source
This commit is contained in:
JimmFly 2023-07-06 14:17:19 +08:00 committed by GitHub
parent e79a6a5d47
commit 8a565b8633
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 246 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/component/src/components/page-list/view/collection-list.css.ts
View File

@ -166,7 +166,7 @@ export const excludeTip = style({
});
export const scrollContainer = style({
overflow: 'hidden',
maxHeight: '70vh',
flex: 1,
display: 'flex',
flexDirection: 'column',

208
tests/libs/filter.ts Normal file
View File

@ -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<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();
}
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<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();
};
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();
}

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

@ -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<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();
}
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<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);
@ -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);

22
tests/parallels/local-first-collections-items.spec.ts
View File

@ -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);