IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Refactor dataviz aria-label e2e selectors to data-testid (#78938)

Browse Source 
Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
This commit is contained in:
Khushi Jain 2023-12-17 05:40:04 +05:30 committed by GitHub
parent dba690d653
commit 54dc5846c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 30 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
.betterer.results
View File

@ -605,9 +605,6 @@ exports[`better eslint`] = {
"packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx:5381": [
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
],
"packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@ -794,10 +791,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx:5381": [
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"]
],
"packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx:5381": [
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
],
"packages/grafana-ui/src/components/VizLegend/types.ts:5381": [
@ -6382,12 +6375,11 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "1"]
],
"public/app/plugins/panel/piechart/PieChart.tsx:5381": [
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"],
[0, 0, 0, "Styles should be written using objects.", "5"]
[0, 0, 0, "Styles should be written using objects.", "4"]
],
"public/app/plugins/panel/piechart/migrations.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@ -6543,7 +6535,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "11"]
],
"public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx:5381": [
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"],
@ -6553,8 +6545,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"],
[0, 0, 0, "Styles should be written using objects.", "10"],
[0, 0, 0, "Styles should be written using objects.", "11"]
[0, 0, 0, "Styles should be written using objects.", "10"]
],
"public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],

2
e2e/various-suite/pie-chart.spec.ts
View File

