Merge pull request #250 from RedisInsight/e2e/feature/RI-6514_support-multiple-key-name-delimiter

vlad-dargel · web-flow · commit c82b46b5757a · 2025-01-13T10:53:43.000+01:00
e2e/feature/RI-6514_support-multiple-key-name-delimiter
diff --git a/tests/e2e/src/helpers/common-actions/TreeViewActions.ts b/tests/e2e/src/helpers/common-actions/TreeViewActions.ts
@@ -11,18 +11,24 @@ export class TreeViewActions extends CommonDriverExtension {
    * Verify that not patterned keys not visible with delimiter
    * @param delimiter string with delimiter value
    */
-  static async verifyNotPatternedKeys(delimiter: string): Promise<void> {
+  static async verifyNotPatternedKeysNotDisplayed(
+    delimiter: string,
+  ): Promise<void> {
     let treeView = new TreeView()
-    const notPatternedKeys = await treeView.getElements(
-      treeView.getLimitedTreeViewKeys(40),
-    )
-    const notPatternedKeysNumber = notPatternedKeys.length
-
-    for (let i = 0; i < notPatternedKeysNumber; i++) {
-      expect(await notPatternedKeys[i].getText()).not.contain(
-        delimiter,
-        'Not patterned Keys contain delimiter',
+    if (
+      await treeView.isElementDisplayed(treeView.getLimitedTreeViewKeys(40))
+    ) {
+      const notPatternedKeys = await treeView.getElements(
+        treeView.getLimitedTreeViewKeys(40),
       )
+      const notPatternedKeysNumber = notPatternedKeys.length
+
+      for (let i = 0; i < notPatternedKeysNumber; i++) {
+        expect(await notPatternedKeys[i].getText()).not.contain(
+          delimiter,
+          'Not patterned Keys contain delimiter',
+        )
+      }
     }
   }
 
@@ -35,9 +41,11 @@ export class TreeViewActions extends CommonDriverExtension {
   static getNodeName(
     startFolder: string,
     folderName: string,
-    delimiter: string,
+    delimiter?: string,
   ): string {
-    return startFolder + folderName + delimiter
+    return delimiter
+      ? `${startFolder}${delimiter}${folderName}`
+      : `${startFolder}${folderName}`
   }
 
   /**
@@ -47,37 +55,43 @@ export class TreeViewActions extends CommonDriverExtension {
    */
   static async checkTreeViewFoldersStructure(
     folders: string[][],
-    delimiter: string,
+    delimiters: string[],
   ): Promise<void> {
     let treeView = new TreeView()
     // Wait for key refresh
     await TreeViewActions.driverSleep(2000)
     // Verify not patterned keys
-    await this.verifyNotPatternedKeys(delimiter)
+    await this.verifyNotPatternedKeysNotDisplayed(delimiters[0])
 
-    const foldersNumber = folders.length
+    for (let i = 0; i < folders.length; i++) {
+      const delimiter = delimiters.length > 1 ? '-' : delimiters[0]
+      let prevNodeName = ''
+      let prevDelimiter = ''
 
-    for (let i = 0; i < foldersNumber; i++) {
-      const innerFoldersNumber = folders[i].length
-      let prevNodeSelector = ''
-
-      for (let j = 0; j < innerFoldersNumber; j++) {
+      // Expand subfolders
+      for (let j = 0; j < folders[i].length; j++) {
         const nodeName = this.getNodeName(
-          prevNodeSelector,
+          prevNodeName,
           folders[i][j],
-          delimiter,
+          prevDelimiter,
         )
         const node = treeView.getFolderSelectorByName(nodeName)
-        const fullTestIdSelector = await treeView.getElementAttribute(node, 'data-testid')
+        const fullTestIdSelector = await treeView.getElementAttribute(
+          node,
+          'data-testid',
+        )
+
         if (!fullTestIdSelector?.includes('expanded')) {
           await ButtonActions.clickElement(node)
         }
-        prevNodeSelector = nodeName
+
+        prevNodeName = nodeName
+        prevDelimiter = delimiter
       }
 
       // Verify that the last folder level contains required keys
       const foundKeyName = `${folders[i].join(delimiter)}`
-      const firstFolderName = this.getNodeName('', folders[i][0], delimiter)
+      const firstFolderName = this.getNodeName('', folders[i][0])
       const firstFolder = treeView.getFolderSelectorByName(firstFolderName)
       expect(
         await treeView.isElementDisplayed(
@@ -109,7 +123,12 @@ export class TreeViewActions extends CommonDriverExtension {
         regExp,
         `The database is not automatically scanned by ${i} 000 keys`,
       )
-      await ButtonActions.clickAndWaitForElement(treeView.scanMoreBtn, treeView.loadingIndicator, true, 2000)
+      await ButtonActions.clickAndWaitForElement(
+        treeView.scanMoreBtn,
+        treeView.loadingIndicator,
+        true,
+        2000,
+      )
       await treeView.waitForElementVisibility(
         treeView.loadingIndicator,
         2000,
diff --git a/tests/e2e/src/page-objects/components/editor-view/SettingsView.ts b/tests/e2e/src/page-objects/components/editor-view/SettingsView.ts
@@ -5,7 +5,6 @@ import {
   CheckboxActions,
   InputActions,
 } from '@e2eSrc/helpers/common-actions'
-import { InputWithButtons } from '../common/InputWithButtons'
 
 /**
  * Settings view
@@ -17,7 +16,29 @@ export class SettingsView extends WebView {
   switchAnalyticsCheckbox = By.xpath(
     `//input[@data-testid='check-option-analytics']/../../div[contains(@class, 'checkmarkContainer')]`,
   )
-  delimiterInput = By.xpath(`//input[@data-testid='input-delimiter']`)
+  delimiterComboboxInput = By.xpath(`//input[@id='select-multi-delimiters']`)
+  applyDelimiterButton = By.xpath(`//*[@data-testid='apply-delimiter-btn']`)
+  removeDelimiterIcon = By.xpath(
+    `//div[contains(@class, "multiValue_")]/div[@role='button']`,
+  )
+
+  /**
+   * Get Delimiter badge selector by title
+   * @param delimiterTitle title of the delimiter item
+   */
+  getDelimiterBadgeByTitle = (delimiterTitle: string): By =>
+    By.xpath(
+      `//*[contains(text(), '${delimiterTitle}')]/parent::div[contains(@class, "multiValue_")]`,
+    )
+
+  /**
+   * Get Delimiter close button selector by title
+   * @param delimiterTitle title of the delimiter item
+   */
+  getDelimiterCloseBtnByTitle = (delimiterTitle: string): By =>
+    By.xpath(
+      `//*[contains(text(), '${delimiterTitle}')]/parent::div[contains(@class, "multiValue_")]/div[@role='button']`,
+    )
 
   /**
    * Get state of Analytics switcher
@@ -31,7 +52,45 @@ export class SettingsView extends WebView {
    * Set delimiter default value
    */
   async setDelimiterDefaultValue(): Promise<void> {
-    await InputActions.slowType(this.delimiterInput, ':')
-    await ButtonActions.clickElement(InputWithButtons.applyInput)
+    await this.changeDelimiterInTreeView(':')
+  }
+
+  /**
+   * Add new delimiter
+   * @param delimiterName name of the delimiter item
+   */
+  async addDelimiterItem(delimiterName: string): Promise<void> {
+    await ButtonActions.clickElement(this.delimiterComboboxInput)
+    await InputActions.slowType(this.delimiterComboboxInput, delimiterName)
+    await InputActions.pressKey(this.delimiterComboboxInput, 'enter')
+    await ButtonActions.clickElement(this.applyDelimiterButton)
+  }
+
+  /**
+   * Delete existing delimiter
+   * @param delimiterName name of the delimiter item
+   */
+  async removeDelimiterItem(delimiterName: string): Promise<void> {
+    await ButtonActions.clickElement(
+      this.getDelimiterCloseBtnByTitle(delimiterName),
+    )
+  }
+
+  /**
+   * Remove all existing delimiters in combobox
+   */
+  async clearDelimiterCombobox(): Promise<void> {
+    while (await super.isElementDisplayed(this.removeDelimiterIcon)) {
+      await ButtonActions.clickElement(this.removeDelimiterIcon)
+    }
+  }
+
+  /**
+   * Change delimiter value
+   * @param delimiter string with delimiter value
+   */
+  async changeDelimiterInTreeView(delimiter: string): Promise<void> {
+    await this.clearDelimiterCombobox()
+    await this.addDelimiterItem(delimiter)
   }
 }
diff --git a/tests/e2e/src/tests/settings/settings.e2e.ts b/tests/e2e/src/tests/settings/settings.e2e.ts
@@ -1,12 +1,14 @@
 import { expect } from 'chai'
 import { describe, it } from 'mocha'
-import { before, beforeEach, after, afterEach, EditorView } from 'vscode-extension-tester'
-import { InnerViews } from '@e2eSrc/page-objects/components/WebView'
 import {
-  TreeView,
-  SettingsView,
-  InputWithButtons,
-} from '@e2eSrc/page-objects/components'
+  before,
+  beforeEach,
+  after,
+  afterEach,
+  EditorView,
+} from 'vscode-extension-tester'
+import { InnerViews } from '@e2eSrc/page-objects/components/WebView'
+import { TreeView, SettingsView } from '@e2eSrc/page-objects/components'
 import {
   ButtonActions,
   CheckboxActions,
@@ -50,9 +52,7 @@ describe('Settings', () => {
     await ButtonActions.clickElement(treeView.settingsButton)
     await settingsView.switchToInnerViewFrame(InnerViews.SettingsInnerView)
     // Change delimiter
-    await ButtonActions.clickElement(settingsView.delimiterInput)
-    await InputActions.slowType(settingsView.delimiterInput, ':')
-    await ButtonActions.clickElement(InputWithButtons.applyInput)
+    await settingsView.setDelimiterDefaultValue()
     await settingsView.switchBack()
     await DatabaseAPIRequests.deleteAllDatabasesApi()
   })
@@ -79,25 +79,31 @@ describe('Settings', () => {
 
   it('Verify that when user changes the delimiter and clicks on Save button delimiter is applied', async function () {
     // Check the default delimiter value
-    expect(await InputActions.getInputValue(settingsView.delimiterInput)).eql(
-      ':',
-      'Default delimiter not applied',
-    )
+    expect(
+      await settingsView.isElementDisplayed(
+        settingsView.getDelimiterBadgeByTitle(':'),
+      ),
+    ).eql(true, 'Default delimiter not applied')
     // Apply new value to the field
-    await InputActions.typeText(settingsView.delimiterInput, 'test')
-    // Click on Cancel button
-    await ButtonActions.clickElement(InputWithButtons.cancelInput)
+    await ButtonActions.clickElement(settingsView.delimiterComboboxInput)
+    await InputActions.slowType(settingsView.delimiterComboboxInput, 'test')
+    // Click on Apply button without applying by 'Enter' or 'Space' key
+    await ButtonActions.clickElement(settingsView.applyDelimiterButton)
     // Check the previous delimiter value
-    expect(await InputActions.getInputValue(settingsView.delimiterInput)).eql(
-      ':',
-      'Default delimiter not applied',
-    )
+    expect(
+      await settingsView.isElementDisplayed(
+        settingsView.getDelimiterBadgeByTitle(':'),
+      ),
+    ).eql(true, 'Default delimiter not applied')
+    // Verify that not confirmed by 'Enter' or 'Space' key delimiter not applied
+    expect(
+      await settingsView.isElementDisplayed(
+        settingsView.getDelimiterBadgeByTitle('test'),
+      ),
+    ).eql(false, 'Not confirmed delimiter not applied')
 
     // Change delimiter
-    await ButtonActions.clickElement(settingsView.delimiterInput)
-    await InputActions.slowType(settingsView.delimiterInput, '-')
-    await ButtonActions.clickElement(InputWithButtons.applyInput)
-    // Verify that user can see that input is not saved when the Cancel button is clicked
+    await settingsView.changeDelimiterInTreeView('-')
     await settingsView.switchBack()
     await treeView.switchToInnerViewFrame(InnerViews.TreeInnerView)
     // Verify that when user changes the delimiter and clicks on Save button delimiter is applied
@@ -110,7 +116,7 @@ describe('Settings', () => {
         ['device_eu', 'central'],
         ['user_eu', 'central'],
       ],
-      '-',
+      ['-'],
     )
   })
 })
diff --git a/tests/e2e/src/tests/tree-view/delimiter.e2e.ts b/tests/e2e/src/tests/tree-view/delimiter.e2e.ts
