From 29fa6305d1709664c7dace1bcaaa1b5c739f0f53 Mon Sep 17 00:00:00 2001
From: Alex Simonok <sashasimonok@gmail.com>
Date: Thu, 6 Jul 2023 11:10:28 +0300
Subject: [PATCH 1/8] Add tests for FieldsEditor

---
 .../FieldsEditor/FieldsEditor.test.tsx        | 243 +++++++++++++++++-
 src/components/FieldsEditor/FieldsEditor.tsx  | 226 ++++++++++------
 src/constants/tests.ts                        |   4 +
 3 files changed, 391 insertions(+), 82 deletions(-)

diff --git a/src/components/FieldsEditor/FieldsEditor.test.tsx b/src/components/FieldsEditor/FieldsEditor.test.tsx
index de28fc5..b0316b2 100644
--- a/src/components/FieldsEditor/FieldsEditor.test.tsx
+++ b/src/components/FieldsEditor/FieldsEditor.test.tsx
@@ -1,21 +1,252 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { FieldType } from '@grafana/data';
+import { render, screen, within, fireEvent } from '@testing-library/react';
 import { TestIds } from '../../constants';
 import { FieldsEditor } from './FieldsEditor';
 
+/**
+ * Mock @grafana/ui
+ */
+jest.mock('@grafana/ui', () => ({
+  ...jest.requireActual('@grafana/ui'),
+  /**
+   * Mock Select component
+   */
+  Select: jest.fn().mockImplementation(({ options, onChange, value, ...restProps }) => (
+    <select
+      onChange={(event: any) => {
+        if (onChange) {
+          onChange(options.find((option: any) => option.value === event.target.value));
+        }
+      }}
+      value={value}
+      {...restProps}
+    >
+      {options.map(({ label, value }: any) => (
+        <option key={value} value={value}>
+          {label}
+        </option>
+      ))}
+    </select>
+  )),
+}));
+
+type Props = React.ComponentProps<typeof FieldsEditor>;
+
 /**
  * Editor
  */
 describe('Editor', () => {
-  const model = { fields: [] };
+  const model = { fields: [], rows: [] };
+  const onChange = jest.fn();
+  const onRunQuery = jest.fn();
 
-  it('Should find component with Button', async () => {
-    const getComponent = ({ query = {}, ...restProps }: any) => {
-      return <FieldsEditor {...restProps} query={query} />;
-    };
+  /**
+   * Get Tested Component
+   * @param query
+   * @param restProps
+   */
+  const getComponent = ({ query, ...restProps }: Partial<Props>) => {
+    return <FieldsEditor onChange={onChange} onRunQuery={onRunQuery} {...(restProps as any)} query={query || {}} />;
+  };
+
+  beforeEach(() => {
+    onChange.mockClear();
+    onRunQuery.mockClear();
+  });
 
+  it('Should add field if there is no any fields', async () => {
     render(getComponent({ model }));
 
     expect(screen.getByTestId(TestIds.fieldsEditor.buttonAdd)).toBeInTheDocument();
+
+    fireEvent.click(screen.getByTestId(TestIds.fieldsEditor.buttonAdd));
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        frame: expect.objectContaining({
+          fields: expect.arrayContaining([
+            expect.objectContaining({
+              type: FieldType.string,
+              name: 'Field 1',
+            }),
+          ]),
+        }),
+      })
+    );
+  });
+
+  it('Should render fields with values', () => {
+    const field1 = {
+      name: 'name',
+      type: FieldType.string,
+    };
+    const field2 = {
+      name: 'amount',
+      type: FieldType.number,
+    };
+    render(
+      getComponent({
+        model: {
+          fields: [field1, field2] as any,
+          rows: [],
+        },
+      })
+    );
+
+    const items = screen.getAllByTestId(TestIds.fieldsEditor.item);
+
+    /**
+     * Check name
+     */
+    expect(items[0]).toBeInTheDocument();
+
+    const item1Selectors = within(items[0]);
+
+    expect(item1Selectors.getByTestId(TestIds.fieldsEditor.fieldName)).toHaveValue(field1.name);
+    expect(item1Selectors.getByLabelText(TestIds.fieldsEditor.fieldType)).toHaveValue(field1.type);
+
+    /**
+     * Check amount
+     */
+    expect(items[1]).toBeInTheDocument();
+
+    const item2Selectors = within(items[1]);
+
+    expect(item2Selectors.getByTestId(TestIds.fieldsEditor.fieldName)).toHaveValue(field2.name);
+    expect(item2Selectors.getByLabelText(TestIds.fieldsEditor.fieldType)).toHaveValue(field2.type);
+  });
+
+  it('Should change name', () => {
+    const field1 = {
+      name: 'name',
+      type: FieldType.string,
+    };
+    const field2 = {
+      name: 'amount',
+      type: FieldType.number,
+    };
+    render(
+      getComponent({
+        model: {
+          fields: [field1, field2] as any,
+          rows: [],
+        },
+      })
+    );
+
+    const items = screen.getAllByTestId(TestIds.fieldsEditor.item);
+    expect(items[0]).toBeInTheDocument();
+
+    const item1Selectors = within(items[0]);
+
+    fireEvent.change(item1Selectors.getByTestId(TestIds.fieldsEditor.fieldName), { target: { value: 'hello' } });
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        frame: expect.objectContaining({
+          fields: expect.arrayContaining([
+            expect.objectContaining({
+              name: 'hello',
+            }),
+          ]),
+        }),
+      })
+    );
+  });
+
+  it('Should change type', () => {
+    const field1 = {
+      name: 'name',
+      type: FieldType.string,
+    };
+    const field2 = {
+      name: 'amount',
+      type: FieldType.number,
+    };
+    render(
+      getComponent({
+        model: {
+          fields: [field1, field2] as any,
+          rows: [],
+        },
+      })
+    );
+
+    const items = screen.getAllByTestId(TestIds.fieldsEditor.item);
+    expect(items[0]).toBeInTheDocument();
+
+    const item1Selectors = within(items[0]);
+
+    fireEvent.change(item1Selectors.getByLabelText(TestIds.fieldsEditor.fieldType), {
+      target: { value: FieldType.geo },
+    });
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        frame: expect.objectContaining({
+          fields: expect.arrayContaining([
+            expect.objectContaining({
+              type: FieldType.geo,
+            }),
+          ]),
+        }),
+      })
+    );
+  });
+
+  it('Should add field', () => {
+    const field1 = {
+      name: 'name',
+      type: FieldType.string,
+    };
+    render(
+      getComponent({
+        model: {
+          fields: [field1] as any,
+          rows: [['some data']],
+        },
+      })
+    );
+
+    fireEvent.click(screen.getByTestId(TestIds.fieldsEditor.buttonAdd));
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        frame: expect.objectContaining({
+          fields: expect.arrayContaining([
+            expect.objectContaining({
+              type: FieldType.string,
+              name: 'Field 2',
+            }),
+          ]),
+        }),
+      })
+    );
+  });
+
+  it('Should remove field', () => {
+    const field1 = {
+      name: 'name',
+      type: FieldType.string,
+    };
+    render(
+      getComponent({
+        model: {
+          fields: [field1] as any,
+          rows: [['some data']],
+        },
+      })
+    );
+
+    fireEvent.click(screen.getByTestId(TestIds.fieldsEditor.buttonRemove));
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        frame: expect.objectContaining({
+          fields: [],
+        }),
+      })
+    );
   });
 });
