Refactor 'Basic Settings' test to RTL from Enzyme (#51059)

* Refactor 'Basic Settings' test to RTL from Enzyme

* Update public/app/features/datasources/settings/BasicSettings.test.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Refactor 'Basic Settings' test to RTL from Enzyme

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

.betterer.results

@@ -125,9 +125,6 @@ exports[`no enzyme tests`] = {
     "public/app/features/datasources/DataSourcesListPage.test.tsx:2960099202": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/datasources/settings/BasicSettings.test.tsx:625016324": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/features/datasources/settings/ButtonRow.test.tsx:1422996720": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],

public/app/features/datasources/settings/BasicSettings.test.tsx

@@ -1,6 +1,8 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 
+import { selectors } from '@grafana/e2e-selectors';
+
 import BasicSettings, { Props } from './BasicSettings';
 
 const setup = () => {
@@ -11,13 +13,14 @@ const setup = () => {
     onNameChange: jest.fn(),
   };
 
-  return shallow(<BasicSettings {...props} />);
+  return render(<BasicSettings {...props} />);
 };
 
-describe('Render', () => {
+describe('Basic Settings', () => {
   it('should render component', () => {
-    const wrapper = setup();
+    setup();
 
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByRole('textbox', { name: selectors.pages.DataSource.name })).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: 'Default' })).toBeInTheDocument();
   });
 });

public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap

@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<div
-  aria-label="Datasource settings page basic settings"
-  className="gf-form-group"
->
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form max-width-30"
-    >
-      <InlineField
-        grow={true}
-        label="Name"
-        tooltip="The name is used when you select the data source in panels. The default data source is
-              'preselected in new panels."
-      >
-        <Input
-          aria-label="Data source settings page name input field"
-          id="basic-settings-name"
-          onChange={[Function]}
-          placeholder="Name"
-          required={true}
-          type="text"
-          value="Graphite"
-        />
-      </InlineField>
-    </div>
-    <InlineField
-      label="Default"
-      labelWidth={8}
-    >
-      <Switch
-        id="basic-settings-default"
-        onChange={[Function]}
-        value={false}
-      />
-    </InlineField>
-  </div>
-</div>
-`;