113 lines
3 KiB
TypeScript
113 lines
3 KiB
TypeScript
import React from 'react';
|
|
import { mount, shallow } from 'enzyme';
|
|
import JSONTree from 'react-json-tree';
|
|
import * as useDebounce from 'use-debounce';
|
|
import DatePicker from 'react-datepicker';
|
|
import Messages, {
|
|
Props,
|
|
} from '../../../../components/Topics/Details/Messages/Messages';
|
|
import PageLoader from '../../../../components/common/PageLoader/PageLoader';
|
|
|
|
describe('Messages', () => {
|
|
beforeEach(() => {
|
|
jest.restoreAllMocks();
|
|
});
|
|
|
|
const createMessageComponent = (props: Partial<Props> = {}) =>
|
|
shallow(
|
|
<Messages
|
|
clusterName="Test cluster"
|
|
topicName="Cluster topic"
|
|
isFetched
|
|
fetchTopicMessages={jest.fn()}
|
|
messages={[]}
|
|
partitions={[]}
|
|
{...props}
|
|
/>
|
|
);
|
|
|
|
it('Messages component should render PageLoader', () => {
|
|
expect(
|
|
createMessageComponent({ isFetched: false }).find(PageLoader)
|
|
).toBeTruthy();
|
|
});
|
|
|
|
describe('Messages component with messages', () => {
|
|
it('should render string', () => {
|
|
const wrapper = createMessageComponent();
|
|
|
|
expect(wrapper.text()).toContain('No messages at selected topic');
|
|
});
|
|
|
|
it('should render JSONTree', () => {
|
|
expect(
|
|
createMessageComponent({
|
|
messages: [
|
|
{
|
|
partition: 1,
|
|
offset: 2,
|
|
timestamp: new Date('05-05-1994'),
|
|
content: [1, 2, 3],
|
|
},
|
|
],
|
|
}).find(JSONTree)
|
|
).toBeTruthy();
|
|
});
|
|
|
|
it('JSON.parse should work correctly', () => {
|
|
const messages = [
|
|
{
|
|
partition: 1,
|
|
offset: 2,
|
|
timestamp: new Date('05-05-1994'),
|
|
content: [1, 2, 3],
|
|
},
|
|
];
|
|
const content = JSON.stringify(messages[0].content);
|
|
expect(JSON.parse(content)).toEqual(messages[0].content);
|
|
});
|
|
});
|
|
|
|
it('input of Search field renders properly', () => {
|
|
const query = 20;
|
|
const mockedUseDebouncedCallback = jest.fn();
|
|
jest
|
|
.spyOn(useDebounce, 'useDebouncedCallback')
|
|
.mockImplementationOnce(() => [mockedUseDebouncedCallback]);
|
|
|
|
const wrapper = createMessageComponent();
|
|
|
|
wrapper
|
|
.find('#searchText')
|
|
.simulate('change', { target: { value: query } });
|
|
|
|
expect(wrapper.find('#searchText').first().props().value).toEqual(query);
|
|
expect(mockedUseDebouncedCallback).toHaveBeenCalledWith({ q: query });
|
|
});
|
|
|
|
describe('input of Offset field renders properly', () => {
|
|
const wrapper = createMessageComponent();
|
|
|
|
it('with defined value', () => {
|
|
const offset = '10';
|
|
|
|
console.log(wrapper.find(DatePicker));
|
|
wrapper
|
|
.find('#searchOffset')
|
|
.simulate('change', { target: { value: offset } });
|
|
|
|
expect(wrapper.find('#searchOffset').first().props().value).toEqual(
|
|
offset
|
|
);
|
|
});
|
|
it('with invalid value', () => {
|
|
const offset = null;
|
|
|
|
wrapper
|
|
.find('#searchOffset')
|
|
.simulate('change', { target: { value: offset } });
|
|
|
|
expect(wrapper.find('#searchOffset').first().props().value).toBe('0');
|
|
});
|
|
});
|
|
});
|