fix: new sql button test

Author: Anton Standrik

tests/suites/tenant/diagnostics/diagnostics.test.ts

@@ -3,7 +3,7 @@ import {expect, test} from '@playwright/test';
 import {dsVslotsSchema, tenantName} from '../../../utils/constants';
 import {NavigationTabs, TenantPage} from '../TenantPage';
 import {longRunningQuery} from '../constants';
-import {QueryEditor} from '../queryEditor/QueryEditor';
+import {QueryEditor} from '../queryEditor/models/QueryEditor';
 
 import {Diagnostics, DiagnosticsTab, QueriesSwitch} from './Diagnostics';
 

tests/suites/tenant/queryEditor/models/NewSqlDropdownMenu.ts

@@ -0,0 +1,58 @@
+import type {Locator, Page} from '@playwright/test';
+
+import {VISIBILITY_TIMEOUT} from '../../TenantPage';
+
+export enum TemplateCategory {
+    Tables = 'Tables',
+    Topics = 'Topics',
+    AsyncReplication = 'Async replication',
+    CDC = 'Change data capture',
+    Users = 'Users',
+}
+
+export enum AsyncReplicationTemplates {
+    Create = 'Create async replication',
+    Alter = 'Alter async replication',
+    Drop = 'Drop async replication',
+}
+
+export class NewSqlDropdownMenu {
+    private dropdownButton: Locator;
+    private menu: Locator;
+    private subMenu: Locator;
+
+    constructor(page: Page) {
+        this.dropdownButton = page.locator(
+            '.ydb-query-editor-controls .g-dropdown-menu__switcher-wrapper button',
+        );
+        this.menu = page.locator('.g-dropdown-menu__menu');
+        this.subMenu = page.locator('.g-dropdown-menu__sub-menu');
+    }
+
+    async clickNewSqlButton() {
+        await this.dropdownButton.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
+        await this.dropdownButton.click();
+    }
+
+    async hoverCategory(category: TemplateCategory) {
+        const categoryItem = this.menu.getByRole('menuitem').filter({hasText: category});
+        await categoryItem.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
+        await categoryItem.hover();
+    }
+
+    async selectTemplate(template: AsyncReplicationTemplates) {
+        const templateItem = this.subMenu.getByRole('menuitem').filter({hasText: template});
+        await templateItem.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
+        await templateItem.click();
+    }
+
+    async isMenuVisible() {
+        await this.menu.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
+        return true;
+    }
+
+    async isSubMenuVisible() {
+        await this.subMenu.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
+        return true;
+    }
+}

tests/suites/tenant/queryEditor/QueryEditor.ts renamed to tests/suites/tenant/queryEditor/models/QueryEditor.ts

@@ -1,11 +1,11 @@
 import type {Locator, Page} from '@playwright/test';
 
-import {VISIBILITY_TIMEOUT} from '../TenantPage';
+import {VISIBILITY_TIMEOUT} from '../../TenantPage';
 
-import {QueryTabsNavigation} from './models/QueryTabsNavigation';
-import {PaneWrapper, ResultTable} from './models/ResultTable';
-import {SavedQueriesTable} from './models/SavedQueriesTable';
-import {SettingsDialog} from './models/SettingsDialog';
+import {QueryTabsNavigation} from './QueryTabsNavigation';
+import {PaneWrapper, ResultTable} from './ResultTable';
+import {SavedQueriesTable} from './SavedQueriesTable';
+import {SettingsDialog} from './SettingsDialog';
 
 export enum QueryMode {
     YQLScript = 'YQL Script',

tests/suites/tenant/queryEditor/models/QueryTabsNavigation.ts

@@ -1,7 +1,8 @@
 import type {Locator, Page} from '@playwright/test';
 
 import {VISIBILITY_TIMEOUT} from '../../TenantPage';
-import type {QueryTabs} from '../QueryEditor';
+
+import type {QueryTabs} from './QueryEditor';
 
 export class QueryTabsNavigation {
     private tabsContainer: Locator;

tests/suites/tenant/queryEditor/models/ResultTable.ts

@@ -1,7 +1,8 @@
 import type {Locator, Page} from '@playwright/test';
 
 import {VISIBILITY_TIMEOUT} from '../../TenantPage';
-import type {ResultTabNames} from '../QueryEditor';
+
+import type {ResultTabNames} from './QueryEditor';
 
 export class PaneWrapper {
     paneWrapper: Locator;

tests/suites/tenant/queryEditor/models/SettingsDialog.ts

@@ -1,7 +1,8 @@
 import type {Locator, Page} from '@playwright/test';
 
 import {VISIBILITY_TIMEOUT} from '../../TenantPage';
-import type {ButtonNames, QueryMode} from '../QueryEditor';
+
+import type {ButtonNames, QueryMode} from './QueryEditor';
 
 export class SettingsDialog {
     private dialog: Locator;

tests/suites/tenant/queryEditor/planToSvg.test.ts

@@ -4,7 +4,7 @@ import {tenantName} from '../../../utils/constants';
 import {toggleExperiment} from '../../../utils/toggleExperiment';
 import {TenantPage} from '../TenantPage';
 
-import {ButtonNames, QueryEditor} from './QueryEditor';
+import {ButtonNames, QueryEditor} from './models/QueryEditor';
 
 test.describe('Test Plan to SVG functionality', async () => {
     const testQuery = 'SELECT 1;'; // Simple query that will generate a plan

tests/suites/tenant/queryEditor/queryEditor.test.ts

@@ -11,7 +11,7 @@ import {
     QueryMode,
     QueryTabs,
     ResultTabNames,
-} from './QueryEditor';
+} from './models/QueryEditor';
 
 test.describe('Test Query Editor', async () => {
     const testQuery = 'SELECT 1, 2, 3, 4, 5;';

tests/suites/tenant/queryEditor/querySettings.test.ts

@@ -4,7 +4,7 @@ import {tenantName} from '../../../utils/constants';
 import {TenantPage, VISIBILITY_TIMEOUT} from '../TenantPage';
 import {longRunningQuery} from '../constants';
 
-import {ButtonNames, QueryEditor, QueryMode} from './QueryEditor';
+import {ButtonNames, QueryEditor, QueryMode} from './models/QueryEditor';
 
 test.describe('Test Query Settings', async () => {
     const testQuery = 'SELECT 1, 2, 3, 4, 5;';

tests/suites/tenant/queryEditor/queryStatus.test.ts

@@ -4,7 +4,7 @@ import {tenantName} from '../../../utils/constants';
 import {TenantPage} from '../TenantPage';
 import {longRunningQuery} from '../constants';
 
-import {QueryEditor} from './QueryEditor';
+import {QueryEditor} from './models/QueryEditor';
 
 test.describe('Test Query Execution Status', async () => {
     const testQuery = 'SELECT 1;'; // Simple query that will generate a plan