Merge pull request #120 from RedisInsight/feature/e2e

e2e - Command results at Workbench

Author: tanyatrayanava

redisinsight/ui/src/components/query-card/QueryCardCliPlugin/QueryCardCliPlugin.tsx

@@ -147,6 +147,7 @@ const QueryCardCliPlugin = (props: Props) => {
           ref={pluginIframeRef}
           referrerPolicy="no-referrer"
           sandbox="allow-same-origin allow-scripts"
+          data-testid="pluginIframe"
         />
         {!!error && (
           <div className={styles.container}>

tests/e2e/helpers/database.ts

@@ -1,15 +1,17 @@
-import { t } from 'testcafe'
-import { MyRedisDatabasePage } from '../pageObjects/my-redis-databases-page'
-import { AddNewDatabaseParameters, SentinelParameters, AddRedisDatabasePage, OSSClusterParameters } from '../pageObjects/add-redis-database-page'
-import { DiscoverMasterGroupsPage } from '../pageObjects/sentinel/discovered-sentinel-master-groups-page'
-import { AutoDiscoverREDatabases } from '../pageObjects/auto-discover-redis-enterprise-databases'
-import { BrowserPage } from '../pageObjects/browser-page'
+import { t } from 'testcafe';
+import { MyRedisDatabasePage } from '../pageObjects/my-redis-databases-page';
+import { AddNewDatabaseParameters, SentinelParameters, AddRedisDatabasePage, OSSClusterParameters } from '../pageObjects/add-redis-database-page';
+import { DiscoverMasterGroupsPage } from '../pageObjects/sentinel/discovered-sentinel-master-groups-page';
+import { AutoDiscoverREDatabases } from '../pageObjects/auto-discover-redis-enterprise-databases';
+import { BrowserPage } from '../pageObjects/browser-page';
+import { UserAgreementPage } from '../pageObjects';
 
-const myRedisDatabasPage = new MyRedisDatabasePage
-const addRedisDatabasePage = new AddRedisDatabasePage
-const discoverMasterGroupsPage = new DiscoverMasterGroupsPage
+const myRedisDatabasePage = new MyRedisDatabasePage;
+const addRedisDatabasePage = new AddRedisDatabasePage;
+const discoverMasterGroupsPage = new DiscoverMasterGroupsPage;
 const autoDiscoverREDatabases = new AutoDiscoverREDatabases;
 const browserPage = new BrowserPage;
+const userAgreementPage = new UserAgreementPage;
 
 /**
  * Add a new database manually using host and port
@@ -21,7 +23,7 @@ export async function addNewStandaloneDatabase(databaseParameters: AddNewDatabas
     //Click for saving
     await t.click(addRedisDatabasePage.addRedisDatabaseButton);
     //Wait for database to be exist
-    await t.expect(myRedisDatabasPage.dbNameList.withExactText(databaseParameters.databaseName).exists).ok('The existence of the database', { timeout: 60000 });
+    await t.expect(myRedisDatabasePage.dbNameList.withExactText(databaseParameters.databaseName).exists).ok('The existence of the database', { timeout: 60000 });
 }
 
 /**
@@ -68,9 +70,9 @@ export async function addOSSClusterDatabase(databaseParameters: OSSClusterParame
     //Click for saving
     await t.click(addRedisDatabasePage.addRedisDatabaseButton);
     //Check for info message that DB was added
-    await t.expect(myRedisDatabasPage.databaseInfoMessage.exists).ok('Check that info message exists', { timeout: 60000 });
+    await t.expect(myRedisDatabasePage.databaseInfoMessage.exists).ok('Check that info message exists', { timeout: 60000 });
     //Wait for database to be exist
-    await t.expect(myRedisDatabasPage.dbNameList.withExactText(databaseParameters.ossClusterDatabaseName).exists).ok('The existence of the database', { timeout: 60000 });
+    await t.expect(myRedisDatabasePage.dbNameList.withExactText(databaseParameters.ossClusterDatabaseName).exists).ok('The existence of the database', { timeout: 60000 });
 }
 
 /**
@@ -91,6 +93,20 @@ export async function addNewRECloudDatabase(cloudAPIAccessKey: string, cloudAPIS
     await t.click(autoDiscoverREDatabases.addSelectedDatabases);
     //Wait for database to be exist in the My redis databases list
     await t.click(autoDiscoverREDatabases.viewDatabasesButton);
-    await t.expect(myRedisDatabasPage.dbNameList.withExactText(databaseName).exists).ok('The existence of the database', { timeout: 60000 });
+    await t.expect(myRedisDatabasePage.dbNameList.withExactText(databaseName).exists).ok('The existence of the database', { timeout: 60000 });
     return databaseName;
 }
+
+/**
+ * Accept License terms and add database
+ * @param databaseParameters The database parameters
+ * @param databaseName The database name
+*/
+export async function acceptLicenseTermsAndAddDatabase(databaseParameters: AddNewDatabaseParameters, databaseName: string): Promise<void> {
+    await t.maximizeWindow();
+    await userAgreementPage.acceptLicenseTerms();
+    await t.expect(addRedisDatabasePage.addDatabaseButton.exists).ok('The add redis database view', {timeout: 20000});
+    await addNewStandaloneDatabase(databaseParameters);
+    //Connect to DB
+    await myRedisDatabasePage.clickOnDBByName(databaseName);
+}   

tests/e2e/pageObjects/my-redis-databases-page.ts

@@ -60,6 +60,7 @@ export class MyRedisDatabasePage {
 
   //Delete all the databases from the list
   async deleteAllDatabases(): Promise<void> {
+      await t.click(this.myRedisDBButton);
       const dbNames = this.tableRowContent;
       const count = await dbNames.count;
       if(count > 1) {

tests/e2e/pageObjects/workbench-page.ts

@@ -8,6 +8,8 @@ export class WorkbenchPage {
   cssDeleteCommandButton: string
   cssQueryCardOutputResponceSuccess: string
   cssTableViewTypeOption: string
+  cssQueryTextResult: string
+  cssQueryTableResult: string
   //------------------------------------------------------------------------------------------
   //DECLARATION OF TYPES: DOM ELEMENTS and UI COMPONENTS
   //*Assign the 'Selector' type to any element/component nested within the constructor.
@@ -45,6 +47,7 @@ export class WorkbenchPage {
   internalLinkWorkingWithHashes: Selector
   preselectExactSearch: Selector
   preselectGroupBy: Selector
+  tableViewTypeOption: Selector
   preselectArea: Selector
   expandArea: Selector
   monacoHintWithArguments: Selector
@@ -61,6 +64,8 @@ export class WorkbenchPage {
       this.cssDeleteCommandButton = '[data-testid=delete-command]';
       this.cssQueryCardOutputResponceSuccess = '[data-testid=query-card-output-response-success]';
       this.cssTableViewTypeOption = '[data-testid=view-type-selected-Plugin-redisearch__redisearch]';
+      this.cssQueryTextResult = '[data-testid=query-cli-result]';
+      this.cssQueryTableResult = '[data-testid^=query-table-result-]';
       //-------------------------------------------------------------------------------------------
       //DECLARATION OF SELECTORS
       //*Declare all elements/components of the relevant page.
@@ -75,7 +80,8 @@ export class WorkbenchPage {
       this.paginationButtonPrevious = Selector(this.cssSelectorPaginationButtonPrevious);
       this.paginationButtonNext = Selector(this.cssSelectorPaginationButtonNext);
       this.selectViewType = Selector('[data-testid=select-view-type]');
-      this.textViewTypeOption = Selector('[data-test-subj=view-type-option-Text]');
+      this.textViewTypeOption = Selector('[data-test-subj^=view-type-option-Text]');
+      this.tableViewTypeOption = Selector('[data-test-subj^=view-type-option-Plugin]');
       this.preselectList = Selector('[data-testid*=preselect-List]');
       this.preselectIndexInfo = Selector('[data-testid*=preselect-Index]');
       this.preselectSearch = Selector('[data-testid=preselect-Search]');
@@ -91,7 +97,7 @@ export class WorkbenchPage {
       this.queryCardContainer = Selector('[data-testid^=query-card-container]');
       this.queryCardCommand = Selector('[data-testid=query-card-command]');
       this.queryTableResult = Selector('[data-testid^=query-table-result-]');
-      this.queryTextResult = Selector('[data-testid=query-cli-result]');
+      this.queryTextResult = Selector(this.cssQueryTextResult);
       this.queryColumns = Selector('[data-testid*=query-column-]');
       this.queryInputScriptArea = Selector('[data-testid=query-input-container] .view-line');
       this.overviewTotalKeys = Selector('[data-test-subj=overview-total-keys]');
@@ -101,7 +107,7 @@ export class WorkbenchPage {
       this.monacoCommandDetails = Selector('div.suggest-details-container');
       this.monacoCloseCommandDetails = Selector('span.codicon-close');
       this.monacoSuggestion = Selector('span.monaco-icon-name-container');
-      this.iframe = Selector('.pluginIframe', { timeout: 90000 });
+      this.iframe = Selector('[data-testid=pluginIframe]', { timeout: 60000 });
       this.monacoHintWithArguments = Selector('[widgetid="editor.widget.parameterHintsWidget"]');
       this.noCommandHistorySection = Selector('[data-testid=wb_no-results]');
       this.preselectArea = Selector('[data-testid=enablementArea]');
@@ -125,6 +131,12 @@ export class WorkbenchPage {
       await t.click(this.textViewTypeOption);
   }
 
+  //Select Table view option in Workbench results
+  async selectViewTypeTable(): Promise<void>{
+    await t.click(this.selectViewType);
+    await t.click(this.tableViewTypeOption);
+}
+
   /**
   * Send a command in Workbench
   * @param command The command
@@ -134,4 +146,14 @@ export class WorkbenchPage {
       await t.typeText(this.queryInput, command, { replace: true, speed: speed});
       await t.click(this.submitCommandButton);
   }
+
+  /**
+  * Send commands array in Workbench page
+  * @param commands The array of commands to send
+  */
+  async sendCommandsArrayInWorkbench(commands: string[]): Promise<void> {
+      for(let command of commands) {
+          await this.sendCommandInWorkbench(command);
+      }
+  }
 }

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

@@ -38,7 +38,6 @@ fixture `Database overview`
         await t.pressKey('enter');
         await t.click(cliPage.cliCollapseButton);
         //Delete all databases
-        await t.click(myRedisDatabasePage.myRedisDBButton);
         await myRedisDatabasePage.deleteAllDatabases();
     })
 test('Verify that user can see the list of Modules updated each time when he connects to the database', async t => {

tests/e2e/tests/critical-path/workbench/default-scripts-area.e2e.ts

@@ -54,7 +54,9 @@ test.skip('Verify that user can edit and run automatically added "FT._LIST" and
     await t.pressKey('ctrl+a delete');
     await workbenchPage.sendCommandInWorkbench(addedScript);
     //Check the FT.INFO result
+    await t.switchToIframe(workbenchPage.iframe);
     await t.expect(workbenchPage.queryColumns.textContent).contains('name', 'The result of the FT.INFO command');
+    await t.switchToMainWindow();
 });
 //skipped due the inaccessibility of the iframe
 test.skip('Verify that user can edit and run automatically added "Search" script in Workbench and see the results', async t => {
@@ -72,10 +74,12 @@ test.skip('Verify that user can edit and run automatically added "Search" script
     await t.pressKey('ctrl+a delete');
     await workbenchPage.sendCommandInWorkbench(searchCommand);
     //Check the FT.SEARCH result
+    await t.switchToIframe(workbenchPage.iframe);
     const key = workbenchPage.queryTableResult.withText('product:1');
     const name = workbenchPage.queryTableResult.withText('Apple Juice');
     await t.expect(key.exists).ok('The added key is in the Search result');
     await t.expect(name.exists).ok('The added key name field is in the Search result');
+    await t.switchToMainWindow();
 });
 //skipped due the inaccessibility of the iframe
 test.skip('Verify that user can edit and run automatically added "Aggregate" script in Workbench and see the results', async t => {
@@ -94,8 +98,10 @@ test.skip('Verify that user can edit and run automatically added "Aggregate" scr
     await t.pressKey('ctrl+a delete');
     await workbenchPage.sendCommandInWorkbench(searchCommand);
     //Check the FT.Aggregate result
+    await t.switchToIframe(workbenchPage.iframe);
     await t.expect(workbenchPage.queryTableResult.textContent).contains(aggregationResultField, 'The aggregation field name is in the Search result');
     await t.expect(workbenchPage.queryTableResult.textContent).contains('100', 'The aggregation max value is in the Search result');
+    await t.switchToMainWindow();
 });
 test('Verify that when the “Manual” option clicked, user can see the Editor is automatically prepopulated with the information', async t => {
     const information = [

tests/e2e/tests/critical-path/workbench/index-schema.e2e.ts

@@ -49,6 +49,7 @@ test.skip('Verify that user can open results in Text and Table views for FT.INFO
     await t.switchToIframe(workbenchPage.iframe);
     await t.expect(workbenchPage.queryTableResult.exists).ok('The result is displayed in Table view');
     //Select Text view type
+    await t.switchToMainWindow();
     await workbenchPage.selectViewTypeText();
     //Check that result is displayed in Text view
     await t.expect(workbenchPage.queryTextResult.exists).ok('The result is displayed in Text view');
@@ -65,8 +66,10 @@ test.skip('Verify that user can open results in Text and Table views for FT.INFO
     //Send search command
     await workbenchPage.sendCommandInWorkbench(searchCommand);
     //Check that result is displayed in Table view
+    await t.switchToIframe(workbenchPage.iframe);
     await t.expect(workbenchPage.queryTableResult.exists).ok('The result is displayed in Table view');
     //Select Text view type
+    await t.switchToMainWindow();
     await workbenchPage.selectViewTypeText();
     //Check that result is displayed in Text view
     await t.expect(workbenchPage.queryTextResult.exists).ok('The result is displayed in Text view');

tests/e2e/tests/critical-path/workbench/json-workbench.e2e.ts

@@ -47,8 +47,10 @@ test.skip('Verify that user can see result in Table and Text view for JSON data
     //Send search command
     await workbenchPage.sendCommandInWorkbench(searchCommand);
     //Check that result is displayed in Table view
+    await t.switchToIframe(workbenchPage.iframe);
     await t.expect(workbenchPage.queryTableResult.exists).ok('The result is displayed in Table view');
     //Select Text view type
+    await t.switchToMainWindow();
     await workbenchPage.selectViewTypeText();
     //Check that result is displayed in Text view
     await t.expect(workbenchPage.queryTextResult.exists).ok('The result is displayed in Text view');

tests/e2e/tests/critical-path/workbench/scripting-area.e2e.ts

@@ -80,11 +80,13 @@ test.skip('Verify that user when he have more than 10 results can request to vie
     //Get needed container
     const containerOfCommand = await workbenchPage.getCardContainerByCommand(searchCommand);
     //Verify that we have pagination buttons
+    await t.switchToIframe(workbenchPage.iframe);
     await t.expect(containerOfCommand.find(workbenchPage.cssSelectorPaginationButtonPrevious).exists)
         .ok('Pagination previous button exists');
     await t.expect(containerOfCommand.find(workbenchPage.cssSelectorPaginationButtonNext).exists)
         .ok('Pagination next button exists');
     //Drop index and documents
+    await t.switchToMainWindow();
     await workbenchPage.sendCommandInWorkbench('FT.DROPINDEX products DD');
 });
 //skipped due the inaccessibility of the iframe
@@ -105,8 +107,10 @@ test.skip
         //Send search command
         await workbenchPage.sendCommandInWorkbench(searchCommand);
         //Check that result is displayed in Table view
+        await t.switchToIframe(workbenchPage.iframe);
         await t.expect(workbenchPage.queryTableResult.exists).ok('The result is displayed in Table view');
         //Select Text view type
+        await t.switchToMainWindow();
         await workbenchPage.selectViewTypeText();
         //Check that result is displayed in Text view
         await t.expect(workbenchPage.queryTextResult.exists).ok('The result is displayed in Text view');

tests/e2e/tests/regression/workbench/command-results.e2e.ts

@@ -0,0 +1,63 @@
+import { acceptLicenseTermsAndAddDatabase } from '../../../helpers/database';
+import { WorkbenchPage } from '../../../pageObjects/workbench-page';
+import { MyRedisDatabasePage } from '../../../pageObjects';
+import {
+    commonUrl,
+    ossStandaloneConfig
+} from '../../../helpers/conf';
+
+const myRedisDatabasePage = new MyRedisDatabasePage();
+const workbenchPage = new WorkbenchPage();
+
+const indexName = 'idx';
+const commandsForIndex = [
+    `FT.CREATE ${indexName} ON HASH PREFIX 1 product: SCHEMA price NUMERIC SORTABLE`,
+    'HMSET product:1 price 20',
+    'HMSET product:2 price 100'
+];
+
+//skipped due the inaccessibility of the iframe
+fixture.skip `Command results at Workbench`
+    .meta({type: 'regression'})
+    .page(commonUrl)
+    .beforeEach(async t => {
+        await acceptLicenseTermsAndAddDatabase(ossStandaloneConfig, ossStandaloneConfig.databaseName);
+        //Add index and data
+        await t.click(myRedisDatabasePage.workbenchButton);
+        await workbenchPage.sendCommandsArrayInWorkbench(commandsForIndex);
+    })
+    .afterEach(async() => {
+        //Drop index and dbs
+        await workbenchPage.sendCommandInWorkbench('FT.DROPINDEX products DD');
+        await myRedisDatabasePage.deleteAllDatabases();
+    })
+test('Verify that user can switches between Table and Text for FT.INFO and see results corresponding to their views', async t => {
+    const infoCommand = `FT.INFO ${indexName}`;
+    //Send FT.INFO and switch to Text view
+    await workbenchPage.sendCommandInWorkbench(infoCommand);
+    await workbenchPage.selectViewTypeText();
+    await t.expect(await workbenchPage.queryCardContainer.nth(0).find(workbenchPage.cssQueryTextResult).exists).ok(`The text view is switched for command FT.INFO`);
+    //Switch to Table view and check result
+    await workbenchPage.selectViewTypeTable();
+    await t.expect(await workbenchPage.queryCardContainer.nth(0).find(workbenchPage.cssQueryTableResult).exists).ok(`The table view is switched for command FT.INFO`);
+});
+test('Verify that user can switches between Table and Text for FT.SEARCH and see results corresponding to their views', async t => {
+    const searchCommand = `FT.SEARCH ${indexName} *`;
+    //Send FT.SEARCH and switch to Text view
+    await workbenchPage.sendCommandInWorkbench(searchCommand);
+    await workbenchPage.selectViewTypeText();
+    await t.expect(await workbenchPage.queryCardContainer.nth(0).find(workbenchPage.cssQueryTextResult).visible).ok(`The text view is switched for command FT.SEARCH`);
+    //Switch to Table view and check result
+    await workbenchPage.selectViewTypeTable();
+    await t.expect(await workbenchPage.queryCardContainer.nth(0).find(workbenchPage.cssQueryTableResult).exists).ok(`The table view is switched for command FT.SEARCH`);
+});
+test('Verify that user can switches between Table and Text for FT.AGGREGATE and see results corresponding to their views', async t => {
+    const aggregateCommand = `FT.Aggregate ${indexName} * GROUPBY 0 REDUCE MAX 1 @price AS max_price`;
+    //Send FT.AGGREGATE and switch to Text view
+    await workbenchPage.sendCommandInWorkbench(aggregateCommand);
+    await workbenchPage.selectViewTypeText();
+    await t.expect(await workbenchPage.queryCardContainer.nth(0).find(workbenchPage.cssQueryTextResult).visible).ok(`The text view is switched for command FT.AGGREGATE`);
+    //Switch to Table view and check result
+    await workbenchPage.selectViewTypeTable();
+    await t.expect(await workbenchPage.queryCardContainer.nth(0).find(workbenchPage.cssQueryTableResult).exists).ok(`The table view is switched for command FT.AGGREGATE`);
+});