Loki: Add tests for LokiOptionFields.tsx (#56183)

* WIP: Added tests to LokiOptionFields.test.tsx

* chore(loki-option-fields): fix error with `userEvent`

Using `fireEvent` prevents the running condition.

* Add tests for LokiOptionFields.tsx

* chore: remove unwanted comments

* chore: update test names

Co-authored-by: Matias Chomicki <matyax@gmail.com>

public/app/plugins/datasource/loki/components/LokiOptionFields.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import React from 'react';
 
 import { LokiOptionFieldsProps, LokiOptionFields } from './LokiOptionFields';
@@ -18,17 +18,74 @@ const setup = () => {
     onRunQuery,
   };
 
-  return render(<LokiOptionFields {...props} />);
+  return props;
 };
 
-describe('LokiOptionFields', () => {
+describe('Query Type Field', () => {
-  it('should render step field', () => {
+  it('should render a query type field', () => {
-    setup();
+    const props = setup();
-    expect(screen.getByTestId('lineLimitField')).toBeInTheDocument();
+    render(<LokiOptionFields {...props} />);
+    expect(screen.getByTestId('queryTypeField')).toBeInTheDocument();
   });
 
-  it('should render query type field', () => {
+  it('should have a default value of "Range"', () => {
-    setup();
+    const props = setup();
-    expect(screen.getByTestId('queryTypeField')).toBeInTheDocument();
+    render(<LokiOptionFields {...props} />);
+    expect(screen.getByLabelText('Range')).toBeChecked();
+    expect(screen.getByLabelText('Instant')).not.toBeChecked();
+  });
+
+  it('should call onChange when value is changed', async () => {
+    const props = setup();
+    render(<LokiOptionFields {...props} />);
+    fireEvent.click(screen.getByLabelText('Instant')); // (`userEvent.click()` triggers an error, so switching here to `fireEvent`.)
+    await waitFor(() => expect(props.onChange).toHaveBeenCalledTimes(1));
+  });
+
+  it('renders as expected when the query type is instant', () => {
+    const props = setup();
+    render(<LokiOptionFields {...props} query={{ refId: '1', expr: 'query', instant: true }} />);
+    expect(screen.getByLabelText('Instant')).toBeChecked();
+    expect(screen.getByLabelText('Range')).not.toBeChecked();
+  });
+});
+
+describe('Line Limit Field', () => {
+  it('should render a line limit field', () => {
+    const props = setup();
+    render(<LokiOptionFields {...props} />);
+    expect(screen.getByRole('spinbutton')).toBeInTheDocument();
+  });
+
+  it('should have a default value of 1', () => {
+    const props = setup();
+    render(<LokiOptionFields {...props} />);
+    expect(screen.getByRole('spinbutton')).toHaveValue(1);
+  });
+
+  it('displays the expected line limit value', () => {
+    const props = setup();
+    render(<LokiOptionFields {...props} lineLimitValue="123" />);
+    expect(screen.getByRole('spinbutton')).toHaveValue(123);
+  });
+});
+
+describe('Resolution Field', () => {
+  it('should render the resolution field', () => {
+    const props = setup();
+    render(<LokiOptionFields {...props} />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('should have a default value of 1', async () => {
+    const props = setup();
+    render(<LokiOptionFields {...props} />);
+    expect(await screen.findByText('1/1')).toBeInTheDocument();
+  });
+
+  it('displays the expected resolution value', async () => {
+    const props = setup();
+    render(<LokiOptionFields {...props} resolution={5} />);
+    expect(await screen.findByText('1/5')).toBeInTheDocument();
   });
 });