[7.x] [Index Management] Added data-test-subj values to the index c…

…ontext menu buttons (#114900) (#114959) * [Index Management] Added `data-test-subj` values to the index context menu buttons (#114900) * Fixed test as indices list is different in 7.x * [Index Management] Fixed indices list test for 7.x Indices list are different on 7.x and 8.0, that is why the test was failing in the backport branch * [Index Management] Fixed indices list test for 7.x Updated the snapshot after the test has been fixed for 7.x Co-authored-by: Yulia Čech <[email protected]>
elastic · Oct 21, 2021 · 9e7cc15 · 9e7cc15
1 parent 656964b
commit 9e7cc15
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 42 deletions.
diff --git a/x-pack/plugins/index_management/__jest__/components/__snapshots__/index_table.test.js.snap b/x-pack/plugins/index_management/__jest__/components/__snapshots__/index_table.test.js.snap
diff --git a/x-pack/plugins/index_management/__jest__/components/index_table.test.js b/x-pack/plugins/index_management/__jest__/components/index_table.test.js
@@ -88,7 +88,15 @@ const snapshot = (rendered) => {
   expect(rendered).toMatchSnapshot();
 };
 
-const openMenuAndClickButton = (rendered, rowIndex, buttonIndex) => {
+const names = (rendered) => {
+  return findTestSubject(rendered, 'indexTableIndexNameLink');
+};
+
+const namesText = (rendered) => {
+  return names(rendered).map((button) => button.text());
+};
+
+const openMenuAndClickButton = (rendered, rowIndex, buttonSelector) => {
   // Select a row.
   const checkboxes = findTestSubject(rendered, 'indexTableRowCheckbox');
   checkboxes.at(rowIndex).simulate('change', { target: { checked: true } });
@@ -100,18 +108,19 @@ const openMenuAndClickButton = (rendered, rowIndex, buttonIndex) => {
   rendered.update();
 
   // Click an action in the context menu.
-  const contextMenuButtons = findTestSubject(rendered, 'indexTableContextMenuButton');
-  contextMenuButtons.at(buttonIndex).simulate('click');
+  const contextMenuButton = findTestSubject(rendered, buttonSelector);
+  contextMenuButton.simulate('click');
   rendered.update();
 };
 
-const testEditor = (rendered, buttonIndex, rowIndex = 0) => {
-  openMenuAndClickButton(rendered, rowIndex, buttonIndex);
+const testEditor = (rendered, buttonSelector, rowIndex = 0) => {
+  openMenuAndClickButton(rendered, rowIndex, buttonSelector);
   rendered.update();
   snapshot(findTestSubject(rendered, 'detailPanelTabSelected').text());
 };
 
-const testAction = (rendered, buttonIndex, rowIndex = 0) => {
+const testAction = (rendered, buttonSelector, indexName = 'testy0') => {
+  const rowIndex = namesText(rendered).indexOf(indexName);
   // This is leaking some implementation details about how Redux works. Not sure exactly what's going on
   // but it looks like we're aware of how many Redux actions are dispatched in response to user interaction,
   // so we "time" our assertion based on how many Redux actions we observe. This is brittle because it
@@ -127,19 +136,16 @@ const testAction = (rendered, buttonIndex, rowIndex = 0) => {
     dispatchedActionsCount++;
   });
 
-  openMenuAndClickButton(rendered, rowIndex, buttonIndex);
+  openMenuAndClickButton(rendered, rowIndex, buttonSelector);
   // take snapshot of initial state.
   snapshot(status(rendered, rowIndex));
 };
 
-const names = (rendered) => {
-  return findTestSubject(rendered, 'indexTableIndexNameLink');
-};
-
-const namesText = (rendered) => {
-  return names(rendered).map((button) => button.text());
+const getActionMenuButtons = (rendered) => {
+  return findTestSubject(rendered, 'indexContextMenu')
+    .find('button')
+    .map((span) => span.text());
 };
-
 describe('index table', () => {
   beforeEach(() => {
     // Mock initialization of services
@@ -232,7 +238,7 @@ describe('index table', () => {
     await runAllPromises();
     rendered.update();
 
-    let button = findTestSubject(rendered, 'indexTableContextMenuButton');
+    let button = findTestSubject(rendered, 'indexActionsContextMenuButton');
     expect(button.length).toEqual(0);
 
     const checkboxes = findTestSubject(rendered, 'indexTableRowCheckbox');
@@ -247,7 +253,7 @@ describe('index table', () => {
     await runAllPromises();
     rendered.update();
 
-    let button = findTestSubject(rendered, 'indexTableContextMenuButton');
+    let button = findTestSubject(rendered, 'indexActionsContextMenuButton');
     expect(button.length).toEqual(0);
 
     const checkboxes = findTestSubject(rendered, 'indexTableRowCheckbox');
@@ -353,7 +359,7 @@ describe('index table', () => {
     const actionButton = findTestSubject(rendered, 'indexActionsContextMenuButton');
     actionButton.simulate('click');
     rendered.update();
-    snapshot(findTestSubject(rendered, 'indexTableContextMenuButton').map((span) => span.text()));
+    snapshot(getActionMenuButtons(rendered));
   });
 
   test('should show the right context menu options when one index is selected and closed', async () => {
@@ -367,7 +373,7 @@ describe('index table', () => {
     const actionButton = findTestSubject(rendered, 'indexActionsContextMenuButton');
     actionButton.simulate('click');
     rendered.update();
-    snapshot(findTestSubject(rendered, 'indexTableContextMenuButton').map((span) => span.text()));
+    snapshot(getActionMenuButtons(rendered));
   });
 
   test('should show the right context menu options when one open and one closed index is selected', async () => {
@@ -382,7 +388,7 @@ describe('index table', () => {
     const actionButton = findTestSubject(rendered, 'indexActionsContextMenuButton');
     actionButton.simulate('click');
     rendered.update();
-    snapshot(findTestSubject(rendered, 'indexTableContextMenuButton').map((span) => span.text()));
+    snapshot(getActionMenuButtons(rendered));
   });
 
   test('should show the right context menu options when more than one open index is selected', async () => {
@@ -397,7 +403,7 @@ describe('index table', () => {
     const actionButton = findTestSubject(rendered, 'indexActionsContextMenuButton');
     actionButton.simulate('click');
     rendered.update();
-    snapshot(findTestSubject(rendered, 'indexTableContextMenuButton').map((span) => span.text()));
+    snapshot(getActionMenuButtons(rendered));
   });
 
   test('should show the right context menu options when more than one closed index is selected', async () => {
@@ -412,28 +418,28 @@ describe('index table', () => {
     const actionButton = findTestSubject(rendered, 'indexActionsContextMenuButton');
     actionButton.simulate('click');
     rendered.update();
-    snapshot(findTestSubject(rendered, 'indexTableContextMenuButton').map((span) => span.text()));
+    snapshot(getActionMenuButtons(rendered));
   });
 
   test('flush button works from context menu', async () => {
     const rendered = mountWithIntl(component);
     await runAllPromises();
     rendered.update();
-    testAction(rendered, 8);
+    testAction(rendered, 'flushIndexMenuButton');
   });
 
   test('clear cache button works from context menu', async () => {
     const rendered = mountWithIntl(component);
     await runAllPromises();
     rendered.update();
-    testAction(rendered, 7);
+    testAction(rendered, 'clearCacheIndexMenuButton');
   });
 
   test('refresh button works from context menu', async () => {
     const rendered = mountWithIntl(component);
     await runAllPromises();
     rendered.update();
-    testAction(rendered, 6);
+    testAction(rendered, 'refreshIndexMenuButton');
   });
 
   test('force merge button works from context menu', async () => {
@@ -442,7 +448,7 @@ describe('index table', () => {
     rendered.update();
 
     const rowIndex = 0;
-    openMenuAndClickButton(rendered, rowIndex, 5);
+    openMenuAndClickButton(rendered, rowIndex, 'forcemergeIndexMenuButton');
     snapshot(status(rendered, rowIndex));
     expect(rendered.find('.euiModal').length).toBe(1);
 
@@ -478,55 +484,54 @@ describe('index table', () => {
       JSON.stringify(modifiedIndices),
     ]);
 
-    testAction(rendered, 4);
+    testAction(rendered, 'closeIndexMenuButton');
   });
 
   test('open index button works from context menu', async () => {
-    const rendered = mountWithIntl(component);
-    await runAllPromises();
-    rendered.update();
-
     const modifiedIndices = indices.map((index) => {
       return {
         ...index,
-        status: index.name === 'testy1' ? 'open' : index.status,
+        status: index.name === 'testy1' ? 'closed' : index.status,
       };
     });
 
-    server.respondWith(`${API_BASE_PATH}/indices/reload`, [
+    server.respondWith(`${API_BASE_PATH}/indices`, [
       200,
       { 'Content-Type': 'application/json' },
       JSON.stringify(modifiedIndices),
     ]);
 
-    testAction(rendered, 3, 1);
+    const rendered = mountWithIntl(component);
+    await runAllPromises();
+    rendered.update();
+    testAction(rendered, 'openIndexMenuButton', 'testy1');
   });
 
   test('show settings button works from context menu', async () => {
     const rendered = mountWithIntl(component);
     await runAllPromises();
     rendered.update();
-    testEditor(rendered, 0);
+    testEditor(rendered, 'showSettingsIndexMenuButton');
   });
 
   test('show mappings button works from context menu', async () => {
     const rendered = mountWithIntl(component);
     await runAllPromises();
     rendered.update();
-    testEditor(rendered, 1);
+    testEditor(rendered, 'showMappingsIndexMenuButton');
   });
 
   test('show stats button works from context menu', async () => {
     const rendered = mountWithIntl(component);
     await runAllPromises();
     rendered.update();
-    testEditor(rendered, 2);
+    testEditor(rendered, 'showStatsIndexMenuButton');
   });
 
   test('edit index button works from context menu', async () => {
     const rendered = mountWithIntl(component);
     await runAllPromises();
     rendered.update();
-    testEditor(rendered, 3);
+    testEditor(rendered, 'editIndexMenuButton');
   });
 });
diff --git a/...ication/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js b/...ication/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js
@@ -75,6 +75,7 @@ export class IndexActionsContextMenu extends Component {
     const items = [];
     if (!detailPanel && selectedIndexCount === 1) {
       items.push({
+        'data-test-subj': 'showSettingsIndexMenuButton',
         name: i18n.translate('xpack.idxMgmt.indexActionsMenu.showIndexSettingsLabel', {
           defaultMessage:
             'Show {selectedIndexCount, plural, one {index} other {indices} } settings',
@@ -85,6 +86,7 @@ export class IndexActionsContextMenu extends Component {
         },
       });
       items.push({
+        'data-test-subj': 'showMappingsIndexMenuButton',
         name: i18n.translate('xpack.idxMgmt.indexActionsMenu.showIndexMappingLabel', {
           defaultMessage: 'Show {selectedIndexCount, plural, one {index} other {indices} } mapping',
           values: { selectedIndexCount },
@@ -95,6 +97,7 @@ export class IndexActionsContextMenu extends Component {
       });
       if (allOpen) {
         items.push({
+          'data-test-subj': 'showStatsIndexMenuButton',
           name: i18n.translate('xpack.idxMgmt.indexActionsMenu.showIndexStatsLabel', {
             defaultMessage: 'Show {selectedIndexCount, plural, one {index} other {indices} } stats',
             values: { selectedIndexCount },
@@ -105,6 +108,7 @@ export class IndexActionsContextMenu extends Component {
         });
       }
       items.push({
+        'data-test-subj': 'editIndexMenuButton',
         name: i18n.translate('xpack.idxMgmt.indexActionsMenu.editIndexSettingsLabel', {
           defaultMessage:
             'Edit {selectedIndexCount, plural, one {index} other {indices} } settings',
@@ -117,6 +121,7 @@ export class IndexActionsContextMenu extends Component {
     }
     if (allOpen) {
       items.push({
+        'data-test-subj': 'closeIndexMenuButton',
         name: i18n.translate('xpack.idxMgmt.indexActionsMenu.closeIndexLabel', {
           defaultMessage: 'Close {selectedIndexCount, plural, one {index} other {indices} }',
           values: { selectedIndexCount },
@@ -131,6 +136,7 @@ export class IndexActionsContextMenu extends Component {
         },
       });
       items.push({
+        'data-test-subj': 'forcemergeIndexMenuButton',
         name: i18n.translate('xpack.idxMgmt.indexActionsMenu.forceMergeIndexLabel', {
           defaultMessage: 'Force merge {selectedIndexCount, plural, one {index} other {indices} }',
           values: { selectedIndexCount },
@@ -141,6 +147,7 @@ export class IndexActionsContextMenu extends Component {
         },
       });
       items.push({
+        'data-test-subj': 'refreshIndexMenuButton',
         name: i18n.translate('xpack.idxMgmt.indexActionsMenu.refreshIndexLabel', {
           defaultMessage: 'Refresh {selectedIndexCount, plural, one {index} other {indices} }',
           values: { selectedIndexCount },
@@ -150,6 +157,7 @@ export class IndexActionsContextMenu extends Component {
         },
       });
       items.push({
+        'data-test-subj': 'clearCacheIndexMenuButton',
         name: i18n.translate('xpack.idxMgmt.indexActionsMenu.clearIndexCacheLabel', {
           defaultMessage: 'Clear {selectedIndexCount, plural, one {index} other {indices} } cache',
           values: { selectedIndexCount },
@@ -159,6 +167,7 @@ export class IndexActionsContextMenu extends Component {
         },
       });
       items.push({
+        'data-test-subj': 'flushIndexMenuButton',
         name: i18n.translate('xpack.idxMgmt.indexActionsMenu.flushIndexLabel', {
           defaultMessage: 'Flush {selectedIndexCount, plural, one {index} other {indices} }',
           values: { selectedIndexCount },
@@ -191,6 +200,7 @@ export class IndexActionsContextMenu extends Component {
       }
     } else {
       items.push({
+        'data-test-subj': 'openIndexMenuButton',
         name: i18n.translate('xpack.idxMgmt.indexActionsMenu.openIndexLabel', {
           defaultMessage: 'Open {selectedIndexCount, plural, one {index} other {indices} }',
           values: { selectedIndexCount },
@@ -239,9 +249,6 @@ export class IndexActionsContextMenu extends Component {
         }
       }
     });
-    items.forEach((item) => {
-      item['data-test-subj'] = 'indexTableContextMenuButton';
-    });
     const panelTree = {
       id: 0,
       title: i18n.translate('xpack.idxMgmt.indexActionsMenu.panelTitle', {
@@ -732,7 +739,11 @@ export class IndexActionsContextMenu extends Component {
                 anchorPosition={anchorPosition}
                 repositionOnScroll
               >
-                <EuiContextMenu initialPanelId={0} panels={panels} />
+                <EuiContextMenu
+                  initialPanelId={0}
+                  panels={panels}
+                  data-test-subj="indexContextMenu"
+                />
               </EuiPopover>
             </div>
           );