Messages component covered with tests, integration to the git hooks added

kafka-ui-react-app/package.json

@@ -43,14 +43,15 @@
     "build": "react-scripts build",
     "lint": "eslint --ext .tsx,.ts src/",
     "lint:fix": "eslint --ext .tsx,.ts src/ --fix",
-    "test": "react-scripts test",
+    "test": "cross-env CI=true react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "tsc": "tsc",
     "test:coverage": "jest --coverage"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "npm run tsc --noEmit && lint-staged"
+      "pre-commit": "npm run tsc --noEmit && lint-staged && npm test",
+      "pre-push": "npm test"
     }
   },
   "eslintConfig": {

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

@@ -2,6 +2,7 @@ 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';
@@ -74,9 +75,25 @@ describe('Messages component', () => {
   });
 
   describe('Offset field', () => {
-    const wrapper = shallow(setupWrapper());
+    describe('Seek Type dependency', () => {
+      const wrapper = mount(setupWrapper());
+
+      it('renders DatePicker', () => {
+        wrapper
+          .find('[id="selectSeekType"]')
+          .simulate('change', { target: { value: 'TIMESTAMP' } });
+
+        expect(
+          wrapper.find('[id="selectSeekType"]').first().props().value
+        ).toEqual('TIMESTAMP');
+
+        expect(wrapper.find(DatePicker)).toBeTruthy();
+      });
+    });
 
     describe('With defined offset value', () => {
+      const wrapper = mount(setupWrapper());
+
       it('shows offset value in input', () => {
         const offset = '10';
 
@@ -90,6 +107,8 @@ describe('Messages component', () => {
       });
     });
     describe('With invalid offset value', () => {
+      const wrapper = mount(setupWrapper());
+
       it('shows 0 in input', () => {
         const offset = null;
 
@@ -120,4 +139,16 @@ describe('Messages component', () => {
       expect(mockedUseDebouncedCallback).toHaveBeenCalledWith({ q: query });
     });
   });
+
+  describe('Submit button', () => {
+    it('fetches topic messages', () => {
+      const mockedfetchTopicMessages = jest.fn();
+      const wrapper = mount(
+        setupWrapper({ fetchTopicMessages: mockedfetchTopicMessages })
+      );
+
+      wrapper.find('[type="submit"]').simulate('click');
+      expect(mockedfetchTopicMessages).toHaveBeenCalled();
+    });
+  });
 });