Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 04:18:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: responsive ui above 640px (#1741)

Browse Source
This commit is contained in:
Peng Xiao
2023-03-31 09:12:18 +08:00
committed by GitHub
parent bdb1264f09
commit c55d61a641
22 changed files with 443 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
tests/parallels/layout.spec.ts
View File

@@ -9,7 +9,7 @@ test.describe('Layout ui', () => {
await openHomePage(page);
await waitMarkdownImported(page);
await page.getByTestId('sliderBar-arrowButton-collapse').click();
const sliderBarArea = page.getByTestId('sliderBar');
const sliderBarArea = page.getByTestId('sliderBar-inner');
await expect(sliderBarArea).not.toBeVisible();
});
@@ -17,10 +17,61 @@ test.describe('Layout ui', () => {
await openHomePage(page);
await waitMarkdownImported(page);
await page.getByTestId('sliderBar-arrowButton-collapse').click();
const sliderBarArea = page.getByTestId('sliderBar');
const sliderBarArea = page.getByTestId('sliderBar-inner');
await expect(sliderBarArea).not.toBeVisible();
await page.getByTestId('sliderBar-arrowButton-expand').click();
await expect(sliderBarArea).toBeVisible();
});
test('Click resizer can close sidebar', async ({ page }) => {
await openHomePage(page);
await waitMarkdownImported(page);
const sliderBarArea = page.getByTestId('sliderBar-inner');
await expect(sliderBarArea).toBeVisible();
await page.getByTestId('sliderBar-resizer').click();
await expect(sliderBarArea).not.toBeVisible();
});
test('Drag resizer can resize sidebar', async ({ page }) => {
await openHomePage(page);
await waitMarkdownImported(page);
const sliderBarArea = page.getByTestId('sliderBar-inner');
await expect(sliderBarArea).toBeVisible();
const sliderResizer = page.getByTestId('sliderBar-resizer');
await sliderResizer.hover();
await page.mouse.down();
await page.mouse.move(400, 300, {
steps: 10,
});
await page.mouse.up();
const boundingBox = await page.getByTestId('sliderBar-root').boundingBox();
expect(boundingBox?.width).toBe(400);
});
test('Sidebar in between sm & md breakpoint', async ({ page }) => {
await openHomePage(page);
await waitMarkdownImported(page);
const sliderBarArea = page.getByTestId('sliderBar-inner');
const sliderBarModalBackground = page.getByTestId(
'sliderBar-modalBackground'
);
await expect(sliderBarArea).toBeVisible();
await expect(sliderBarModalBackground).not.toBeVisible();
await page.setViewportSize({
width: 768,
height: 1024,
});
await expect(sliderBarModalBackground).toBeVisible();
// click modal background can close sidebar
await sliderBarModalBackground.click({
force: true,
position: { x: 600, y: 150 },
});
await expect(sliderBarArea).not.toBeVisible();
});
});

2
tests/parallels/quick-search.spec.ts
View File

@@ -180,7 +180,7 @@ test.describe('Novice guidance for quick search', () => {
const quickSearchTips = page.locator('[data-testid=quick-search-tips]');
await expect(quickSearchTips).not.toBeVisible();
await page.getByTestId('sliderBar-arrowButton-collapse').click();
const sliderBarArea = page.getByTestId('sliderBar');
const sliderBarArea = page.getByTestId('sliderBar-inner');
await expect(sliderBarArea).not.toBeVisible();
await expect(quickSearchTips).toBeVisible();
await page.locator('[data-testid=quick-search-got-it]').click();

2
tests/parallels/subpage.spec.ts
View File

@@ -9,7 +9,7 @@ test.describe('subpage', () => {
await openHomePage(page);
await waitMarkdownImported(page);
await page.getByTestId('sliderBar-arrowButton-collapse').click();
const sliderBarArea = page.getByTestId('sliderBar');
const sliderBarArea = page.getByTestId('sliderBar-inner');
await expect(sliderBarArea).not.toBeVisible();
});
});