feat: save query tests

Author: astandrik

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

@@ -2,11 +2,11 @@ import type {Locator, Page} from '@playwright/test';
 
 import type {QUERY_MODES} from '../../../../../src/utils/query';
 import {VISIBILITY_TIMEOUT} from '../../TenantPage';
+import {QueriesHistoryTable} from '../../queryHistory/models/QueriesHistoryTable';
+import {SavedQueriesTable} from '../../savedQueries/models/SavedQueriesTable';
 
-import {QueriesHistoryTable} from './QueriesHistoryTable';
 import {QueryTabsNavigation} from './QueryTabsNavigation';
 import {PaneWrapper, ResultTable} from './ResultTable';
-import {SavedQueriesTable} from './SavedQueriesTable';
 import {SettingsDialog} from './SettingsDialog';
 
 export enum ExplainResultType {
@@ -50,6 +50,7 @@ export class QueryEditor {
     private runButton: Locator;
     private explainButton: Locator;
     private stopButton: Locator;
+    private saveButton: Locator;
     private gearButton: Locator;
     private indicatorIcon: Locator;
     private banner: Locator;
@@ -65,6 +66,7 @@ export class QueryEditor {
         this.runButton = this.selector.getByRole('button', {name: ButtonNames.Run});
         this.stopButton = this.selector.getByRole('button', {name: ButtonNames.Stop});
         this.explainButton = this.selector.getByRole('button', {name: ButtonNames.Explain});
+        this.saveButton = this.selector.getByRole('button', {name: ButtonNames.Save});
         this.gearButton = this.selector.locator('.ydb-query-editor-controls__gear-button');
         this.executionStatus = this.selector.locator('.kv-query-execution-status');
         this.resultsControls = this.selector.locator('.ydb-query-result__controls');
@@ -119,6 +121,11 @@ export class QueryEditor {
         await this.explainButton.click();
     }
 
+    async clickSaveButton() {
+        await this.saveButton.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
+        await this.saveButton.click();
+    }
+
     async getExplainResult(type: ExplainResultType) {
         await this.selectResultTypeRadio(type);
         const resultArea = this.selector.locator('.ydb-query-result__result');

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

@@ -2,6 +2,7 @@ import {expect, test} from '@playwright/test';
 
 import {dsVslotsSchema, dsVslotsTableName, tenantName} from '../../../utils/constants';
 import {TenantPage} from '../TenantPage';
+import {SavedQueriesTable} from '../savedQueries/models/SavedQueriesTable';
 import {ObjectSummary} from '../summary/ObjectSummary';
 import {RowTableAction} from '../summary/types';
 
@@ -13,7 +14,6 @@ import {
 } from './models/NewSqlDropdownMenu';
 import {QueryEditor, QueryTabs} from './models/QueryEditor';
 import {SaveQueryDialog} from './models/SaveQueryDialog';
-import {SavedQueriesTable} from './models/SavedQueriesTable';
 import {UnsavedChangesModal} from './models/UnsavedChangesModal';
 
 test.describe('Query Templates', () => {

tests/suites/tenant/queryEditor/models/QueriesHistoryTable.ts renamed to tests/suites/tenant/queryHistory/models/QueriesHistoryTable.ts

@@ -27,14 +27,18 @@ export class SavedQueriesTable {
     }
 
     async editQuery(name: string) {
-        const row = await this.getQueryRow(name);
+        const row = await this.waitForRow(name);
+        await row.hover();
         const editButton = row.locator('button:has(svg)').first();
+        await editButton.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
         await editButton.click();
     }
 
     async deleteQuery(name: string) {
-        const row = await this.getQueryRow(name);
+        const row = await this.waitForRow(name);
+        await row.hover();
         const deleteButton = row.locator('button:has(svg)').nth(1);
+        await deleteButton.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
         await deleteButton.click();
     }
 

tests/suites/tenant/queryEditor/models/SavedQueriesTable.ts renamed to tests/suites/tenant/savedQueries/models/SavedQueriesTable.ts

@@ -0,0 +1,96 @@
+import {expect, test} from '@playwright/test';
+
+import {dsVslotsSchema, tenantName} from '../../../utils/constants';
+import {TenantPage} from '../TenantPage';
+import {QueryEditor, QueryTabs} from '../queryEditor/models/QueryEditor';
+import {SaveQueryDialog} from '../queryEditor/models/SaveQueryDialog';
+import {UnsavedChangesModal} from '../queryEditor/models/UnsavedChangesModal';
+
+import {SavedQueriesTable} from './models/SavedQueriesTable';
+
+test.describe('Saved Queries', () => {
+    let tenantPage: TenantPage;
+    let queryEditor: QueryEditor;
+    let saveQueryDialog: SaveQueryDialog;
+    let savedQueriesTable: SavedQueriesTable;
+    let unsavedChangesModal: UnsavedChangesModal;
+
+    test.beforeEach(async ({page}) => {
+        const pageQueryParams = {
+            schema: dsVslotsSchema,
+            database: tenantName,
+            general: 'query',
+        };
+
+        tenantPage = new TenantPage(page);
+        await tenantPage.goto(pageQueryParams);
+        queryEditor = new QueryEditor(page);
+        saveQueryDialog = new SaveQueryDialog(page);
+        savedQueriesTable = new SavedQueriesTable(page);
+        unsavedChangesModal = new UnsavedChangesModal(page);
+    });
+
+    test('View list of saved queries', async () => {
+        // First save a query to ensure there's something in the list
+        const testQuery = 'SELECT 1 AS test_column;';
+        const queryName = `Test Query ${Date.now()}`;
+
+        await queryEditor.setQuery(testQuery);
+        await queryEditor.clickSaveButton();
+        await saveQueryDialog.setQueryName(queryName);
+        await saveQueryDialog.clickSave();
+
+        // Navigate to saved queries tab
+        await queryEditor.queryTabs.selectTab(QueryTabs.Saved);
+        await savedQueriesTable.isVisible();
+
+        // Verify saved queries list is displayed and contains our query
+        const names = await savedQueriesTable.getQueryNames();
+        expect(names).toContain(queryName);
+    });
+
+    test('Open saved query in the Editor', async () => {
+        // First save a query
+        const testQuery = 'SELECT 2 AS editor_test;';
+        const queryName = `Editor Test ${Date.now()}`;
+
+        await queryEditor.setQuery(testQuery);
+        await queryEditor.clickSaveButton();
+        await saveQueryDialog.setQueryName(queryName);
+        await saveQueryDialog.clickSave();
+
+        // Navigate to saved queries tab
+        await queryEditor.queryTabs.selectTab(QueryTabs.Saved);
+        await savedQueriesTable.isVisible();
+
+        // Open the query in editor
+        await savedQueriesTable.editQuery(queryName);
+
+        // Handle unsaved changes dialog
+        await unsavedChangesModal.clickDontSave();
+
+        // Verify query is loaded in editor
+        const editorValue = await queryEditor.editorTextArea.inputValue();
+        expect(editorValue.trim()).toBe(testQuery.trim());
+    });
+
+    test('Save a query from the Editor', async () => {
+        const testQuery = 'SELECT 3 AS new_query;';
+        const queryName = `New Query ${Date.now()}`;
+
+        // Write query in editor and save it
+        await queryEditor.setQuery(testQuery);
+        await queryEditor.clickSaveButton();
+        await saveQueryDialog.setQueryName(queryName);
+        await saveQueryDialog.clickSave();
+
+        // Navigate to saved queries tab to verify
+        await queryEditor.queryTabs.selectTab(QueryTabs.Saved);
+        await savedQueriesTable.isVisible();
+
+        // Verify query was saved correctly
+        const row = await savedQueriesTable.getRowByName(queryName);
+        expect(row).not.toBe(null);
+        expect(row?.query.trim()).toBe(testQuery.trim());
+    });
+});