Merge pull request #368 from RedisInsight/feature/e2e-tree-view

tanyatrayanava · web-flow · commit d495722930c1 · 2022-03-12T21:11:35.000+03:00
Feature/e2e tree view
diff --git a/redisinsight/ui/src/components/virtual-tree/components/Node/Node.tsx b/redisinsight/ui/src/components/virtual-tree/components/Node/Node.tsx
@@ -90,7 +90,7 @@ const Node = ({
       </div>
       <div data-testid={`count_${fullName}`}>
         <span>{keyCount ?? ''}</span>
-        <span className={styles.approximate}>
+        <span className={styles.approximate} data-testid={`percentage_${fullName}`}>
           {keyApproximate ? `${keyApproximate < 1 ? '<1' : Math.round(keyApproximate)}%` : '' }
         </span>
       </div>
diff --git a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.spec.tsx b/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.spec.tsx
@@ -52,7 +52,7 @@ describe('KeysHeader', () => {
   it('should render key view type switcher properly', () => {
     render(<KeysHeader {...propsMock} />)
 
-    const keyViewTypeSwitcherInput = screen.queryByTestId('key-view-type-switcher')
+    const keyViewTypeSwitcherInput = screen.queryByTestId('view-type-switcher')
     expect(keyViewTypeSwitcherInput).toBeInTheDocument()
   })
 })
diff --git a/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx b/redisinsight/ui/src/pages/browser/components/keys-header/KeysHeader.tsx
@@ -183,7 +183,7 @@ const KeysHeader = (props: Props) => {
   )
 
   const ViewSwitch = (
-    <div className={styles.viewTypeSwitch} data-testid="key-view-type-switcher">
+    <div className={styles.viewTypeSwitch} data-testid="view-type-switcher">
       {viewTypes.map((view) => (
         <EuiToolTip content={view.tooltipText} position="top" key={view.tooltipText}>
           <EuiButtonIcon
diff --git a/tests/e2e/pageObjects/browser-page.ts b/tests/e2e/pageObjects/browser-page.ts
@@ -116,20 +116,22 @@ export class BrowserPage {
   treeViewButton: Selector
   treeViewArea: Selector
   browserViewButton: Selector
-  treeViewScannedValue: Selector
+  scannedValue: Selector
   treeViewSeparator: Selector
   treeViewKeysNumber: Selector
   treeViewPercentage: Selector
   treeViewFolders: Selector
-  treeViewMessage: Selector
   totalKeysNumber: Selector
-  keysScanned: Selector
   breadcrumbsContainer: Selector
   databaseInfoIcon: Selector
   databaseInfoToolTip: Selector
   removeHashFieldButton: Selector
   removeSetMemberButton: Selector
   removeZserMemberButton: Selector
+  treeViewKeysItem: Selector
+  treeViewNodeArrowIcon: Selector
+  treeViewDeviceFolder: Selector
+  treeViewDeviceKyesCount: Selector
 
   constructor() {
       //CSS Selectors
@@ -195,9 +197,11 @@ export class BrowserPage {
       this.overviewTooltip = Selector('[data-testid=overview-more-info-tooltip]');
       this.overviewTooltipStatTitle = Selector('[data-testid=overview-db-stat-title]');
       this.databaseInfoIcon = Selector('[data-testid=db-info-icon]');
-      this.treeViewButton = Selector('');
-      this.browserViewButton = Selector('');
-      this.treeViewSeparator = Selector('');
+      this.treeViewButton = Selector('[data-testid=view-type-list-btn]');
+      this.browserViewButton = Selector('[data-testid=view-type-browser-btn]');
+      this.treeViewSeparator = Selector('[data-testid=select-tree-view-separator]');
+      this.treeViewKeysItem = Selector('[data-testid="keys:keys:"]');
+      this.treeViewNodeArrowIcon = Selector('[data-test-subj^=node-arrow-icon_]');
       //TEXT INPUTS (also referred to as 'Text fields')
       this.keySizeDetails = Selector('[data-testid=key-size-text]');
       this.keyLengthDetails = Selector('[data-testid=key-length-text]');
@@ -252,15 +256,15 @@ export class BrowserPage {
       this.overviewCpu = Selector('[data-test-subj=overview-cpu]');
       this.selectedFilterTypeString = Selector('[data-testid=filter-option-type-selected-string]');
       this.breadcrumbsContainer = Selector('[data-testid=breadcrumbs-container]');
-      this.treeViewArea = Selector('');
-      this.treeViewScannedValue = Selector('');
-      this.treeViewKeysNumber = Selector('');
-      this.treeViewPercentage = Selector('');
-      this.treeViewFolders = Selector('');
-      this.treeViewMessage = Selector('');
-      this.totalKeysNumber = Selector('');
-      this.keysScanned = Selector('');
+      this.treeViewArea = Selector('[data-test-subj=tree-view-panel]');
+      this.scannedValue = Selector('[data-testid=keys-number-of-scanned]');
+      this.treeViewKeysNumber = Selector('[data-testid^=count_]');
+      this.treeViewPercentage = Selector('[data-testid^=percentage_]');
+      this.treeViewFolders = Selector('[data-test-subj^=node-arrow-icon_]');
+      this.totalKeysNumber = Selector('[data-testid=keys-total]');
       this.databaseInfoToolTip = Selector('[data-testid=db-info-tooltip]');
+      this.treeViewDeviceFolder = Selector('[data-testid^=device] div');
+      this.treeViewDeviceKyesCount = Selector('[data-testid^=count_device] span');
   }
 
   /**
diff --git a/tests/e2e/tests/critical-path/tree-view/tree-view.e2e.ts b/tests/e2e/tests/critical-path/tree-view/tree-view.e2e.ts
@@ -5,11 +5,14 @@ import {
     ossStandaloneBigConfig
 } from '../../../helpers/conf';
 import { rte, KeyTypesTexts } from '../../../helpers/constants';
+import { Chance } from 'chance';
 
 const browserPage = new BrowserPage();
+const chance = new Chance();
 
-//skipped due the functionality is not yet done
-fixture.skip `Tree view verifications`
+const keyNameFilter = `keyName${chance.word({ length: 10 })}`;
+
+fixture `Tree view verifications`
     .meta({type: 'critical_path'})
     .page(commonUrl)
     .beforeEach(async () => {
@@ -23,7 +26,7 @@ test
     .meta({ rte: rte.standalone })
     ('Verify that when user opens the application he can see that Tree View is disabled by default(Browser is selected by default)', async t => {
         //Verify that Browser view is selected by default and Tree view is disabled
-        await t.expect(browserPage.browserViewButton.withAttribute('active', 'true')).ok('The Browser is selected by default');
+        await t.expect(browserPage.browserViewButton.getStyleProperty('background-color')).eql('rgb(33, 37, 54)', 'The Browser is selected by default');
         await t.expect(browserPage.treeViewArea.visible).notOk('The tree view is not displayed', { timeout: 20000 });
     });
 test
@@ -32,56 +35,51 @@ test
         await t.click(browserPage.treeViewButton);
         await t.eval(() => location.reload());
         //Verify that "Tree view" mode enabled state is saved
-        await t.expect(browserPage.treeViewArea.visible).notOk('The tree view is not displayed');
+        await t.expect(browserPage.treeViewArea.visible).ok('The tree view is displayed');
     });
 test
     .meta({ rte: rte.standalone })
     ('Verify that user can see DB is automatically scanned by 10K keys in the background, user can see the number of keys scanned and use the "Scan More" button to search per another 10000 keys', async t => {
+        let scannedValue = 10;
         await t.click(browserPage.treeViewButton);
-        //Verify the scanned value
-        await t.expect(browserPage.treeViewScannedValue.textContent).contains('Scanned 10 000', 'The database is automatically scanned by 10K keys');
+        await t.expect(browserPage.scannedValue.textContent).eql(`${scannedValue} 000`, 'The database is automatically scanned by 10K keys');
         //Verify that user can use the "Scan More" button to search per another 10000 keys
-        await t.click(browserPage.scanMoreButton);
-        await t.expect(browserPage.treeViewScannedValue.textContent).contains('Scanned 20 000', 'The database is automatically scanned by 10K keys');
-    });
-test
-    .meta({ rte: rte.standalone })
-    ('Verify that user can see that “:” (colon) used as a default separator for namespaces', async t => {
-        await t.click(browserPage.treeViewButton);
-        //Verify the default separator
-        await t.expect(browserPage.treeViewSeparator.visible).ok('The “:” (colon) used as a default separator for namespaces');
-    });
-test
-    .meta({ rte: rte.standalone })
-    ('Verify that user can see the number of keys found per each namespace', async t => {
-        await t.click(browserPage.treeViewButton);
-        //Verify the number of keys found
-        await t.expect(browserPage.treeViewKeysNumber.visible).ok('The user can see the number of keys');
+        for (let i = 0; i < 10; i++){
+            scannedValue = scannedValue + 10;
+            await t.click(browserPage.scanMoreButton);
+            await t.expect(await browserPage.scannedValue.withExactText(`${scannedValue} 000`).exists).ok('The database is automatically scanned by 10K keys');
+        }       
     });
 test
+    .after(async() => {
+        //Clear and delete database
+        await browserPage.deleteKeyByName(keyNameFilter);
+        await deleteDatabase(ossStandaloneBigConfig.databaseName);
+    })
     .meta({ rte: rte.standalone })
     ('Verify that when user enables filtering by key name he can see only folder with appropriate keys are displayed and the number of keys and percentage is recalculated', async t => {
-        const keyNameFilter = 'key';
+        await browserPage.addHashKey(keyNameFilter);
+        await t.click(browserPage.treeViewButton);
         const numberOfKeys = await browserPage.treeViewKeysNumber.textContent;
         const percentage = await browserPage.treeViewPercentage.textContent;
-        await t.click(browserPage.treeViewButton);
         //Set filter by key name
         await browserPage.searchByKeyName(keyNameFilter);
+        await t.click(browserPage.treeViewKeysItem);
         //Verify the results
-        await t.expect(browserPage.treeViewFolders.textContent).contains(keyNameFilter, 'The appropriate keys are displayed');
         await t.expect(browserPage.treeViewKeysNumber.textContent).notEql(numberOfKeys, 'The number of keys is recalculated');
         await t.expect(browserPage.treeViewPercentage.textContent).notEql(percentage, 'The percentage is recalculated');
+        await t.expect(await browserPage.isKeyIsDisplayedInTheList(keyNameFilter)).ok('The appropriate keys are displayed');
     });
 test
     .meta({ rte: rte.standalone })
     ('Verify that when user switched from Tree View to Browser and goes back state of filer by key name/key type is saved', async t => {
-        const keyName = 'keyName';
+        const keyName = 'user*';
         await t.click(browserPage.treeViewButton);
         await browserPage.searchByKeyName(keyName);
         await t.click(browserPage.browserViewButton);
         await t.click(browserPage.treeViewButton);
         //Verify that state of filer by key name is saved
-        await t.expect(browserPage.searchInput.textContent).eql(keyName, 'The state of filer by key name is saved');
+        await t.expect(await browserPage.filterByPatterSearchInput.withAttribute('value', keyName).exists).ok('Filter per key name is still applied');
         await t.click(browserPage.treeViewButton);
         //Set filter by key type
         await browserPage.selectFilterGroupType(KeyTypesTexts.String); 
diff --git a/tests/e2e/tests/regression/tree-view/tree-view.e2e.ts b/tests/e2e/tests/regression/tree-view/tree-view.e2e.ts
@@ -6,19 +6,14 @@ import {
     ossStandaloneConfig
 } from '../../../helpers/conf';
 import { rte } from '../../../helpers/constants';
-import { Chance } from 'chance';
 
 const browserPage = new BrowserPage();
-const chance = new Chance();
 
-let keyName = chance.word({ length: 10 });
-
-//skipped due the functionality is not yet done
-fixture.skip `Tree view verifications`
+fixture `Tree view verifications`
     .meta({type: 'regression'})
     .page(commonUrl)
     .beforeEach(async () => {
-        await acceptLicenseTermsAndAddDatabase(ossStandaloneBigConfig, ossStandaloneConfig.databaseName);
+        await acceptLicenseTermsAndAddDatabase(ossStandaloneBigConfig, ossStandaloneBigConfig.databaseName);
     })
     .afterEach(async () => {
         //Delete database
@@ -35,33 +30,44 @@ test
     })
     ('Verify that user can see message "No keys to display." when there are no keys in the database', async t => {
         //Verify the message
-        await t.expect(browserPage.treeViewMessage.textContent).eql('No keys to display.', 'The message is displayed');
+        await t.click(browserPage.treeViewButton);
+        await t.expect(browserPage.keyListTable.textContent).contains('No keys to display.', 'The message is displayed');
     });
-test
+//skipped due the issue
+test.skip
     .meta({ rte: rte.standalone })
     ('Verify that user can see the total number of keys, the number of keys scanned, the “Scan more” control displayed at the top of Tree view and Browser view', async t => {
         //Verify the controls on the Browser view
         await t.expect(browserPage.totalKeysNumber.visible).ok('The total number of keys is displayed on the Browser view');
-        await t.expect(browserPage.keysScanned.visible).ok('The number of keys scanned is displayed on the Browser view');
+        await t.expect(browserPage.scannedValue.visible).ok('The number of keys scanned is displayed on the Browser view');
         await t.expect(browserPage.scanMoreButton.visible).ok('The scan more button is displayed on the Browser view');
         //Verify the controls on the Tree view
         await t.click(browserPage.treeViewButton);
         await t.expect(browserPage.totalKeysNumber.visible).ok('The total number of keys is displayed on the Tree view');
-        await t.expect(browserPage.keysScanned.visible).ok('The number of keys scanned is displayed on the Tree view');
+        await t.expect(browserPage.scannedValue.visible).ok('The number of keys scanned is displayed on the Tree view');
         await t.expect(browserPage.scanMoreButton.visible).ok('The scan more button is displayed on the Tree view');
     });
 test
     .meta({ rte: rte.standalone })
     ('Verify that when user deletes the key he can see the key is removed from the folder, the number of keys is reduced, the percentage is recalculated', async t => {
-        //Add new key for deletion
-        await browserPage.addHashKey(keyName);
-        await t.click(browserPage.treeViewArea);
-        const numberOfKeys = await browserPage.treeViewKeysNumber.textContent;
-        const percentage = await browserPage.treeViewPercentage.textContent;
-        //Delete key
-        await browserPage.searchByKeyName(keyName);
+        //Open the first key in the tree view and remove
+        await t.click(browserPage.treeViewButton);
+        await t.click(browserPage.treeViewDeviceFolder);
+        const numberOfKeys = await browserPage.treeViewDeviceKyesCount.textContent;
+        const keyFolder = await browserPage.treeViewDeviceFolder.nth(2).textContent;
+        await t.click(browserPage.treeViewDeviceFolder.nth(2));
+        await t.click(browserPage.treeViewDeviceFolder.nth(5));
+        await browserPage.deleteKey();
         //Verify the results
-        await t.expect(browserPage.treeViewFolders.textContent).notContains(keyName, 'The key is removed from the folder');
-        await t.expect(browserPage.treeViewKeysNumber.textContent).notEql(numberOfKeys, 'The number of keys is recalculated');
-        await t.expect(browserPage.treeViewPercentage.textContent).notEql(percentage, 'The percentage is recalculated');
+        await t.expect(browserPage.treeViewDeviceFolder.nth(2).textContent).notEql(keyFolder, 'The key folder is removed from the tree view');
+        await t.expect(browserPage.treeViewDeviceKyesCount.textContent).notEql(numberOfKeys, 'The number of keys is recalculated');
+    });
+test
+    .meta({ rte: rte.standalone })
+    ('Verify that user can see that “:” (colon) used as a default separator for namespaces and see the number of keys found per each namespace', async t => {
+        await t.click(browserPage.treeViewButton);
+        //Verify the default separator
+        await t.expect(browserPage.treeViewSeparator.textContent).eql(':', 'The “:” (colon) used as a default separator for namespaces');
+        //Verify the number of keys found
+        await t.expect(browserPage.treeViewKeysNumber.visible).ok('The user can see the number of keys');
     });

Original file line number	Diff line number	Diff line change
`@@ -183,7 +183,7 @@ const KeysHeader = (props: Props) => {`
`183`	`183`	`)`
`184`	`184`
`185`	`185`	`const ViewSwitch = (`
`186`		`- <div className={styles.viewTypeSwitch} data-testid="key-view-type-switcher">`
	`186`	`+ <div className={styles.viewTypeSwitch} data-testid="view-type-switcher">`
`187`	`187`	`{viewTypes.map((view) => (`
`188`	`188`	`<EuiToolTip content={view.tooltipText} position="top" key={view.tooltipText}>`
`189`	`189`	`<EuiButtonIcon`