mirror of
https://github.com/getpaseo/paseo.git
synced 2026-11-10 18:35:17 +00:00
Mohamed Boudra
635d80c149
The measuring slot keeps toolbar plugin items mounted, so a picker that was open when the toolbar condensed lost its trigger but kept its popup, which portals to the overlay root. Mark the slot's items inactive while they are out of the row, the contract retained panels already use to close their popups.
82 lines
3.0 KiB
TypeScript
82 lines
3.0 KiB
TypeScript
import { test } from "../support/fixtures";
|
|
import {
|
|
expectToolbarNeverCondensedOrClipped,
|
|
recordToolbarFramesFromLoad,
|
|
withComposerControlsExample,
|
|
withPickerComposerItem,
|
|
withToggleAndWatcherComposerItems,
|
|
} from "../support/helpers/plugin-composer-items";
|
|
|
|
test("a narrow composer's overflow sheet shows a plugin item's row", async ({ page }) => {
|
|
test.setTimeout(120_000);
|
|
await withComposerControlsExample(page, async (composer) => {
|
|
await composer.narrowTheWindow();
|
|
await composer.openAgentFeatures();
|
|
await composer.expectFeatureRow("Needs review");
|
|
await composer.expectFeatureRow("Insert checklist");
|
|
});
|
|
});
|
|
|
|
test("a toolbar with room keeps a plugin toggle inline at full density", async ({ page }) => {
|
|
test.setTimeout(120_000);
|
|
await withToggleAndWatcherComposerItems(page, async (composer) => {
|
|
// Wider than what renders, too narrow for two 125-wide "Plugin item" estimates.
|
|
await composer.setWindowWidth(1000);
|
|
await composer.expectToolbarWidthBetween(470, 620);
|
|
await composer.expectToggleInlineAtFullDensity();
|
|
});
|
|
});
|
|
|
|
test("a toolbar without room moves a plugin toggle to the overflow sheet and back", async ({
|
|
page,
|
|
}) => {
|
|
test.setTimeout(120_000);
|
|
await withToggleAndWatcherComposerItems(page, async (composer) => {
|
|
await composer.setWindowWidth(1000);
|
|
await composer.expectToggleInlineAtFullDensity();
|
|
// Too narrow for full labels, wide enough that the controls have not folded away.
|
|
await composer.setWindowWidth(880);
|
|
await composer.expectToolbarWidthBetween(300, 395);
|
|
await composer.expectToggleInOverflow();
|
|
await composer.closeOverflowSheet();
|
|
await composer.setWindowWidth(1000);
|
|
await composer.expectToggleInlineAtFullDensity();
|
|
});
|
|
});
|
|
|
|
test("an open plugin picker closes when its trigger moves to the overflow", async ({ page }) => {
|
|
test.setTimeout(120_000);
|
|
await withPickerComposerItem(page, async (composer) => {
|
|
await composer.setWindowWidth(1000);
|
|
await composer.openInlinePicker();
|
|
await composer.setWindowWidth(880);
|
|
await composer.expectToolbarWidthBetween(300, 395);
|
|
await composer.expectPickerClosed();
|
|
});
|
|
});
|
|
|
|
test("the toolbar settles on one density without flipping as the window widens", async ({
|
|
page,
|
|
}) => {
|
|
test.setTimeout(120_000);
|
|
await withToggleAndWatcherComposerItems(page, async (composer) => {
|
|
await composer.setWindowWidth(880);
|
|
await composer.expectToolbarWidthBetween(300, 395);
|
|
await composer.startRecordingDensity();
|
|
for (let width = 880; width <= 1000; width += 8) await composer.setWindowWidth(width);
|
|
await composer.expectAtMostOneDensityChange();
|
|
});
|
|
});
|
|
|
|
test("a toolbar with room never paints condensed or clipped while the plugin loads", async ({
|
|
page,
|
|
}) => {
|
|
test.setTimeout(120_000);
|
|
await page.setViewportSize({ width: 1000, height: 800 });
|
|
await recordToolbarFramesFromLoad(page);
|
|
await withToggleAndWatcherComposerItems(page, async (composer) => {
|
|
await composer.expectToggleInlineAtFullDensity();
|
|
await expectToolbarNeverCondensedOrClipped(page);
|
|
});
|
|
});
|