[CHORE] Specs and Test env improvements (#198)

* [CHORE] Update dependencies

* [CHORE] Configure Test env. Add enzyme-to-json snapshot serializer

* [CHORE] Specs for Topic Messages component

* [CHORE] Mock Date-fns

* [CHORE] Refactor keys

* Run related tests on commit

* [CHORE] Stub date

Co-authored-by: Azat Mutigullin <[email protected]>

Author: workshur

kafka-ui-react-app/.eslintrc.json

@@ -15,7 +15,10 @@
     },
     "ecmaVersion": 2018,
     "sourceType": "module",
-    "project": ["./tsconfig.json", "./src/setupTests.ts"]
+    "project": [
+        "./tsconfig.json",
+         "./src/setupTests.ts"
+      ]
   },
   "plugins": ["@typescript-eslint", "prettier"],
   "extends": [
@@ -30,7 +33,8 @@
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "jsx-a11y/label-has-associated-control": "off",
     "import/prefer-default-export": "off",
-    "@typescript-eslint/no-explicit-any": "error"
+    "@typescript-eslint/no-explicit-any": "error",
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
   },
   "overrides": [
     {

kafka-ui-react-app/jest.config.js

@@ -3,8 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@types/react-datepicker": "^3.1.1",
-    "@types/uuid": "^8.3.0",
     "bulma": "^0.8.2",
     "bulma-switch": "^2.0.0",
     "classnames": "^2.2.6",
@@ -33,7 +31,7 @@
     "*.{js,ts,jsx,tsx}": [
       "eslint -c .eslintrc.json --fix",
       "git add",
-      "jest --bail --findRelatedTests"
+      "npm test -- --bail --findRelatedTests --watchAll=false"
     ]
   },
   "scripts": {
@@ -42,6 +40,7 @@
     "lint": "eslint --ext .tsx,.ts src/",
     "lint:fix": "eslint --ext .tsx,.ts src/ --fix",
     "test": "react-scripts test",
+    "test:CI": "CI=true npm test --watchAll=false",
     "eject": "react-scripts eject",
     "tsc": "tsc"
   },
@@ -66,6 +65,7 @@
     ]
   },
   "devDependencies": {
+    "@jest/types": "^26.6.2",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.1.2",
@@ -75,16 +75,19 @@
     "@types/lodash": "^4.14.165",
     "@types/node": "^12.19.8",
     "@types/react": "^17.0.0",
+    "@types/react-datepicker": "^3.1.1",
     "@types/react-dom": "^17.0.0",
     "@types/react-redux": "^7.1.11",
     "@types/react-router-dom": "^5.1.6",
     "@types/redux": "^3.6.0",
     "@types/redux-thunk": "^2.1.0",
+    "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.9.0",
     "@typescript-eslint/parser": "^4.9.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1",
     "dotenv": "^8.2.0",
     "enzyme": "^3.11.0",
+    "enzyme-to-json": "^3.6.1",
     "eslint": "^7.14.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-airbnb-typescript": "^12.0.0",
@@ -99,12 +102,16 @@
     "lint-staged": "^10.5.2",
     "node-sass": "^4.14.1",
     "prettier": "^2.2.1",
-    "react-scripts": "4.0.1",
+    "react-scripts": "4.0.2",
     "ts-jest": "^26.4.4",
+    "ts-node": "^9.1.1",
     "typescript": "~4.1.2"
   },
   "engines": {
     "node": ">=14.15.4"
   },
-  "proxy": "http://localhost:8080"
+  "proxy": "http://localhost:8080",
+  "jest": {
+    "snapshotSerializers": ["enzyme-to-json/serializer"]
+  }
 }

kafka-ui-react-app/package-lock.json

@@ -3,11 +3,11 @@ import { format } from 'date-fns';
 import JSONTree from 'react-json-tree';
 import { TopicMessage } from 'generated-sources';
 
