[EuiDataGrid] Move dataGridHeaderCellActionButton data-test-subj ho…

…ok to button (#7427)
elastic · Dec 20, 2023 · 5dd4162 · 5dd4162
1 parent d2c55e7
commit 5dd4162
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 22 deletions.
diff --git a/changelogs/upcoming/7427.md b/changelogs/upcoming/7427.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Moved `EuiDataGrid`'s header cells' `dataGridHeaderCellActionButton` test subject attribute from to the clickable button, for easier E2E testing
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -614,6 +614,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                   aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
                   class="euiDataGridHeaderCell__button"
                   data-euigrid-tab-managed="true"
+                  data-test-subj="dataGridHeaderCellActionButton-A"
                   tabindex="-1"
                 >
                   <div
@@ -631,7 +632,6 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                       <span
                         color="text"
                         data-euiicon-type="boxesVertical"
-                        data-test-subj="dataGridHeaderCellActionButton-A"
                       />
                     </div>
                   </div>
@@ -667,6 +667,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                   aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
                   class="euiDataGridHeaderCell__button"
                   data-euigrid-tab-managed="true"
+                  data-test-subj="dataGridHeaderCellActionButton-B"
                   tabindex="-1"
                 >
                   <div
@@ -684,7 +685,6 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
                       <span
                         color="text"
                         data-euiicon-type="boxesVertical"
-                        data-test-subj="dataGridHeaderCellActionButton-B"
                       />
                     </div>
                   </div>
@@ -1060,6 +1060,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                   aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
                   class="euiDataGridHeaderCell__button"
                   data-euigrid-tab-managed="true"
+                  data-test-subj="dataGridHeaderCellActionButton-A"
                   tabindex="-1"
                 >
                   <div
@@ -1077,7 +1078,6 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                       <span
                         color="text"
                         data-euiicon-type="boxesVertical"
-                        data-test-subj="dataGridHeaderCellActionButton-A"
                       />
                     </div>
                   </div>
@@ -1113,6 +1113,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                   aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
                   class="euiDataGridHeaderCell__button"
                   data-euigrid-tab-managed="true"
+                  data-test-subj="dataGridHeaderCellActionButton-B"
                   tabindex="-1"
                 >
                   <div
@@ -1130,7 +1131,6 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                       <span
                         color="text"
                         data-euiicon-type="boxesVertical"
-                        data-test-subj="dataGridHeaderCellActionButton-B"
                       />
                     </div>
                   </div>
@@ -1743,6 +1743,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                   aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
                   class="euiDataGridHeaderCell__button"
                   data-euigrid-tab-managed="true"
+                  data-test-subj="dataGridHeaderCellActionButton-A"
                   tabindex="-1"
                 >
                   <div
@@ -1760,7 +1761,6 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                       <span
                         color="text"
                         data-euiicon-type="boxesVertical"
-                        data-test-subj="dataGridHeaderCellActionButton-A"
                       />
                     </div>
                   </div>
@@ -1796,6 +1796,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                   aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
                   class="euiDataGridHeaderCell__button"
                   data-euigrid-tab-managed="true"
+                  data-test-subj="dataGridHeaderCellActionButton-B"
                   tabindex="-1"
                 >
                   <div
@@ -1815,7 +1816,6 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
                       <span
                         color="text"
                         data-euiicon-type="boxesVertical"
-                        data-test-subj="dataGridHeaderCellActionButton-B"
                       />
                     </div>
                   </div>
@@ -2169,6 +2169,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                   aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
                   class="euiDataGridHeaderCell__button"
                   data-euigrid-tab-managed="true"
+                  data-test-subj="dataGridHeaderCellActionButton-A"
                   tabindex="-1"
                 >
                   <div
@@ -2186,7 +2187,6 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                       <span
                         color="text"
                         data-euiicon-type="boxesVertical"
-                        data-test-subj="dataGridHeaderCellActionButton-A"
                       />
                     </div>
                   </div>
@@ -2222,6 +2222,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                   aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
                   class="euiDataGridHeaderCell__button"
                   data-euigrid-tab-managed="true"
+                  data-test-subj="dataGridHeaderCellActionButton-B"
                   tabindex="-1"
                 >
                   <div
@@ -2239,7 +2240,6 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
                       <span
                         color="text"
                         data-euiicon-type="boxesVertical"
-                        data-test-subj="dataGridHeaderCellActionButton-B"
                       />
                     </div>
                   </div>

diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
@@ -29,6 +29,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
         aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
         class="euiDataGridHeaderCell__button"
         data-euigrid-tab-managed="true"
+        data-test-subj="dataGridHeaderCellActionButton-columnA"
         tabindex="-1"
       >
         <div
@@ -46,7 +47,6 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
             <span
               color="text"
               data-euiicon-type="boxesVertical"
-              data-test-subj="dataGridHeaderCellActionButton-columnA"
             />
           </div>
         </div>
@@ -82,6 +82,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
         aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
         class="euiDataGridHeaderCell__button"
         data-euigrid-tab-managed="true"
+        data-test-subj="dataGridHeaderCellActionButton-columnB"
         tabindex="-1"
       >
         <div
@@ -99,7 +100,6 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
             <span
               color="text"
               data-euiicon-type="boxesVertical"
-              data-test-subj="dataGridHeaderCellActionButton-columnB"
             />
           </div>
         </div>

diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
@@ -33,6 +33,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
           aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
           class="euiDataGridHeaderCell__button"
           data-euigrid-tab-managed="true"
+          data-test-subj="dataGridHeaderCellActionButton-columnA"
           tabindex="-1"
         >
           <div
@@ -50,7 +51,6 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
               <span
                 color="text"
                 data-euiicon-type="boxesVertical"
-                data-test-subj="dataGridHeaderCellActionButton-columnA"
               />
             </div>
           </div>
@@ -86,6 +86,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
           aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
           class="euiDataGridHeaderCell__button"
           data-euigrid-tab-managed="true"
+          data-test-subj="dataGridHeaderCellActionButton-columnB"
           tabindex="-1"
         >
           <div
@@ -103,7 +104,6 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
               <span
                 color="text"
                 data-euiicon-type="boxesVertical"
-                data-test-subj="dataGridHeaderCellActionButton-columnB"
               />
             </div>
           </div>

diff --git a/src/components/datagrid/body/data_grid_body_custom.spec.tsx b/src/components/datagrid/body/data_grid_body_custom.spec.tsx
@@ -135,7 +135,7 @@ describe('EuiDataGridBodyCustomRender', () => {
       '[data-gridcell-row-index="0"][data-gridcell-column-index="1"]'
     ).contains('B,0');
 
-    cy.get('[data-test-subj="dataGridHeaderCell-A"] button').click();
+    cy.get('[data-test-subj="dataGridHeaderCellActionButton-A"]').click();
     cy.contains('Move right').click();
 
     cy.get(
@@ -145,7 +145,7 @@ describe('EuiDataGridBodyCustomRender', () => {
       '[data-gridcell-row-index="0"][data-gridcell-column-index="1"]'
     ).contains('A,0');
 
-    cy.get('[data-test-subj="dataGridHeaderCell-B"] button').click();
+    cy.get('[data-test-subj="dataGridHeaderCellActionButton-B"]').click();
     cy.contains('Hide column').should('be.visible').click();
 
     cy.get(
@@ -160,7 +160,7 @@ describe('EuiDataGridBodyCustomRender', () => {
     cy.realMount(<DataGridTest />);
     cy.get('[role="gridcell"]').first().contains('A,0');
 
-    cy.get('[data-test-subj="dataGridHeaderCell-A"] button').click();
+    cy.get('[data-test-subj="dataGridHeaderCellActionButton-A"]').click();
     cy.contains('Sort High-Low').click();
 
     cy.get('[role="gridcell"]').first().contains('A,99');

diff --git a/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap b/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
     aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
     class="euiDataGridHeaderCell__button"
     data-euigrid-tab-managed="true"
+    data-test-subj="dataGridHeaderCellActionButton-someColumn"
     tabindex="-1"
   >
     <div
@@ -38,7 +39,6 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
         <span
           color="text"
           data-euiicon-type="boxesVertical"
-          data-test-subj="dataGridHeaderCellActionButton-someColumn"
         />
       </div>
     </div>

diff --git a/src/components/datagrid/body/header/data_grid_header_cell.tsx b/src/components/datagrid/body/header/data_grid_header_cell.tsx
@@ -145,6 +145,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<
             }}
             aria-describedby={`${sortingAriaId} ${actionsAriaId}`}
             ref={actionsButtonRef}
+            data-test-subj={`dataGridHeaderCellActionButton-${id}`}
           >
             {cellContent}
             <EuiPopover
@@ -166,12 +167,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<
               }}
               button={
                 <div className="euiDataGridHeaderCell__icon">
-                  <EuiIcon
-                    type="boxesVertical"
-                    size="s"
-                    color="text"
-                    data-test-subj={`dataGridHeaderCellActionButton-${id}`}
-                  />
+                  <EuiIcon type="boxesVertical" size="s" color="text" />
                 </div>
               }
               isOpen={isPopoverOpen}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Bug fixes

		- Moved `EuiDataGrid`'s header cells' `dataGridHeaderCellActionButton` test subject attribute from to the clickable button, for easier E2E testing