feat: add test

Author: astandrik

playwright.config.ts

@@ -17,7 +17,7 @@ const config: PlaywrightTestConfig = {
     webServer: baseUrl
         ? undefined
         : {
-              command: 'npm run dev',
+              command: 'REACT_APP_DISABLE_CHECKS=true npm run dev',
               port: 3000,
               reuseExistingServer: true,
           },

src/store/configureStore.ts

@@ -28,13 +28,17 @@ function _configureStore<
         preloadedState,
         middleware: (getDefaultMiddleware) =>
             getDefaultMiddleware({
-                immutableCheck: {
-                    ignoredPaths: ['tooltip.currentHoveredRef'],
-                },
-                serializableCheck: {
-                    ignoredPaths: ['tooltip.currentHoveredRef', 'api'],
-                    ignoredActions: [UPDATE_REF, 'api/sendQuery/rejected'],
-                },
+                immutableCheck: process.env.REACT_APP_DISABLE_CHECKS
+                    ? false
+                    : {
+                          ignoredPaths: ['tooltip.currentHoveredRef'],
+                      },
+                serializableCheck: process.env.REACT_APP_DISABLE_CHECKS
+                    ? false
+                    : {
+                          ignoredPaths: ['tooltip.currentHoveredRef', 'api'],
+                          ignoredActions: [UPDATE_REF, 'api/sendQuery/rejected'],
+                      },
             }).concat(locationMiddleware, ...middleware),
     });
 

tests/suites/tenant/constants.ts

@@ -9,6 +9,10 @@ export const longTableSelect = (limit?: number) =>
 export const longRunningQuery = new Array(400).fill(simpleQuery).join('');
 export const longRunningStreamQuery = `$sample = AsList(AsStruct(ListFromRange(1, 100000) AS value1, ListFromRange(1, 1000) AS value2, CAST(1 AS Uint32) AS id));
 
+SELECT value1, value2, id FROM as_table($sample) FLATTEN BY (value1);
+`;
+export const longerRunningStreamQuery = `$sample = AsList(AsStruct(ListFromRange(1, 1000000) AS value1, ListFromRange(1, 10000) AS value2, CAST(1 AS Uint32) AS id));
+
 SELECT value1, value2, id FROM as_table($sample) FLATTEN BY (value1);
 `;
 export const selectFromMyRowTableQuery = 'select * from `my_row_table`';

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

@@ -50,6 +50,7 @@ export class QueryEditor {
     private runButton: Locator;
     private explainButton: Locator;
     private stopButton: Locator;
+    private stopBanner: Locator;
     private saveButton: Locator;
     private gearButton: Locator;
     private banner: Locator;
@@ -64,6 +65,7 @@ export class QueryEditor {
         this.editorTextArea = this.selector.locator('.query-editor__monaco textarea');
         this.runButton = this.selector.getByRole('button', {name: ButtonNames.Run});
         this.stopButton = this.selector.getByRole('button', {name: ButtonNames.Stop});
+        this.stopBanner = this.selector.locator('.ydb-query-stopped-banner');
         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-button__gear-button');
@@ -233,6 +235,11 @@ export class QueryEditor {
         return true;
     }
 
+    async isStopBannerVisible() {
+        await this.stopBanner.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
+        return true;
+    }
+
     async isResultsControlsVisible() {
         await this.resultsControls.waitFor({state: 'visible', timeout: VISIBILITY_TIMEOUT});
         return true;

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

@@ -10,6 +10,7 @@ import {
     longRunningQuery,
     longRunningStreamQuery,
     longTableSelect,
+    longerRunningStreamQuery,
 } from '../constants';
 
 import {
@@ -142,6 +143,28 @@ test.describe('Test Query Editor', async () => {
         await expect(queryEditor.waitForStatus('Stopped')).resolves.toBe(true);
     });
 
+    test('Streaming query shows some results and banner when stop button is clicked', async ({
+        page,
+    }) => {
+        const queryEditor = new QueryEditor(page);
+        await toggleExperiment(page, 'on', 'Query Streaming');
+
+        await queryEditor.setQuery(longerRunningStreamQuery);
+        await queryEditor.clickRunButton();
+
+        await expect(queryEditor.isStopButtonVisible()).resolves.toBe(true);
+        await page.waitForTimeout(1000);
+
+        await queryEditor.clickStopButton();
+
+        await expect(queryEditor.isStopBannerVisible()).resolves.toBe(true);
+        await expect(queryEditor.resultTable.getResultTitleText()).resolves.toBe('Result');
+        await expect(
+            Promise.resolve(Number(await queryEditor.resultTable.getResultTitleCount())),
+        ).resolves.toBeGreaterThan(100);
+        await expect(queryEditor.waitForStatus('Stopped')).resolves.toBe(true);
+    });
+
     test('Stop button is not visible for quick queries', async ({page}) => {
         const queryEditor = new QueryEditor(page);