diff --git a/src/components/FieldsEditor/FieldsEditor.tsx b/src/components/FieldsEditor/FieldsEditor.tsx
index 22a9c7e..ab5ce3b 100644
--- a/src/components/FieldsEditor/FieldsEditor.tsx
+++ b/src/components/FieldsEditor/FieldsEditor.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Field, FieldType } from '@grafana/data';
 import { Button, InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
 import { FieldTypes, TestIds } from '../../constants';
@@ -41,90 +41,150 @@ export const FieldsEditor = ({ query, model, onChange, onRunQuery }: Props) => {
   /**
    * Add Field
    */
-  const addField = (index: number) => {
-    /**
-     * Insert a field after the current position.
-     */
-    model.fields.splice(index + 1, 0, {
-      name: '',
-      type: FieldType.string,
-    } as Field);
-
-    /**
-     * Rebuild rows with the added field.
-     */
-    model.rows.forEach((row: any) => {
-      row.splice(index + 1, 0, '');
-    });
-
-    /**
-     * Change
-     */
-    onChange({ ...query, frame: convertToDataFrame(model) });
-    onRunQuery();
-  };
+  const addField = useCallback(
+    (index: number) => {
+      /**
+       * Create another object to prevent mutations
+       */
+      const updatedModel = {
+        ...model,
+        fields: [...model.fields],
+        rows: [...model.rows],
+      };
+
+      /**
+       * Insert a field after the current position.
+       */
+      updatedModel.fields.splice(index + 1, 0, {
+        name: '',
+        type: FieldType.string,
+      } as Field);
+
+      /**
+       * Rebuild rows with the added field.
+       */
+      updatedModel.rows.forEach((row: any) => {
+        row.splice(index + 1, 0, '');
+      });
+
+      /**
+       * Change
+       */
+      onChange({ ...query, frame: convertToDataFrame(updatedModel) });
+      onRunQuery();
+    },
+    [model, onChange, onRunQuery, query]
+  );
 
   /**
    * Remove Field
    */
-  const removeField = (index: number) => {
-    /**
-     * Remove the field at given position.
-     */
-    model.fields.splice(index, 1);
-
-    /**
-     * Rebuild rows without the removed field.
-     */
-    model.rows.forEach((row) => {
-      row.splice(index, 1);
-    });
-
-    /**
-     * Remove all rows if there are no fields.
-     */
-    if (!model.fields.length) {
-      model.rows = [];
-    }
-
-    /**
-     * Change
-     */
-    onChange({ ...query, frame: convertToDataFrame(model) });
-    onRunQuery();
-  };
+  const removeField = useCallback(
+    (index: number) => {
+      /**
+       * Create another object to prevent mutations
+       */
+      const updatedModel = {
+        ...model,
+        fields: [...model.fields],
+        rows: [...model.rows],
+      };
+
+      /**
+       * Remove the field at given position.
+       */
+      updatedModel.fields.splice(index, 1);
+
+      /**
+       * Rebuild rows without the removed field.
+       */
+      updatedModel.rows.forEach((row) => {
+        row.splice(index, 1);
+      });
+
+      /**
+       * Remove all rows if there are no fields.
+       */
+      if (!updatedModel.fields.length) {
+        updatedModel.rows = [];
+      }
+
+      /**
+       * Change
+       */
+      onChange({ ...query, frame: convertToDataFrame(updatedModel) });
+      onRunQuery();
+    },
+    [model, onChange, onRunQuery, query]
+  );
 
   /**
    * Rename Field
    */
-  const renameField = (name: string, index: number) => {
-    /**
-     * Rename
-     */
-    model.fields[index].name = name;
-
-    /**
-     * Change
-     */
-    onChange({ ...query, frame: convertToDataFrame(model) });
-    onRunQuery();
-  };
+  const renameField = useCallback(
+    (name: string, updatedIndex: number) => {
+      /**
+       * Create another object to prevent mutations
+       */
+      const updatedModel = {
+        ...model,
+        fields: [...model.fields],
+      };
+
+      /**
+       * Rename
+       */
+      updatedModel.fields = updatedModel.fields.map((field, index) =>
+        index === updatedIndex
+          ? {
+              ...field,
+              name,
+            }
+          : field
+      );
+
+      /**
+       * Change
+       */
+      onChange({ ...query, frame: convertToDataFrame(updatedModel) });
+      onRunQuery();
+    },
+    [model, onChange, onRunQuery, query]
+  );
 
   /**
    * Change Field Type
    */
-  const changeFieldType = (fieldType: FieldType, index: number) => {
-    /**
-     * Set Field Type
-     */
-    model.fields[index].type = fieldType;
-
-    /**
-     * Change
-     */
-    onChange({ ...query, frame: convertToDataFrame(model) });
-    onRunQuery();
-  };
+  const changeFieldType = useCallback(
+    (fieldType: FieldType, updatedIndex: number) => {
+      /**
+       * Create another object to prevent mutations
+       */
+      const updatedModel = {
+        ...model,
+        fields: [...model.fields],
+      };
+
+      /**
+       * Set Field Type
+       */
+      updatedModel.fields = updatedModel.fields.map((field, index) =>
+        index === updatedIndex
+          ? {
+              ...field,
+              type: fieldType,
+            }
+          : field
+      );
+
+      /**
+       * Change
+       */
+      onChange({ ...query, frame: convertToDataFrame(updatedModel) });
+      onRunQuery();
+    },
+    [model, onChange, onRunQuery, query]
+  );
 
   /**
    * No rows found
@@ -150,13 +210,14 @@ export const FieldsEditor = ({ query, model, onChange, onRunQuery }: Props) => {
   return (
     <>
       {model.fields.map((field, i) => (
-        <InlineFieldRow key={i}>
+        <InlineFieldRow key={i} data-testid={TestIds.fieldsEditor.item}>
           <InlineField label="Name" grow>
             <Input
               value={field.name}
               onChange={(e) => {
                 renameField(e.currentTarget.value, i);
               }}
+              data-testid={TestIds.fieldsEditor.fieldName}
             />
           </InlineField>
 
@@ -171,15 +232,28 @@ export const FieldsEditor = ({ query, model, onChange, onRunQuery }: Props) => {
                 label: t[0].toUpperCase() + t.substring(1),
                 value: t,
               }))}
+              aria-label={TestIds.fieldsEditor.fieldType}
             />
           </InlineField>
 
           <InlineField>
-            <Button variant="secondary" title="Add" onClick={() => addField(i)} icon="plus"></Button>
+            <Button
+              variant="secondary"
+              title="Add"
+              onClick={() => addField(i)}
+              icon="plus"
+              data-testid={TestIds.fieldsEditor.buttonAdd}
+            />
           </InlineField>
 
           <InlineField>
-            <Button variant="destructive" title="Remove" onClick={() => removeField(i)} icon="trash-alt"></Button>
+            <Button
+              variant="destructive"
+              title="Remove"
+              onClick={() => removeField(i)}
+              data-testid={TestIds.fieldsEditor.buttonRemove}
+              icon="trash-alt"
+            />
           </InlineField>
         </InlineFieldRow>
       ))}
diff --git a/src/constants/tests.ts b/src/constants/tests.ts
index 2818837..d2b2045 100644
--- a/src/constants/tests.ts
+++ b/src/constants/tests.ts
@@ -3,7 +3,11 @@
  */
 export const TestIds = {
   fieldsEditor: {
+    item: 'data-testid fields-editor item',
+    fieldName: 'data-testid fields-editor field-name',
+    fieldType: 'data-testid fields-editor field-type',
     buttonAdd: 'data-testid fields-editor button-add',
+    buttonRemove: 'data-testid fields-editor button-remove',
   },
   queryEditor: {
     fieldName: 'data-testid query-editor field-name',

From 4d0aa51bcd1282bff79073ba277b442542ee9b35 Mon Sep 17 00:00:00 2001
From: Alex Simonok <sashasimonok@gmail.com>
Date: Thu, 6 Jul 2023 11:55:40 +0300
Subject: [PATCH 2/8] Add tests for ValueInput

---
 src/components/ValueInput/ValueInput.test.tsx | 116 ++++++++++++++++--
 src/components/ValueInput/ValueInput.tsx      |  16 ++-
 src/constants/tests.ts                        |   4 +
 3 files changed, 125 insertions(+), 11 deletions(-)

diff --git a/src/components/ValueInput/ValueInput.test.tsx b/src/components/ValueInput/ValueInput.test.tsx
index 0841a23..dd1c303 100644
--- a/src/components/ValueInput/ValueInput.test.tsx
+++ b/src/components/ValueInput/ValueInput.test.tsx
@@ -1,20 +1,122 @@
 import React from 'react';
-import { FieldType } from '@grafana/data';
-import { render, screen } from '@testing-library/react';
-import { TestIds } from '../../constants';
+import { FieldType, dateTime } from '@grafana/data';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { TestIds, TextAreaLength } from '../../constants';
 import { ValueInput } from './ValueInput';
 
+/**
+ * Mock @grafana/ui
+ */
+jest.mock('@grafana/ui', () => ({
+  ...jest.requireActual('@grafana/ui'),
+  /**
+   * Mock DatetimePicker component
+   */
+  DateTimePicker: jest.fn().mockImplementation(({ onChange, ...restProps }) => {
+    return (
+      <input
+        data-testid={restProps['data-testid']}
+        value={restProps.value}
+        onChange={(event) => {
+          if (onChange) {
+            onChange(event.target.value);
+          }
+        }}
+      />
+    );
+  }),
+}));
+
+/**
+ * Props
+ */
+type Props = React.ComponentProps<typeof ValueInput>;
+
 /**
  * Input
  */
 describe('Input', () => {
-  it('Should find component with Input', async () => {
-    const getComponent = ({ ...restProps }: any) => {
-      return <ValueInput {...restProps} />;
-    };
+  const onChange = jest.fn();
+  /**
+   * Get Tested Component
+   * @param restProps
+   */
+  const getComponent = ({ ...restProps }: Partial<Props>) => {
+    return <ValueInput onChange={onChange} {...(restProps as any)} />;
+  };
 
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  it('Should update string value', async () => {
     render(getComponent({ value: '123', type: FieldType.string }));
 
     expect(screen.getByTestId(TestIds.valueInput.fieldString)).toBeInTheDocument();
+
+    fireEvent.change(screen.getByTestId(TestIds.valueInput.fieldString), { target: { value: 'hello' } });
+
+    expect(onChange).toHaveBeenCalledWith('hello');
+  });
+
+  it('Should render disabled string value', async () => {
+    render(getComponent({ value: null, type: FieldType.string }));
+
+    expect(screen.getByTestId(TestIds.valueInput.fieldString)).toBeInTheDocument();
+    expect(screen.getByTestId(TestIds.valueInput.fieldString)).toHaveValue('null');
+  });
+
+  it('Should disable string value', async () => {
+    render(getComponent({ value: 'hello', type: FieldType.string }));
+
+    expect(screen.getByTestId(TestIds.valueInput.fieldString)).toBeInTheDocument();
+    expect(screen.getByTestId(TestIds.valueInput.fieldString)).toHaveValue('hello');
+
+    fireEvent.click(screen.getByTestId(TestIds.valueInput.iconDisable));
+
+    expect(screen.getByTestId(TestIds.valueInput.fieldString)).toHaveValue('null');
+  });
+
+  it('Should enable string value', async () => {
+    render(getComponent({ value: null, type: FieldType.string }));
+
+    expect(screen.getByTestId(TestIds.valueInput.fieldString)).toBeInTheDocument();
+    expect(screen.getByTestId(TestIds.valueInput.fieldString)).toHaveValue('null');
+
+    fireEvent.click(screen.getByTestId(TestIds.valueInput.iconDisable));
+
+    expect(screen.getByTestId(TestIds.valueInput.fieldString)).toHaveValue('');
+  });
+
+  it('Should update textarea value', async () => {
+    const value = new Array(TextAreaLength + 1).fill('a').join('');
+    render(getComponent({ value: value, type: FieldType.string }));
+
+    expect(screen.getByTestId(TestIds.valueInput.fieldTextarea)).toBeInTheDocument();
+
+    fireEvent.change(screen.getByTestId(TestIds.valueInput.fieldTextarea), { target: { value: value + 'new' } });
+
+    expect(onChange).toHaveBeenCalledWith(value + 'new');
+  });
+
+  it('Should update number value', async () => {
+    render(getComponent({ value: '123', type: FieldType.number }));
+
+    expect(screen.getByTestId(TestIds.valueInput.fieldNumber)).toBeInTheDocument();
+
+    fireEvent.change(screen.getByTestId(TestIds.valueInput.fieldNumber), { target: { value: '111' } });
+
+    expect(onChange).toHaveBeenCalledWith('111');
+  });
+
+  it('Should update date time value', async () => {
+    render(getComponent({ value: '123', type: FieldType.time }));
+
+    expect(screen.getByTestId(TestIds.valueInput.fieldDateTime)).toBeInTheDocument();
+
+    const safeDate = new Date('02-02-2023');
+    fireEvent.change(screen.getByTestId(TestIds.valueInput.fieldDateTime), { target: { value: dateTime(safeDate) } });
+
+    expect(onChange).toHaveBeenCalledWith(dateTime(safeDate).toString());
   });
 });
diff --git a/src/components/ValueInput/ValueInput.tsx b/src/components/ValueInput/ValueInput.tsx
index 10a1e84..81d7ecb 100644
--- a/src/components/ValueInput/ValueInput.tsx
+++ b/src/components/ValueInput/ValueInput.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { DateTime, dateTime, FieldType } from '@grafana/data';
 import { DateTimePicker, Icon, InlineField, Input, TextArea, useStyles2 } from '@grafana/ui';
 import { TestIds, TextAreaLength } from '../../constants';
@@ -56,7 +56,7 @@ export const ValueInput: React.FC<Props> = ({ onChange, value, type, label }) =>
   /**
    * Disable Input
    */
-  const disableInput = () => {
+  const disableInput = useCallback(() => {
     setDisabled(!disabled);
 
     /**
@@ -72,13 +72,18 @@ export const ValueInput: React.FC<Props> = ({ onChange, value, type, label }) =>
     onChange(lastValue ?? null);
     setValid(verifyFieldValue(value, type).ok);
     setLastValue(null);
-  };
+  }, [disabled, lastValue, onChange, type, value]);
 
   /**
    * Icon
    */
   const suffixElement = (
-    <Icon className={styles.suffixElement} name={disabled ? 'eye-slash' : 'eye'} onClick={disableInput} />
+    <Icon
+      className={styles.suffixElement}
+      name={disabled ? 'eye-slash' : 'eye'}
+      data-testid={TestIds.valueInput.iconDisable}
+      onClick={disableInput}
+    />
   );
 
   /**
@@ -95,6 +100,7 @@ export const ValueInput: React.FC<Props> = ({ onChange, value, type, label }) =>
           type="number"
           value={disabled ? undefined : value ?? ''}
           suffix={suffixElement}
+          data-testid={TestIds.valueInput.fieldNumber}
         />
       </InlineField>
     );
@@ -113,6 +119,7 @@ export const ValueInput: React.FC<Props> = ({ onChange, value, type, label }) =>
             setValid(verifyFieldValue(timestamp, type).ok);
             onChange(timestamp);
           }}
+          data-testid={TestIds.valueInput.fieldDateTime}
         />
       </InlineField>
     );
@@ -130,6 +137,7 @@ export const ValueInput: React.FC<Props> = ({ onChange, value, type, label }) =>
             setValid(verifyFieldValue(event.currentTarget.value, type).ok);
             onChange(event.currentTarget.value);
           }}
+          data-testid={TestIds.valueInput.fieldTextarea}
         />
       </InlineField>
     );
diff --git a/src/constants/tests.ts b/src/constants/tests.ts
index d2b2045..2e77f82 100644
--- a/src/constants/tests.ts
+++ b/src/constants/tests.ts
@@ -18,6 +18,10 @@ export const TestIds = {
   },
   valueInput: {
     fieldString: 'data-testid value-input field-string',
+    fieldTextarea: 'data-testid value-input field-textarea',
+    fieldDateTime: 'data-testid value-input field-date-time',
+    fieldNumber: 'data-testid value-input field-number',
+    iconDisable: 'data-testid value-input icon-disable',
   },
   valuesEditor: {
     buttonAddRow: 'data-testid values-editor button-add-row',

From 108f1bfa967330f894f98ec8fcd861b24e08cddd Mon Sep 17 00:00:00 2001
From: Alex Simonok <sashasimonok@gmail.com>
Date: Thu, 6 Jul 2023 12:16:07 +0300
Subject: [PATCH 3/8] Add tests for ValuesEditor

---
 .../ValuesEditor/ValuesEditor.test.tsx        | 219 +++++++++++++++++-
 src/components/ValuesEditor/ValuesEditor.tsx  | 207 +++++++++++------
 src/constants/tests.ts                        |   5 +-
 3 files changed, 348 insertions(+), 83 deletions(-)

diff --git a/src/components/ValuesEditor/ValuesEditor.test.tsx b/src/components/ValuesEditor/ValuesEditor.test.tsx
index 0b950b3..0b589bd 100644
--- a/src/components/ValuesEditor/ValuesEditor.test.tsx
+++ b/src/components/ValuesEditor/ValuesEditor.test.tsx
@@ -1,21 +1,226 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { FieldType } from '@grafana/data';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import { TestIds } from '../../constants';
 import { ValuesEditor } from './ValuesEditor';
 
+/**
+ * Props
+ */
+type Props = React.ComponentProps<typeof ValuesEditor>;
+
 /**
  * Editor
  */
 describe('Editor', () => {
-  const model = { fields: [], rows: [] };
+  const model = { fields: [{ name: 'key', type: FieldType.string }] as any, rows: [['key1']] };
+  const onChange = jest.fn();
+  const onRunQuery = jest.fn();
+
+  const getComponent = ({ query, ...restProps }: Partial<Props>) => {
+    return <ValuesEditor query={query || {}} onChange={onChange} onRunQuery={onRunQuery} {...(restProps as any)} />;
+  };
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  it('Should add row if there is no any rows', async () => {
+    render(
+      getComponent({
+        model: {
+          ...model,
+          rows: [],
+        },
+      })
+    );
 
-  it('Should find component with Button', async () => {
-    const getComponent = ({ query = {}, ...restProps }: any) => {
-      return <ValuesEditor {...restProps} query={query} />;
-    };
+    fireEvent.click(screen.getByTestId(TestIds.valuesEditor.buttonAdd));
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        frame: expect.objectContaining({
+          fields: expect.arrayContaining([
+            expect.objectContaining({
+              values: [''],
+            }),
+          ]),
+        }),
+      })
+    );
+  });
+
+  it('Should add row for number', async () => {
+    render(
+      getComponent({
+        model: {
+          fields: [{ name: 'key', type: FieldType.number }] as any,
+          rows: [],
+        },
+      })
+    );
+
+    fireEvent.click(screen.getByTestId(TestIds.valuesEditor.buttonAdd));
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        frame: expect.objectContaining({
+          fields: expect.arrayContaining([
+            expect.objectContaining({
+              values: [0],
+            }),
+          ]),
+        }),
+      })
+    );
+  });
 
+  it('Should add row for time', async () => {
+    render(
+      getComponent({
+        model: {
+          fields: [{ name: 'key', type: FieldType.time }] as any,
+          rows: [],
+        },
+      })
+    );
+
+    fireEvent.click(screen.getByTestId(TestIds.valuesEditor.buttonAdd));
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        frame: expect.objectContaining({
+          fields: expect.arrayContaining([
+            expect.objectContaining({
+              /**
+               * Unstable date, so just check if any number
+               */
+              values: [expect.any(Number)],
+            }),
+          ]),
+        }),
+      })
+    );
+  });
+
+  it('Should add row for boolean', async () => {
+    render(
+      getComponent({
+        model: {
+          fields: [{ name: 'key', type: FieldType.boolean }] as any,
+          rows: [],
+        },
+      })
+    );
+
+    fireEvent.click(screen.getByTestId(TestIds.valuesEditor.buttonAdd));
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        frame: expect.objectContaining({
+          fields: expect.arrayContaining([
+            expect.objectContaining({
+              values: [false],
+            }),
+          ]),
+        }),
+      })
+    );
+  });
+
+  it('Should add row', async () => {
     render(getComponent({ model }));
 
-    expect(screen.getByTestId(TestIds.valuesEditor.buttonAddRow)).toBeInTheDocument();
+    const row = screen.getByTestId(TestIds.valuesEditor.row);
+
+    expect(row).toBeInTheDocument();
+
+    const rowSelectors = within(row);
+
+    fireEvent.click(rowSelectors.getByTestId(TestIds.valuesEditor.buttonAdd));
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        frame: expect.objectContaining({
+          fields: expect.arrayContaining([
+            expect.objectContaining({
+              values: ['key1', ''],
+            }),
+          ]),
+        }),
+      })
+    );
+  });
+
+  it('Should remove row', async () => {
+    render(getComponent({ model }));
+
+    const row = screen.getByTestId(TestIds.valuesEditor.row);
+
+    expect(row).toBeInTheDocument();
+
+    const rowSelectors = within(row);
+
+    fireEvent.click(rowSelectors.getByTestId(TestIds.valuesEditor.buttonRemove));
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        frame: expect.objectContaining({
+          fields: expect.arrayContaining([
+            expect.objectContaining({
+              values: [],
+            }),
+          ]),
+        }),
+      })
+    );
+  });
+
+  it('Should copy row', async () => {
+    render(getComponent({ model }));
+
+    const row = screen.getByTestId(TestIds.valuesEditor.row);
+
+    expect(row).toBeInTheDocument();
+
+    const rowSelectors = within(row);
+
+    fireEvent.click(rowSelectors.getByTestId(TestIds.valuesEditor.buttonCopy));
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        frame: expect.objectContaining({
+          fields: expect.arrayContaining([
+            expect.objectContaining({
+              values: ['key1', 'key1'],
+            }),
+          ]),
+        }),
+      })
+    );
+  });
+
+  it('Should update row', async () => {
+    render(getComponent({ model }));
+
+    const row = screen.getByTestId(TestIds.valuesEditor.row);
+
+    expect(row).toBeInTheDocument();
+
+    const rowSelectors = within(row);
+
+    fireEvent.change(rowSelectors.getByTestId(TestIds.valueInput.fieldString), { target: { value: '123' } });
+
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        frame: expect.objectContaining({
+          fields: expect.arrayContaining([
+            expect.objectContaining({
+              values: ['123'],
+            }),
+          ]),
+        }),
+      })
+    );
   });
 });
