e2e-show consumer groups tests

Author: tanyatrayanava

redisinsight/ui/src/components/virtual-table/VirtualTable.tsx

@@ -188,6 +188,7 @@ const VirtualTable = (props: IProps) => {
                 styles.headerButton,
                 isColumnSorted ? styles.headerButtonSorted : null,
               )}
+              data-testid="header-sorting-button"
             >
               <EuiIcon
                 style={{ marginLeft: '4px' }}

redisinsight/ui/src/pages/browser/components/stream-details/groups-view/GroupsViewWrapper.tsx

@@ -145,7 +145,7 @@ const GroupsViewWrapper = (props: Props) => {
         const tooltipContent = formatLongName(name)
         return (
           <EuiText color="subdued" size="s" style={{ maxWidth: '100%' }}>
-            <div style={{ display: 'flex' }} className="truncateText" data-testid={`stream-group-${name}`}>
+            <div style={{ display: 'flex' }} className="truncateText" data-testid={`stream-group-name-${name}`}>
               <EuiToolTip
                 className={styles.tooltipName}
                 anchorClassName="truncateText"
@@ -217,12 +217,12 @@ const GroupsViewWrapper = (props: Props) => {
         return (
           <div>
             <EuiText color="subdued" size="s" style={{ maxWidth: '100%' }}>
-              <div className="truncateText streamItem" style={{ display: 'flex' }} data-testid={`stream-group-${id}-date`}>
+              <div className="truncateText streamItem" style={{ display: 'flex' }} data-testid={`stream-group-date-${id}`}>
                 {getFormatTime(timestamp)}
               </div>
             </EuiText>
             <EuiText size="s" style={{ maxWidth: '100%' }}>
-              <div className="streamItemId" data-testid={`stream-group-${id}`}>
+              <div className="streamItemId" data-testid={`stream-group-id-${id}`}>
                 {id}
               </div>
             </EuiText>

tests/e2e/pageObjects/browser-page.ts

@@ -187,7 +187,8 @@ export class BrowserPage {
     confirmationMessagePopover = Selector('div.euiPopover__panel .euiText ');
     streamRangeLeftTimestamp = Selector('[data-testid=range-left-timestamp]');
     streamRangeRightTimestamp = Selector('[data-testid=range-right-timestamp]');
-    streamGroupId = Selector('.streamItemId[data-testid^=stream-group-]');
+    streamGroupId = Selector('.streamItemId[data-testid^=stream-group-id]');
+    streamGroupName = Selector('[data-testid^=stream-group-name]');
     entryIdInfoIcon = Selector('[data-testid=entry-id-info-icon]');
     errorMessage = Selector('[data-test-subj=toast-error]');
     entryIdError = Selector('[data-testid=id-error]');

tests/e2e/tests/critical-path/browser/consumer-group.e2e.ts

@@ -11,6 +11,7 @@ const browserPage = new BrowserPage();
 const chance = new Chance();
 
 let keyName = chance.word({ length: 20 });
+let consumerGroupName = chance.word({ length: 20 });
 const keyField = chance.word({ length: 20 });
 const keyValue = chance.word({ length: 20 });
 
@@ -39,7 +40,7 @@ test('Verify that user can create a new Consumer Group in the current Stream', a
         'fetches the entire stream from the beginning.'
     ];
     keyName = chance.word({ length: 20 });
-    const consumerGroupName = `qwerty123456${chance.word({ length: 20 })}!@#$%^&*()_+=`;
+    consumerGroupName = `qwerty123456${chance.word({ length: 20 })}!@#$%^&*()_+=`;
     // Add New Stream Key
     await browserPage.addStreamKey(keyName, keyField, keyValue);
     await t.click(browserPage.fullScreenModeButton);
@@ -56,7 +57,7 @@ test('Verify that user can create a new Consumer Group in the current Stream', a
 });
 test('Verify that user can input the 0, $ and Valid Entry ID in the ID field', async t => {
     keyName = chance.word({ length: 20 });
-    const consumerGroupName = chance.word({ length: 20 });
+    consumerGroupName = chance.word({ length: 20 });
     const entryIds = [
         '0',
         '$',
@@ -72,3 +73,22 @@ test('Verify that user can input the 0, $ and Valid Entry ID in the ID field', a
         await t.expect(browserPage.streamGroupsContainer.textContent).contains(`${consumerGroupName}${entryId}`, 'The new Consumer Group is added');
     }
 });
+test('Verify that user can see the Consumer group columns (Group Name, Consumers, Pending, Last Delivered ID)', async t => {
+    keyName = chance.word({ length: 20 });
+    consumerGroupName = chance.word({ length: 20 });
+    const groupColumns = [
+        'Group Name',
+        'Consumers',
+        'Pending',
+        'Last Delivered ID'
+    ];
+    // Add New Stream Key
+    await browserPage.addStreamKey(keyName, keyField, keyValue);
+    await t.click(browserPage.fullScreenModeButton);
+    // Open Stream consumer groups and add group with different IDs
+    await t.click(browserPage.streamTabGroups);
+    await browserPage.createConsumerGroup(consumerGroupName);
+    for(let i = 0; i < groupColumns.length; i++){
+        await t.expect(browserPage.scoreButton.nth(i).textContent).eql(groupColumns[i], `The ${i} Consumer group column name`);
+    }
+});

tests/e2e/tests/regression/browser/consumer-group.e2e.ts

@@ -64,3 +64,37 @@ test('Verify that when user enter invalid format ID the error message appears',
         await t.expect(browserPage.entryIdError.textContent).eql(error, 'The invalid Id error message');
     }
 });
+test('Verify that user can see the message when there are no Consumer Groups', async t => {
+    keyName = chance.word({ length: 20 });
+    const message = 'Your Key has no Consumer Groups available.';
+    // Add New Stream Key
+    await browserPage.addStreamKey(keyName, keyField, keyValue);
+    // Open Stream consumer groups and check message
+    await t.click(browserPage.streamTabGroups);
+    await t.expect(browserPage.streamGroupsContainer.textContent).contains(message, 'The Consumer Groups message');
+});
+test('Verify that user can sort Consumer Group column: A>Z / Z>A(A>Z is default table sorting)', async t => {
+    keyName = chance.word({ length: 20 });
+    const consumerGroupNames = [
+        'agroup',
+        'bgroup',
+        'zgroup'
+    ];
+    // Add New Stream Key
+    await browserPage.addStreamKey(keyName, keyField, keyValue);
+    // Open Stream consumer groups and add few groups
+    await t.click(browserPage.streamTabGroups);
+    for(const group of consumerGroupNames){
+        await browserPage.createConsumerGroup(group);
+    }
+    //Verify default sorting
+    const groupsCount = await browserPage.streamGroupName.count;
+    for(let i = 0; i < groupsCount; i++){
+        await t.expect(browserPage.streamGroupName.nth(i).textContent).contains(consumerGroupNames[i], 'The Consumer Groups default sorting');
+    }
+    //Verify the Z>A sorting
+    await t.click(browserPage.scoreButton.nth(0));
+    for(let i = 0; i < groupsCount; i++){
+        await t.expect(browserPage.streamGroupName.nth(i).textContent).contains(consumerGroupNames[groupsCount - 1 - i], 'The Consumer Groups Z>A sorting');
+    }
+});