Merge pull request #1387 from RedisInsight/e2e/feature/RI-966_resize-columns-in-key-details

E2E RI-3800 resize columns

Author: vlad-dargel

tests/e2e/helpers/api/api-database.ts

@@ -21,7 +21,6 @@ export async function addNewStandaloneDatabaseApi(databaseParameters: AddNewData
             'password': databaseParameters.databasePassword
         })
         .set('Accept', 'application/json');
-
     await t
         .expect(response.status).eql(201, 'The creation of new standalone database request failed')
         .expect(await response.body.name).eql(databaseParameters.databaseName, `Database Name is not equal to ${databaseParameters.databaseName} in response`);

tests/e2e/pageObjects/browser-page.ts

@@ -10,6 +10,7 @@ export class BrowserPage {
     cssSelectorKey = '[data-testid^=key-]';
     cssFilteringLabel = '[data-testid=multi-search]';
     cssJsonValue = '[data-tesid=value-as-json]';
+    cssRowInVirtualizedTable = '[role=gridcell]';
     cssVirtualTableRow = '[aria-label=row]';
     cssKeyBadge = '[data-testid^=badge-]';
     cssKeyTtl = '[data-testid^=ttl-]';
@@ -135,6 +136,7 @@ export class BrowserPage {
     createIndexBtn = Selector('[data-testid=create-index-btn]');
     cancelIndexCreationBtn = Selector('[data-testid=create-index-cancel-btn]');
     confirmIndexCreationBtn = Selector('[data-testid=create-index-btn]');
+    resizeTrigger =  Selector('[data-testid^=resize-trigger-]');
     //TABS
     streamTabGroups = Selector('[data-testid=stream-tab-Groups]');
     streamTabConsumers = Selector('[data-testid=stream-tab-Consumers]');
@@ -560,6 +562,16 @@ export class BrowserPage {
         await t.click(this.confirmDeleteKeyButton);
     }
 
+    /**
+     * Delete keys by their Names
+     * @param keyNames The names of the key array
+     */
+     async deleteKeysByNames(keyNames: string[]): Promise<void> {
+        for(const name of keyNames) {
+            await this.deleteKeyByName(name);
+        }
+    }
+
     /**
      * Edit key name from details
      * @param keyName The name of the key

tests/e2e/tests/regression/browser/resize-columns.e2e.ts

@@ -0,0 +1,96 @@
+import { acceptLicenseTerms } from '../../../helpers/database';
+import {
+    MyRedisDatabasePage,
+    BrowserPage
+} from '../../../pageObjects';
+import { rte } from '../../../helpers/constants';
+import { commonUrl, ossStandaloneConfig } from '../../../helpers/conf';
+import { addNewStandaloneDatabasesApi, deleteStandaloneDatabasesApi } from '../../../helpers/api/api-database';
+import { Common } from '../../../helpers/common';
+
+const myRedisDatabasePage = new MyRedisDatabasePage();
+const browserPage = new BrowserPage();
+const common = new Common();
+
+const keyName = common.generateWord(10);
+const longFieldName = common.generateSentence(20);
+const keys = [
+    {   type: 'Hash',
+        name: `${keyName}:1`,
+        offsetX: 100,
+        fieldWidthStart: 0,
+        fieldWidthEnd: 0
+    },
+    {
+        type: 'List',
+        name: `${keyName}:2`,
+        offsetX: 80,
+        fieldWidthStart: 0,
+        fieldWidthEnd: 0
+    },
+    {
+        type: 'Zset',
+        name: `${keyName}:3`,
+        offsetX: 50,
+        fieldWidthStart: 0,
+        fieldWidthEnd: 0
+    }
+];
+const keyNames: string[] = [];
+keys.forEach(key => keyNames.push(key.name));
+
+const databasesForAdding = [
+    { host: ossStandaloneConfig.host, port: ossStandaloneConfig.port, databaseName: 'testDB1' },
+    { host: ossStandaloneConfig.host, port: ossStandaloneConfig.port, databaseName: 'testDB2' }
+];
+
+fixture `Resize columns in Key details`
+    .meta({type: 'regression', rte: rte.standalone})
+    .page(commonUrl)
+    .beforeEach(async() => {
+        // Add new databases using API
+        await acceptLicenseTerms();
+        await addNewStandaloneDatabasesApi(databasesForAdding);
+        // Reload Page
+        await common.reloadPage();
+        await myRedisDatabasePage.clickOnDBByName(databasesForAdding[0].databaseName);
+        await browserPage.addHashKey(keys[0].name, '2147476121', longFieldName, longFieldName);
+        await browserPage.addListKey(keys[1].name, '2147476121', 'element');
+        await browserPage.addZSetKey(keys[2].name, '1', '2147476121', 'member');
+    })
+    .afterEach(async() => {
+        // Clear and delete database
+        await browserPage.deleteKeysByNames(keyNames);
+        await deleteStandaloneDatabasesApi(databasesForAdding);
+    });
+test('Resize of columns in Hash, List, Zset Key details', async t => {
+    const field = browserPage.keyDetailsTable.find(browserPage.cssRowInVirtualizedTable);
+    const tableHeaderResizeTrigger = browserPage.resizeTrigger;
+
+    for(const key of keys) {
+        await browserPage.openKeyDetails(key.name);
+        // Remember initial column width
+        key.fieldWidthStart = await field.clientWidth;
+        await t.hover(tableHeaderResizeTrigger);
+        await t.drag(tableHeaderResizeTrigger, -key.offsetX, 0, { speed: 0.5 });
+        // Remember last column width
+        key.fieldWidthEnd = await field.clientWidth;
+        // Verify that user can resize columns for Hash, List, Zset Keys
+        await t.expect(key.fieldWidthEnd).eql(key.fieldWidthStart - key.offsetX, `Field is not resized for ${key.type} key`);
+    }
+
+    // Verify that resize saved when switching between pages
+    await t.click(myRedisDatabasePage.workbenchButton);
+    await t.click(myRedisDatabasePage.browserButton);
+    await browserPage.openKeyDetails(keys[0].name);
+    await t.expect(field.clientWidth).eql(keys[0].fieldWidthEnd, 'Resize context not saved for key when switching between pages');
+
+    // Verify that resize saved when switching between databases
+    await t.click(myRedisDatabasePage.myRedisDBButton);
+    await myRedisDatabasePage.clickOnDBByName(databasesForAdding[1].databaseName);
+    // Verify that resize saved for specific data type
+    for(const key of keys) {
+        await browserPage.openKeyDetails(key.name);
+        await t.expect(field.clientWidth).eql(key.fieldWidthEnd, `Resize context not saved for ${key.type} key when switching between databases`);
+    }
+});