diff --git a/public/app/plugins/datasource/loki/components/LokiOptionFields.test.tsx b/public/app/plugins/datasource/loki/components/LokiOptionFields.test.tsx
index 1219d19a5de..9eb32ab2098 100644
--- a/public/app/plugins/datasource/loki/components/LokiOptionFields.test.tsx
+++ b/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();
+ return props;
};
-describe('LokiOptionFields', () => {
- it('should render step field', () => {
- setup();
- expect(screen.getByTestId('lineLimitField')).toBeInTheDocument();
- });
-
- it('should render query type field', () => {
- setup();
+describe('Query Type Field', () => {
+ it('should render a query type field', () => {
+ const props = setup();
+ render();
expect(screen.getByTestId('queryTypeField')).toBeInTheDocument();
});
+
+ it('should have a default value of "Range"', () => {
+ const props = setup();
+ render();
+ expect(screen.getByLabelText('Range')).toBeChecked();
+ expect(screen.getByLabelText('Instant')).not.toBeChecked();
+ });
+
+ it('should call onChange when value is changed', async () => {
+ const props = setup();
+ render();
+ 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();
+ 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();
+ expect(screen.getByRole('spinbutton')).toBeInTheDocument();
+ });
+
+ it('should have a default value of 1', () => {
+ const props = setup();
+ render();
+ expect(screen.getByRole('spinbutton')).toHaveValue(1);
+ });
+
+ it('displays the expected line limit value', () => {
+ const props = setup();
+ render();
+ expect(screen.getByRole('spinbutton')).toHaveValue(123);
+ });
+});
+
+describe('Resolution Field', () => {
+ it('should render the resolution field', () => {
+ const props = setup();
+ render();
+ expect(screen.getByRole('combobox')).toBeInTheDocument();
+ });
+
+ it('should have a default value of 1', async () => {
+ const props = setup();
+ render();
+ expect(await screen.findByText('1/1')).toBeInTheDocument();
+ });
+
+ it('displays the expected resolution value', async () => {
+ const props = setup();
+ render();
+ expect(await screen.findByText('1/5')).toBeInTheDocument();
+ });
});