Tests on fixed header

Fix tests
datalens-tech · Dec 9, 2024 · db5eabd · db5eabd
1 parent 980b13c
commit db5eabd
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 5 deletions.
diff --git a/src/i18n-keysets/dash.main.view/en.json b/src/i18n-keysets/dash.main.view/en.json
@@ -16,5 +16,7 @@
   "label_updating": "Updating",
   "toast_paste-invalid-workbook-entry": "Pasting widgets linked to objects from another workbook is forbidden",
   "toast_unsaved": "There are unsaved changes on the page. Are you sure?",
+  "tooltip_collapse-fixed-group": "Collapse pinned group",
+  "tooltip_expand-fixed-group": "Expand pinned group",
   "warning_paste-invalid-workbook-entry": "To work with this object within another workbook, please migrate all linked objects from the source workbook. <link>Migrating objects to workbooks</link>"
 }
diff --git a/src/i18n-keysets/dash.main.view/ru.json b/src/i18n-keysets/dash.main.view/ru.json
@@ -16,5 +16,7 @@
   "label_updating": "Обновление",
   "toast_paste-invalid-workbook-entry": "Не допускается вставка виджетов, у которых есть связи с объектами из другого воркбука",
   "toast_unsaved": "На странице есть несохраненные изменения. Вы уверены?",
+  "tooltip_collapse-fixed-group": "Свернуть закрепленную группу",
+  "tooltip_expand-fixed-group": "Развернуть закрепленную группу",
   "warning_paste-invalid-workbook-entry": "Чтобы работать с объектом в рамках другого воркбука, пожалуйста, перенесите в этот воркбук все связанные объекты из исходного воркбука. <link>Миграция объектов в воркбук</link>"
 }
diff --git a/src/ui/units/dash/containers/FixedHeader/FixedHeader.scss b/src/ui/units/dash/containers/FixedHeader/FixedHeader.scss
@@ -116,6 +116,7 @@
             overflow: clip;
             min-height: 0;
             max-height: 0;
+            padding: 0;
         }
     }
 
@@ -128,10 +129,5 @@
         pointer-events: none;
         color: var(--g-color-text-hint);
         text-align: center;
