Chore: Migrate from aria-label to data-testid in plugin-related tests (#79272)

* Update basicsettings for datasource

* Change aria-label for data-testid

* Update more tests

* Update betterer

* Remove unnecessary data-testid

* Put back aria label for some datasource selectors

* Try to use data-testid with alerts

* Update betterer
This commit is contained in:
Esteban Beltran 2023-12-11 15:05:54 +01:00 committed by GitHub
parent 4751013a91
commit 46142da4db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 19 additions and 39 deletions

View File

@ -3037,17 +3037,12 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "3"]
],
"public/app/features/datasources/components/BasicSettings.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.", "1"]
],
"public/app/features/datasources/components/DataSourceReadOnlyMessage.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"]
],
"public/app/features/datasources/components/DataSourceTestingStatus.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Do not use any type assertions.", "2"],
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "3"]
[0, 0, 0, "Do not use any type assertions.", "2"]
],
"public/app/features/datasources/components/DataSourceTypeCard.tsx:5381": [
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
@ -4065,9 +4060,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"]
],
"public/app/features/plugins/admin/components/PluginDetailsDisabledError.tsx:5381": [
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
],
"public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"]
@ -4082,9 +4074,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"]
],
"public/app/features/plugins/admin/components/PluginDetailsSignature.tsx:5381": [
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
],
"public/app/features/plugins/admin/components/PluginSignatureDetailsBadge.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
@ -4119,9 +4108,6 @@ exports[`better eslint`] = {
"public/app/features/plugins/admin/types.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
"public/app/features/plugins/components/PluginsErrorsInfo.tsx:5381": [
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
],
"public/app/features/plugins/datasource_srv.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],

View File

@ -17,11 +17,11 @@ export const Pages = {
url: '/',
},
DataSource: {
name: 'Data source settings page name input field',
name: 'data-testid Data source settings page name input field',
delete: 'Data source settings page Delete button',
readOnly: 'Data source settings page read only message',
readOnly: 'data-testid Data source settings page read only message',
saveAndTest: 'data-testid Data source settings page Save and Test button',
alert: 'Data source settings page Alert',
alert: 'data-testid Data source settings page Alert',
},
DataSources: {
url: '/datasources',
@ -268,12 +268,12 @@ export const Pages = {
page: 'Plugins list page',
list: 'Plugins list',
listItem: 'Plugins list item',
signatureErrorNotice: 'Unsigned plugins notice',
signatureErrorNotice: 'data-testid Unsigned plugins notice',
},
PluginPage: {
page: 'Plugin page',
signatureInfo: 'Plugin signature info',
disabledInfo: 'Plugin disabled info',
signatureInfo: 'data-testid Plugin signature info',
disabledInfo: 'data-testid Plugin disabled info',
},
PlaylistForm: {
name: 'Playlist name',

View File

@ -54,15 +54,9 @@ export const Alert = React.forwardRef<HTMLDivElement, Props>(
const ariaLabel = restProps['aria-label'] || title;
return (
<div
ref={ref}
className={cx(styles.wrapper, className)}
data-testid={selectors.components.Alert.alertV2(severity)}
role={role}
aria-label={ariaLabel}
{...restProps}
>
<div ref={ref} className={cx(styles.wrapper, className)} role={role} aria-label={ariaLabel} {...restProps}>
<Box
data-testid={selectors.components.Alert.alertV2(severity)}
display="flex"
backgroundColor={severity}
borderRadius="default"

View File

@ -20,7 +20,7 @@ describe('<BasicSettings>', () => {
it('should render component', () => {
setup();
expect(screen.getByRole('textbox', { name: selectors.pages.DataSource.name })).toBeInTheDocument();
expect(screen.getByTestId(selectors.pages.DataSource.name)).toBeInTheDocument();
expect(screen.getByRole('checkbox', { name: /Default/ })).toBeInTheDocument();
});
});

View File

@ -34,7 +34,7 @@ export function BasicSettings({ dataSourceName, isDefault, onDefaultChange, onNa
placeholder="Name"
onChange={(event) => onNameChange(event.currentTarget.value)}
required
aria-label={selectors.pages.DataSource.name}
data-testid={selectors.pages.DataSource.name}
/>
</InlineField>
</div>

View File

@ -8,7 +8,7 @@ export const readOnlyMessage =
export function DataSourceReadOnlyMessage() {
return (
<Alert aria-label={e2eSelectors.pages.DataSource.readOnly} severity="info" title="Provisioned data source">
<Alert data-testid={e2eSelectors.pages.DataSource.readOnly} severity="info" title="Provisioned data source">
{readOnlyMessage}
</Alert>
);

View File

@ -100,7 +100,7 @@ export function DataSourceTestingStatus({ testingStatus, exploreUrl, dataSource
if (message) {
return (
<div className="gf-form-group p-t-2">
<Alert severity={severity} title={message} aria-label={e2eSelectors.pages.DataSource.alert}>
<Alert severity={severity} title={message} data-testid={e2eSelectors.pages.DataSource.alert}>
{testingStatus?.details && (
<>
{detailsMessage}

View File

@ -21,7 +21,7 @@ export function PluginDetailsDisabledError({ className, plugin }: Props): ReactE
severity="error"
title="Plugin disabled"
className={className}
aria-label={selectors.pages.PluginPage.disabledInfo}
data-testid={selectors.pages.PluginPage.disabledInfo}
>
{renderDescriptionFromError(plugin.error)}
<p>Please contact your server administrator to get this resolved.</p>

View File

@ -26,7 +26,7 @@ export function PluginDetailsSignature({ className, plugin }: Props): React.Reac
<Alert
severity="warning"
title="Invalid plugin signature"
aria-label={selectors.pages.PluginPage.signatureInfo}
data-testid={selectors.pages.PluginPage.signatureInfo}
className={className}
>
<p>

View File

@ -382,14 +382,14 @@ describe('Plugin details page', () => {
});
it('should display alert with information about why the plugin is disabled', async () => {
const { queryByLabelText } = renderPluginDetails({
const { queryByTestId } = renderPluginDetails({
id,
isInstalled: true,
isDisabled: true,
error: PluginErrorCode.modifiedSignature,
});
expect(await queryByLabelText(selectors.pages.PluginPage.disabledInfo)).toBeInTheDocument();
expect(queryByTestId(selectors.pages.PluginPage.disabledInfo)).toBeInTheDocument();
});
it('should display grafana dependencies for a plugin if they are available', async () => {

View File

@ -23,7 +23,7 @@ export function PluginsErrorsInfo({ filterByPluginType }: PluginsErrorInfoProps)
return (
<Alert
title="Unsigned plugins were found during plugin initialization. Grafana Labs cannot guarantee the integrity of these plugins. We recommend only using signed plugins."
aria-label={selectors.pages.PluginsList.signatureErrorNotice}
data-testid={selectors.pages.PluginsList.signatureErrorNotice}
severity="warning"
>
<p>The following plugins are disabled and not shown in the list below:</p>