Merge pull request #1934 from RedisInsight/e2e/feature/refactoring

[refactoring] - move nav panel and profiler to components, fix part of eslint errors

Author: mariasergeenko

tests/e2e/.eslintrc

@@ -52,7 +52,7 @@
         // ******************** NOT README STANDARDS ********************
         //Limits the length of a row to 400
         "max-len": ["error", 400],
-        
+
         //Forcing that all of the comments are with spaces.
         "spaced-comment": "off",
         //Forcing not to have random spaces.
@@ -128,6 +128,7 @@
         ],
         //Enforce a convention in module import order
         "import/order": "error",
+        "object-curly-spacing": ["error", "always"],
         //Disallow duplicate imports
         "import/no-duplicates": "error",
         /* Below are extended rules regarding the recommended typescript rule package...*/

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

@@ -159,6 +159,13 @@ export class Common {
         await t.eval(() => location.reload());
     }
 
+    /**
+     * Get current page url
+     */
+    async getPageUrl(): Promise<string> {
+        return (await ClientFunction(() => window.location.href))();
+    }
+
     /**
      * Check opened URL
      * @param expectedUrl Expected link that is compared with actual

tests/e2e/helpers/common.ts

@@ -7,7 +7,6 @@ import {
     AutoDiscoverREDatabases,
     AddRedisDatabasePage,
     UserAgreementPage,
-    CliPage
 } from '../pageObjects';
 import { addNewStandaloneDatabaseApi, discoverSentinelDatabaseApi, getDatabaseIdByName } from './api/api-database';
 import { Common } from './common';
@@ -18,7 +17,6 @@ const discoverMasterGroupsPage = new DiscoverMasterGroupsPage();
 const autoDiscoverREDatabases = new AutoDiscoverREDatabases();
 const browserPage = new BrowserPage();
 const userAgreementPage = new UserAgreementPage();
-const cliPage = new CliPage();
 const common = new Common();
 
 /**
@@ -228,26 +226,16 @@ export async function acceptLicenseAndConnectToRedisStack(): Promise<void> {
     await acceptLicenseTerms();
     //Connect to DB
     await t
-        .click(myRedisDatabasePage.myRedisDBButton)
+        .click(myRedisDatabasePage.NavigationPanel.myRedisDBButton)
         .click(addRedisDatabasePage.connectToRedisStackButton);
 }
 
-// Clear database data
-export async function clearDatabaseInCli(): Promise<void> {
-    if (await cliPage.cliCollapseButton.exists === false) {
-        await t.click(cliPage.cliExpandButton);
-    }
-    await t
-        .typeText(cliPage.cliCommandInput, 'FLUSHDB')
-        .pressKey('enter');
-}
-
 /**
  * Delete database
  * @param databaseName The database name
 */
 export async function deleteDatabase(databaseName: string): Promise<void> {
-    await t.click(myRedisDatabasePage.myRedisDBButton);
+    await t.click(myRedisDatabasePage.NavigationPanel.myRedisDBButton);
     if (await addRedisDatabasePage.addDatabaseButton.exists) {
         await deleteDatabaseByNameApi(databaseName);
     }
@@ -258,7 +246,7 @@ export async function deleteDatabase(databaseName: string): Promise<void> {
  * @param databaseName The database name
 */
 export async function deleteCustomDatabase(databaseName: string): Promise<void> {
-    await t.click(myRedisDatabasePage.myRedisDBButton);
+    await t.click(myRedisDatabasePage.NavigationPanel.myRedisDBButton);
     if (await addRedisDatabasePage.addDatabaseButton.exists) {
         await myRedisDatabasePage.deleteDatabaseByName(databaseName);
     }
@@ -301,4 +289,4 @@ export async function deleteDatabaseByNameApi(databaseName: string): Promise<voi
     await t.expect(databaseDeleteBtn.exists).ok(`"${databaseName}" database not displayed`);
     await t.click(databaseDeleteBtn);
     await t.click(myRedisDatabasePage.confirmDeleteButton);
-}
+}

tests/e2e/helpers/database.ts

@@ -1,15 +1,13 @@
 import { createClient } from 'redis';
 import { t } from 'testcafe';
 import { Chance } from 'chance';
-import { COMMANDS_TO_CREATE_KEY } from '../helpers/constants';
-import { BrowserPage, CliPage } from '../pageObjects';
+import { random } from 'lodash';
+import { BrowserPage } from '../pageObjects';
 import { KeyData, AddKeyArguments } from '../pageObjects/browser-page';
-import { KeyTypesTexts } from './constants';
+import { COMMANDS_TO_CREATE_KEY, KeyTypesTexts } from './constants';
 import { Common } from './common';
-import { random } from 'lodash';
 
 const common = new Common();
-const cliPage = new CliPage();
 const browserPage = new BrowserPage();
 
 export function getRandomKeyName(keyNameLength: number): string {
@@ -49,17 +47,17 @@ export const keyTypes = [
  * @param keyField The key field value
  */
 export async function addKeysViaCli(keyData: KeyData, keyValue?: string, keyField?: string): Promise<void> {
-    await t.click(cliPage.cliExpandButton);
+    await t.click(browserPage.Cli.cliExpandButton);
     for (const { textType, keyName } of keyData) {
         if (textType in COMMANDS_TO_CREATE_KEY) {
             textType === 'Hash' || textType === 'Stream'
-                ? await t.typeText(cliPage.cliCommandInput, COMMANDS_TO_CREATE_KEY[textType](keyName, keyValue, keyField), { paste: true })
-                : await t.typeText(cliPage.cliCommandInput, COMMANDS_TO_CREATE_KEY[textType](keyName, keyValue), { paste: true });
+                ? await t.typeText(browserPage.Cli.cliCommandInput, COMMANDS_TO_CREATE_KEY[textType](keyName, keyValue, keyField), { paste: true })
+                : await t.typeText(browserPage.Cli.cliCommandInput, COMMANDS_TO_CREATE_KEY[textType](keyName, keyValue), { paste: true });
             await t.pressKey('enter');
         }
     }
     await t
-        .click(cliPage.cliCollapseButton)
+        .click(browserPage.Cli.cliCollapseButton)
         .click(browserPage.refreshKeysButton);
 }
 
@@ -72,7 +70,7 @@ export async function deleteKeysViaCli(keyData: KeyData): Promise<void> {
     for (const { keyName } of keyData) {
         keys.push(keyName);
     }
-    await cliPage.sendCommandInCli(`DEL ${keys.join(' ')}`);
+    await browserPage.Cli.sendCommandInCli(`DEL ${keys.join(' ')}`);
 }
 
 /**
@@ -85,14 +83,14 @@ export async function populateDBWithHashes(host: string, port: string, keyArgume
     const dbConf = { port: Number.parseInt(port), host, username: 'default' };
     const client = createClient(dbConf);
 
-    await client.on('error', async function (error: string) {
+    await client.on('error', async function(error: string) {
         throw new Error(error);
     });
-    await client.on('connect', async function () {
-        if (keyArguments.keysCount != undefined) {
+    await client.on('connect', async function() {
+        if (keyArguments.keysCount) {
             for (let i = 0; i < keyArguments.keysCount; i++) {
                 const keyName = `${keyArguments.keyNameStartWith}${common.generateWord(20)}`;
-                await client.hset([keyName, 'field1', 'Hello'], async (error: string) => {
+                await client.hset([keyName, 'field1', 'Hello'], async(error: string) => {
                     if (error) {
                         throw error;
                     }
@@ -114,18 +112,18 @@ export async function populateHashWithFields(host: string, port: string, keyArgu
     const client = createClient(dbConf);
     const fields: string[] = [];
 
-    await client.on('error', async function (error: string) {
+    await client.on('error', async function(error: string) {
         throw new Error(error);
     });
-    await client.on('connect', async function () {
-        if (keyArguments.fieldsCount != undefined) {
+    await client.on('connect', async function() {
+        if (keyArguments.fieldsCount) {
             for (let i = 0; i < keyArguments.fieldsCount; i++) {
                 const field = `${keyArguments.fieldStartWith}${common.generateWord(10)}`;
                 const fieldValue = `${keyArguments.fieldValueStartWith}${common.generateWord(10)}`;
                 fields.push(field, fieldValue);
             }
         }
-        await client.hset(keyArguments.keyName, fields, async (error: string) => {
+        await client.hset(keyArguments.keyName, fields, async(error: string) => {
             if (error) {
                 throw error;
             }
@@ -145,17 +143,17 @@ export async function populateListWithElements(host: string, port: string, keyAr
     const client = createClient(dbConf);
     const elements: string[] = [];
 
-    await client.on('error', async function (error: string) {
+    await client.on('error', async function(error: string) {
         throw new Error(error);
     });
-    await client.on('connect', async function () {
-        if (keyArguments.elementsCount != undefined) {
+    await client.on('connect', async function() {
+        if (keyArguments.elementsCount) {
             for (let i = 0; i < keyArguments.elementsCount; i++) {
                 const element = `${keyArguments.elementStartWith}${common.generateWord(10)}`;
                 elements.push(element);
             }
         }
-        await client.lpush(keyArguments.keyName, elements, async (error: string) => {
+        await client.lpush(keyArguments.keyName, elements, async(error: string) => {
             if (error) {
                 throw error;
             }
@@ -175,17 +173,17 @@ export async function populateSetWithMembers(host: string, port: string, keyArgu
     const client = createClient(dbConf);
     const members: string[] = [];
 
-    await client.on('error', async function (error: string) {
+    await client.on('error', async function(error: string) {
         throw new Error(error);
     });
-    await client.on('connect', async function () {
-        if (keyArguments.membersCount != undefined) {
+    await client.on('connect', async function() {
+        if (keyArguments.membersCount) {
             for (let i = 0; i < keyArguments.membersCount; i++) {
                 const member = `${keyArguments.memberStartWith}${common.generateWord(10)}`;
                 members.push(member);
             }
         }
-        await client.sadd(keyArguments.keyName, members, async (error: string) => {
+        await client.sadd(keyArguments.keyName, members, async(error: string) => {
             if (error) {
                 throw error;
             }
@@ -200,7 +198,7 @@ export async function populateSetWithMembers(host: string, port: string, keyArgu
  * @param port The port of database
  * @param keyArguments The arguments of key and its members
  */
- export async function populateZSetWithMembers(host: string, port: string, keyArguments: AddKeyArguments): Promise<void> {
+export async function populateZSetWithMembers(host: string, port: string, keyArguments: AddKeyArguments): Promise<void> {
     const dbConf = { port: Number.parseInt(port), host, username: 'default' };
     let minScoreValue: -10;
     let maxScoreValue: 10;
@@ -211,7 +209,7 @@ export async function populateSetWithMembers(host: string, port: string, keyArgu
         throw new Error(error);
     });
     await client.on('connect', async function() {
-        if (keyArguments.membersCount != undefined) {
+        if (keyArguments.membersCount) {
             for (let i = 0; i < keyArguments.membersCount; i++) {
                 const memberName = `${keyArguments.memberStartWith}${common.generateWord(10)}`;
                 const scoreValue = random(minScoreValue, maxScoreValue).toString(2);
@@ -236,10 +234,10 @@ export async function deleteAllKeysFromDB(host: string, port: string): Promise<v
     const dbConf = { port: Number.parseInt(port), host, username: 'default' };
     const client = createClient(dbConf);
 
-    await client.on('error', async function (error: string) {
+    await client.on('error', async function(error: string) {
         throw new Error(error);
     });
-    await client.on('connect', async function () {
+    await client.on('connect', async function() {
         await client.flushall((error: string) => {
             if (error) {
                 throw error;

tests/e2e/helpers/keys.ts

@@ -1,4 +1,4 @@
-import {t, Selector} from 'testcafe';
+import { t, Selector } from 'testcafe';
 
 export class AddRedisDatabasePage {
     //-------------------------------------------------------------------------------------------
@@ -58,13 +58,13 @@ export class AddRedisDatabasePage {
     buildFromDocker = Selector('a').withExactText('Docker');
     buildFromHomebrew = Selector('a').withExactText('Homebrew');
     // DROPDOWNS
-    caCertField = Selector('[data-testid=select-ca-cert]', {timeout: 500});
-    clientCertField = Selector('[data-testid=select-cert]', {timeout: 500});
+    caCertField = Selector('[data-testid=select-ca-cert]', { timeout: 500 });
+    clientCertField = Selector('[data-testid=select-cert]', { timeout: 500 });
     // CHECKBOXES
-    useSSHCheckbox = Selector('[data-testid=use-ssh]~div', {timeout: 500});
+    useSSHCheckbox = Selector('[data-testid=use-ssh]~div', { timeout: 500 });
     // RADIO BUTTONS
-    sshPasswordRadioBtn = Selector('#password~div', {timeout: 500});
-    sshPrivateKeyRadioBtn = Selector('#privateKey~div', {timeout: 500});
+    sshPasswordRadioBtn = Selector('#password~div', { timeout: 500 });
+    sshPrivateKeyRadioBtn = Selector('#privateKey~div', { timeout: 500 });
 
     /**
      * Adding a new redis database
@@ -108,11 +108,11 @@ export class AddRedisDatabasePage {
         }
         // Enter logical index
         await t.click(this.databaseIndexCheckbox);
-        await t.typeText(this.databaseIndexInput, index, { replace: true, paste: true});
+        await t.typeText(this.databaseIndexInput, index, { replace: true, paste: true });
         // Click for saving
         await t.click(this.addRedisDatabaseButton);
     }
-    
+
     /**
      * Adding a new standalone database with SSH
      * @param databaseParameters the parameters of the database
@@ -140,18 +140,18 @@ export class AddRedisDatabasePage {
             .typeText(this.sshPortInput, sshParameters.sshPort, { replace: true, paste: true })
             .typeText(this.sshUsernameInput, sshParameters.sshUsername, { replace: true, paste: true });
         if (!!sshParameters.sshPassword) {
-                await t.typeText(this.sshPasswordInput, sshParameters.sshPassword, { replace: true, paste: true });
+            await t.typeText(this.sshPasswordInput, sshParameters.sshPassword, { replace: true, paste: true });
         }
         if (!!sshParameters.sshPrivateKey) {
             await t
-            .click(this.sshPrivateKeyRadioBtn)
-            .typeText(this.sshPrivateKeyInput, sshParameters.sshPrivateKey, { replace: true, paste: true });
+                .click(this.sshPrivateKeyRadioBtn)
+                .typeText(this.sshPrivateKeyInput, sshParameters.sshPrivateKey, { replace: true, paste: true });
         }
         if (!!sshParameters.sshPassphrase) {
             await t
-            .click(this.sshPrivateKeyRadioBtn)
-            .typeText(this.sshPrivateKeyInput, sshParameters.sshPrivateKey!, { replace: true, paste: true })
-            .typeText(this.sshPassphraseInput, sshParameters.sshPassphrase, { replace: true, paste: true });
+                .click(this.sshPrivateKeyRadioBtn)
+                .typeText(this.sshPrivateKeyInput, sshParameters.sshPrivateKey!, { replace: true, paste: true })
+                .typeText(this.sshPassphraseInput, sshParameters.sshPassphrase, { replace: true, paste: true });
         }
         // Click for saving
         await t.click(this.addRedisDatabaseButton);
@@ -249,7 +249,7 @@ export type AddNewDatabaseParameters = {
         name?: string,
         certificate?: string,
         key?: string
-    },
+    }
 };
 
 /**
@@ -265,7 +265,7 @@ export type SentinelParameters = {
         alias?: string,
         db?: string,
         name?: string,
-        password?: string,
+        password?: string
     }[],
     sentinelPassword?: string,
     name?: string[]

tests/e2e/pageObjects/add-redis-database-page.ts

@@ -0,0 +1,6 @@
+import { NavigationPanel } from './components/navigation-panel';
+
+export class BasePage {
+    NavigationPanel = new NavigationPanel();
+
+}