123 lines
3.9 KiB
TypeScript
123 lines
3.9 KiB
TypeScript
import {Page} from '@playwright/test';
|
|
|
|
import {waitForCondition, slct} from '../../utils';
|
|
import {DialogTabsQA} from '../../../src/shared/constants';
|
|
import type DashboardPage from '../../page-objects/dashboard/DashboardPage';
|
|
|
|
const SELECTORS = {
|
|
TABLE_CELL_CONTENT: '.chartkit-table__content_text',
|
|
LIST_ITEM: '.g-list__item',
|
|
TAB_ROW: '.dialog-tab-item__row',
|
|
};
|
|
|
|
export async function waitForTableRowsToEqual(page: Page, expectedValues: string[]) {
|
|
let actualValues: string[] = [];
|
|
|
|
await waitForCondition(async () => {
|
|
const cellSelectors = await page.$$(SELECTORS.TABLE_CELL_CONTENT);
|
|
|
|
actualValues = await Promise.all(cellSelectors.map((selector) => selector.innerText()));
|
|
|
|
return expectedValues.join() === actualValues.join();
|
|
}).catch(() => {
|
|
expect(actualValues).toEqual(expectedValues);
|
|
});
|
|
}
|
|
|
|
// default page.dragAndDrop does not work on list
|
|
// note: it can be unstable when the number of items is more than 2
|
|
export async function dragAndDropListItem(
|
|
page: Page,
|
|
{
|
|
listSelector,
|
|
itemSelector,
|
|
sourceIndex,
|
|
targetIndex,
|
|
// affects the mouse events position, default is half of item (width / moveXRation)
|
|
moveXRation = 2,
|
|
}: {
|
|
listSelector: string;
|
|
itemSelector?: string;
|
|
sourceIndex: number;
|
|
targetIndex: number;
|
|
moveXRation?: number;
|
|
},
|
|
) {
|
|
const list = await page.$(listSelector);
|
|
|
|
if (!list) {
|
|
throw new Error(`drag and drop list not found: ${listSelector}`);
|
|
}
|
|
|
|
const listItems = await list.$$(itemSelector || SELECTORS.LIST_ITEM);
|
|
|
|
expect(listItems.length).toBeGreaterThan(Math.max(sourceIndex, targetIndex));
|
|
|
|
const sourceItem = listItems[sourceIndex];
|
|
const targetItem = listItems[targetIndex];
|
|
|
|
const sourceItemBox = await sourceItem.boundingBox();
|
|
if (!sourceItemBox) {
|
|
throw new Error('drag and drop source item box is null');
|
|
}
|
|
|
|
const targetItemBox = await targetItem.boundingBox();
|
|
if (!targetItemBox) {
|
|
throw new Error('drag and drop target item box is null');
|
|
}
|
|
|
|
await page.mouse.move(
|
|
sourceItemBox.x + sourceItemBox.width / moveXRation,
|
|
sourceItemBox.y + sourceItemBox.height / 2,
|
|
);
|
|
await page.mouse.down();
|
|
|
|
// item shake emulation for drag event trigger
|
|
await page.mouse.move(
|
|
sourceItemBox.x + sourceItemBox.width / moveXRation,
|
|
sourceItemBox.y - sourceItemBox.height,
|
|
);
|
|
await page.mouse.move(
|
|
sourceItemBox.x + sourceItemBox.width / moveXRation,
|
|
sourceItemBox.y + sourceItemBox.height,
|
|
);
|
|
|
|
// move source item to the end of target item
|
|
await page.mouse.move(
|
|
targetItemBox.x + targetItemBox.width / moveXRation,
|
|
targetItemBox.y - targetItemBox.height / 2,
|
|
);
|
|
|
|
await page.mouse.up();
|
|
|
|
// to let drop animation be finished before next actions
|
|
await new Promise((resolve) => {
|
|
setTimeout(resolve, 500);
|
|
});
|
|
}
|
|
|
|
export async function openTabPopupWidgetOrder(dashboardPage: DashboardPage, tabIndex?: number) {
|
|
await dashboardPage.clickTabs();
|
|
const tabsDialog = await dashboardPage.waitForSelector(slct(DialogTabsQA.Dialog));
|
|
|
|
const tabsRows = await tabsDialog.$$(SELECTORS.TAB_ROW);
|
|
expect(tabsRows.length).toBeGreaterThan(tabIndex || 0);
|
|
const tabRow = tabsRows[tabIndex || 0];
|
|
|
|
const tabRowDropdown = await tabRow.$(slct(DialogTabsQA.TabItemMenu));
|
|
await tabRowDropdown?.click({force: true});
|
|
|
|
await dashboardPage.page.click(`[data-qa="${DialogTabsQA.TabItemMenuOrder}"]`);
|
|
await dashboardPage.waitForSelector(slct(DialogTabsQA.PopupWidgetOrder));
|
|
const popupWidgetOrderList = await dashboardPage.waitForSelector(
|
|
slct(DialogTabsQA.PopupWidgetOrderList),
|
|
);
|
|
|
|
return popupWidgetOrderList;
|
|
}
|
|
|
|
export const getUrlStateParam = (page: Page): string | null => {
|
|
const pageURL = new URL(page.url());
|
|
return pageURL.searchParams.get('state');
|
|
};
|