130 lines
4.9 KiB
TypeScript
130 lines
4.9 KiB
TypeScript
import type {Page} from '@playwright/test';
|
|
|
|
import {COMMON_CHARTKIT_SELECTORS} from '../../../page-objects/constants/chartkit';
|
|
import DashboardPage from '../../../page-objects/dashboard/DashboardPage';
|
|
import {openTestPage, slct, waitForCondition} from '../../../utils';
|
|
import {RobotChartsDashboardUrls} from '../../../utils/constants';
|
|
import datalensTest from '../../../utils/playwright/globalTestDefinition';
|
|
|
|
const DASH_STATE = {
|
|
markdownAutoHeightTabActive: 'cd80ae4f86',
|
|
};
|
|
|
|
const TABS = {
|
|
CHARTS: 'Charts',
|
|
SELECTORS: 'Selectors',
|
|
};
|
|
|
|
const WIDGET_TABS = {
|
|
TAB_CHART: 'columnchart',
|
|
TAB_MD_AUTO: 'md-autoheight',
|
|
TAB_INDICATOR: 'metric-autoheight',
|
|
TAB_TABLE_AUTO: 'table-autoheight',
|
|
};
|
|
|
|
const CONTROL_SELECT_ITEM = 'chartkit-control';
|
|
|
|
const hasNoScroll = async (page: Page, selector: string) => {
|
|
return await page.evaluate((selector) => {
|
|
const body = document.querySelector(selector);
|
|
return body?.clientHeight === body?.scrollHeight;
|
|
}, selector);
|
|
};
|
|
|
|
datalensTest.describe('Dashboards - Auto-height of widgets', () => {
|
|
datalensTest(
|
|
'When you first open the widget with auto-height, it adjusts without scrolling',
|
|
async ({page}: {page: Page}) => {
|
|
// we set a large viewport height so that there is no scrolling of the widget
|
|
page.setViewportSize({width: 1000, height: 1600});
|
|
|
|
// Important: Auto-update is configured on the dashboard
|
|
await openTestPage(
|
|
page,
|
|
`${RobotChartsDashboardUrls.DashboardWithWidgetsWithAutoheight}?state=${DASH_STATE.markdownAutoHeightTabActive}`,
|
|
);
|
|
|
|
// waiting for the widget content to load
|
|
const selector = `.${COMMON_CHARTKIT_SELECTORS.scrollableNode}`;
|
|
await page.waitForSelector(selector);
|
|
|
|
// check that there is no scroll
|
|
await waitForCondition(async () => {
|
|
const noScroll = await hasNoScroll(page, selector);
|
|
return noScroll === true;
|
|
});
|
|
},
|
|
);
|
|
datalensTest(
|
|
'When switching to another widget tab with auto-height, it adjusts without scrolling',
|
|
async ({page}: {page: Page}) => {
|
|
// we set a large viewport height so that there is no scrolling of the widget
|
|
page.setViewportSize({width: 1200, height: 1600});
|
|
|
|
const dashboard = new DashboardPage({page});
|
|
|
|
// Important: Auto-update is configured on the dashboard
|
|
await openTestPage(page, RobotChartsDashboardUrls.DashboardWithWidgetsWithAutoheight);
|
|
|
|
// waiting for the widget content to load
|
|
await page.waitForSelector(COMMON_CHARTKIT_SELECTORS.chart);
|
|
|
|
await dashboard.changeWidgetTab(WIDGET_TABS.TAB_MD_AUTO);
|
|
|
|
// waiting for the widget content to load
|
|
const scrollableSelector = `.${COMMON_CHARTKIT_SELECTORS.scrollableNode}`;
|
|
await page.waitForSelector(scrollableSelector);
|
|
|
|
// check that there is no scroll
|
|
await waitForCondition(async () => {
|
|
const noScroll = await hasNoScroll(page, scrollableSelector);
|
|
return noScroll === true;
|
|
});
|
|
|
|
// go to auto-height indicator tab
|
|
await dashboard.changeWidgetTab(WIDGET_TABS.TAB_INDICATOR);
|
|
|
|
// waiting for the widget content to load
|
|
await page.waitForSelector(scrollableSelector);
|
|
|
|
// check that there is no scroll
|
|
await waitForCondition(async () => {
|
|
const noScroll = await hasNoScroll(page, scrollableSelector);
|
|
return noScroll === true;
|
|
});
|
|
|
|
// go to auto-height table tab
|
|
await dashboard.changeWidgetTab(WIDGET_TABS.TAB_TABLE_AUTO);
|
|
|
|
// waiting for the widget content to load
|
|
await page.waitForSelector(scrollableSelector);
|
|
|
|
// check that there is no scroll
|
|
await waitForCondition(async () => {
|
|
const noScroll = await hasNoScroll(page, scrollableSelector);
|
|
return noScroll === true;
|
|
});
|
|
|
|
// go back to the first tab
|
|
await dashboard.changeWidgetTab(WIDGET_TABS.TAB_CHART);
|
|
// waiting for the widget content to load
|
|
await page.waitForSelector(COMMON_CHARTKIT_SELECTORS.chart);
|
|
|
|
// Switching dashboart to selectors tab
|
|
await dashboard.changeTab({tabName: TABS.SELECTORS});
|
|
|
|
// waiting for the selector content to load
|
|
await page.waitForSelector(slct(CONTROL_SELECT_ITEM));
|
|
|
|
// checking scrollable block
|
|
await page.waitForSelector(scrollableSelector);
|
|
|
|
// check that there is no scroll
|
|
await waitForCondition(async () => {
|
|
const noScroll = await hasNoScroll(page, scrollableSelector);
|
|
return noScroll === true;
|
|
});
|
|
},
|
|
);
|
|
});
|