From fe1929ebe87f730d131be5258f7425e487b3c3a8 Mon Sep 17 00:00:00 2001 From: Guzel738 Date: Mon, 1 Feb 2021 14:11:09 +0300 Subject: [PATCH] Changes made --- kafka-ui-react-app/{src => }/jest.config.js | 0 .../Topics/Details/Messages/Messages.spec.tsx | 172 +++++++++--------- 2 files changed, 91 insertions(+), 81 deletions(-) rename kafka-ui-react-app/{src => }/jest.config.js (100%) diff --git a/kafka-ui-react-app/src/jest.config.js b/kafka-ui-react-app/jest.config.js similarity index 100% rename from kafka-ui-react-app/src/jest.config.js rename to kafka-ui-react-app/jest.config.js diff --git a/kafka-ui-react-app/src/tests/Topics/Details/Messages/Messages.spec.tsx b/kafka-ui-react-app/src/tests/Topics/Details/Messages/Messages.spec.tsx index 229a197383..3acb7b1557 100644 --- a/kafka-ui-react-app/src/tests/Topics/Details/Messages/Messages.spec.tsx +++ b/kafka-ui-react-app/src/tests/Topics/Details/Messages/Messages.spec.tsx @@ -2,46 +2,40 @@ 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', () => { +describe('Messages component', () => { beforeEach(() => { jest.restoreAllMocks(); }); - const createMessageComponent = (props: Partial = {}) => - shallow( - - ); + const setupWrapper = (props: Partial = {}) => ( + + ); - it('Messages component should render PageLoader', () => { - expect( - createMessageComponent({ isFetched: false }).find(PageLoader) - ).toBeTruthy(); + describe('Initial state', () => { + it('renders PageLoader', () => { + expect( + shallow(setupWrapper({ 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({ + describe('Messages table', () => { + describe('With messages', () => { + const messagesWrapper = shallow( + setupWrapper({ messages: [ { partition: 1, @@ -50,64 +44,80 @@ describe('Messages', () => { 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('renders table', () => { + expect(messagesWrapper.find('TimeStamp')).toBeTruthy(); + }); + it('renders JSONTree', () => { + expect(messagesWrapper.find(JSONTree)).toBeTruthy(); + }); + it('parses message content 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('with invalid value', () => { - const offset = null; + describe('Without messages', () => { + it('renders string', () => { + const wrapper = shallow(setupWrapper()); + expect(wrapper.text()).toContain('No messages at selected topic'); + }); + }); + }); + + describe('Offset field', () => { + const wrapper = shallow(setupWrapper()); + + describe('With defined offset value', () => { + it('shows offset value in input', () => { + const offset = '10'; + + wrapper + .find('#searchOffset') + .simulate('change', { target: { value: offset } }); + + expect(wrapper.find('#searchOffset').first().props().value).toEqual( + offset + ); + }); + }); + describe('With invalid offset value', () => { + it('shows 0 in input', () => { + const offset = null; + + wrapper + .find('#searchOffset') + .simulate('change', { target: { value: offset } }); + + expect(wrapper.find('#searchOffset').first().props().value).toBe('0'); + }); + }); + }); + + describe('Search field', () => { + it('renders input correctly', () => { + const query = 20; + const mockedUseDebouncedCallback = jest.fn(); + jest + .spyOn(useDebounce, 'useDebouncedCallback') + .mockImplementationOnce(() => [mockedUseDebouncedCallback]); + + const wrapper = shallow(setupWrapper()); wrapper - .find('#searchOffset') - .simulate('change', { target: { value: offset } }); + .find('#searchText') + .simulate('change', { target: { value: query } }); - expect(wrapper.find('#searchOffset').first().props().value).toBe('0'); + expect(wrapper.find('#searchText').first().props().value).toEqual(query); + expect(mockedUseDebouncedCallback).toHaveBeenCalledWith({ q: query }); }); }); });