@ -11,7 +11,7 @@ describe('Pie Chart Panel', () => {
// open Panel Tests - Pie Chart
e2e.flows.openDashboard({ uid: 'lVE-2YFMz' });
cy.get(`[data-panelid=11] [aria-label^="${selectors.components.Panels.Visualization.PieChart.svgSlice}"]`).should(
cy.get(`[data-panelid=11] [data-testid^="${selectors.components.Panels.Visualization.PieChart.svgSlice}"]`).should(
'have.length',
5
);

12
packages/grafana-e2e-selectors/src/selectors/components.ts
View File

@ -64,7 +64,7 @@ export const Components = {
exemplarsAddButton: 'Add exemplar config button',
internalLinkSwitch: 'Internal link switch',
},
exemplarMarker: 'Exemplar marker',
exemplarMarker: 'data-testid Exemplar marker',
},
},
Menu: {
@ -113,7 +113,7 @@ export const Components = {
valueV2: 'data-testid Bar gauge value',
},
PieChart: {
svgSlice: 'Pie Chart Slice',
svgSlice: 'data testid Pie Chart Slice',
},
Text: {
container: () => '.markdown-html',
@ -126,7 +126,7 @@ export const Components = {
},
},
VizLegend: {
seriesName: (name: string) => `VizLegend series ${name}`,
seriesName: (name: string) => `data-testid VizLegend series ${name}`,
},
Drawer: {
General: {
@ -353,8 +353,8 @@ export const Components = {
matchOperatorSelect: 'Select match operator',
},
ValuePicker: {
button: (name: string) => `Value picker button ${name}`,
select: (name: string) => `Value picker select ${name}`,
button: (name: string) => `data-testid Value picker button ${name}`,
select: (name: string) => `data-testid Value picker select ${name}`,
},
Search: {
/**
@ -392,7 +392,7 @@ export const Components = {
buttonV2: (name: string) => `data-testid Call to action button ${name}`,
},
DataLinksContextMenu: {
singleLink: 'Data link',
singleLink: 'data-testid Data link',
},
CodeEditor: {
container: 'data-testid Code editor container',

2
packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.test.tsx
View File

@ -54,6 +54,6 @@ describe('DataLinksContextMenu', () => {
);
expect(screen.getByLabelText(fakeAriaLabel)).toBeInTheDocument();
expect(screen.getByLabelText(selectors.components.DataLinksContextMenu.singleLink)).toBeInTheDocument();
expect(screen.getByTestId(selectors.components.DataLinksContextMenu.singleLink)).toBeInTheDocument();
});
});

2
packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx
View File

@ -63,7 +63,7 @@ export const DataLinksContextMenu = ({ children, links, style }: DataLinksContex
target={linkModel.target}
title={linkModel.title}
style={{ ...style, overflow: 'hidden', display: 'flex' }}
aria-label={selectors.components.DataLinksContextMenu.singleLink}
data-testid={selectors.components.DataLinksContextMenu.singleLink}
>
{children({})}
</a>

2
packages/grafana-ui/src/components/ValuePicker/ValuePicker.tsx
View File

@ -65,7 +65,7 @@ export function ValuePicker<T>({
variant={variant}
fill={fill}
fullWidth={isFullWidth}
aria-label={selectors.components.ValuePicker.button(ariaLabel ?? label)}
data-testid={selectors.components.ValuePicker.button(ariaLabel ?? label)}
>
{label}
</Button>

2
packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx
View File

@ -68,7 +68,7 @@ export const VizLegendListItem = <T = unknown,>({
return (
<div
className={cx(styles.itemWrapper, item.disabled && styles.itemDisabled, className)}
aria-label={selectors.components.VizLegend.seriesName(item.label)}
data-testid={selectors.components.VizLegend.seriesName(item.label)}
>
<VizLegendSeriesIcon seriesName={item.label} color={item.color} gradient={item.gradient} readonly={readonly} />
<button

2
public/app/core/components/AppChrome/OrganizationSwitcher/OrganizationSwitcher.test.tsx
View File

@ -97,7 +97,7 @@ describe('OrganisationSwitcher', () => {
},
});
expect(screen.getByRole('button', { name: /change organization/i })).toBeInTheDocument();
expect(screen.getByTestId('data-testid Value picker button Change organization')).toBeInTheDocument();
});
it('should not render and not try to get user organizations if not signed in', () => {

2
public/app/core/components/Layers/AddLayerButton.test.tsx
View File

@ -10,7 +10,7 @@ describe('AddLayerButton', () => {
it('renders AddLayerButton', () => {
renderScenario({});
const button = screen.getByLabelText(selectors.components.ValuePicker.button(testLabel));
const button = screen.getByTestId(selectors.components.ValuePicker.button(testLabel));
expect(button).toBeInTheDocument();
});

8
public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.test.tsx
View File

@ -74,12 +74,12 @@ describe('ValueMappingsEditorModal', () => {
});
});
describe('When adding and updating value mapp', () => {
describe('When adding and updating value map', () => {
it('should be 3', async () => {
const onChangeSpy = jest.fn();
setup(onChangeSpy);
await userEvent.click(screen.getByLabelText(selectors.components.ValuePicker.button('Add a new mapping')));
await userEvent.click(screen.getByTestId(selectors.components.ValuePicker.button('Add a new mapping')));
const selectComponent = await screen.findByLabelText(
selectors.components.ValuePicker.select('Add a new mapping')
);
@ -129,7 +129,7 @@ describe('ValueMappingsEditorModal', () => {
setup(onChangeSpy, { value: [] });
await userEvent.click(screen.getAllByTestId('remove-value-mapping')[0]);
await userEvent.click(screen.getByLabelText(selectors.components.ValuePicker.button('Add a new mapping')));
await userEvent.click(screen.getByTestId(selectors.components.ValuePicker.button('Add a new mapping')));
const selectComponent = await screen.findByLabelText(
selectors.components.ValuePicker.select('Add a new mapping')
);
@ -168,7 +168,7 @@ describe('ValueMappingsEditorModal', () => {
setup(onChangeSpy, { value: [] });
await userEvent.click(screen.getAllByTestId('remove-value-mapping')[0]);
await userEvent.click(screen.getByLabelText(selectors.components.ValuePicker.button('Add a new mapping')));
await userEvent.click(screen.getByTestId(selectors.components.ValuePicker.button('Add a new mapping')));
const selectComponent = await screen.findByLabelText(
selectors.components.ValuePicker.select('Add a new mapping')
);

4
public/app/plugins/panel/nodeGraph/Legend.test.tsx
View File

@ -21,10 +21,10 @@ describe('Legend', () => {
},
] as NodeDatum[];
render(<Legend nodes={nodes} onSort={(sort) => {}} sortable={false} />);
const items = screen.getAllByLabelText(/VizLegend series/);
const items = screen.getAllByTestId(/VizLegend series/);
expect(items.length).toBe(3);
const item = screen.getByLabelText(/VizLegend series error/);
const item = screen.getByTestId(/VizLegend series error/);
expect((item.firstChild as HTMLDivElement).style.getPropertyValue('background')).toBe('rgb(242, 73, 92)');
});
});

2
public/app/plugins/panel/piechart/PieChart.tsx
View File

@ -249,7 +249,7 @@ function PieSlice({ arc, pie, highlightState, openMenu, fill, tooltip, tooltipOp
onMouseMove={tooltipOptions.mode !== 'none' ? onMouseMoveOverArc : undefined}
onMouseOut={onMouseOut}
onClick={openMenu}
aria-label={selectors.components.Panels.Visualization.PieChart.svgSlice}
data-testid={selectors.components.Panels.Visualization.PieChart.svgSlice}
>
<path d={pie.path({ ...arc })!} fill={fill} stroke={theme.colors.background.primary} strokeWidth={1} />
</g>

10
public/app/plugins/panel/piechart/PieChartPanel.test.tsx
View File

@ -60,7 +60,7 @@ describe('PieChartPanel', () => {
it('should not filter out any slices or legend items', () => {
setup({ data: { series: seriesWithNoOverrides } });
const slices = screen.queryAllByLabelText('Pie Chart Slice');
const slices = screen.queryAllByTestId('data testid Pie Chart Slice');
expect(slices.length).toBe(3);
expect(screen.queryByText(/Chrome/i)).toBeInTheDocument();
expect(screen.queryByText(/Firefox/i)).toBeInTheDocument();
@ -92,7 +92,7 @@ describe('PieChartPanel', () => {
it('should filter out the Firefox pie chart slice but not the legend', () => {
setup({ data: { series: seriesWithFirefoxOverride } });
const slices = screen.queryAllByLabelText('Pie Chart Slice');
const slices = screen.queryAllByTestId('data testid Pie Chart Slice');
expect(slices.length).toBe(2);
expect(screen.queryByText(/Firefox/i)).toBeInTheDocument();
});
@ -122,13 +122,13 @@ describe('PieChartPanel', () => {
it('should filter out the Firefox series with value 190 from the multi tooltip', async () => {
setup({ data: { series: seriesWithFirefoxOverride } });
await userEvent.hover(screen.getAllByLabelText('Pie Chart Slice')[0]);
await userEvent.hover(screen.getAllByTestId('data testid Pie Chart Slice')[0]);
expect(screen.queryByText(/600/i)).toBeInTheDocument();
expect(screen.queryByText(/190/i)).not.toBeInTheDocument();
expect(screen.queryByText(/210/i)).toBeInTheDocument();
expect(screen.queryByText(/Firefox/i)).toBeInTheDocument();
const slices = screen.queryAllByLabelText('Pie Chart Slice');
const slices = screen.queryAllByTestId('data testid Pie Chart Slice');
expect(slices.length).toBe(3);
});
});
@ -158,7 +158,7 @@ describe('PieChartPanel', () => {
setup({ data: { series: seriesWithFirefoxOverride } });
expect(screen.queryByText(/Firefox/i)).not.toBeInTheDocument();
const slices = screen.queryAllByLabelText('Pie Chart Slice');
const slices = screen.queryAllByTestId('data testid Pie Chart Slice');
expect(slices.length).toBe(3);
});
});

2
public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
View File

@ -220,7 +220,7 @@ export const ExemplarMarker = ({
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
className={styles.markerWrapper}
aria-label={selectors.components.DataSource.Prometheus.exemplarMarker}
data-testid={selectors.components.DataSource.Prometheus.exemplarMarker}
role="button"
tabIndex={0}
>