Merge pull request #2610 from RedisInsight/e2e/feature/RI-4944_browser_navigation

E2e/feature/ri 4944 browser navigation

Author: vlad-dargel

redisinsight/ui/src/components/database-overview/components/MoreInfoPopover/MoreInfoPopover.tsx

@@ -102,7 +102,11 @@ const MoreInfoPopover = ({ metrics, modules }: IProps) => {
           <h4 className={styles.mi_fieldName}>Modules</h4>
           {
             modules?.map(({ name = '', semanticVersion = '', version = '' }) => (
-              <div key={name} className={cx(styles.mi_moduleName)}>
+              <div
+                key={name}
+                className={cx(styles.mi_moduleName)}
+                data-testid={`${truncateText(getModule(name)?.name || DATABASE_LIST_MODULES_TEXT[name] || name, 50)}`}
+              >
                 {`${truncateText(getModule(name)?.name || DATABASE_LIST_MODULES_TEXT[name] || name, 50)} `}
                 {!!(semanticVersion || version) && (
                   <span className={styles.mi_version}>

tests/e2e/pageObjects/browser-page.ts

@@ -106,6 +106,7 @@ export class BrowserPage extends InstancePage {
     showFilterHistoryBtn = Selector('[data-testid=show-suggestions-btn]');
     clearFilterHistoryBtn = Selector('[data-testid=clear-history-btn]');
     guideLinksBtn = Selector('[data-testid^=guide-button-]');
+    backToBrowserBtn = Selector('[data-testid=back-right-panel-btn]');
     //CONTAINERS
     streamGroupsContainer = Selector('[data-testid=stream-groups-container]');
     streamConsumersContainer = Selector('[data-testid=stream-consumers-container]');

tests/e2e/pageObjects/components/overview-panel.ts

@@ -7,7 +7,7 @@ export class OverviewPanel {
     databaseModules = Selector('[data-testid$=module]');
     overviewTooltipStatTitle = Selector('[data-testid=overview-db-stat-title]');
     // BUTTONS
-    myRedisDbIcon = Selector('[data-testid=my-redis-db-icon]');
+    myRedisDBLink = Selector('[data-testid=my-redis-db-btn]', { timeout: 1000 });
     overviewRedisStackLogo = Selector('[data-testid=redis-stack-logo]');
     overviewMoreInfo = Selector('[data-testid=overview-more-info-button]');
     changeIndexBtn = Selector('[data-testid=change-index-btn]');

tests/e2e/tests/critical-path/browser/bulk-delete.e2e.ts

@@ -185,3 +185,19 @@ test('Verify that when user clicks on Close button when bulk delete is completed
     await t.expect(browserPage.BulkActions.bulkDeleteCompletedSummary.exists).notOk('Bulk delete completed summary still displayed');
     await t.expect(browserPage.BulkActions.bulkDeleteSummary.textContent).contains('Scanned 100% (2/2) and found 1 keys', 'Bulk delete summary is not correct');
 });
+test
+    .before(async() => {
+        await databaseHelper.acceptLicenseTermsAndAddDatabaseApi(ossStandaloneRedisearch);
+        await browserPage.addHashKey(keyNames[0], '100000', Common.generateWord(20), Common.generateWord(20));
+    })('Verify that user can see the list of keys when click on “Back” button from the bulk actions', async t => {
+        await t.click(browserPage.bulkActionsButton);
+        await t.expect(browserPage.backToBrowserBtn.exists).notOk('"< Browser" button displayed for normal screen resolution');
+        // Minimize the window to check icon
+        await t.resizeWindow(1200, 900);
+        await t.expect(browserPage.keyDetailsTable.visible).ok('Bulk actions not opened', { timeout: 1000 });
+        // Verify that user can see the “Back” button when work with the bulk actions on small resolutions
+        await t.expect(browserPage.backToBrowserBtn.exists).ok('"< Browser" button not displayed for small screen resolution');
+        await t.click(browserPage.backToBrowserBtn);
+        // Verify that key details closed
+        await t.expect(browserPage.keyDetailsTable.visible).notOk('Bulk actions not closed by clicking on "< Browser" button', { timeout: 1000 });
+    });

tests/e2e/tests/critical-path/browser/key-details.e2e.ts

@@ -0,0 +1,38 @@
+import { DatabaseHelper } from '../../../helpers/database';
+import { BrowserPage } from '../../../pageObjects';
+import { commonUrl, ossStandaloneConfig } from '../../../helpers/conf';
+import { rte } from '../../../helpers/constants';
+import { DatabaseAPIRequests } from '../../../helpers/api/api-database';
+import { Common } from '../../../helpers/common';
+import { APIKeyRequests } from '../../../helpers/api/api-keys';
+
+const browserPage = new BrowserPage();
+const databaseHelper = new DatabaseHelper();
+const databaseAPIRequests = new DatabaseAPIRequests();
+const apiKeyRequests = new APIKeyRequests();
+
+let keyName: string;
+
+fixture `Key Details`
+    .meta({ type: 'critical_path', rte: rte.standalone })
+    .page(commonUrl)
+    .beforeEach(async() => {
+        await databaseHelper.acceptLicenseTermsAndAddDatabaseApi(ossStandaloneConfig);
+        keyName = Common.generateWord(10);
+        await browserPage.addStringKey(keyName);
+    })
+    .afterEach(async() => {
+        await apiKeyRequests.deleteKeyByNameApi(keyName, ossStandaloneConfig.databaseName);
+        await databaseAPIRequests.deleteStandaloneDatabaseApi(ossStandaloneConfig);
+    });
+test('Verify that user can see the list of keys when click on “Back” button', async t => {
+    await t.expect(browserPage.backToBrowserBtn.exists).notOk('"< Browser" button displayed for normal screen resolution');
+    // Minimize the window to check icon
+    await t.resizeWindow(1200, 900);
+    await t.expect(browserPage.keyDetailsTable.visible).ok('Key details not opened', { timeout: 1000 });
+    // Verify that user can see the “Back” button when work with the values of keys on small resolutions
+    await t.expect(browserPage.backToBrowserBtn.exists).ok('"< Browser" button not displayed for small screen resolution');
+    await t.click(browserPage.backToBrowserBtn);
+    // Verify that key details closed
+    await t.expect(browserPage.keyDetailsTable.visible).notOk('Key details not closed by clicking on "< Browser" button', { timeout: 1000 });
+});

tests/e2e/tests/critical-path/browser/keylist-actions.e2e.ts

@@ -28,7 +28,6 @@ test('Verify that user can delete key in List mode', async t => {
     await browserPage.deleteKeyByNameFromList(keyName);
     await t.expect(await browserPage.isKeyIsDisplayedInTheList(keyName)).notOk('The Key wasn\'t deleted');
 });
-
 test('Verify that user can delete key in Tree view', async t => {
     // Add new key
     await browserPage.addStringKey(keyName);

tests/e2e/tests/critical-path/browser/search-capabilities.e2e.ts

@@ -261,7 +261,7 @@ test
     .after(async() => {
         //clear database
         await browserPage.Cli.sendCommandInCli(`FT.DROPINDEX ${indexNameBigDb}`);
-        await t.click(browserPage.OverviewPanel.myRedisDbIcon); // go back to database selection page
+        await t.click(browserPage.OverviewPanel.myRedisDBLink); // go back to database selection page
         await myRedisDatabasePage.clickOnDBByName(simpleDbName); // click standalone database
         await browserPage.Cli.sendCommandInCli(`FT.DROPINDEX ${indexNameSimpleDb}`);
         await t.click(browserPage.patternModeBtn);
@@ -290,7 +290,7 @@ test
 
         await browserPage.Cli.sendCommandsInCli(commandsForBigStandalone);
 
-        await t.click(browserPage.OverviewPanel.myRedisDbIcon); // go back to database selection page
+        await t.click(browserPage.OverviewPanel.myRedisDBLink); // go back to database selection page
         await myRedisDatabasePage.clickOnDBByName(simpleDbName); // click standalone database
 
         const commandsForStandalone = [
@@ -311,7 +311,7 @@ test
 
         await verifyKeysDisplayedInTheList(keyNames); // verify created keys are visible
 
-        await t.click(browserPage.OverviewPanel.myRedisDbIcon); // go back to database selection page
+        await t.click(browserPage.OverviewPanel.myRedisDBLink); // go back to database selection page
         await myRedisDatabasePage.clickOnDBByName(bigDbName); // click database name from ossStandaloneBigConfig.databaseName
 
         await verifyKeysNotDisplayedInTheList(keyNames); // Verify that standandalone database keys are NOT visible

tests/e2e/tests/critical-path/database-overview/database-overview.e2e.ts

@@ -1,4 +1,5 @@
 import { Chance } from 'chance';
+import { Selector } from 'testcafe';
 import { DatabaseHelper } from '../../../helpers/database';
 import { rte } from '../../../helpers/constants';
 import { Common } from '../../../helpers/common';
@@ -15,6 +16,7 @@ import {
 } from '../../../helpers/conf';
 import { DatabaseAPIRequests } from '../../../helpers/api/api-database';
 
+
 const myRedisDatabasePage = new MyRedisDatabasePage();
 const browserPage = new BrowserPage();
 const chance = new Chance();
@@ -45,35 +47,28 @@ test
         await databaseAPIRequests.deleteStandaloneDatabaseApi(ossStandaloneConfig);
         await databaseAPIRequests.deleteStandaloneDatabaseApi(ossStandaloneRedisearch);
     })('Verify that user can see the list of Modules updated each time when he connects to the database', async t => {
-        const firstDatabaseModules: string[] = [];
-        const secondDatabaseModules: string[] = [];
+        let firstDatabaseModules: string[] = [];
+        let secondDatabaseModules: string[] = [];
         //Remember modules
-        let countOfModules = await browserPage.modulesButton.count;
+        await t.click(browserPage.OverviewPanel.overviewMoreInfo);
+        const moduleIcons = Selector('div').find('[data-testid^=Redi]');
+        let countOfModules = await moduleIcons.count;
         for(let i = 0; i < countOfModules; i++) {
-            firstDatabaseModules.push(await browserPage.modulesButton.nth(i).getAttribute('data-testid'));
-        }
-        //Verify the list of modules in Browser page
-        for (const module of firstDatabaseModules) {
-            await t.expect(browserPage.OverviewPanel.databaseModules.withAttribute('aria-labelledby', module).exists).ok(`${module} is displayed in the list`);
-        }
-        //Open the Workbench page and verify modules
-        await t.click(myRedisDatabasePage.NavigationPanel.workbenchButton);
-        for (const module of firstDatabaseModules) {
-            await t.expect(browserPage.OverviewPanel.databaseModules.withAttribute('aria-labelledby', module).exists).ok(`${module} is displayed in the list`);
+            firstDatabaseModules.push(await moduleIcons.nth(i).textContent);
         }
+
+        // Verify that user can be redirected to db list page by clicking on "Databases" link in the top left corner
+        await t.click(browserPage.OverviewPanel.myRedisDBLink);
         //Add database with different modules
-        await t.click(myRedisDatabasePage.NavigationPanel.myRedisDBButton);
         await databaseAPIRequests.addNewStandaloneDatabaseApi(ossStandaloneRedisearch);
         await browserPage.reloadPage();
         await myRedisDatabasePage.clickOnDBByName(ossStandaloneRedisearch.databaseName);
-        countOfModules = await browserPage.modulesButton.count;
+        await t.click(browserPage.OverviewPanel.overviewMoreInfo);
+        countOfModules = await moduleIcons.count;
         for(let i = 0; i < countOfModules; i++) {
-            secondDatabaseModules.push(await browserPage.modulesButton.nth(i).getAttribute('data-testid'));
+            secondDatabaseModules.push(await moduleIcons.nth(i).textContent);
         }
         //Verify the list of modules
-        for (const module of secondDatabaseModules) {
-            await t.expect(browserPage.OverviewPanel.databaseModules.withAttribute('aria-labelledby', module).exists).ok(`${module} is displayed in the list`);
-        }
         await t.expect(firstDatabaseModules).notEql(secondDatabaseModules, 'The list of Modules updated');
     });
 test

tests/e2e/tests/critical-path/database/connecting-to-the-db.e2e.ts

@@ -132,13 +132,13 @@ test
         await Common.checkURLContainsText('browser');
 
         // Verify that user can add SSH tunnel with Private Key
-        await t.click(browserPage.OverviewPanel.myRedisDbIcon);
+        await t.click(browserPage.OverviewPanel.myRedisDBLink);
         await myRedisDatabasePage.AddRedisDatabase.addStandaloneSSHDatabase(sshDbPrivateKey, sshWithPrivateKey);
         await myRedisDatabasePage.clickOnDBByName(sshDbPrivateKey.databaseName);
         await Common.checkURLContainsText('browser');
 
         // Verify that user can edit SSH parameters for existing database connections
-        await t.click(browserPage.OverviewPanel.myRedisDbIcon);
+        await t.click(browserPage.OverviewPanel.myRedisDBLink);
         await myRedisDatabasePage.clickOnEditDBByName(sshDbPrivateKey.databaseName);
         await t
             .typeText(myRedisDatabasePage.AddRedisDatabase.sshPrivateKeyInput, sshWithPassphrase.sshPrivateKey, { replace: true, paste: true })

tests/e2e/tests/regression/database/redisstack.e2e.ts

@@ -47,14 +47,3 @@ test('Verify that user can see Redis Stack icon in Edit mode near the DB name',
     const databaseName = myRedisDatabasePage.redisStackIcon.parent().nextSibling();
     await t.expect(databaseName.withAttribute('data-testid', 'edit-alias-btn').exists).ok('Edit button not found');
 });
-test('Verify that user can see Redis Stack icon and logo in Browser page in Overview.', async t => {
-    await myRedisDatabasePage.clickOnDBByName(ossStandaloneConfig.databaseName);
-    await t.expect(browserPage.OverviewPanel.overviewRedisStackLogo.visible).ok('Redis Stack logo not found');
-    // Open Workbench page
-    await t.click(myRedisDatabasePage.NavigationPanel.workbenchButton);
-    await t.expect(browserPage.OverviewPanel.overviewRedisStackLogo.visible).ok('Redis Stack logo not found');
-    // Check modules inside of the tooltip
-    await t.hover(browserPage.OverviewPanel.overviewRedisStackLogo);
-    await t.expect(myRedisDatabasePage.moduleTooltip.visible).ok('Tooltip with modules not found');
-    await myRedisDatabasePage.checkModulesInTooltip(moduleNameList);
-});