Merge pull request #2789 from RedisInsight/e2e/feature/RI-5131-5170_tree_view

E2e/feature/ri 5131 5170 tree view

Author: mariasergeenko

redisinsight/ui/src/pages/browser/components/virtual-tree/components/Node/Node.tsx

@@ -154,7 +154,7 @@ const Node = ({
       onKeyDown={handleKeyDown}
       tabIndex={0}
       onFocus={() => {}}
-      data-testid={`node-item_${fullName}`}
+      data-testid={`node-item_${fullName}${isOpen && !isLeaf ? '--expanded' : ''}`}
     >
       {!isLeaf && <Folder />}
       {isLeaf && <Leaf />}

tests/e2e/common-actions/browser-actions.ts

@@ -87,7 +87,7 @@ export class BrowserActions {
      * @param name node name
      */
     getNodeSelector(name: string): Selector {
-        return Selector(`[data-testid="node-item_${name}"]`);
+        return Selector(`[data-testid^="node-item_${name}"]`);
     }
 
     /**
@@ -108,7 +108,10 @@ export class BrowserActions {
             for (let j = 0; j < innerFoldersNumber; j++) {
                 const nodeName = this.getNodeName(prevNodeSelector, folders[i][j], delimiter);
                 const node = this.getNodeSelector(nodeName);
-                await t.click(node);
+                const fullTestIdSelector = await node.getAttribute('data-testid');
+                if (!fullTestIdSelector?.includes('expanded')) {
+                    await t.click(node);
+                }
                 prevNodeSelector = nodeName;
             }
 

tests/e2e/docker.web.docker-compose.yml

@@ -33,7 +33,7 @@ services:
     command: [
         './wait-for-it.sh', 'redis-enterprise:12000', '-s', '-t', '120',
         '--',
-        'npx', 'yarn', 'test:chrome:ci'
+        'npm', 'run', 'test:chrome:ci'
     ]
 
   # Built image

tests/e2e/local.web.docker-compose.yml

@@ -33,7 +33,7 @@ services:
     command: [
         './wait-for-it.sh', 'redis-enterprise:12000', '-s', '-t', '120',
         '--',
-        'npx', 'yarn', 'test:chrome:ci'
+        'npm', 'run', 'test:chrome:ci'
     ]
 
   # Redisinsight API + UI build

tests/e2e/pageObjects/components/browser/tree-view.ts

@@ -71,8 +71,8 @@ export class TreeView {
         await t.click(this.treeViewSettingsBtn);
         await t.click(this.sortingBtn);
         order === 'ASC'
-        ? await t.click(this.sortingASCoption)
-        : await t.click(this.sortingDESCoption)
+            ? await t.click(this.sortingASCoption)
+            : await t.click(this.sortingDESCoption);
 
         // Click on save button
         await t.click(this.treeViewDelimiterValueSave);
@@ -93,11 +93,11 @@ export class TreeView {
     */
     async openTreeFolders(names: string[]): Promise<void> {
         let base = `node-item_${names[0]}:`;
-        await t.click(Selector(`[data-testid="${base}"]`));
+        await this.clickElementIfNotExpanded(base);
         if (names.length > 1) {
             for (let i = 1; i < names.length; i++) {
                 base = `${base  }${names[i]}:`;
-                await t.click(Selector(`[data-testid="${base}"]`));
+                await this.clickElementIfNotExpanded(base);
             }
         }
     }
@@ -120,4 +120,16 @@ export class TreeView {
 
         return textArray;
     }
+
+    /**
+     * click on the folder element if it is not expanded
+     * @param base the base element
+     */
+    private async clickElementIfNotExpanded(base: string): Promise<void> {
+        const baseSelector = Selector(`[data-testid^="${base}"]`);
+        const  elementSelector = await baseSelector.getAttribute('data-testid');
+        if (!elementSelector?.includes('expanded')) {
+            await t.click(Selector(`[data-testid^="${base}"]`));
+        }
+    }
 }

tests/e2e/tests/web/regression/tree-view/tree-view.e2e.ts

@@ -3,13 +3,15 @@ import { BrowserPage, WorkbenchPage } from '../../../../pageObjects';
 import {
     commonUrl,
     ossStandaloneBigConfig,
+    ossStandaloneConfig,
     ossStandaloneConfigEmpty,
     ossStandaloneRedisearch
 } from '../../../../helpers/conf';
 import { KeyTypesTexts, rte } from '../../../../helpers/constants';
 import { DatabaseAPIRequests } from '../../../../helpers/api/api-database';
 import { APIKeyRequests } from '../../../../helpers/api/api-keys';
 import { Common } from '../../../../helpers/common';
+import { verifyKeysDisplayingInTheList } from '../../../../helpers/keys';
 
 const browserPage = new BrowserPage();
 const workbenchPage = new WorkbenchPage();
@@ -145,3 +147,37 @@ test
         actualItemsArray = await browserPage.TreeView.getAllItemsArray();
         await t.expect(actualItemsArray).eql(expectedSortedByDESC);
     });
+
+https://redislabs.atlassian.net/browse/RI-5131
+test
+    .before(async() => {
+        await databaseHelper.acceptLicenseTermsAndAddDatabaseApi(ossStandaloneConfig);
+    })
+    .after(async() => {
+        await browserPage.Cli.sendCommandInCli('flushdb');
+        await databaseAPIRequests.deleteStandaloneDatabaseApi(ossStandaloneConfig);
+    })('Verify that if filtering results has only 1 folder, the folder will be expanded', async t => {
+        const name = Common.generateWord(10);
+        const additionalCharacter = Common.generateWord(1);
+        const keyName1 = Common.generateWord(3);
+        const keyName2 = Common.generateWord(3);
+        keyNames = [`${name}${additionalCharacter}:${keyName1}`, `${name}${additionalCharacter}:${keyName2}`, name];
+
+        const commands = [
+            'flushdb',
+            `HSET ${keyNames[0]} field value`,
+            `HSET ${keyNames[1]} field value`,
+            `HSET ${keyNames[2]} field value`
+        ];
+        await browserPage.Cli.sendCommandsInCli(commands);
+        await t.click(browserPage.treeViewButton);
+
+        // Verify if there is only folder, a user can see keys inside
+        await browserPage.searchByKeyName(`${name}${additionalCharacter}*`);
+        await verifyKeysDisplayingInTheList([keyName1, keyName2], true);
+
+        // Verify if there are folder and key, a user can't see keys inside the folder
+        await browserPage.searchByKeyName(`${name}*`);
+        await verifyKeysDisplayingInTheList([keyName1, keyName2], false);
+    });
+