mirror of
https://github.com/pewdiepie-archdaemon/odysseus.git
synced 2026-10-30 17:52:26 +01:00
47 lines
2.4 KiB
JavaScript
47 lines
2.4 KiB
JavaScript
const { test, expect } = require('@playwright/test');
|
|
const { openBlankEditor, selectTool } = require('./helpers.js');
|
|
|
|
// Editors opened wider than 700px move the tool controls into the options
|
|
// strip. At tablet widths (701-820px) that strip must stay visible, or every
|
|
// tool control is stranded in a hidden container.
|
|
for (const width of [768, 820]) {
|
|
test(`tool controls stay reachable at a ${width}px tablet width`, async ({ page }) => {
|
|
await page.setViewportSize({ width, height: 1024 });
|
|
await openBlankEditor(page, { width: 320, height: 240 }, `Tablet ${width}`);
|
|
const inViewport = locator => locator.evaluate(el => {
|
|
const box = el.getBoundingClientRect();
|
|
return box.width > 0 && box.left >= 0 && box.right <= innerWidth + 1 && box.bottom <= innerHeight + 1;
|
|
});
|
|
|
|
await selectTool(page, 'brush');
|
|
await expect(page.locator('#ge-options-bar')).toBeVisible();
|
|
await expect(page.locator('#ge-options-bar .ge-size-slider')).toBeVisible();
|
|
expect(await inViewport(page.locator('#ge-options-bar .ge-size-slider'))).toBe(true);
|
|
|
|
await selectTool(page, 'transform');
|
|
await expect(page.locator('#ge-transform-w')).toBeVisible();
|
|
await page.locator('#ge-transform-w').fill('200');
|
|
await page.locator('#ge-transform-w').dispatchEvent('input');
|
|
await expect.poll(() => page.evaluate(async () => (await import('/static/js/editor/state.js')).state.transformPendingW)).toBe(200);
|
|
await page.locator('#ge-transform-cancel-btn').click();
|
|
});
|
|
}
|
|
|
|
test('responsive transition across 700px breakpoint preserves dock/sheet layout and state', async ({ page }) => {
|
|
// Desktop -> Phone transition
|
|
await page.setViewportSize({ width: 1024, height: 768 });
|
|
await openBlankEditor(page, { width: 320, height: 240 }, 'Responsive transitions');
|
|
await expect(page.locator('.ge-right-panel')).toHaveClass(/ge-right-panel--dock/);
|
|
await expect(page.locator('.ge-right-panel > .ge-dock')).toBeVisible();
|
|
|
|
// Resize across 700px to phone
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
|
await expect(page.locator('.ge-right-panel')).not.toHaveClass(/ge-right-panel--dock/);
|
|
await expect(page.locator('.ge-right-panel > .ge-dock')).toBeHidden();
|
|
|
|
// Resize back to desktop
|
|
await page.setViewportSize({ width: 1024, height: 768 });
|
|
await expect(page.locator('.ge-right-panel')).toHaveClass(/ge-right-panel--dock/);
|
|
await expect(page.locator('.ge-right-panel > .ge-dock')).toBeVisible();
|
|
});
|