diff --git a/src/components/ValuesEditor/ValuesEditor.tsx b/src/components/ValuesEditor/ValuesEditor.tsx
index d477783..0433c31 100644
--- a/src/components/ValuesEditor/ValuesEditor.tsx
+++ b/src/components/ValuesEditor/ValuesEditor.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { FieldType } from '@grafana/data';
 import { Button, InlineField, InlineFieldRow } from '@grafana/ui';
 import { TestIds } from '../../constants';
@@ -42,82 +42,126 @@ export const ValuesEditor = ({ model, query, onChange, onRunQuery }: Props) => {
   /**
    * Add Row
    */
-  const addRow = (index: number) => {
-    /**
-     * New Row
-     */
-    const newRow = Array.from({ length: model.fields.length }).map((field, i) => {
-      switch (model.fields[i].type) {
-        case FieldType.number:
-          return '0';
-        case FieldType.time:
-          return Date.now().valueOf().toString();
-        case FieldType.boolean:
-          return 'false';
-        default:
-          return '';
-      }
-    });
-
-    /**
-     * Add Row
-     */
-    model.rows.splice(index + 1, 0, newRow);
-
-    /**
-     * Change
-     */
-    onChange({ ...query, frame: convertToDataFrame(model) });
-    onRunQuery();
-  };
+  const addRow = useCallback(
+    (index: number) => {
+      /**
+       * New Row
+       */
+      const newRow = Array.from({ length: model.fields.length }).map((field, i) => {
+        switch (model.fields[i].type) {
+          case FieldType.number:
+            return '0';
+          case FieldType.time:
+            return Date.now().valueOf().toString();
+          case FieldType.boolean:
+            return 'false';
+          default:
+            return '';
+        }
+      });
+
+      /**
+       * Create another object to prevent mutations
+       */
+      const updatedModel = {
+        ...model,
+        rows: [...model.rows],
+      };
+
+      /**
+       * Add Row
+       */
+      updatedModel.rows.splice(index + 1, 0, newRow);
+
+      /**
+       * Change
+       */
+      onChange({ ...query, frame: convertToDataFrame(updatedModel) });
+      onRunQuery();
+    },
+    [model, onChange, onRunQuery, query]
+  );
 
   /**
    * Remove Row
    */
-  const removeRow = (index: number) => {
-    /**
-     * Remove
-     */
-    model.rows.splice(index, 1);
-
-    /**
-     * Change
-     */
-    onChange({ ...query, frame: convertToDataFrame(model) });
-    onRunQuery();
-  };
+  const removeRow = useCallback(
+    (index: number) => {
+      /**
+       * Create another object to prevent mutations
+       */
+      const updatedModel = {
+        ...model,
+        rows: [...model.rows],
+      };
+
+      /**
+       * Remove
+       */
+      updatedModel.rows.splice(index, 1);
+
+      /**
+       * Change
+       */
+      onChange({ ...query, frame: convertToDataFrame(updatedModel) });
+      onRunQuery();
+    },
+    [model, onChange, onRunQuery, query]
+  );
 
   /**
    * Duplicate Row
    */
-  const duplicateRow = (index: number) => {
-    /**
-     * Clone
-     */
-    model.rows.splice(index + 1, 0, JSON.parse(JSON.stringify(model.rows[index])));
-
-    /**
-     * Change
-     */
-    onChange({ ...query, frame: convertToDataFrame(model) });
-    onRunQuery();
-  };
+  const duplicateRow = useCallback(
+    (index: number) => {
+      /**
+       * Create another object to prevent mutations
+       */
+      const updatedModel = {
+        ...model,
+        rows: [...model.rows],
+      };
+
+      /**
+       * Clone
+       */
+      updatedModel.rows.splice(index + 1, 0, JSON.parse(JSON.stringify(updatedModel.rows[index])));
+
+      /**
+       * Change
+       */
+      onChange({ ...query, frame: convertToDataFrame(updatedModel) });
+      onRunQuery();
+    },
+    [model, onChange, onRunQuery, query]
+  );
 
   /**
    * Edit Value
    */
-  const editValue = (value: NullableString, rowIndex: number, fieldIndex: number) => {
-    /**
-     * Update
-     */
-    model.rows[rowIndex][fieldIndex] = value;
-
-    /**
-     * Change
-     */
-    onChange({ ...query, frame: convertToDataFrame(model) });
-    onRunQuery();
-  };
+  const editValue = useCallback(
+    (value: NullableString, rowIndex: number, fieldIndex: number) => {
+      /**
+       * Create another object to prevent mutations
+       */
+      const updatedModel = {
+        ...model,
+        rows: [...model.rows],
+      };
+
+      /**
+       * Update
+       */
+      updatedModel.rows[rowIndex][fieldIndex] = value;
+
+      /**
+       * Change
+       */
+      onChange({ ...query, frame: convertToDataFrame(updatedModel) });
+      onRunQuery();
+    },
+    [model, onChange, onRunQuery, query]
+  );
 
   /**
    * No rows found
@@ -126,12 +170,7 @@ export const ValuesEditor = ({ model, query, onChange, onRunQuery }: Props) => {
     return (
       <InlineFieldRow>
         <InlineField>
-          <Button
-            variant="primary"
-            onClick={() => addRow(0)}
-            icon="plus"
-            data-testid={TestIds.valuesEditor.buttonAddRow}
-          >
+          <Button variant="primary" onClick={() => addRow(0)} icon="plus" data-testid={TestIds.valuesEditor.buttonAdd}>
             Add a Row
           </Button>
         </InlineField>
@@ -145,7 +184,7 @@ export const ValuesEditor = ({ model, query, onChange, onRunQuery }: Props) => {
   return (
     <>
       {model.rows.map((row, i) => (
-        <InlineFieldRow key={i}>
+        <InlineFieldRow key={i} data-testid={TestIds.valuesEditor.row}>
           {row.map((value: NullableString, index: number) => (
             <ValueInput
               key={index}
@@ -157,15 +196,33 @@ export const ValuesEditor = ({ model, query, onChange, onRunQuery }: Props) => {
           ))}
 
           <InlineField>
-            <Button variant="secondary" title="Copy" onClick={() => duplicateRow(i)} icon="copy" />
+            <Button
+              variant="secondary"
+              title="Copy"
+              onClick={() => duplicateRow(i)}
+              icon="copy"
+              data-testid={TestIds.valuesEditor.buttonCopy}
+            />
           </InlineField>
 
           <InlineField>
-            <Button variant="secondary" title="Add" onClick={() => addRow(i)} icon="plus" />
+            <Button
+              variant="secondary"
+              title="Add"
+              onClick={() => addRow(i)}
+              icon="plus"
+              data-testid={TestIds.valuesEditor.buttonAdd}
+            />
           </InlineField>
 
           <InlineField>
-            <Button variant="destructive" title="Remove" onClick={() => removeRow(i)} icon="trash-alt" />
+            <Button
+              variant="destructive"
+              title="Remove"
+              onClick={() => removeRow(i)}
+              icon="trash-alt"
+              data-testid={TestIds.valuesEditor.buttonRemove}
+            />
           </InlineField>
         </InlineFieldRow>
       ))}
diff --git a/src/constants/tests.ts b/src/constants/tests.ts
index 2e77f82..9d66fd3 100644
--- a/src/constants/tests.ts
+++ b/src/constants/tests.ts
@@ -24,7 +24,10 @@ export const TestIds = {
     iconDisable: 'data-testid value-input icon-disable',
   },
   valuesEditor: {
-    buttonAddRow: 'data-testid values-editor button-add-row',
+    row: 'data-testid values-editor row',
+    buttonAdd: 'data-testid values-editor button-add',
+    buttonCopy: 'data-testid values-editor button-copy',
+    buttonRemove: 'data-testid values-editor button-remove',
   },
   customValuesEditor: {
     root: 'data-testid custom-values-editor',

From 69a05766ca2537433024a8fcdcfb24135bbcd013 Mon Sep 17 00:00:00 2001
From: Alex Simonok <sashasimonok@gmail.com>
Date: Thu, 6 Jul 2023 12:37:53 +0300
Subject: [PATCH 4/8] Add tests for frame utils

---
 src/utils/frame.test.ts | 43 +++++++++++++++++++++++++++++++++++++++++
 src/utils/frame.ts      |  6 +++---
 2 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/frame.test.ts

diff --git a/src/utils/frame.test.ts b/src/utils/frame.test.ts
new file mode 100644
index 0000000..3e1729d
--- /dev/null
+++ b/src/utils/frame.test.ts
@@ -0,0 +1,43 @@
+import { FieldType } from '@grafana/data';
+import { prepareModel } from './frame';
+
+describe('Frame Utils', () => {
+  describe('Prepare Model', () => {
+    it('Should take rows', () => {
+      const dataFrame = {
+        fields: [
+          {
+            name: 'key',
+            type: FieldType.string,
+            values: ['key1', 'key2'],
+          },
+          {
+            name: 'value',
+            type: FieldType.string,
+            values: ['value1', 'value2'],
+          },
+          {
+            name: 'country',
+            values: [],
+          },
+        ],
+      };
+      expect(prepareModel(dataFrame).rows).toEqual([
+        ['key1', 'value1', null],
+        ['key2', 'value2', null],
+      ]);
+    });
+
+    it('Should work if first field without values', () => {
+      const dataFrame = {
+        fields: [
+          {
+            name: 'key',
+            type: FieldType.string,
+          },
+        ],
+      };
+      expect(prepareModel(dataFrame).rows).toEqual([]);
+    });
+  });
+});
diff --git a/src/utils/frame.ts b/src/utils/frame.ts
index df444fa..f333c7e 100644
--- a/src/utils/frame.ts
+++ b/src/utils/frame.ts
@@ -45,9 +45,9 @@ export const prepareModel = (frame: DataFrameDTO): DataFrameModel => {
   if (frame.fields.length !== 0) {
     fields = frame.fields.map((field) => ({ name: field.name, type: field.type ?? FieldType.string }));
 
-    rows = Array.from({ length: frame.fields[0].values?.length ?? 0 }).map((row, i) =>
-      frame.fields.map((field: any) => (field.values as any[])[i]?.toString() ?? null)
-    );
+    rows = Array.from({ length: frame.fields[0].values?.length ?? 0 }).map((row, i) => {
+      return frame.fields.map((field: any) => (field.values as any[])[i]?.toString() ?? null);
+    });
   }
 
   return {

From de8c0e59f2932046c20fc83b0710b7e396b34d9d Mon Sep 17 00:00:00 2001
From: Alex Simonok <sashasimonok@gmail.com>
Date: Thu, 6 Jul 2023 12:47:47 +0300
Subject: [PATCH 5/8] Add tests for field utils

---
 src/utils/field.test.ts | 65 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 src/utils/field.test.ts

diff --git a/src/utils/field.test.ts b/src/utils/field.test.ts
new file mode 100644
index 0000000..5b9011b
--- /dev/null
+++ b/src/utils/field.test.ts
@@ -0,0 +1,65 @@
+import { FieldType } from '@grafana/data';
+import { verifyFieldValue } from './field';
+
+describe('Field Utils', () => {
+  describe('Vefiry Field Value', () => {
+    it('Null value should be valid', () => {
+      expect(verifyFieldValue(null, FieldType.string)).toEqual({
+        ok: true,
+        value: null,
+      });
+    });
+
+    it('Correct number value should be valid', () => {
+      expect(verifyFieldValue('0', FieldType.number)).toEqual({
+        ok: true,
+        value: 0,
+      });
+    });
+
+    it('Empty value should be invalid number', () => {
+      expect(verifyFieldValue('', FieldType.number)).toEqual({
+        ok: false,
+        error: 'Invalid number',
+        value: null,
+      });
+    });
+
+    it('Correct time value should be valid', () => {
+      expect(verifyFieldValue('0', FieldType.time)).toEqual({
+        ok: true,
+        value: 0,
+      });
+    });
+
+    it('Empty value should be invalid time', () => {
+      expect(verifyFieldValue('', FieldType.time)).toEqual({
+        ok: false,
+        error: 'Invalid timestamp',
+        value: null,
+      });
+    });
+
+    it('Correct boolean value should be valid', () => {
+      expect(verifyFieldValue('0', FieldType.boolean)).toEqual({
+        ok: true,
+        value: '0',
+      });
+    });
+
+    it('Empty value should be invalid boolean', () => {
+      expect(verifyFieldValue('', FieldType.boolean)).toEqual({
+        ok: false,
+        error: 'Invalid boolean',
+        value: null,
+      });
+    });
+
+    it('Any value should be valid with another types', () => {
+      expect(verifyFieldValue('', FieldType.geo)).toEqual({
+        ok: true,
+        value: '',
+      });
+    });
+  });
+});

From 26a53a8fb7c424b9cb134e506dddba75261fd41f Mon Sep 17 00:00:00 2001
From: Alex Simonok <sashasimonok@gmail.com>
Date: Thu, 6 Jul 2023 13:30:36 +0300
Subject: [PATCH 6/8] Remove unnecessary statements for DateTimePicker

---
 src/components/ValueInput/ValueInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ValueInput/ValueInput.tsx b/src/components/ValueInput/ValueInput.tsx
index 81d7ecb..429c664 100644
--- a/src/components/ValueInput/ValueInput.tsx
+++ b/src/components/ValueInput/ValueInput.tsx
@@ -111,9 +111,9 @@ export const ValueInput: React.FC<Props> = ({ onChange, value, type, label }) =>
    */
   if (type === FieldType.time && !disabled) {
     return (
-      <InlineField invalid={!valid} disabled={disabled} label={label} grow>
+      <InlineField invalid={!valid} label={label} grow>
         <DateTimePicker
-          date={disabled ? undefined : dateTime(Number(value))}
+          date={dateTime(Number(value))}
           onChange={(dateTime: DateTime) => {
             const timestamp = dateTime.valueOf().toString();
             setValid(verifyFieldValue(timestamp, type).ok);

From e9ba614cd3c85ee1f804a33fed8939167daa4d83 Mon Sep 17 00:00:00 2001
From: Mikhail <mikhail@volkovlabs.io>
Date: Thu, 6 Jul 2023 08:12:40 -0400
Subject: [PATCH 7/8] Update ESLint configuration

---
 .eslintrc                                         | 11 ++++++++++-
 src/components/FieldsEditor/FieldsEditor.test.tsx |  2 +-
 src/components/ValueInput/ValueInput.test.tsx     |  4 ++--
 src/components/ValueInput/ValueInput.tsx          |  2 +-
 src/module.ts                                     |  2 +-
 5 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 476a147..74230ff 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,3 +1,12 @@
 {
-  "extends": "./.config/.eslintrc"
+  "extends": "./.config/.eslintrc",
+  "rules": {
+    "sort-imports": [
+      "error",
+      {
+        "ignoreCase": true,
+        "ignoreDeclarationSort": true
+      }
+    ]
+  }
 }
diff --git a/src/components/FieldsEditor/FieldsEditor.test.tsx b/src/components/FieldsEditor/FieldsEditor.test.tsx
index b0316b2..fbdd8f8 100644
--- a/src/components/FieldsEditor/FieldsEditor.test.tsx
+++ b/src/components/FieldsEditor/FieldsEditor.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FieldType } from '@grafana/data';
-import { render, screen, within, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import { TestIds } from '../../constants';
 import { FieldsEditor } from './FieldsEditor';
 
diff --git a/src/components/ValueInput/ValueInput.test.tsx b/src/components/ValueInput/ValueInput.test.tsx
index dd1c303..aeb0949 100644
--- a/src/components/ValueInput/ValueInput.test.tsx
+++ b/src/components/ValueInput/ValueInput.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { FieldType, dateTime } from '@grafana/data';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { dateTime, FieldType } from '@grafana/data';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { TestIds, TextAreaLength } from '../../constants';
 import { ValueInput } from './ValueInput';
 
diff --git a/src/components/ValueInput/ValueInput.tsx b/src/components/ValueInput/ValueInput.tsx
index 429c664..81bd28f 100644
--- a/src/components/ValueInput/ValueInput.tsx
+++ b/src/components/ValueInput/ValueInput.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { DateTime, dateTime, FieldType } from '@grafana/data';
 import { DateTimePicker, Icon, InlineField, Input, TextArea, useStyles2 } from '@grafana/ui';
 import { TestIds, TextAreaLength } from '../../constants';
diff --git a/src/module.ts b/src/module.ts
index 07073d4..5778cb6 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -1,5 +1,5 @@
 import { DataSourcePlugin } from '@grafana/data';
-import { QueryEditor, ConfigEditor } from './components';
+import { ConfigEditor, QueryEditor } from './components';
 import { DataSource } from './datasource';
 import { StaticDataSourceOptions, StaticQuery } from './types';
 

From ee80857158c5dd68588082aac351e121caab025d Mon Sep 17 00:00:00 2001
From: Mikhail <mikhail@volkovlabs.io>
Date: Thu, 6 Jul 2023 12:48:33 -0400
Subject: [PATCH 8/8] Updates

---
 CHANGELOG.md           |  6 ++++++
 package.json           |  2 +-
 src/constants/tests.ts | 16 ++++++++--------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1797b17..2e8e308 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 3.1.0 (IN PROGRESS)
+
+### Features / Enhancements
+
+- Increase tests coverage (#47)
+
 ## 3.0.0 (2023-06-28)
 
 ### Breaking changes
diff --git a/package.json b/package.json
index 8fdd282..f557ac6 100644
--- a/package.json
+++ b/package.json
@@ -69,5 +69,5 @@
     "test:ci": "jest --maxWorkers 4 --coverage",
     "upgrade": "npm upgrade --save"
   },
-  "version": "3.0.0"
+  "version": "3.1.0"
 }
diff --git a/src/constants/tests.ts b/src/constants/tests.ts
index 9d66fd3..e3c1d3c 100644
--- a/src/constants/tests.ts
+++ b/src/constants/tests.ts
@@ -3,38 +3,38 @@
  */
 export const TestIds = {
   fieldsEditor: {
-    item: 'data-testid fields-editor item',
-    fieldName: 'data-testid fields-editor field-name',
-    fieldType: 'data-testid fields-editor field-type',
     buttonAdd: 'data-testid fields-editor button-add',
     buttonRemove: 'data-testid fields-editor button-remove',
+    fieldName: 'data-testid fields-editor field-name',
+    fieldType: 'data-testid fields-editor field-type',
+    item: 'data-testid fields-editor item',
   },
   queryEditor: {
+    customValuesEditor: 'data-testid query-editor custom-values-editor',
     fieldName: 'data-testid query-editor field-name',
     fieldPreferredVisualizationType: 'query-editor field-preferred-visualization-type',
     fieldValuesEditor: 'query-editor field-values-editor',
     valuesEditor: 'data-testid query-editor values-editor',
-    customValuesEditor: 'data-testid query-editor custom-values-editor',
   },
   valueInput: {
-    fieldString: 'data-testid value-input field-string',
-    fieldTextarea: 'data-testid value-input field-textarea',
     fieldDateTime: 'data-testid value-input field-date-time',
     fieldNumber: 'data-testid value-input field-number',
+    fieldString: 'data-testid value-input field-string',
+    fieldTextarea: 'data-testid value-input field-textarea',
     iconDisable: 'data-testid value-input icon-disable',
   },
   valuesEditor: {
-    row: 'data-testid values-editor row',
     buttonAdd: 'data-testid values-editor button-add',
     buttonCopy: 'data-testid values-editor button-copy',
     buttonRemove: 'data-testid values-editor button-remove',
+    row: 'data-testid values-editor row',
   },
   customValuesEditor: {
     root: 'data-testid custom-values-editor',
   },
   configEditor: {
-    root: 'data-testid config-editor',
     codeEditorEnabledContainer: 'data-testid config-editor code-editor-enabled-container',
     codeEditorEnabledOption: (name: string) => `data-testid config-editor code-editor-enabled-option-${name}`,
+    root: 'data-testid config-editor',
   },
 };