Initial tests created

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

@@ -1,7 +1,8 @@
 {
   "env": {
     "browser": true,
-    "es6": true
+    "es6": true,
+    "jest": true
   },
   "globals": {
     "Atomics": "readonly",

kafka-ui-react-app/package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@types/enzyme": "^3.10.8",
+    "@types/jest": "^26.0.20",
     "@types/react-datepicker": "^3.1.1",
     "@types/uuid": "^8.3.0",
     "bulma": "^0.8.2",
@@ -25,6 +27,7 @@
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
+    "ts-jest": "^26.4.4",
     "typesafe-actions": "^5.1.0",
     "use-debounce": "^3.4.3",
     "uuid": "^8.3.1"
@@ -65,11 +68,9 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.1.2",
     "@types/classnames": "^2.2.11",
-    "@types/jest": "^24.9.1",
     "@types/lodash": "^4.14.165",
     "@types/node": "^12.19.8",
     "@types/react": "^17.0.0",
@@ -80,7 +81,9 @@
     "@types/redux-thunk": "^2.1.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",
     "eslint": "^7.14.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-airbnb-typescript": "^12.0.0",

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

@@ -20,7 +20,7 @@ import * as _ from 'lodash';
 import { useDebouncedCallback } from 'use-debounce';
 import { Option } from 'react-multi-select-component/dist/lib/interfaces';
 
-interface Props {
+export interface Props {
   clusterName: ClusterName;
   topicName: TopicName;
   isFetched: boolean;
@@ -309,7 +309,6 @@ const Messages: React.FC<Props> = ({
               id="selectSeekType"
               name="selectSeekType"
               onChange={handleSeekTypeChange}
-              defaultValue={SeekType.OFFSET}
               value={selectedSeekType}
             >
               <option value={SeekType.OFFSET}>Offset</option>

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

@@ -0,0 +1,8 @@
+module.exports = {
+  roots: ['<rootDir>/src'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+};

kafka-ui-react-app/src/serviceWorker.ts

@@ -42,6 +42,7 @@ function registerValidSW(swUrl: string, config?: Config) {
               // At this point, the updated precached content has been fetched,
               // but the previous service worker will still serve the older
               // content until all client tabs are closed.
+              // eslint-disable-next-line no-console
               console.log(
                 'New content is available and will be used when all ' +
                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
@@ -55,6 +56,7 @@ function registerValidSW(swUrl: string, config?: Config) {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
+              // eslint-disable-next-line no-console
               console.log('Content is cached for offline use.');
 
               // Execute callback
@@ -67,6 +69,7 @@ function registerValidSW(swUrl: string, config?: Config) {
       };
     })
     .catch((error) => {
+      // eslint-disable-next-line no-console
       console.error('Error during service worker registration:', error);
     });
 }
@@ -95,6 +98,7 @@ function checkValidServiceWorker(swUrl: string, config?: Config) {
       }
     })
     .catch(() => {
+      // eslint-disable-next-line no-console
       console.log(
         'No internet connection found. App is running in offline mode.'
       );
@@ -123,6 +127,7 @@ export function register(config?: Config) {
         // Add some additional logging to localhost, pointing developers to the
         // service worker/PWA documentation.
         navigator.serviceWorker.ready.then(() => {
+          // eslint-disable-next-line no-console
           console.log(
             'This web app is being served cache-first by a service ' +
               'worker. To learn more, visit https://bit.ly/CRA-PWA'

kafka-ui-react-app/src/setupTests.js

@@ -0,0 +1,5 @@
+import { configure } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+
+configure({ adapter: new Adapter() });
+

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import JSONTree from 'react-json-tree';
+import Messages, {
+  Props,
+} from '../../../../components/Topics/Details/Messages/Messages';
+import PageLoader from '../../../../components/common/PageLoader/PageLoader';
+// import { messages } from './MessagesTx';
+
+describe('Messages', () => {
+  const createMessageComponent = (props: Partial<Props> = {}) =>
+    mount(
+      <Messages
+        clusterName="Test cluster"
+        topicName="Cluster topic"
+        isFetched
+        fetchTopicMessages={jest.fn()}
+        messages={[]}
+        partitions={[]}
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        {...props}
+      />
+    );
+
+  describe('Messages component initial', () => {
+    it('renders properly', () => {
+      expect(
+        createMessageComponent({ isFetched: false }).find(PageLoader)
+      ).toBeTruthy();
+    });
+  });
+
+  describe('Messages component renders MessagesTable', () => {
+    it('MessagesTable renders properly', () => {
+      const wrapper = createMessageComponent();
+      expect(wrapper.text()).toContain('No messages at selected topic');
+    });
+  });
+
+  // describe('Message content renders', () => {
+  //   it('Message content renders properly', () => {
+  //     expect(createMessageComponent({ messages }).find(JSONTree));
+  //   });
+  // });
+});

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

@@ -0,0 +1,9 @@
+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],
+};