wehub-resource-sync
86 lines
2.5 KiB
TypeScript
86 lines
2.5 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
import {
|
|
gotoFixture,
|
|
toolbarWidget,
|
|
notificationsButton,
|
|
isReactScanActive,
|
|
waitForToolbarReady,
|
|
TOOLBAR_SELECTORS,
|
|
} from './helpers';
|
|
|
|
const LOCALSTORAGE_WIDGET_KEY = 'react-scan-widget-settings-v2';
|
|
|
|
test.describe('Overlay widget container', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await gotoFixture(page);
|
|
await waitForToolbarReady(page);
|
|
});
|
|
|
|
test('widget mounts with the expected identity attributes', async ({
|
|
page,
|
|
}) => {
|
|
const widget = toolbarWidget(page);
|
|
await expect(widget).toBeVisible();
|
|
await expect(widget).toHaveAttribute('dir', 'ltr');
|
|
});
|
|
|
|
test('widget fades in to full opacity', async ({ page }) => {
|
|
await expect
|
|
.poll(async () =>
|
|
toolbarWidget(page).evaluate((el) =>
|
|
Number(getComputedStyle(el).opacity),
|
|
),
|
|
)
|
|
.toBeGreaterThan(0.9);
|
|
});
|
|
|
|
test('all four resize handles are present in the DOM', async ({ page }) => {
|
|
const handles = page.locator(
|
|
`${TOOLBAR_SELECTORS.root} .resize-left, ${TOOLBAR_SELECTORS.root} .resize-right, ${TOOLBAR_SELECTORS.root} .resize-top, ${TOOLBAR_SELECTORS.root} .resize-bottom`,
|
|
);
|
|
await expect(handles).toHaveCount(4);
|
|
});
|
|
|
|
test('widget settings are persisted to localStorage', async ({ page }) => {
|
|
await expect
|
|
.poll(async () =>
|
|
page.evaluate(
|
|
(key) => localStorage.getItem(key) !== null,
|
|
LOCALSTORAGE_WIDGET_KEY,
|
|
),
|
|
)
|
|
.toBe(true);
|
|
|
|
const settings = await page.evaluate((key) => {
|
|
const raw = localStorage.getItem(key);
|
|
return raw ? JSON.parse(raw) : null;
|
|
}, LOCALSTORAGE_WIDGET_KEY);
|
|
expect(settings).not.toBeNull();
|
|
expect(settings.corner).toBeTruthy();
|
|
expect(settings.dimensions).toBeTruthy();
|
|
});
|
|
|
|
test('widget survives repeated host-app interactions', async ({ page }) => {
|
|
for (let clickIndex = 0; clickIndex < 5; clickIndex++) {
|
|
await page.click('[data-testid="increment"]');
|
|
}
|
|
await expect(toolbarWidget(page)).toBeVisible();
|
|
expect(await isReactScanActive(page)).toBe(true);
|
|
});
|
|
|
|
test('opening a panel expands the widget', async ({ page }) => {
|
|
const minimizedBox = await toolbarWidget(page).boundingBox();
|
|
expect(minimizedBox).not.toBeNull();
|
|
|
|
await notificationsButton(page).click();
|
|
await page.waitForTimeout(600);
|
|
|
|
await expect
|
|
.poll(async () => {
|
|
const box = await toolbarWidget(page).boundingBox();
|
|
return box?.width ?? 0;
|
|
})
|
|
.toBeGreaterThan(minimizedBox?.width ?? 0);
|
|
});
|
|
});
|