Convert influxdb ConfigEditor test to RTL (#54332)

public/app/plugins/datasource/influxdb/components/ConfigEditor.test.tsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import ConfigEditor, { Props } from './ConfigEditor';
@@ -14,7 +14,7 @@ jest.mock('lodash', () => {
   };
 });
 
-const setup = (propOverrides?: object) => {
+const setup = (optionOverrides?: object) => {
   const props: Props = {
     options: {
       id: 21,
@@ -39,42 +39,40 @@ const setup = (propOverrides?: object) => {
       secureJsonFields: {},
       version: 1,
       readOnly: false,
+      ...optionOverrides,
     },
     onOptionsChange: jest.fn(),
   };
 
-  Object.assign(props, propOverrides);
-
-  return shallow(<ConfigEditor {...props} />);
+  return render(<ConfigEditor {...props} />);
 };
 
-describe('Render', () => {
-  it('should render component', () => {
-    const wrapper = setup();
-
-    expect(wrapper).toMatchSnapshot();
+describe('ConfigEditor', () => {
+  it('should render without throwing an error', () => {
+    expect(() => setup()).not.toThrow();
   });
 
   it('should disable basic auth password input', () => {
-    const wrapper = setup({
+    setup({
+      basicAuth: true,
       secureJsonFields: {
         basicAuthPassword: true,
       },
     });
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByDisplayValue('configured')).toBeInTheDocument();
   });
 
   it('should hide white listed cookies input when browser access chosen', () => {
-    const wrapper = setup({
+    setup({
       access: 'direct',
     });
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.queryByLabelText('Allowed cookies')).not.toBeInTheDocument();
   });
 
   it('should hide basic auth fields when switch off', () => {
-    const wrapper = setup({
+    setup({
       basicAuth: false,
     });
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.queryByRole('heading', { name: 'Basic Auth Details' })).not.toBeInTheDocument();
   });
 });

public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx

@@ -17,12 +17,12 @@ const { Input, SecretFormField } = LegacyForms;
 import { BROWSER_MODE_DISABLED_MESSAGE } from '../constants';
 import { InfluxOptions, InfluxSecureJsonData, InfluxVersion } from '../types';
 
-const httpModes = [
+const httpModes: SelectableValue[] = [
   { label: 'GET', value: 'GET' },
   { label: 'POST', value: 'POST' },
-] as SelectableValue[];
+];
 
-const versions = [
+const versions: Array<SelectableValue<InfluxVersion>> = [
   {
     label: 'InfluxQL',
     value: InfluxVersion.InfluxQL,
@@ -33,7 +33,7 @@ const versions = [
     value: InfluxVersion.Flux,
     description: 'Advanced data scripting and query language.  Supported in InfluxDB 2.x and 1.8+',
   },
-] as Array<SelectableValue<InfluxVersion>>;
+];
 
 export type Props = DataSourcePluginOptionsEditorProps<InfluxOptions>;
 type State = {
@@ -112,7 +112,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
         <div className="gf-form-inline">
           <div className="gf-form">
             <SecretFormField
-              isConfigured={(secureJsonFields && secureJsonFields.token) as boolean}
+              isConfigured={Boolean(secureJsonFields && secureJsonFields.token)}
               value={secureJsonData.token || ''}
               label="Token"
               aria-label="Token"
@@ -213,7 +213,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
         <div className="gf-form-inline">
           <div className="gf-form">
             <SecretFormField
-              isConfigured={(secureJsonFields && secureJsonFields.password) as boolean}
+              isConfigured={Boolean(secureJsonFields && secureJsonFields.password)}
               value={secureJsonData.password || ''}
               label="Password"
               aria-label="Password"