Changes made

kafka-ui-react-app/src/tests/Topics/Details/Messages/Messages.spec.tsx

@@ -2,19 +2,17 @@ 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<Props> = {}) =>
-    shallow(
+  const setupWrapper = (props: Partial<Props> = {}) => (
     <Messages
       clusterName="Test cluster"
       topicName="Cluster topic"
@@ -26,22 +24,18 @@ describe('Messages', () => {
     />
   );
 
-  it('Messages component should render PageLoader', () => {
+  describe('Initial state', () => {
+    it('renders PageLoader', () => {
       expect(
-      createMessageComponent({ isFetched: false }).find(PageLoader)
+        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,11 +44,15 @@ describe('Messages', () => {
               content: [1, 2, 3],
             },
           ],
-        }).find(JSONTree)
-      ).toBeTruthy();
+        })
+      );
+      it('renders table', () => {
+        expect(messagesWrapper.find('TimeStamp')).toBeTruthy();
       });
-
-    it('JSON.parse should work correctly', () => {
+      it('renders JSONTree', () => {
+        expect(messagesWrapper.find(JSONTree)).toBeTruthy();
+      });
+      it('parses message content correctly', () => {
         const messages = [
           {
             partition: 1,
@@ -67,31 +65,21 @@ describe('Messages', () => {
         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('Without messages', () => {
+      it('renders string', () => {
+        const wrapper = shallow(setupWrapper());
+        expect(wrapper.text()).toContain('No messages at selected topic');
+      });
+    });
   });
 
-  describe('input of Offset field renders properly', () => {
-    const wrapper = createMessageComponent();
+  describe('Offset field', () => {
+    const wrapper = shallow(setupWrapper());
 
-    it('with defined value', () => {
+    describe('With defined offset value', () => {
+      it('shows offset value in input', () => {
         const offset = '10';
 
-      console.log(wrapper.find(DatePicker));
         wrapper
           .find('#searchOffset')
           .simulate('change', { target: { value: offset } });
@@ -100,7 +88,9 @@ describe('Messages', () => {
           offset
         );
       });
-    it('with invalid value', () => {
+    });
+    describe('With invalid offset value', () => {
+      it('shows 0 in input', () => {
         const offset = null;
 
         wrapper
@@ -111,3 +101,23 @@ describe('Messages', () => {
       });
     });
   });
+
+  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('#searchText')
+        .simulate('change', { target: { value: query } });
+
+      expect(wrapper.find('#searchText').first().props().value).toEqual(query);
+      expect(mockedUseDebouncedCallback).toHaveBeenCalledWith({ q: query });
+    });
+  });
+});