refactor(loki-derived-fields): migrate test to testing library (#54729)

.betterer.results

@@ -76,9 +76,6 @@ exports[`no enzyme tests`] = {
     ],
     "public/app/plugins/datasource/cloudwatch/components/ConfigEditor.test.tsx:4057721851": [
       [1, 19, 13, "RegExp match", "2409514259"]
-    ],
-    "public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx:2402631398": [
-      [0, 17, 13, "RegExp match", "2409514259"]
     ]
   }`
 };
@@ -6928,16 +6925,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "7"]
-    ],
     "public/app/plugins/datasource/loki/datasource.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],

public/app/plugins/datasource/loki/configuration/DerivedField.tsx

@@ -60,7 +60,7 @@ export const DerivedField = (props: Props) => {
   };
 
   return (
-    <div className={className}>
+    <div className={className} data-testid="derived-field">
       <div className={styles.row}>
         <FormField
           className={styles.nameField}

public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx

@@ -1,10 +1,6 @@
-import { mount } from 'enzyme';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 
-import { Button } from '@grafana/ui';
-
-import { DerivedField } from './DerivedField';
 import { DerivedFields } from './DerivedFields';
 
 describe('DerivedFields', () => {
@@ -18,65 +14,38 @@ describe('DerivedFields', () => {
     window.getSelection = originalGetSelection;
   });
 
-  it('renders correctly when no fields', async () => {
+  it('renders correctly when no fields', () => {
-    let wrapper: any;
+    render(<DerivedFields onChange={() => {}} />);
-    //@ts-ignore
+
-    await act(async () => {
+    expect(screen.getByText('Add')).toBeInTheDocument();
-      wrapper = await mount(<DerivedFields onChange={() => {}} />);
+    expect(screen.queryByText(/example log message/)).not.toBeInTheDocument();
-    });
+    expect(screen.queryByTestId('derived-field')).not.toBeInTheDocument();
-    expect(wrapper.find(Button).length).toBe(1);
-    expect(wrapper.find(Button).contains('Add')).toBeTruthy();
-    expect(wrapper.find(DerivedField).length).toBe(0);
   });
 
   it('renders correctly when there are fields', async () => {
-    let wrapper: any;
+    render(<DerivedFields value={testValue} onChange={() => {}} />);
-    //@ts-ignore
+
-    await act(async () => {
+    await waitFor(() => expect(screen.getAllByTestId('derived-field')).toHaveLength(2));
-      wrapper = await mount(<DerivedFields value={testValue} onChange={() => {}} />);
+    expect(screen.getByText('Add')).toBeInTheDocument();
+    expect(screen.getByText('Show example log message')).toBeInTheDocument();
   });
 
-    expect(wrapper.find(Button).filterWhere((button: any) => button.contains('Add')).length).toBe(1);
+  it('adds a new field', async () => {
-    expect(wrapper.find(Button).filterWhere((button: any) => button.contains('Show example log message')).length).toBe(
+    const onChange = jest.fn();
-      1
+    render(<DerivedFields onChange={onChange} />);
-    );
+
-    expect(
+    fireEvent.click(screen.getByText('Add'));
-      wrapper
+
-        .find(Button)
+    await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
-        .filterWhere((button: any) => button.contains('Show example log message'))
-        .getDOMNode()
-    ).toHaveAttribute('type', 'button');
-    expect(wrapper.find(DerivedField).length).toBe(2);
   });
 
-  it('adds new field', async () => {
+  it('removes a field', async () => {
-    const onChangeMock = jest.fn();
+    const onChange = jest.fn();
-    let wrapper: any;
+    render(<DerivedFields value={testValue} onChange={onChange} />);
-    //@ts-ignore
-    await act(async () => {
-      wrapper = await mount(<DerivedFields onChange={onChangeMock} />);
-    });
-    const addButton = wrapper.find(Button).filterWhere((button: any) => button.contains('Add'));
-    addButton.simulate('click');
-    expect(onChangeMock.mock.calls[0][0].length).toBe(1);
-  });
 
-  it('removes field', async () => {
+    fireEvent.click((await screen.findAllByTitle('Remove field'))[0]);
-    const onChangeMock = jest.fn();
+
-    let wrapper: any;
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith([testValue[1]]));
-    //@ts-ignore
-    await act(async () => {
-      wrapper = await mount(<DerivedFields value={testValue} onChange={onChangeMock} />);
-    });
-    const removeButton = wrapper.find(DerivedField).at(0).find(Button);
-    removeButton.simulate('click');
-    const newValue = onChangeMock.mock.calls[0][0];
-    expect(newValue.length).toBe(1);
-    expect(newValue[0]).toMatchObject({
-      matcherRegex: 'regex2',
-      name: 'test2',
-      url: 'localhost2',
-    });
   });
 });
 

public/app/plugins/datasource/loki/configuration/DerivedFields.tsx

@@ -24,8 +24,7 @@ type Props = {
   onChange: (value: DerivedFieldConfig[]) => void;
 };
 
-export const DerivedFields = (props: Props) => {
+export const DerivedFields = ({ value = [], onChange }: Props) => {
-  const { value, onChange } = props;
   const theme = useTheme2();
   const styles = getStyles(theme);
 
@@ -40,8 +39,7 @@ export const DerivedFields = (props: Props) => {
       </div>
 
       <div className="gf-form-group">
-        {value &&
+        {value.map((field, index) => {
-          value.map((field, index) => {
           return (
             <DerivedField
               className={styles.derivedField}
@@ -77,14 +75,14 @@ export const DerivedFields = (props: Props) => {
             icon="plus"
             onClick={(event) => {
               event.preventDefault();
-              const newDerivedFields = [...(value || []), { name: '', matcherRegex: '' }];
+              const newDerivedFields = [...value, { name: '', matcherRegex: '' }];
               onChange(newDerivedFields);
             }}
           >
             Add
           </Button>
 
-          {value && value.length > 0 && (
+          {value.length > 0 && (
             <Button variant="secondary" type="button" onClick={() => setShowDebug(!showDebug)}>
               {showDebug ? 'Hide example log message' : 'Show example log message'}
             </Button>