2023-04-25 06:12:48 +03:00
|
|
|
import { test } from '@affine-test/kit/playwright';
|
2023-02-05 13:41:18 +03:00
|
|
|
import { expect } from '@playwright/test';
|
2023-02-17 10:33:32 +03:00
|
|
|
|
2023-03-24 01:15:40 +03:00
|
|
|
import { openHomePage } from '../libs/load-page';
|
2023-06-07 12:31:54 +03:00
|
|
|
import { waitEditorLoad } from '../libs/page-logic';
|
2022-12-30 16:40:15 +03:00
|
|
|
|
2023-04-17 00:02:41 +03:00
|
|
|
test('Collapse Sidebar', async ({ page }) => {
|
|
|
|
await openHomePage(page);
|
2023-06-07 12:31:54 +03:00
|
|
|
await waitEditorLoad(page);
|
2023-04-28 00:46:08 +03:00
|
|
|
await page.getByTestId('app-sidebar-arrow-button-collapse').click();
|
|
|
|
const sliderBarArea = page.getByTestId('app-sidebar');
|
2023-04-17 00:02:41 +03:00
|
|
|
await expect(sliderBarArea).not.toBeInViewport();
|
|
|
|
});
|
2022-12-30 16:40:15 +03:00
|
|
|
|
2023-04-17 00:02:41 +03:00
|
|
|
test('Expand Sidebar', async ({ page }) => {
|
|
|
|
await openHomePage(page);
|
2023-06-07 12:31:54 +03:00
|
|
|
await waitEditorLoad(page);
|
2023-04-28 00:46:08 +03:00
|
|
|
await page.getByTestId('app-sidebar-arrow-button-collapse').click();
|
2023-04-17 00:02:41 +03:00
|
|
|
const sliderBarArea = page.getByTestId('sliderBar-inner');
|
|
|
|
await expect(sliderBarArea).not.toBeInViewport();
|
2022-12-30 16:40:15 +03:00
|
|
|
|
2023-05-31 10:06:13 +03:00
|
|
|
await page.getByTestId('app-sidebar-arrow-button-expand').click();
|
2023-04-17 00:02:41 +03:00
|
|
|
await expect(sliderBarArea).toBeInViewport();
|
|
|
|
});
|
2023-03-31 04:12:18 +03:00
|
|
|
|
2023-04-17 00:02:41 +03:00
|
|
|
test('Click resizer can close sidebar', async ({ page }) => {
|
|
|
|
await openHomePage(page);
|
2023-06-07 12:31:54 +03:00
|
|
|
await waitEditorLoad(page);
|
2023-04-17 00:02:41 +03:00
|
|
|
const sliderBarArea = page.getByTestId('sliderBar-inner');
|
|
|
|
await expect(sliderBarArea).toBeVisible();
|
2023-03-31 04:12:18 +03:00
|
|
|
|
2023-04-28 00:46:08 +03:00
|
|
|
await page.getByTestId('app-sidebar-resizer').click();
|
2023-04-17 00:02:41 +03:00
|
|
|
await expect(sliderBarArea).not.toBeInViewport();
|
|
|
|
});
|
2023-03-31 04:12:18 +03:00
|
|
|
|
2023-04-17 00:02:41 +03:00
|
|
|
test('Drag resizer can resize sidebar', async ({ page }) => {
|
|
|
|
await openHomePage(page);
|
2023-06-07 12:31:54 +03:00
|
|
|
await waitEditorLoad(page);
|
2023-04-17 00:02:41 +03:00
|
|
|
const sliderBarArea = page.getByTestId('sliderBar-inner');
|
|
|
|
await expect(sliderBarArea).toBeVisible();
|
2023-03-31 04:12:18 +03:00
|
|
|
|
2023-04-28 00:46:08 +03:00
|
|
|
const sliderResizer = page.getByTestId('app-sidebar-resizer');
|
2023-04-17 00:02:41 +03:00
|
|
|
await sliderResizer.hover();
|
|
|
|
await page.mouse.down();
|
|
|
|
await page.mouse.move(400, 300, {
|
|
|
|
steps: 10,
|
2023-03-31 04:12:18 +03:00
|
|
|
});
|
2023-04-17 00:02:41 +03:00
|
|
|
await page.mouse.up();
|
2023-04-28 00:46:08 +03:00
|
|
|
const boundingBox = await page.getByTestId('app-sidebar').boundingBox();
|
2023-06-21 14:57:59 +03:00
|
|
|
expect(boundingBox?.width).toBe(399);
|
2023-04-17 00:02:41 +03:00
|
|
|
});
|
2023-03-31 04:12:18 +03:00
|
|
|
|
2023-04-17 00:02:41 +03:00
|
|
|
test('Sidebar in between sm & md breakpoint', async ({ page }) => {
|
|
|
|
await openHomePage(page);
|
2023-06-07 12:31:54 +03:00
|
|
|
await waitEditorLoad(page);
|
2023-04-17 00:02:41 +03:00
|
|
|
const sliderBarArea = page.getByTestId('sliderBar-inner');
|
2023-04-28 00:46:08 +03:00
|
|
|
const sliderBarModalBackground = page.getByTestId('app-sidebar-float-mask');
|
2023-04-17 00:02:41 +03:00
|
|
|
await expect(sliderBarArea).toBeInViewport();
|
|
|
|
await expect(sliderBarModalBackground).not.toBeVisible();
|
2023-03-31 04:12:18 +03:00
|
|
|
|
2023-04-17 00:02:41 +03:00
|
|
|
await page.setViewportSize({
|
|
|
|
width: 768,
|
|
|
|
height: 1024,
|
|
|
|
});
|
|
|
|
await expect(sliderBarModalBackground).toBeVisible();
|
2023-03-31 04:12:18 +03:00
|
|
|
|
2023-04-17 00:02:41 +03:00
|
|
|
// click modal background can close sidebar
|
|
|
|
await sliderBarModalBackground.click({
|
|
|
|
force: true,
|
|
|
|
position: { x: 600, y: 150 },
|
2023-03-31 04:12:18 +03:00
|
|
|
});
|
2023-04-17 00:02:41 +03:00
|
|
|
await expect(sliderBarArea).not.toBeInViewport();
|
2022-12-30 16:40:15 +03:00
|
|
|
});
|