-interface MessageItemProp {
+export interface MessageItemProp {
   partition: TopicMessage['partition'];
   offset: TopicMessage['offset'];
   timestamp: TopicMessage['timestamp'];
-  content: TopicMessage['content'];
+  content?: TopicMessage['content'];
 }
 
 const MessageItem: React.FC<MessageItemProp> = ({
@@ -16,13 +16,11 @@ const MessageItem: React.FC<MessageItemProp> = ({
   timestamp,
   content,
 }) => (
-  <tr key="{timestamp}">
-    <td style={{ width: 200 }}>
-      {timestamp ? format(timestamp, 'yyyy-MM-dd HH:mm:ss') : null}
-    </td>
+  <tr>
+    <td style={{ width: 200 }}>{format(timestamp, 'yyyy-MM-dd HH:mm:ss')}</td>
     <td style={{ width: 150 }}>{offset}</td>
     <td style={{ width: 100 }}>{partition}</td>
-    <td key="{content}" style={{ wordBreak: 'break-word' }}>
+    <td style={{ wordBreak: 'break-word' }}>
       {content && (
         <JSONTree
           data={content}

kafka-ui-react-app/package.json

@@ -1,4 +1,9 @@
+import 'react-datepicker/dist/react-datepicker.css';
 import React, { useCallback, useEffect, useRef } from 'react';
+import { groupBy, map, concat, maxBy } from 'lodash';
+import MultiSelect from 'react-multi-select-component';
+import { Option } from 'react-multi-select-component/dist/lib/interfaces';
+import { useDebouncedCallback } from 'use-debounce';
 import {
   ClusterName,
   TopicMessageQueryParams,
@@ -7,13 +12,6 @@ import {
 import { TopicMessage, Partition, SeekType } from 'generated-sources';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
-
-import MultiSelect from 'react-multi-select-component';
-
-import * as _ from 'lodash';
-import { useDebouncedCallback } from 'use-debounce';
-import { Option } from 'react-multi-select-component/dist/lib/interfaces';
 import MessagesTable from './MessagesTable';
 
 export interface Props {
@@ -81,17 +79,17 @@ const Messages: React.FC<Props> = ({
       offset: 0,
       partition: p.partition,
     }));
-    const messageUniqs: FilterProps[] = _.map(
-      _.groupBy(messages, 'partition'),
-      (v) => _.maxBy(v, 'offset')
+    const messageUniqs: FilterProps[] = map(
+      groupBy(messages, 'partition'),
+      (v) => maxBy(v, 'offset')
     ).map((v) => ({
       offset: v ? v.offset : 0,
       partition: v ? v.partition : 0,
     }));
 
-    return _.map(
-      _.groupBy(_.concat(partitionUniqs, messageUniqs), 'partition'),
-      (v) => _.maxBy(v, 'offset') as FilterProps
+    return map(
+      groupBy(concat(partitionUniqs, messageUniqs), 'partition'),
+      (v) => maxBy(v, 'offset') as FilterProps
     );
   }, [messages, partitions]);
 

kafka-ui-react-app/src/components/Topics/Details/Messages/MessageItem.tsx

@@ -1,10 +1,5 @@
 import { connect } from 'react-redux';
-import {
-  ClusterName,
-  RootState,
-  TopicMessageQueryParams,
-  TopicName,
-} from 'redux/interfaces';
+import { ClusterName, RootState, TopicName } from 'redux/interfaces';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 import { fetchTopicMessages } from 'redux/actions';
 import {
@@ -38,11 +33,7 @@ const mapStateToProps = (
 });
 
 const mapDispatchToProps = {
-  fetchTopicMessages: (
-    clusterName: ClusterName,
-    topicName: TopicName,
-    queryParams: Partial<TopicMessageQueryParams>
-  ) => fetchTopicMessages(clusterName, topicName, queryParams),
+  fetchTopicMessages,
 };
 
 export default withRouter(

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

@@ -3,7 +3,7 @@ import { TopicMessage } from 'generated-sources';
 import CustomParamButton from 'components/Topics/shared/Form/CustomParams/CustomParamButton';
 import MessageItem from './MessageItem';
 
-interface MessagesTableProp {
+export interface MessagesTableProp {
   messages: TopicMessage[];
   onNext(event: React.MouseEvent<HTMLButtonElement>): void;
 }
@@ -14,7 +14,7 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
   }
 
   return (
-    <div>
+    <>
       <table className="table is-striped is-fullwidth">
         <thead>
           <tr>
@@ -28,7 +28,7 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
           {messages.map(
             ({ partition, offset, timestamp, content }: TopicMessage) => (
               <MessageItem
-                key={timestamp.toString()}
+                key={`message-${timestamp.getTime()}`}
                 partition={partition}
                 offset={offset}
                 timestamp={timestamp}
@@ -48,7 +48,7 @@ const MessagesTable: React.FC<MessagesTableProp> = ({ messages, onNext }) => {
           />
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

kafka-ui-react-app/src/components/Topics/Details/Messages/MessagesContainer.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import MessageItem from 'components/Topics/Details/Messages/MessageItem';
+import { messages } from './fixtures';
+
+jest.mock('date-fns', () => ({
+  format: () => `mocked date`,
+}));
+
+describe('MessageItem', () => {
+  describe('when content is defined', () => {
+    it('renders table row with JSONTree', () => {
+      const wrapper = shallow(<MessageItem {...messages[0]} />);
+
+      expect(wrapper.find('tr').length).toEqual(1);
+      expect(wrapper.find('td').length).toEqual(4);
+      expect(wrapper.find('JSONTree').length).toEqual(1);
+    });
+
+    it('matches snapshot', () => {
+      expect(shallow(<MessageItem {...messages[0]} />)).toMatchSnapshot();
+    });
+  });
+
+  describe('when content is undefined', () => {
+    it('renders table row without JSONTree', () => {
+      const wrapper = shallow(<MessageItem {...messages[1]} />);
+
+      expect(wrapper.find('tr').length).toEqual(1);
+      expect(wrapper.find('td').length).toEqual(4);
+      expect(wrapper.find('JSONTree').length).toEqual(0);
+    });
+
+    it('matches snapshot', () => {
+      expect(shallow(<MessageItem {...messages[1]} />)).toMatchSnapshot();
+    });
+  });
+});