Tests for Messages component

kafka-ui-react-app/package.json

@@ -45,7 +45,8 @@
     "lint:fix": "eslint --ext .tsx,.ts src/ --fix",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "tsc": "tsc"
+    "tsc": "tsc",
+    "test:coverage": "jest --coverage"
   },
   "husky": {
     "hooks": {

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

@@ -1,15 +1,20 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+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';
-// import { messages } from './MessagesTx';
 
 describe('Messages', () => {
+  beforeEach(() => {
+    jest.restoreAllMocks();
+  });
+
   const createMessageComponent = (props: Partial<Props> = {}) =>
-    mount(
+    shallow(
       <Messages
         clusterName="Test cluster"
         topicName="Cluster topic"
@@ -21,24 +26,88 @@ describe('Messages', () => {
       />
     );
 
-  describe('Messages component initial', () => {
+  it('Messages component should render PageLoader', () => {
-    it('renders properly', () => {
+    expect(
-      expect(
+      createMessageComponent({ isFetched: false }).find(PageLoader)
-        createMessageComponent({ isFetched: false }).find(PageLoader)
+    ).toBeTruthy();
-      ).toBeTruthy();
-    });
   });
 
-  describe('Messages component renders MessagesTable', () => {
+  describe('Messages component with messages', () => {
-    it('MessagesTable renders properly', () => {
+    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);
+    });
   });
 
-  // describe('Message content renders', () => {
+  it('input of Search field renders properly', () => {
-  //   it('Message content renders properly', () => {
+    const query = 20;
-  //     expect(createMessageComponent({ messages }).find(JSONTree));
+    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');
+    });
+  });
 });

kafka-ui-react-app/src/tests/Topics/Details/Messages/MessagesTx.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { TopicMessage } from 'generated-sources';
-
-export const messages: TopicMessage = {
-  partition: 1,
-  offset: 2,
-  timestamp: new Date('05-05-1994'),
-  content: [1, 2, 3],
-};