Loki: Add tests to cover NestedQueryList.tsx (#77331)

Loki: Add tests to cover NestedQueryList.tsx.
Covered cases: rendering list, shows explanations and call onChange when remove button click.

Co-authored-by: Ivana Huckova <ivana.huckova@gmail.com>
This commit is contained in:
Andrei Golubkov 2023-11-06 19:12:46 +04:00 committed by GitHub
parent 5458ea18e7
commit e6bdf0029d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -0,0 +1,89 @@
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { LokiDatasource } from '../../datasource';
import { createLokiDatasource } from '../../mocks';
import { LokiVisualQuery, LokiVisualQueryBinary } from '../types';
import { EXPLAIN_LABEL_FILTER_CONTENT } from './LokiQueryBuilderExplained';
import { NestedQueryList, Props as NestedQueryListProps } from './NestedQueryList';
const X_BUTTON_LABEL = 'Remove nested query';
function createMockProps(nestedQueriesCount = 1, showExplain = false): NestedQueryListProps {
const operators: string[] = ['+', '-', '*', '/'];
const nestedQueries: LokiVisualQueryBinary[] = [...Array(nestedQueriesCount).keys()].map((i) => ({
operator: operators[i % operators.length],
query: {
labels: [],
operations: [],
},
}));
const query: LokiVisualQuery = {
labels: [],
operations: [],
binaryQueries: nestedQueries,
};
const datasource: LokiDatasource = createLokiDatasource();
const props: NestedQueryListProps = {
query: query,
datasource: datasource,
showExplain: showExplain,
onChange: jest.fn(),
onRunQuery: jest.fn(),
};
return props;
}
describe('render nested queries', () => {
it.each([1, 3])('%i nested queries can be rendered', async (queriesCount) => {
const props = createMockProps(queriesCount, false);
render(<NestedQueryList {...props} />);
const nestedQueryCloseButtons = await screen.findAllByLabelText(X_BUTTON_LABEL);
expect(nestedQueryCloseButtons).toHaveLength(queriesCount);
});
it('shows explanations for all nested queries', async () => {
const props = createMockProps(3, true);
render(<NestedQueryList {...props} />);
const nestedQueryCloseButtons = await screen.findAllByText(EXPLAIN_LABEL_FILTER_CONTENT);
expect(nestedQueryCloseButtons).toHaveLength(3);
});
});
describe('events from nested queries', () => {
it('onChange is called when user removes one', async () => {
const props: NestedQueryListProps = createMockProps(3, false);
render(<NestedQueryList {...props} />);
const xButton: HTMLElement[] = await screen.findAllByLabelText(X_BUTTON_LABEL);
await userEvent.click(xButton[0]);
const removedQuery: LokiVisualQueryBinary[] = [props.query.binaryQueries![0]];
await waitFor(() => {
expect(props.onChange).toHaveBeenCalledWith({
...props.query,
binaryQueries: expect.not.arrayContaining(removedQuery),
});
});
});
it('onChange is called from sub-query', async () => {
const props = createMockProps(4, false);
const subQuery = { ...props.query.binaryQueries![3] };
props.query.binaryQueries![0].query.binaryQueries = [subQuery];
render(<NestedQueryList {...props} />);
const xButton: HTMLElement[] = await screen.findAllByLabelText(X_BUTTON_LABEL);
await userEvent.click(xButton[1]);
await waitFor(async () => {
expect(props.onChange).toHaveBeenCalledTimes(1);
});
});
});