-
-        &.with-offset {
-            top: calc(50% - #{$fixedSectionOffset});
-            transform: translateY(calc(-1 * calc(50% - calc(#{$fixedSectionOffset}) / 2)));
-        }
     }
 }
diff --git a/src/ui/units/dash/containers/FixedHeader/FixedHeader.tsx b/src/ui/units/dash/containers/FixedHeader/FixedHeader.tsx
@@ -224,6 +224,7 @@ export function FixedHeaderWrapper({
                 })}
                 style={style}
                 ref={wrapperRef}
+                data-qa={FixedHeaderQa.Wrapper}
             >
                 <div className={b('content')}>
                     <div className={b('scrollable-container')}>

diff --git a/tests/opensource-suites/dash/base/fixedHeader.test.ts b/tests/opensource-suites/dash/base/fixedHeader.test.ts
@@ -0,0 +1,133 @@
+import {Page, expect} from '@playwright/test';
+
+import DashboardPage from '../../../page-objects/dashboard/DashboardPage';
+import {openTestPage, slct} from '../../../utils';
+import datalensTest from '../../../utils/playwright/globalTestDefinition';
+import {ActionPanelQA} from '../../../../src/shared';
+
+const dashboardKey = 'at6wshbewj36x-fixed-header-tests';
+const tabsIds = {
+    twoGroups: 'X5',
+    onlySecondGroup: 'Ja',
+    overflownSecondGroup: 'vJ',
+};
+
+function getTabUrl(tabName: string) {
+    return `/${dashboardKey}?tab=${tabName}`;
+}
+
+datalensTest.describe('Fixed header', () => {
+    datalensTest('Header with 2 groups', async ({page}: {page: Page}) => {
+        await openTestPage(page, getTabUrl(tabsIds.twoGroups));
+        const dashboardPage = new DashboardPage({page});
+        const fixedHeader = dashboardPage.fixedHeader;
+        const actionPanelHeight =
+            (await dashboardPage.page.locator(slct(ActionPanelQA.ActionPanel)).boundingBox())
+                ?.height ?? 0;
+
+        const collapsibleStateToggleButton = fixedHeader.expandCollapseButton;
+
+        await expect(collapsibleStateToggleButton).toBeVisible();
+        await expect(fixedHeader.controls).toBeVisible();
+        await expect(fixedHeader.container).toBeVisible();
+
+        // check that "fixed" header is not fixed without scrolling
+        expect(await fixedHeader.getWrapperVerticalOffset()).toBeGreaterThan(actionPanelHeight);
+
+        await fixedHeader.toggleFixedHeaderCollapsibleState(); // collapse
+
+        await expect(collapsibleStateToggleButton).toBeVisible();
+        await expect(fixedHeader.controls).toBeVisible();
+        await expect(fixedHeader.container).toBeHidden();
+
+        await page.mouse.wheel(0, 500);
+
+        await expect(collapsibleStateToggleButton).toBeVisible();
+        await expect(fixedHeader.controls).toBeVisible();
+        await expect(fixedHeader.container).toBeHidden();
+
+        expect(await fixedHeader.getWrapperVerticalOffset()).toEqual(actionPanelHeight);
+
+        await fixedHeader.toggleFixedHeaderCollapsibleState(); // expand
+
+        await expect(fixedHeader.container).toBeVisible();
+    });
+
+    datalensTest('With second group only', async ({page}: {page: Page}) => {
+        await openTestPage(page, getTabUrl(tabsIds.onlySecondGroup));
+        const dashboardPage = new DashboardPage({page});
+        const fixedHeader = dashboardPage.fixedHeader;
+        const actionPanelHeight =
+            (await dashboardPage.page.locator(slct(ActionPanelQA.ActionPanel)).boundingBox())
+                ?.height ?? 0;
+
+        const collapsibleStateToggleButton = fixedHeader.expandCollapseButton;
+
+        await expect(collapsibleStateToggleButton).toBeVisible();
+        await expect(fixedHeader.controls).toBeHidden();
+        await expect(fixedHeader.container).toBeVisible();
+
+        // check that "fixed" header is not fixed without scrolling
+        expect(await fixedHeader.getWrapperVerticalOffset()).toBeGreaterThan(actionPanelHeight);
+
+        await fixedHeader.toggleFixedHeaderCollapsibleState(); // collapse
+
+        await expect(collapsibleStateToggleButton).toBeVisible();
+        await expect(fixedHeader.controls).toBeHidden();
+        await expect(fixedHeader.container).toBeHidden();
+
+        await page.mouse.wheel(0, 500);
+
+        await expect(collapsibleStateToggleButton).toBeVisible();
+        await expect(fixedHeader.controls).toBeHidden();
+        await expect(fixedHeader.container).toBeHidden();
+
+        await fixedHeader.toggleFixedHeaderCollapsibleState(); // expand
+
+        await expect(fixedHeader.container).toBeVisible();
+
+        expect(await fixedHeader.getWrapperVerticalOffset()).toEqual(actionPanelHeight);
+    });
+    datalensTest('Header with overflown second group', async ({page}: {page: Page}) => {
+        await openTestPage(page, getTabUrl(tabsIds.overflownSecondGroup));
+        const dashboardPage = new DashboardPage({page});
+        const fixedHeader = dashboardPage.fixedHeader;
+        const actionPanelHeight =
+            (await dashboardPage.page.locator(slct(ActionPanelQA.ActionPanel)).boundingBox())
+                ?.height ?? 0;
+
+        const collapsibleStateToggleButton = fixedHeader.expandCollapseButton;
+
+        await expect(collapsibleStateToggleButton).toBeVisible();
+        await expect(fixedHeader.controls).toBeVisible();
+        await expect(fixedHeader.container).toBeVisible();
+
+        const body = page.locator('body');
+
+        // check that "fixed" header is not fixed without scrolling
+        expect(await fixedHeader.getWrapperVerticalOffset()).toBeGreaterThan(actionPanelHeight);
+
+        await page.mouse.wheel(0, 500);
+
+        const bodyScrollPositionBeforeCollapsing = (await body.boundingBox())?.y ?? 0;
+        const fixedHeaderScrollPositionBeforeCollapsing =
+            (await fixedHeader.container.boundingBox())?.y ?? 0;
+
+        await fixedHeader.container.hover();
+        await page.mouse.wheel(0, 500);
+
+        expect((await body.boundingBox())?.y).toEqual(bodyScrollPositionBeforeCollapsing);
+        expect((await fixedHeader.container.boundingBox())?.y).toEqual(
+            fixedHeaderScrollPositionBeforeCollapsing - 500,
+        );
+
+        await fixedHeader.toggleFixedHeaderCollapsibleState(); // collapse
+
+        await expect(collapsibleStateToggleButton).toBeVisible();
+        await expect(fixedHeader.controls).toBeVisible();
+        await expect(fixedHeader.container).toBeHidden();
+
+        await page.mouse.wheel(0, 500);
+        expect((await body.boundingBox())?.y).toEqual(bodyScrollPositionBeforeCollapsing - 500);
+    });
+});
diff --git a/tests/page-objects/dashboard/DashboardPage.ts b/tests/page-objects/dashboard/DashboardPage.ts
@@ -66,6 +66,7 @@ import {CommonUrls} from '../constants/common-urls';
 import {EditEntityButton} from '../workbook/EditEntityButton';
 import ControlActions from './ControlActions';
 import {getUrlStateParam} from '../../suites/dash/helpers';
+import {FixedHeader} from './FixedHeader';
 
 export const BUTTON_CHECK_TIMEOUT = 3000;
 export const RENDER_TIMEOUT = 4000;
@@ -112,6 +113,7 @@ class DashboardPage extends BasePage {
     dialogCreateEntry: DialogCreateEntry;
     editEntityButton: EditEntityButton;
     controlActions: ControlActions;
+    fixedHeader: FixedHeader;
 
     constructor({page}: DashboardPageProps) {
         super({page});
@@ -123,6 +125,7 @@ class DashboardPage extends BasePage {
         this.dialogCreateEntry = new DialogCreateEntry(page);
         this.editEntityButton = new EditEntityButton(page);
         this.controlActions = new ControlActions(page);
+        this.fixedHeader = new FixedHeader(page);
     }
 
     async waitForResponses(url: string, timeout = API_TIMEOUT): Promise<Array<Response>> {

diff --git a/tests/page-objects/dashboard/FixedHeader.ts b/tests/page-objects/dashboard/FixedHeader.ts
@@ -0,0 +1,38 @@
+import {Page} from '@playwright/test';
+import {slct} from '../../utils';
+import {FixedHeaderQa} from '../../../src/shared';
+
+export class FixedHeader {
+    static selectors = {
+        expandCollapseButton: slct(FixedHeaderQa.ExpandCollapseButton),
+        wrapper: slct(FixedHeaderQa.Wrapper),
+        controls: slct(FixedHeaderQa.Controls),
+        container: slct(FixedHeaderQa.Container),
+    };
+
+    protected page: Page;
+
+    constructor(page: Page) {
+        this.page = page;
+    }
+
+    get expandCollapseButton() {
+        return this.page.locator(FixedHeader.selectors.expandCollapseButton);
+    }
+
+    toggleFixedHeaderCollapsibleState() {
+        return this.page.locator(FixedHeader.selectors.expandCollapseButton).click();
+    }
+
+    get controls() {
+        return this.page.locator(FixedHeader.selectors.controls);
+    }
+
+    get container() {
+        return this.page.locator(FixedHeader.selectors.container);
+    }
+
+    async getWrapperVerticalOffset() {
+        return (await this.page.locator(FixedHeader.selectors.wrapper).boundingBox())?.y ?? 0;
+    }
+}