265 lines
11 KiB
TypeScript
265 lines
11 KiB
TypeScript
import {Page, Request} from '@playwright/test';
|
|
|
|
import {ControlQA, DialogGroupControlQa, UPDATE_STATE_DEBOUNCE_TIME} from '../../../../src/shared';
|
|
|
|
import DashboardPage from '../../../page-objects/dashboard/DashboardPage';
|
|
import datalensTest from '../../../utils/playwright/globalTestDefinition';
|
|
import {getUrlStateParam} from '../../../suites/dash/helpers';
|
|
import {slct} from '../../../utils';
|
|
import {CommonUrls} from '../../../page-objects/constants/common-urls';
|
|
|
|
const PARAMS = {
|
|
FIRST_CONTROL: {
|
|
appearance: {title: 'test-control'},
|
|
items: ['91000', '98800', '90000'],
|
|
fieldName: 'test-control-field',
|
|
defaultValue: '98800',
|
|
},
|
|
SECOND_CONTROL: {
|
|
appearance: {title: 'test-control-2'},
|
|
items: ['1', '2', '3'],
|
|
fieldName: 'test-control-field-2',
|
|
defaultValue: '2',
|
|
},
|
|
};
|
|
|
|
const STATE_CHANGING_TIMEOUT = 1000;
|
|
|
|
datalensTest.describe('Dashboards - Action buttons in group selectors', () => {
|
|
datalensTest.beforeEach(async ({page}: {page: Page}) => {
|
|
const dashboardPage = new DashboardPage({page});
|
|
|
|
await dashboardPage.createDashboard({
|
|
editDash: async () => {
|
|
await dashboardPage.controlActions.addSelectorsGroup([
|
|
PARAMS.FIRST_CONTROL,
|
|
PARAMS.SECOND_CONTROL,
|
|
]);
|
|
},
|
|
});
|
|
|
|
await dashboardPage.enterEditMode();
|
|
await dashboardPage.clickFirstControlSettingsButton();
|
|
});
|
|
datalensTest.afterEach(async ({page}: {page: Page}) => {
|
|
const dashboardPage = new DashboardPage({page});
|
|
|
|
await dashboardPage.deleteDash();
|
|
});
|
|
|
|
datalensTest(
|
|
"'Apply' button of the group selector applies the selected values",
|
|
async ({page}: {page: Page}) => {
|
|
const dashboardPage = new DashboardPage({page});
|
|
|
|
await page.locator(slct(DialogGroupControlQa.groupSettingsTab)).click();
|
|
await page.locator(slct(DialogGroupControlQa.applyButtonSwitch)).click();
|
|
|
|
await page.locator(slct(ControlQA.dialogControlApplyBtn)).click();
|
|
await dashboardPage.saveChanges();
|
|
|
|
// check that there's no state
|
|
expect(getUrlStateParam(page)).toEqual(null);
|
|
|
|
const applyButton = await dashboardPage.waitForSelector(
|
|
slct(ControlQA.controlButtonApply),
|
|
);
|
|
await applyButton.click();
|
|
|
|
// timeout so state has time to be written in search params
|
|
await page.waitForTimeout(STATE_CHANGING_TIMEOUT);
|
|
// default params are equal to initial in dashkit so state doesn't change
|
|
expect(getUrlStateParam(page)).toEqual(null);
|
|
|
|
await dashboardPage.setSelectWithTitle(
|
|
{title: PARAMS.FIRST_CONTROL.appearance.title},
|
|
PARAMS.FIRST_CONTROL.items[0],
|
|
);
|
|
|
|
// timeout so state has time to be written in search params
|
|
await page.waitForTimeout(STATE_CHANGING_TIMEOUT);
|
|
// check that there's no state (apply button isn't pressed after changing value)
|
|
expect(getUrlStateParam(page)).toEqual(null);
|
|
|
|
const requestPromise = page.waitForRequest(CommonUrls.CreateDashState);
|
|
await applyButton.click();
|
|
const finishedRequest = await requestPromise;
|
|
|
|
// check state queue to have both selector params
|
|
expect(finishedRequest.postDataJSON().data.__meta__.queue.length).toEqual(2);
|
|
// check new state
|
|
const responseState = await finishedRequest.response();
|
|
const jsonState = await responseState?.json();
|
|
|
|
expect(jsonState?.hash).toBeTruthy();
|
|
},
|
|
);
|
|
|
|
datalensTest(
|
|
'The single `Reset` button of the group selector resets the values to default and applies the values',
|
|
async ({page}: {page: Page}) => {
|
|
const dashboardPage = new DashboardPage({page});
|
|
|
|
await page.locator(slct(DialogGroupControlQa.groupSettingsTab)).click();
|
|
await page.locator(slct(DialogGroupControlQa.resetButtonSwitch)).click();
|
|
|
|
await page.locator(slct(ControlQA.dialogControlApplyBtn)).click();
|
|
await dashboardPage.saveChanges();
|
|
|
|
await dashboardPage.checkSelectValueByTitle({
|
|
title: PARAMS.FIRST_CONTROL.appearance.title,
|
|
value: PARAMS.FIRST_CONTROL.defaultValue,
|
|
});
|
|
await dashboardPage.checkSelectValueByTitle({
|
|
title: PARAMS.SECOND_CONTROL.appearance.title,
|
|
value: PARAMS.SECOND_CONTROL.defaultValue,
|
|
});
|
|
|
|
// first reset write to state current selectors values (in our case, defaults)
|
|
const resetButton = await dashboardPage.waitForSelector(
|
|
slct(ControlQA.controlButtonReset),
|
|
);
|
|
|
|
// save state with defaults
|
|
const defaultState = await dashboardPage.getNewStateHashAfterAction(async () => {
|
|
await resetButton.click();
|
|
});
|
|
expect(defaultState).toBeTruthy();
|
|
|
|
const changedState = await dashboardPage.getNewStateHashAfterAction(async () => {
|
|
await dashboardPage.setSelectWithTitle(
|
|
{title: PARAMS.FIRST_CONTROL.appearance.title},
|
|
PARAMS.FIRST_CONTROL.items[0],
|
|
);
|
|
await dashboardPage.setSelectWithTitle(
|
|
{title: PARAMS.SECOND_CONTROL.appearance.title},
|
|
PARAMS.SECOND_CONTROL.items[0],
|
|
);
|
|
});
|
|
|
|
expect(changedState).toBeTruthy();
|
|
|
|
expect(defaultState).not.toEqual(changedState);
|
|
|
|
const resetState = await dashboardPage.getNewStateHashAfterAction(async () => {
|
|
await resetButton.click();
|
|
});
|
|
|
|
expect(resetState).toEqual(defaultState);
|
|
|
|
await dashboardPage.checkSelectValueByTitle({
|
|
title: PARAMS.FIRST_CONTROL.appearance.title,
|
|
value: PARAMS.FIRST_CONTROL.defaultValue,
|
|
});
|
|
await dashboardPage.checkSelectValueByTitle({
|
|
title: PARAMS.SECOND_CONTROL.appearance.title,
|
|
value: PARAMS.SECOND_CONTROL.defaultValue,
|
|
});
|
|
},
|
|
);
|
|
|
|
datalensTest(
|
|
"The 'Reset' button of the group selector resets the values to default and doesn't apply the values if 'Apply' button is enabled",
|
|
async ({page}: {page: Page}) => {
|
|
const dashboardPage = new DashboardPage({page});
|
|
let stateUpdatesCount = 0;
|
|
|
|
await page.locator(slct(DialogGroupControlQa.groupSettingsTab)).click();
|
|
await page.locator(slct(DialogGroupControlQa.applyButtonSwitch)).click();
|
|
await page.locator(slct(DialogGroupControlQa.resetButtonSwitch)).click();
|
|
|
|
await page.locator(slct(ControlQA.dialogControlApplyBtn)).click();
|
|
await dashboardPage.saveChanges();
|
|
|
|
// check default values in selectors
|
|
await dashboardPage.checkSelectValueByTitle({
|
|
title: PARAMS.FIRST_CONTROL.appearance.title,
|
|
value: PARAMS.FIRST_CONTROL.defaultValue,
|
|
});
|
|
await dashboardPage.checkSelectValueByTitle({
|
|
title: PARAMS.SECOND_CONTROL.appearance.title,
|
|
value: PARAMS.SECOND_CONTROL.defaultValue,
|
|
});
|
|
|
|
// counting state change calls
|
|
const stateChangeListener = (request: Request) => {
|
|
if (request.url().endsWith(CommonUrls.PartialCreateDashState)) {
|
|
stateUpdatesCount++;
|
|
}
|
|
};
|
|
|
|
page.on('request', stateChangeListener);
|
|
|
|
// change values
|
|
await dashboardPage.setSelectWithTitle(
|
|
{title: PARAMS.FIRST_CONTROL.appearance.title},
|
|
PARAMS.FIRST_CONTROL.items[0],
|
|
);
|
|
await dashboardPage.setSelectWithTitle(
|
|
{title: PARAMS.SECOND_CONTROL.appearance.title},
|
|
PARAMS.SECOND_CONTROL.items[0],
|
|
);
|
|
|
|
// there should be NO state changes after value selecting (to change it, you need to click "Apply")
|
|
|
|
// wait for debounce timeout to detect the extra request
|
|
await page.waitForTimeout(UPDATE_STATE_DEBOUNCE_TIME);
|
|
|
|
const applyButton = await dashboardPage.waitForSelector(
|
|
slct(ControlQA.controlButtonApply),
|
|
);
|
|
|
|
const nonDefaultState = await dashboardPage.getNewStateHashAfterAction(async () => {
|
|
// apply no defaults values
|
|
await applyButton.click();
|
|
});
|
|
|
|
expect(nonDefaultState).not.toEqual(null);
|
|
|
|
const resetButton = await dashboardPage.waitForSelector(
|
|
slct(ControlQA.controlButtonReset),
|
|
);
|
|
// reset values to defaults
|
|
await resetButton.click();
|
|
|
|
// there should be NO state changes after click reset (to change it, you need to click "Apply")
|
|
|
|
// check that values in selectors are defaults now
|
|
await dashboardPage.checkSelectValueByTitle({
|
|
title: PARAMS.FIRST_CONTROL.appearance.title,
|
|
value: PARAMS.FIRST_CONTROL.defaultValue,
|
|
});
|
|
await dashboardPage.checkSelectValueByTitle({
|
|
title: PARAMS.SECOND_CONTROL.appearance.title,
|
|
value: PARAMS.SECOND_CONTROL.defaultValue,
|
|
});
|
|
|
|
await dashboardPage.setSelectWithTitle(
|
|
{title: PARAMS.FIRST_CONTROL.appearance.title},
|
|
PARAMS.FIRST_CONTROL.items[2],
|
|
);
|
|
await dashboardPage.setSelectWithTitle(
|
|
{title: PARAMS.SECOND_CONTROL.appearance.title},
|
|
PARAMS.SECOND_CONTROL.items[2],
|
|
);
|
|
|
|
// wait for debounce timeout to detect the extra request
|
|
await page.waitForTimeout(UPDATE_STATE_DEBOUNCE_TIME);
|
|
|
|
// check that state with new values is different from old state
|
|
const defaultState = await dashboardPage.getNewStateHashAfterAction(async () => {
|
|
// apply values to create state
|
|
await applyButton.click();
|
|
});
|
|
expect(defaultState).not.toEqual(nonDefaultState);
|
|
|
|
// apply button is pressed twice during the test, so there should be two changes
|
|
// if there are more than 2 changes, it means that an unnecessary change occurred
|
|
// (during the change of values or pressing Reset button)
|
|
expect(stateUpdatesCount).toEqual(2);
|
|
|
|
page.off('request', stateChangeListener);
|
|
},
|
|
);
|
|
});
|