Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiDataGrid] Move dataGridHeaderCellActionButton data-test-subj hook to button #7427

Merged
merged 4 commits into from
Dec 20, 2023
Merged

[EuiDataGrid] Move dataGridHeaderCellActionButton data-test-subj hook to button #7427

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f1cfb2b
Move header cell action button test subj to actual `<button>` element
cee-chen Dec 20, 2023
a190d90
Update snapshots
cee-chen Dec 20, 2023
9d255ce
Update E2E test to use new hook
cee-chen Dec 20, 2023
5f45f3e
changelog
cee-chen Dec 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions changelogs/upcoming/7427.md
View file
Open in desktop
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
16 changes: 8 additions & 8 deletions src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -50,7 +51,6 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
<span
color="text"
data-euiicon-type="boxesVertical"
data-test-subj="dataGridHeaderCellActionButton-columnA"
/>
</div>
</div>
Expand Down Expand Up @@ -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
Expand All @@ -103,7 +104,6 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
<span
color="text"
data-euiicon-type="boxesVertical"
data-test-subj="dataGridHeaderCellActionButton-columnB"
/>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/datagrid/body/data_grid_body_custom.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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(
Expand All @@ -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');
Expand Down
2 changes: 1 addition & 1 deletion src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -38,7 +39,6 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
<span
color="text"
data-euiicon-type="boxesVertical"
data-test-subj="dataGridHeaderCellActionButton-someColumn"
/>
</div>
</div>
Expand Down
8 changes: 2 additions & 6 deletions src/components/datagrid/body/header/data_grid_header_cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ export const EuiDataGridHeaderCell: FunctionComponent<
}}
aria-describedby={`${sortingAriaId} ${actionsAriaId}`}
ref={actionsButtonRef}
data-test-subj={`dataGridHeaderCellActionButton-${id}`}
>
{cellContent}
<EuiPopover
Expand All @@ -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}
Expand Down
Loading